feat(mjml-social): add border attribute to mj-social-element

packages/mjml-social/README.md

@@ -41,6 +41,7 @@ Displays calls-to-action for various social networks with their associated logo.
 | attribute                  | accepts                 | description                                        | default value                          |
 | -------------------------- | ----------------------- | -------------------------------------------------- | -------------------------------------- |
 | align                      | `left` `right` `center` | align content                                      | `center`                               |
+| border                     | string                  | icon border, applied to each `mj-social-element`   |                                        |
 | border-radius              | `px` `%`                | border radius                                      | `3px`                                  |
 | color                      | CSS color formats       | text color                                         | `#333333`                              |
 | css-class                  | string                  | class name, added to the root HTML element created |                                        |
@@ -84,6 +85,7 @@ Note that default icons are transparent, which allows `background-color` to actu
 | align            | `left` `center` `right` | align content                                                                   | `center`                               |
 | alt              | string                  | image alt attribute                                                             | `''`                                   |
 | background-color | CSS color formats       | icon color                                                                      | Each social `name` has its own default |
+| border           | string                  | icon border (CSS shorthand), applied to the `<img>`                             | `0`                                    |
 | border-radius    | string                  | border radius                                                                   | `3px`                                  |
 | color            | CSS color formats       | text color                                                                      | `#000`                                 |
 | css-class        | string                  | class name, added to the root HTML element created                              |                                        |

packages/mjml-social/src/Social.js

@@ -6,6 +6,7 @@ export default class MjSocial extends BodyComponent {
 
   static allowedAttributes = {
     align: 'enum(left,right,center)',
+    border: 'string',
     'border-radius': 'string',
     'container-background-color': 'color',
     color: 'color',
@@ -60,6 +61,7 @@ export default class MjSocial extends BodyComponent {
     }
 
     return [
+      'border',
       'border-radius',
       'color',
       'font-family',

packages/mjml-social/src/SocialElement.js

@@ -102,6 +102,7 @@ export default class MjSocialElement extends BodyComponent {
     'icon-position': 'enum(left,right)',
     'background-color': 'color',
     color: 'color',
+    border: 'string',
     'border-radius': 'string',
     'font-family': 'string',
     'font-size': 'unit(px)',
@@ -135,6 +136,7 @@ export default class MjSocialElement extends BodyComponent {
     align: 'left',
     'icon-position': 'left',
     color: '#000',
+    border: '0',
     'border-radius': '3px',
     'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
     'font-size': '13px',
@@ -175,6 +177,7 @@ export default class MjSocialElement extends BodyComponent {
         width: iconSize,
       },
       img: {
+        border: this.getAttribute('border'),
         'border-radius': this.getAttribute('border-radius'),
         display: 'block',
       },

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

@@ -0,0 +1,109 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+const { extractStyle } = require('./utils')
+
+const render = async (template) => mjml(template, { minify: false })
+
+const collectImgBorders = (html) => {
+  const $ = load(html)
+  return $('img')
+    .map(function getBorder() {
+      const style = $(this).attr('style') || ''
+      return extractStyle(style, 'border')
+    })
+    .get()
+}
+
+describe('mj-social-element border attribute', function () {
+  it('renders the default border:0 on each social-element <img>', async function () {
+    const input = `
+      <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-social>
+                <mj-social-element name="facebook" href="https://mjml.io/" />
+                <mj-social-element name="twitter" href="https://mjml.io/" />
+              </mj-social>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+    `
+
+    const { html } = await render(input)
+    const borders = collectImgBorders(html)
+
+    chai.expect(borders).to.have.lengthOf(2)
+    borders.forEach((b) => chai.expect(b).to.equal('0'))
+  })
+
+  it('honors an explicit border on a single mj-social-element', async function () {
+    const input = `
+      <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-social>
+                <mj-social-element name="facebook" href="https://mjml.io/" border="2px solid red" />
+                <mj-social-element name="twitter" href="https://mjml.io/" />
+              </mj-social>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+    `
+
+    const { html } = await render(input)
+    const borders = collectImgBorders(html)
+
+    chai.expect(borders).to.deep.equal(['2px solid red', '0'])
+  })
+
+  it('cascades a border set on mj-social to every child element', async function () {
+    const input = `
+      <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-social border="1px solid #ccc">
+                <mj-social-element name="facebook" href="https://mjml.io/" />
+                <mj-social-element name="twitter" href="https://mjml.io/" />
+                <mj-social-element name="linkedin" href="https://mjml.io/" />
+              </mj-social>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+    `
+
+    const { html } = await render(input)
+    const borders = collectImgBorders(html)
+
+    chai.expect(borders).to.have.lengthOf(3)
+    borders.forEach((b) => chai.expect(b).to.equal('1px solid #ccc'))
+  })
+
+  it('lets the element-level border override a cascaded border from mj-social', async function () {
+    const input = `
+      <mjml>
+        <mj-body>
+          <mj-section>
+            <mj-column>
+              <mj-social border="1px solid #ccc">
+                <mj-social-element name="facebook" href="https://mjml.io/" border="3px dashed #000" />
+                <mj-social-element name="twitter" href="https://mjml.io/" />
+              </mj-social>
+            </mj-column>
+          </mj-section>
+        </mj-body>
+      </mjml>
+    `
+
+    const { html } = await render(input)
+    const borders = collectImgBorders(html)
+
+    chai.expect(borders).to.deep.equal(['3px dashed #000', '1px solid #ccc'])
+  })
+})