From 511740011d29a025fffd3f9b6b6ae4fe776aee36 Mon Sep 17 00:00:00 2001
From: James Tomasino <github@jamestomasino.com>
Date: Tue, 30 Jul 2024 09:07:43 +0000
Subject: [PATCH] feat: adds direction property to mj-social-element to reverse
 icon/text order (#2881)

---
 packages/mjml-social/README.md            |  1 +
 packages/mjml-social/src/SocialElement.js | 25 +++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/mjml-social/README.md b/packages/mjml-social/README.md
index 4cf0a64af..76c4db4a5 100644
--- 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
index e39f61a44..d49dae26e 100644
--- 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>
     `
   }