feat: adds direction property to mj-social-element to reverse icon/te…

…xt order (#2881)
mjmlio · Jul 30, 2024 · 5117400 · 5117400
1 parent 824cd66
commit 5117400
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/mjml-social/README.md b/packages/mjml-social/README.md
@@ -102,6 +102,7 @@ padding-left                | px          | left offset                      | n
 padding-right               | px          | right offset                       | n/a
 padding-top                 | px          | top offset                         | n/a
 icon-padding                | px          | padding around the icon       | 0px
+icon-position               | string      | left/right                    | right
 text-padding                | px          | padding around the text       | 4px 4px 4px 0
 sizes                       | media query & width | set icon width based on query | n/a
 src                         | url         | image source                  | Each social `name` has its own default

diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
@@ -99,6 +99,7 @@ export default class MjSocialElement extends BodyComponent {
 
   static allowedAttributes = {
     align: 'enum(left,center,right)',
+    'icon-position': 'enum(left,right)',
     'background-color': 'color',
     color: 'color',
     'border-radius': 'unit(px)',
@@ -132,6 +133,7 @@ export default class MjSocialElement extends BodyComponent {
   static defaultAttributes = {
     alt: '',
     align: 'left',
+    'icon-position': 'left',
     color: '#000',
     'border-radius': '3px',
     'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
@@ -232,13 +234,9 @@ export default class MjSocialElement extends BodyComponent {
     } = this.getSocialAttributes()
 
     const hasLink = !!this.getAttribute('href')
+    const iconPosition = this.getAttribute('icon-position')
 
-    return `
-      <tr
-        ${this.htmlAttributes({
-          class: this.getAttribute('css-class'),
-        })}
-      >
+    const makeIcon = () => `
         <td ${this.htmlAttributes({ style: 'td' })}>
           <table
             ${this.htmlAttributes({
@@ -279,6 +277,9 @@ export default class MjSocialElement extends BodyComponent {
             </tbody>
           </table>
         </td>
+      `
+
+    const makeContent = () => `
         ${
           this.getContent()
             ? `
@@ -303,6 +304,18 @@ export default class MjSocialElement extends BodyComponent {
           `
             : ''
         }
+      `
+
+    const renderLeft = () => `${makeIcon()} ${makeContent()}`
+    const renderRight = () => `${makeContent()} ${makeIcon()}`
+
+    return `
+      <tr
+        ${this.htmlAttributes({
+          class: this.getAttribute('css-class'),
+        })}
+      >
+        ${iconPosition === 'left' ? renderLeft() : renderRight() }
       </tr>
     `
   }