diff --git a/packages/mjml-social/README.md b/packages/mjml-social/README.md
index f2c4a4486..1696eee2a 100644
--- a/packages/mjml-social/README.md
+++ b/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 `![]()
` | `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 | |
diff --git a/packages/mjml-social/src/Social.js b/packages/mjml-social/src/Social.js
index a9401fbfc..e70955661 100644
--- a/packages/mjml-social/src/Social.js
+++ b/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',
diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
index 55b90644c..578e83f25 100644
--- a/packages/mjml-social/src/SocialElement.js
+++ b/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',
},
diff --git a/packages/mjml/test/social-border.test.js b/packages/mjml/test/social-border.test.js
new file mode 100644
index 000000000..58ce24ff5
--- /dev/null
+++ b/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 ![]()
', async function () {
+ const input = `
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+
+ 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 = `
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+
+ 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 = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+
+ 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 = `
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+
+ const { html } = await render(input)
+ const borders = collectImgBorders(html)
+
+ chai.expect(borders).to.deep.equal(['3px dashed #000', '1px solid #ccc'])
+ })
+})