refactor(mjml-hero): simplify getChildContext, drop dead width parsing

packages/mjml-hero/src/index.js

@@ -1,8 +1,6 @@
 import { BodyComponent } from 'mjml-core'
 import { flow, identity, join, filter } from 'lodash/fp'
 
-import widthParser from 'mjml-core/lib/helpers/widthParser'
-
 const makeBackgroundString = flow(filter(identity), join(' '))
 
 export default class MjHero extends BodyComponent {
@@ -46,29 +44,14 @@ export default class MjHero extends BodyComponent {
   }
 
   getChildContext() {
-    // Refactor -- removePaddingFor(width, ['padding', 'inner-padding'])
     const { containerWidth } = this.context
     const paddingSize =
       this.getShorthandAttrValue('padding', 'left') +
       this.getShorthandAttrValue('padding', 'right')
 
-    let currentContainerWidth = `${parseFloat(containerWidth)}px`
-
-    const { unit, parsedWidth } = widthParser(currentContainerWidth, {
-      parseFloatToInt: false,
-    })
-
-    if (unit === '%') {
-      currentContainerWidth = `${
-        (parseFloat(containerWidth) * parsedWidth) / 100 - paddingSize
-      }px`
-    } else {
-      currentContainerWidth = `${parsedWidth - paddingSize}px`
-    }
-
     return {
       ...this.context,
-      containerWidth: currentContainerWidth,
+      containerWidth: `${parseFloat(containerWidth) - paddingSize}px`,
     }
   }
 

packages/mjml/test/hero-padding-inner-width.test.js

@@ -0,0 +1,37 @@
+const chai = require('chai')
+const mjml = require('../lib')
+
+describe('mj-hero inner container width', function () {
+  const cases = [
+    { padding: '0', expected: 600 },
+    { padding: '0 20px', expected: 560 },
+    { padding: '0 10px 0 30px', expected: 560 },
+    { padding: '20px', expected: 560 },
+    { padding: '0 50px 0 50px', expected: 500 },
+  ]
+
+  cases.forEach(function ({ padding, expected }) {
+    it(`reduces the inner outlook table width by horizontal padding (padding="${padding}")`, async function () {
+      const input = `
+        <mjml>
+          <mj-body>
+            <mj-hero
+              mode="fixed-height"
+              height="200px"
+              background-width="600px"
+              background-height="200px"
+              padding="${padding}">
+              <mj-text>hero content</mj-text>
+            </mj-hero>
+          </mj-body>
+        </mjml>
+      `
+
+      const { html } = await mjml(input)
+
+      chai
+        .expect(html)
+        .to.include(`style="width:${expected}px;" width="${expected}"`)
+    })
+  })
+})