feat(kexternallink): reskin component [KHCP-8981] (#1989)

* feat(kexternallink): reskin component [KHCP-8981] * docs: migration doc [KHCP-8981]
Kong · Feb 8, 2024 · 9bd8235 · 9bd8235
1 parent 7fd8815
commit 9bd8235
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 34 deletions.
diff --git a/docs/components/external-link.md b/docs/components/external-link.md
@@ -1,12 +1,9 @@
 # External Link
 
-**KExternalLink** - a component to render an anchor tag (that opens in a new window) with an icon
+KExternalLink renders an anchor element (that opens a link in a new window) with an icon.
 
-<KCard>
-    <template v-slot:body>
-      <KExternalLink href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
-    </template>
-</KCard>
+
+<KExternalLink href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
 
 ```html
 <KExternalLink href="https://kongponents.konghq.com/">
@@ -16,23 +13,29 @@
 
 ## Props
 
-### href - required
+### href
 
 The URL that the hyperlink points to.
 
-::: tip NOTE
+:::tip NOTE
 
-Must be a valid URL
+Must be a valid URL.
 
-<h4><KIcon icon="check" size="22" color="green" style="vertical-align: sub;" class="horizontal-spacing" />Correct Usage</h4>
+<h4 class="example-heading">
+  <CheckIcon :size="KUI_ICON_SIZE_40" :color="KUI_COLOR_TEXT_SUCCESS" class="icon" />
+  Correct Usage
+</h4>
 
 ```html
 <KExternalLink href="https://kongponents.konghq.com/">
   Valid URL
 </KExternalLink>
 ```
 
-<h4><KIcon icon="disabled" size="22" color="red" style="vertical-align: sub;" class="horizontal-spacing" />Incorrect Usage</h4>
+<h4 class="example-heading">
+  <CloseIcon :size="KUI_ICON_SIZE_40" :color="KUI_COLOR_TEXT_DANGER" class="icon" />
+  Incorrect Usage
+</h4>
 
 ```html
 <KExternalLink href="https://kongponents">
@@ -46,11 +49,9 @@ Must be a valid URL
 
 If true, icon won't be rendered.
 
-<KCard>
-    <template v-slot:body>
-      <KExternalLink hide-icon href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
-    </template>
-</KCard>
+
+<KExternalLink hide-icon href="https://kongponents.konghq.com/">Kongponents</KExternalLink>
+
 
 ```html
 <KExternalLink hide-icon href="https://kongponents.konghq.com/">
@@ -60,10 +61,22 @@ If true, icon won't be rendered.
 
 ## Slots
 
-- `default` - link text
+### default
+
+Link text.
+
+<script setup lang="ts">
+import { CheckIcon, CloseIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_40, KUI_COLOR_TEXT_SUCCESS, KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
+</script>
+
+<style lang="scss" scoped>
+.example-heading {
+  display: inline-flex;
+  align-items: center;
 
-<style lang="scss">
-.horizontal-spacing {
-  margin-right: $kui-space-40;
+  .icon {
+    margin-right: $kui-space-40;
+  }
 }
 </style>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -218,6 +218,7 @@ Component has been renamed to `KDropdown`
 
 ### KExternalLink
 
+No breaking changes.
 
 ### KFileUpload
 

diff --git a/src/components/KExternalLink/KExternalLink.vue b/src/components/KExternalLink/KExternalLink.vue
@@ -5,23 +5,20 @@
     :href="href"
     rel="noopener"
     target="_blank"
-    @mouseleave="isMouseOver = false"
-    @mouseover="isMouseOver = true"
   >
     <slot />
-    <KIcon
+    <ExternalLinkIcon
       v-if="!hideIcon"
-      :color="iconColor"
-      icon="externalLink"
-      size="12"
+      :size="KUI_ICON_SIZE_40"
     />
   </a>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { KUI_COLOR_TEXT_PRIMARY, KUI_COLOR_TEXT_PRIMARY_STRONG } from '@kong/design-tokens'
+import { computed } from 'vue'
+import { KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import { isValidUrl } from '@/utilities/urls'
+import { ExternalLinkIcon } from '@kong/icons'
 
 const props = defineProps({
   href: {
@@ -36,26 +33,30 @@ const props = defineProps({
 })
 
 const isHrefValid = computed((): boolean => !!isValidUrl(props.href))
-
-const isMouseOver = ref(false)
-const iconColor = computed((): string => isMouseOver.value ? `var(--kui-color-text-primary-strong, ${KUI_COLOR_TEXT_PRIMARY_STRONG})` : `var(--kui-color-text-primary, ${KUI_COLOR_TEXT_PRIMARY})`)
 </script>
 
 <style lang="scss" scoped>
-
 .k-external-link {
   align-items: center;
   color: var(--kui-color-text-primary, $kui-color-text-primary);
   display: inline-flex;
+  font-size: inherit;
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+  gap: var(--kui-space-20, $kui-space-20);
+  list-style: inherit;
+  outline: none;
   text-decoration: none;
 
   &:hover {
     color: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong);
   }
 
-  .kong-icon {
-    margin-left: var(--kui-space-40, $kui-space-40);
+  &:focus-visible {
+    color: var(--kui-color-text-primary-stronger, $kui-color-text-primary-stronger);
+  }
+
+  &:active {
+    color: var(--kui-color-text-primary-strongest, $kui-color-text-primary-strongest);
   }
 }
 </style>