Merge pull request #97 from Realityloop/feature/4-navigation_card

feat(#4): add external link icon
Realityloop · Aug 7, 2023 · c53ddd0 · c53ddd0
2 parents fba3b0d + eeabf9e
commit c53ddd0
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 41 deletions.
diff --git 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>
diff --git 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>