fix: use text decoration underline

PrestaShopCorp · Oct 26, 2023 · 6e25367 · 6e25367
1 parent 60c2514
commit 6e25367
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 14 deletions.
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
@@ -3,16 +3,33 @@ import type { RouteLocationRaw } from 'vue-router'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Link from './link.vue'
 
+export enum PuikLinkTarget {
+  BLANK = '_blank',
+  SELF = '_self',
+  PARENT = '_parent',
+  TOP = '_top',
+}
+
 export const targetVariants = ['_blank', '_self', '_parent', '_top'] as const
-export type PuikTargetVariant = (typeof targetVariants)[number]
+export type PuikTargetString = (typeof targetVariants)[number]
+
+export enum PuikLinkSize {
+  SMALL = 'sm',
+  MEDIUM = 'md',
+  LARGE = 'lg',
+}
+
 export const linkSizes = ['sm', 'md', 'lg'] as const
-export type PuikLinkSize = (typeof linkSizes)[number]
+export type PuikLinkSizeString = (typeof linkSizes)[number]
 
 export const linkProps = buildProps({
   size: {
-    type: String as PropType<PuikLinkSize>,
+    type: [
+      String as PropType<PuikLinkSize>,
+      String as PropType<PuikLinkSizeString>,
+    ],
     required: false,
-    default: 'md',
+    default: PuikLinkSize.MEDIUM,
   },
   href: {
     type: String,
@@ -25,9 +42,12 @@ export const linkProps = buildProps({
     default: undefined,
   },
   target: {
-    type: String as PropType<PuikTargetVariant>,
+    type: [
+      String as PropType<PuikLinkTarget>,
+      String as PropType<PuikTargetString>,
+    ],
     required: false,
-    default: '_self',
+    default: PuikLinkTarget.SELF,
   },
   title: {
     type: String,

diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
@@ -7,17 +7,25 @@
     :class="['puik-link', `puik-link--${size}`]"
   >
     <slot></slot>
+    <div
+      v-if="props.target === PuikLinkTarget.BLANK"
+      class="puik-link__target__icon"
+    >
+      {{ TARGET_BLANK_ICON }}
+    </div>
   </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { linkProps } from './link'
+import { linkProps, PuikLinkTarget } from './link'
+
 defineOptions({
   name: 'PuikLink',
 })
 
 const props = defineProps(linkProps)
+const TARGET_BLANK_ICON = 'open_in_new'
 
 const componentType = computed(() => {
   if (props.to) {

diff --git a/packages/theme/src/link.scss b/packages/theme/src/link.scss
@@ -1,29 +1,43 @@
 @use './common/typography.scss';
 
 .puik-link {
-  @apply relative py-[0.5px] text-primary bg-gradient-to-bl from-primary-500 to-primary-500 bg-no-repeat bg-[length:100%_1px] bg-[left_bottom_1.25px] transition-all ease-in-out duration-150;
+  @apply cursor-pointer 
+    relative 
+    text-primary
+
+    underline 
+    decoration-auto
+    underline-offset-1
+    decoration-primary-500
+
+    transition-all
+    duration-150;
+
   &:hover,
   &:active {
-    @apply cursor-pointer from-primary-800 to-primary-800 bg-left-bottom transition-all ease-in-out duration-150;
+    @apply decoration-primary underline-offset-[3px];
   }
+
   &:focus-visible {
     @apply outline-none ring-2 ring-blue rounded-[4px] shadow-none;
   }
+
   &:visited {
     @apply text-purple-700;
   }
-  &[target='_blank'] {
-    &:after {
-      content: 'open_in_new';
-      @apply font-materialIcons ml-1.5 inline-block align-middle leading-[1em];
-    }
+
+  &__target__icon {
+    @apply font-materialIcons;
   }
+
   &--sm {
     @extend .puik-body-small;
   }
+
   &--md {
     @extend .puik-body-default;
   }
+
   &--lg {
     @extend .puik-body-large;
   }