Merge pull request #3004 from mjmlio/feature/MJML-52-mj-wrapper_add_spacing_between_sections

feature(mjml-wrapper): add gap between sections #2977

Author: totocap

packages/mjml-section/src/index.js

@@ -47,6 +47,7 @@ export default class MjSection extends BodyComponent {
     return {
       ...this.context,
       containerWidth: `${box}px`,
+      gap: this.getAttribute('gap'),
     }
   }
 
@@ -57,6 +58,8 @@ export default class MjSection extends BodyComponent {
 
     const hasBorderRadius = this.hasBorderRadius()
 
+    const isFirstSection = this.props.index === 0
+
     const background = this.getAttribute('background-url')
       ? {
           background: this.getBackground(),
@@ -102,6 +105,7 @@ export default class MjSection extends BodyComponent {
         'max-width': containerWidth,
         'border-radius': this.getAttribute('border-radius'),
         ...(hasBorderRadius && { overflow: 'hidden' }),
+        'margin-top': !isFirstSection ? this.context.gap : undefined,
       },
       innerDiv: {
         'line-height': '0',
@@ -195,12 +199,21 @@ export default class MjSection extends BodyComponent {
     return borderRadius !== '' && typeof borderRadius !== 'undefined'
   }
 
+  hasGap() {
+    const { gap } = this.context
+    return gap != null && gap !== ''
+  }
+
   renderBefore() {
     const { containerWidth } = this.context
     const bgcolorAttr = this.getAttribute('background-color')
       ? { bgcolor: this.getAttribute('background-color') }
       : {}
 
+    const isFirstSection = this.props.index === 0
+
+    const hasGap = this.hasGap()
+
     return `
       <!--[if mso | IE]>
       <table
@@ -211,9 +224,12 @@ export default class MjSection extends BodyComponent {
           cellspacing: '0',
           class: suffixCssClasses(this.getAttribute('css-class'), 'outlook'),
           role: 'presentation',
-          style: { width: `${containerWidth}` },
+          style: {
+            width: `${containerWidth}`,
+            'padding-top': !isFirstSection ? this.context.gap : undefined,
+          },
           width: parseInt(containerWidth, 10),
-          ...bgcolorAttr,
+          ...(!hasGap && { ...bgcolorAttr }),
         })}
       >
         <tr>

packages/mjml-wrapper/README.md

@@ -64,6 +64,7 @@ border-right        | string      | css border format              | n/a
 border-top          | string      | css border format              | n/a
 css-class           | string      | class name, added to the root HTML element created | n/a
 full-width          | string      | make the wrapper full-width    | n/a
+gap                 | px          | applies a vertical gap between child mj-sections   | n/a
 padding             | px          | supports up to 4 parameters    | 20px 0
 padding-bottom      | px          | section bottom offset          | n/a
 padding-left        | px          | section left offset            | n/a

packages/mjml-wrapper/src/index.js

@@ -4,6 +4,17 @@ import { suffixCssClasses } from 'mjml-core'
 export default class MjWrapper extends MjSection {
   static componentName = 'mj-wrapper'
 
+  static allowedAttributes = {
+    gap: 'unit(px)',
+  }
+
+  getChildContext() {
+    return {
+      ...this.context,
+      gap: this.getAttribute('gap'),
+    }
+  }
+
   renderWrappedChildren() {
     const { children } = this.props
     const { containerWidth } = this.context

packages/mjml/test/wrapper-gap.test.js

@@ -0,0 +1,55 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-wrapper gap', function () {
+  it('should render correct gap values in CSS style values on children mj-section', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-wrapper gap="20px" css-class="my-wrapper" background-color="#000"> 
+          <mj-section css-class="my-section" background-color="#f45e43" padding="10px">
+            <mj-column>
+              <mj-text>Section 1</mj-text>
+            </mj-column>
+          </mj-section>
+          <mj-section css-class="my-section" background-color="#ccc" padding="10px">
+            <mj-column>
+              <mj-text>Section 2</mj-text>
+            </mj-column>
+          </mj-section>
+          <mj-section css-class="my-section" background-color="#333" padding="10px">
+            <mj-column>
+              <mj-text color="#fff">Section 3</mj-text>
+            </mj-column>
+          </mj-section>
+        </mj-wrapper>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+
+    const $ = load(html)
+
+    // gap values should be correct
+    chai
+      .expect(
+        $('.my-section')
+          .map(function getAttr() {
+            const str = $(this).attr('style')
+            const substr = 'margin-top:'
+
+            if (str.includes(substr)) {
+              const start = $(this).attr('style').indexOf(substr) + 11
+              const end = $(this).attr('style').indexOf(';', start)
+              return $(this).attr('style').substring(start, end)
+            }
+            return undefined
+          })
+          .get(),
+        'Gap in CSS style values on mj-wrapper',
+      )
+      .to.eql(['20px', '20px'])
+  })
+})