Merge pull request #3002 from mjmlio/bugfix/MJML-41-mj-social_align_icon-height

fix(mjml-social): align / icon-height #3001

Author: totocap

packages/mjml-social/src/SocialElement.js

@@ -181,6 +181,7 @@ export default class MjSocialElement extends BodyComponent {
       tdText: {
         'vertical-align': 'middle',
         padding: this.getAttribute('text-padding'),
+        'text-align': this.getAttribute('align'),
       },
       text: {
         color: this.getAttribute('color'),
@@ -230,7 +231,6 @@ export default class MjSocialElement extends BodyComponent {
       sizes,
       href,
       'icon-size': iconSize,
-      'icon-height': iconHeight,
     } = this.getSocialAttributes()
 
     const hasLink = !!this.getAttribute('href')
@@ -263,7 +263,6 @@ export default class MjSocialElement extends BodyComponent {
                       ${this.htmlAttributes({
                         alt: this.getAttribute('alt'),
                         title: this.getAttribute('title'),
-                        height: parseInt(iconHeight || iconSize, 10),
                         src,
                         style: 'img',
                         width: parseInt(iconSize, 10),
@@ -315,7 +314,7 @@ export default class MjSocialElement extends BodyComponent {
           class: this.getAttribute('css-class'),
         })}
       >
-        ${iconPosition === 'left' ? renderLeft() : renderRight() }
+        ${iconPosition === 'left' ? renderLeft() : renderRight()}
       </tr>
     `
   }

packages/mjml/test/social-align.test.js

@@ -0,0 +1,41 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-social-element align', function () {
+  it('should render correct align in CSS style values on mj-social-element', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-section>
+          <mj-column>
+            <mj-social mode="vertical">
+              <mj-social-element name="facebook" href="https://mjml.io/" icon-position="right" align="right"css-class="my-social-element">
+                Facebook
+              </mj-social-element>
+            </mj-social>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+
+    const $ = load(html)
+
+    // align values should be correct
+    chai
+      .expect(
+        $('.my-social-element > td:first-child')
+          .map(function getAttr() {
+            const start = $(this).attr('style').indexOf('text-align:') + 11
+            const end = $(this).attr('style').indexOf(';', start)
+            return $(this).attr('style').substring(start, end)
+          })
+          .get(),
+        'align values on social elements',
+      )
+      .to.eql(['right'])
+  })
+})

packages/mjml/test/social-icon-height.test.js

@@ -0,0 +1,51 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-social icon-height', function () {
+  it('should render correct icon-height align in CSS style values on mj-social', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-section>
+          <mj-column css-class="my-social-element">
+            <mj-social icon-height="40px">
+              <mj-social-element name="facebook" href="https://mjml.io/" css-class="my-social-element">
+                Facebook
+              </mj-social-element>
+            </mj-social>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+
+    const $ = load(html)
+
+    // height values should be correct
+    chai
+      .expect(
+        $('.my-social-element > td > table > tbody > tr > td')
+          .map(function getAttr() {
+            const start = $(this).attr('style').indexOf('height:') + 7
+            const end = $(this).attr('style').indexOf(';', start)
+            return $(this).attr('style').substring(start, end)
+          })
+          .get(),
+        'icon-height values on social elements',
+      )
+      .to.eql(['40px'])
+
+    chai
+      .expect(
+        $('.my-social-element > td > table > tbody > tr > td img')
+          .map(function getAttr() {
+            return $(this).attr('height')
+          })
+          .get(),
+      )
+      .to.satisfy((arr) => arr.every((val) => !val))
+  })
+})