<commit_before>import MJMLElement from './decorators/MJMLElement'
import React, { Component } from 'react'
import _ from 'lodash'

/**
 * Sections are intended to be used as rows within your email. They will be used to structure the layout.
 */
@MJMLElement({
  tagName: 'mj-section',
  attributes: {
    'background-repeat': 'repeat',
    'padding-top': '20px',
    'padding-bottom': '20px',
    'background-size': 'auto'
  }
})
class Section extends Component {

  static baseStyles = {
    div: {
      margin: "0 auto",
      maxWidth: "600px"
    },
    table: {
      width: "100%",
      fontSize: "0"
    },
    td: {
      textAlign: 'center',
      verticalAlign: 'top'
    }
  };

  isFullWidth() {
    const { mjAttribute } = this.props

    return mjAttribute('full-width') == 'full-width'
  }

  getStyles() {
    const { mjAttribute } = this.props

    const background = mjAttribute('background-url') ? {
      background: `url(${mjAttribute('background-url')}) top center / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}`
    } : {
      backgroundColor: mjAttribute('background-color')
    }

    return _.merge({}, this.constructor.baseStyles, {
      div: this.isFullWidth() ? {} : _.cloneDeep(background),
      table: this.isFullWidth() ? {} : _.cloneDeep(background),
      tableFullwidth: this.isFullWidth() ? _.cloneDeep(background) : {},
      td: {
        fontSize: 0,
        verticalAlign: mjAttribute('vertical-align'),
        paddingTop: mjAttribute('padding-top'),
        paddingBottom: mjAttribute('padding-bottom'),
        paddingRight: mjAttribute('padding-right'),
        paddingLeft: mjAttribute('padding-left'),
        padding: mjAttribute('padding')
      }
    })
  }

  renderFullWidthSection() {
    const { mjAttribute } = this.props

    return (
      <table data-legacy-background={mjAttribute('background-url')}border="0" cellPadding="0" cellSpacing="0" style={_.merge({}, this.styles.tableFullwidth, this.styles.table)}>
        <tbody>
          <tr>
            <td>
              {this.renderSection()}
            </td>
          </tr>
        </tbody>
      </table>
    )
  }

  renderSection() {
    const { renderWrappedOutlookChildren, mjAttribute } = this.props
    const fullWidth = this.isFullWidth()

    return (
      <div style={this.styles.div}>
        <table className="outlook-background-fix-open" data-url={mjAttribute('background-url') || ''} data-legacy-background={fullWidth ? undefined : mjAttribute('background-url')} border="0" cellPadding="0" cellSpacing="0" data-legacy-align="center" style={this.styles.table}>
          <tbody>
            <tr>
              <td style={this.styles.td}>
                {renderWrappedOutlookChildren()}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }

  render() {
    this.styles = this.getStyles()

    return this.isFullWidth() ? this.renderFullWidthSection() : this.renderSection()
  }
}

export default Section
<commit_msg>Moved the padding attribute to the top of the stack in Section.js<commit_after>import MJMLElement from './decorators/MJMLElement'
import React, { Component } from 'react'
import _ from 'lodash'

/**
 * Sections are intended to be used as rows within your email. They will be used to structure the layout.
 */
@MJMLElement({
  tagName: 'mj-section',
  attributes: {
    'background-repeat': 'repeat',
    'padding-top': '20px',
    'padding-bottom': '20px',
    'background-size': 'auto'
  }
})
class Section extends Component {

  static baseStyles = {
    div: {
      margin: "0 auto",
      maxWidth: "600px"
    },
    table: {
      width: "100%",
      fontSize: "0"
    },
    td: {
      textAlign: 'center',
      verticalAlign: 'top'
    }
  };

  isFullWidth() {
    const { mjAttribute } = this.props

    return mjAttribute('full-width') == 'full-width'
  }

  getStyles() {
    const { mjAttribute } = this.props

    const background = mjAttribute('background-url') ? {
      background: `url(${mjAttribute('background-url')}) top center / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}`
    } : {
      backgroundColor: mjAttribute('background-color')
    }

    return _.merge({}, this.constructor.baseStyles, {
      div: this.isFullWidth() ? {} : _.cloneDeep(background),
      table: this.isFullWidth() ? {} : _.cloneDeep(background),
      tableFullwidth: this.isFullWidth() ? _.cloneDeep(background) : {},
      td: {
        fontSize: 0,
        verticalAlign: mjAttribute('vertical-align'),
		padding: mjAttribute('padding'),
        paddingTop: mjAttribute('padding-top'),
        paddingBottom: mjAttribute('padding-bottom'),
        paddingRight: mjAttribute('padding-right'),
        paddingLeft: mjAttribute('padding-left')
      }
    })
  }

  renderFullWidthSection() {
    const { mjAttribute } = this.props

    return (
      <table data-legacy-background={mjAttribute('background-url')}border="0" cellPadding="0" cellSpacing="0" style={_.merge({}, this.styles.tableFullwidth, this.styles.table)}>
        <tbody>
          <tr>
            <td>
              {this.renderSection()}
            </td>
          </tr>
        </tbody>
      </table>
    )
  }

  renderSection() {
    const { renderWrappedOutlookChildren, mjAttribute } = this.props
    const fullWidth = this.isFullWidth()

    return (
      <div style={this.styles.div}>
        <table className="outlook-background-fix-open" data-url={mjAttribute('background-url') || ''} data-legacy-background={fullWidth ? undefined : mjAttribute('background-url')} border="0" cellPadding="0" cellSpacing="0" data-legacy-align="center" style={this.styles.table}>
          <tbody>
            <tr>
              <td style={this.styles.td}>
                {renderWrappedOutlookChildren()}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    )
  }

  render() {
    this.styles = this.getStyles()

    return this.isFullWidth() ? this.renderFullWidthSection() : this.renderSection()
  }
}

export default Section

{'fraction_non_alphanumeric': 0.15345561742548314, 'fraction_numerical': 0.006223386832623649, 'mean_word_length': 2.6900302114803627, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6686991', 'n_tokens_mistral': 1888, 'n_tokens_neox': 1844, 'n_words': 363}