From 01843b75d0108df46df4a8bcdb66ba26134f4116 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Mon, 7 Aug 2023 12:51:53 +1000
Subject: [PATCH 1/2] feat(#53): add external and target props to link

---
 src/components/Link.vue | 76 ++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/Link.vue b/src/components/Link.vue
index 04e759b..39b6f9e 100644
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -1,15 +1,12 @@
 <template>
-  <!-- External link -->
-  <a
-    v-if="isExternal"
+  <component
+    :is="component"
     :class="classes"
-    :disabled="disabled"
-    :href="link"
-    :title="title"
+    v-bind="props"
   >
     <CTIcon
       v-if="icon && iconPosition === 'before'"
-      class="ct-button__icon"
+      class="ct-link__icon"
       :size="iconSize"
       :symbol="icon"
     />
@@ -21,40 +18,16 @@
 
     <CTIcon
       v-if="icon && iconPosition === 'after'"
-      class="ct-button__icon"
+      class="ct-link__icon"
       :size="iconSize"
       :symbol="icon"
     />
-  </a>
 
-  <!-- Internal link -->
-  <NuxtLink
-    v-else
-    :class="classes"
-    :disabled="disabled"
-    tag="a"
-    :title="title"
-    :to="link"
-  >
-    <CTIcon
-      v-if="icon && iconPosition === 'before'"
-      class="ct-button__icon"
-      :size="iconSize"
-      :symbol="icon"
-    />
-
-    <slot v-if="!text || $slots.default" />
-    <template v-else>
-      {{ text }}
-    </template>
-
-    <CTIcon
-      v-if="icon && iconPosition === 'after'"
-      class="ct-button__icon"
-      :size="iconSize"
-      :symbol="icon"
-    />
-  </NuxtLink>
+    <span
+      v-if="props.target === '_blank'"
+      class="ct-visually-hidden"
+    >(Opens in a new tab/window)</span>
+  </component>
 </template>
 
 <script>
@@ -68,6 +41,10 @@ export default {
       type: Boolean,
       default: undefined
     },
+    external: {
+      type: Boolean,
+      default: undefined
+    },
     icon: {
       type: String,
       default: undefined
@@ -84,6 +61,10 @@ export default {
       type: String,
       default: '#'
     },
+    target: {
+      type: String,
+      default: undefined
+    },
     text: {
       type: String,
       default: 'link'
@@ -95,12 +76,29 @@ export default {
   },
 
   computed: {
-    classes: ({ disabled, themeClass }) => ({
+    classes: ({ disabled, isExternal, themeClass }) => ({
       'ct-link': true,
       'ct-link--disabled': disabled,
+      'ct-link--external': isExternal,
       [themeClass]: true
     }),
-    isExternal: ({ link }) => !(link || '').startsWith('/')
+    component: ({ isExternal }) => isExternal ? 'a': 'NuxtLink',
+    isExternal: ({ external, link }) => external || !['/', '#'].includes(link[0]),
+    props: ({ component, disabled, link, target, title }) => ({
+      disabled,
+      title,
+      ...{
+        a: {
+          href: link,
+          target: target || '_blank'
+        },
+        NuxtLink: {
+          tag: 'a',
+          target,
+          to: link
+        }
+      }[component]
+    })
   }
 }
 </script>

From eeabf9e562cfbbbd2492ed151cbe2c0e01ce38d8 Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Mon, 7 Aug 2023 12:52:24 +1000
Subject: [PATCH 2/2] feat(#4): add external link icon

---
 src/components/NavigationCard.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/NavigationCard.vue b/src/components/NavigationCard.vue
index a5211bc..610695e 100644
--- a/src/components/NavigationCard.vue
+++ b/src/components/NavigationCard.vue
@@ -40,10 +40,11 @@
       >
         <CTLink
           class="ct-navigation-card__title__link"
+          :external="linkExternal"
           :link="link"
           :text="title"
           :theme="theme"
-          icon="right-arrow-2"
+          :icon="linkIcon"
         />
       </CTHeading>
 
@@ -90,6 +91,10 @@ export default {
       type: String,
       default: '#'
     },
+    linkExternal: {
+      type: Boolean,
+      default: undefined,
+    },
     summary: {
       type: String,
       default: undefined,
@@ -101,7 +106,8 @@ export default {
   },
 
   computed: {
-    hasImage: ({ $scopedSlots, imageSrc }) => imageSrc || $scopedSlots.image
+    hasImage: ({ $scopedSlots, imageSrc }) => imageSrc || $scopedSlots.image,
+    linkIcon: ({ linkExternal }) => linkExternal ? 'upper-right-arrow' : 'right-arrow-2',
   }
 }
 </script>