From 989487f7d01958c14a4836ba6eb4b859a282346a Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Thu, 4 Jul 2024 13:30:57 +0000
Subject: [PATCH 1/4] adds direction property to mj-social-element to reverse
 icon/text order

---
 packages/mjml-social/src/SocialElement.js | 27 ++++++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
index e39f61a44..6952ccdf0 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)',
+    direction: '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',
+    direction: 'left',
     color: '#000',
     'border-radius': '3px',
     'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
@@ -232,13 +234,10 @@ export default class MjSocialElement extends BodyComponent {
     } = this.getSocialAttributes()
 
     const hasLink = !!this.getAttribute('href')
+    const direction = this.getAttribute('direction')
 
-    return `
-      <tr
-        ${this.htmlAttributes({
-          class: this.getAttribute('css-class'),
-        })}
-      >
+    const makeIcon = () => {
+      return `
         <td ${this.htmlAttributes({ style: 'td' })}>
           <table
             ${this.htmlAttributes({
@@ -279,6 +278,10 @@ export default class MjSocialElement extends BodyComponent {
             </tbody>
           </table>
         </td>
+      `
+    }
+
+    const makeContent = () => `
         ${
           this.getContent()
             ? `
@@ -303,6 +306,18 @@ export default class MjSocialElement extends BodyComponent {
           `
             : ''
         }
+      `
+
+    const renderLeft = () => `${makeIcon()} ${makeContent()}`
+    const renderRight = () => `${makeContent()} ${makeIcon()}`
+
+    return `
+      <tr
+        ${this.htmlAttributes({
+          class: this.getAttribute('css-class'),
+        })}
+      >
+        ${direction === 'left' ? renderLeft() : renderRight() }
       </tr>
     `
   }

From 726ec357d772b44195142f613782267d0cc9a9a8 Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Thu, 4 Jul 2024 13:39:38 +0000
Subject: [PATCH 2/4] removes block statement from arrow body, returns template
 literal directly

---
 packages/mjml-social/src/SocialElement.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
index 6952ccdf0..d1c9fa5b9 100644
--- a/packages/mjml-social/src/SocialElement.js
+++ b/packages/mjml-social/src/SocialElement.js
@@ -236,8 +236,7 @@ export default class MjSocialElement extends BodyComponent {
     const hasLink = !!this.getAttribute('href')
     const direction = this.getAttribute('direction')
 
-    const makeIcon = () => {
-      return `
+    const makeIcon = () => `
         <td ${this.htmlAttributes({ style: 'td' })}>
           <table
             ${this.htmlAttributes({
@@ -279,7 +278,6 @@ export default class MjSocialElement extends BodyComponent {
           </table>
         </td>
       `
-    }
 
     const makeContent = () => `
         ${

From c5fc972128290d7c91e3755f3cc586cf09c9b1d7 Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Thu, 4 Jul 2024 13:48:47 +0000
Subject: [PATCH 3/4] changes new property name to icon-position

---
 packages/mjml-social/src/SocialElement.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mjml-social/src/SocialElement.js b/packages/mjml-social/src/SocialElement.js
index d1c9fa5b9..d49dae26e 100644
--- a/packages/mjml-social/src/SocialElement.js
+++ b/packages/mjml-social/src/SocialElement.js
@@ -99,7 +99,7 @@ export default class MjSocialElement extends BodyComponent {
 
   static allowedAttributes = {
     align: 'enum(left,center,right)',
-    direction: 'enum(left,right)',
+    'icon-position': 'enum(left,right)',
     'background-color': 'color',
     color: 'color',
     'border-radius': 'unit(px)',
@@ -133,7 +133,7 @@ export default class MjSocialElement extends BodyComponent {
   static defaultAttributes = {
     alt: '',
     align: 'left',
-    direction: 'left',
+    'icon-position': 'left',
     color: '#000',
     'border-radius': '3px',
     'font-family': 'Ubuntu, Helvetica, Arial, sans-serif',
@@ -234,7 +234,7 @@ export default class MjSocialElement extends BodyComponent {
     } = this.getSocialAttributes()
 
     const hasLink = !!this.getAttribute('href')
-    const direction = this.getAttribute('direction')
+    const iconPosition = this.getAttribute('icon-position')
 
     const makeIcon = () => `
         <td ${this.htmlAttributes({ style: 'td' })}>
@@ -315,7 +315,7 @@ export default class MjSocialElement extends BodyComponent {
           class: this.getAttribute('css-class'),
         })}
       >
-        ${direction === 'left' ? renderLeft() : renderRight() }
+        ${iconPosition === 'left' ? renderLeft() : renderRight() }
       </tr>
     `
   }

From b82c970e81b9c9cf9464a19b0039d4fc1ad51c3c Mon Sep 17 00:00:00 2001
From: James Tomasino <james@tomasino.org>
Date: Thu, 4 Jul 2024 13:55:56 +0000
Subject: [PATCH 4/4] adds icon-position property to readme for
 mj-social-element

---
 packages/mjml-social/README.md | 1 +
 1 file changed, 1 insertion(+)

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