From 9d415578d979cad4d417c661a939c0d66f87e30a Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Tue, 5 Jan 2021 09:59:29 -0800
Subject: [PATCH 1/5] Corrects LTR-lang margin with icon

---
 lib/buttons-and-links/KExternalLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index 967c8687b..5fadca879 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -79,7 +79,7 @@
               styles['marginLeft'] = '8px';
             }
           } else {
-            styles['marginLeft'] = '8px';
+            styles['marginRight'] = '8px';
           }
         }
         return { ...styles };

From e6823a06ba176c6904d00f335c1bbc6ce41e4539 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Tue, 5 Jan 2021 13:20:09 -0800
Subject: [PATCH 2/5] Fixes icon directionality for LTR-lang URL in RTL-lang
 instance

---
 lib/buttons-and-links/KExternalLink.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index 5fadca879..07576fab0 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -17,7 +17,7 @@
       <KIcon
         v-if="openInNewTab"
         icon="openNewTab"
-        style="top: 4px;"
+        :style="iconStyle"
         :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
       />
     </slot>
@@ -72,7 +72,6 @@
         let styles = {};
         if (this.openInNewTab) {
           if (this.isRtl) {
-            // If RTL-language, but English link, displays correct margins
             styles['marginRight'] = '8px';
             if (this.text !== this.href) {
               styles['marginRight'] = '0px';
@@ -84,7 +83,20 @@
         }
         return { ...styles };
       },
+      /**
+       * Changes icon direction according to language of text of URL
+       */
+      iconStyle() {
+        let styles = { 'top': '4px' };
+        if (this.text === this.href) {
+          styles['transform'] = 'scaleX(1)';
+        }
+        return { ...styles };
+      }
     },
+    methods: {
+
+    }
   };
 
 </script>

From 958054e20d631f5a0f0c01b9e96fee60364f63de Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Tue, 5 Jan 2021 13:21:58 -0800
Subject: [PATCH 3/5] Fixes linting

---
 lib/buttons-and-links/KExternalLink.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index 07576fab0..85c74827b 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -87,16 +87,14 @@
        * Changes icon direction according to language of text of URL
        */
       iconStyle() {
-        let styles = { 'top': '4px' };
+        let styles = { top: '4px' };
         if (this.text === this.href) {
           styles['transform'] = 'scaleX(1)';
         }
         return { ...styles };
-      }
+      },
     },
-    methods: {
-
-    }
+    methods: {},
   };
 
 </script>

From 607fce9154f1e825260b0b9ba7be256c71e1c9a5 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Tue, 5 Jan 2021 21:03:17 -0800
Subject: [PATCH 4/5] Remove changing icon direction computed property

---
 lib/buttons-and-links/KExternalLink.vue | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index 85c74827b..fd85bf8dd 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -17,7 +17,7 @@
       <KIcon
         v-if="openInNewTab"
         icon="openNewTab"
-        :style="iconStyle"
+        style="top: 4px;"
         :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
       />
     </slot>
@@ -83,16 +83,6 @@
         }
         return { ...styles };
       },
-      /**
-       * Changes icon direction according to language of text of URL
-       */
-      iconStyle() {
-        let styles = { top: '4px' };
-        if (this.text === this.href) {
-          styles['transform'] = 'scaleX(1)';
-        }
-        return { ...styles };
-      },
     },
     methods: {},
   };

From ff2e6f6f8057236a437e64d1c190b14383d9c6d5 Mon Sep 17 00:00:00 2001
From: sairina <sairina.merinotsui@gmail.com>
Date: Wed, 3 Feb 2021 21:39:31 -0800
Subject: [PATCH 5/5] Add comments and restores functionality for icon

---
 lib/buttons-and-links/KExternalLink.vue | 47 ++++++++++++++++++++++---
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/lib/buttons-and-links/KExternalLink.vue b/lib/buttons-and-links/KExternalLink.vue
index fd85bf8dd..9ce16b29f 100644
--- a/lib/buttons-and-links/KExternalLink.vue
+++ b/lib/buttons-and-links/KExternalLink.vue
@@ -12,7 +12,23 @@
     @mouseenter="hovering = true"
     @mouseleave="hovering = false"
   >
+    <slot name="icon">
+      <KIcon
+        v-if="icon"
+        :icon="icon"
+        style="top: 4px;"
+        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+      />
+    </slot>
     <span class="link-text" :style="spanStyle">{{ text }}</span>
+    <slot name="iconAfter">
+      <KIcon
+        v-if="iconAfter"
+        :icon="iconAfter"
+        style="top: 4px;"
+        :color="hovering ? $themeTokens.primaryDark : $themeTokens.primary"
+      />
+    </slot>
     <slot name="openInNewTab">
       <KIcon
         v-if="openInNewTab"
@@ -58,6 +74,20 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * If provided, shows a KIcon in front of the text
+       */
+      icon: {
+        type: String,
+        required: false,
+      },
+      /**
+       * If provided, shows a KIcon after the text
+       */
+      iconAfter: {
+        type: String,
+        required: false,
+      },
     },
     data() {
       return {
@@ -66,25 +96,34 @@
     },
     computed: {
       /**
-       * If link opens in new tab, add 8px margin between the icon and the text
+       * If link opens in new tab or if icon is provided, add 8px margin between the icon and the text
        */
       spanStyle() {
         let styles = {};
-        if (this.openInNewTab) {
+        if (this.openInNewTab || this.icon) {
           if (this.isRtl) {
+            // If RTL-language, but English link, displays correct margins
             styles['marginRight'] = '8px';
+            // Checks to see if link for new tab is in same dir as page lang
             if (this.text !== this.href) {
               styles['marginRight'] = '0px';
               styles['marginLeft'] = '8px';
             }
           } else {
-            styles['marginRight'] = '8px';
+            if (this.text === this.href) {
+              styles['marginRight'] = '8px';
+            } else {
+              styles['marginLeft'] = '8px';
+            }
           }
         }
+
+        if (this.iconAfter) {
+          styles['marginRight'] = '8px';
+        }
         return { ...styles };
       },
     },
-    methods: {},
   };
 
 </script>