Merge pull request #2992 from mjmlio/bugfix/MJML-37-mj-navbar_ico-padding-x

fix(mjml-navbar): ico-padding-x not working #2991

Author: totocap

packages/mjml-navbar/src/Navbar.js

@@ -81,11 +81,11 @@ export default class MjNavbar extends BodyComponent {
         'text-transform': this.getAttribute('ico-text-transform'),
         'text-decoration': this.getAttribute('ico-text-decoration'),
         'line-height': this.getAttribute('ico-line-height'),
+        padding: this.getAttribute('ico-padding'),
         'padding-top': this.getAttribute('ico-padding-top'),
         'padding-right': this.getAttribute('ico-padding-right'),
         'padding-bottom': this.getAttribute('ico-padding-bottom'),
         'padding-left': this.getAttribute('ico-padding-left'),
-        padding: this.getAttribute('ico-padding'),
       },
       trigger: {
         display: 'none',

packages/mjml/test/navbar-ico-padding.test.js

@@ -0,0 +1,61 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-navbar ico-padding-X', function () {
+  it('should render correct padding in CSS style values on navbar hamburger icon', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-section>
+          <mj-column>
+            <mj-navbar hamburger="hamburger" ico-padding="20px" ico-padding-bottom="20px" ico-padding-left="30px" ico-padding-right="40px"  ico-padding-top="50px" >
+                <mj-navbar-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-navbar-link>
+                <mj-navbar-link href="/try-it-live" color="#ffffff">Try it live</mj-navbar-link>
+            </mj-navbar>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+    const $ = load(html)
+
+    function extractPadding(style, prop) {
+      const start = style.indexOf(`${prop}:`) + prop.length + 1
+      const end = style.indexOf(';', start)
+      return style.substring(start, end).trim()
+    }
+
+    const paddings = [
+      'padding-bottom',
+      'padding-left',
+      'padding-right',
+      'padding-top',
+    ]
+
+    const results = paddings.map((padding) =>
+      $('.mj-menu-label')
+        .map(function () {
+          const style = $(this).attr('style')
+          return extractPadding(style, padding)
+        })
+        .get(),
+    )
+
+    // Padding should be ['20px', '30px', '40px', '50px']
+    const expected = {
+      'padding-bottom': ['20px'],
+      'padding-left': ['30px'],
+      'padding-right': ['40px'],
+      'padding-top': ['50px'],
+    }
+
+    paddings.forEach((padding, idx) => {
+      chai
+        .expect(results[idx], `${padding} in CSS style values on navbar icon`)
+        .to.eql(expected[padding])
+    })
+  })
+})