Merge pull request #233 from PrestaShopCorp/bug/puik-link-no-underlin…

…e-on-multi-line-and-full-width-not-correct fix: #232 : puik-link underline on multi-lines
PrestaShopCorp · Oct 30, 2023 · 510f55d · 510f55d
2 parents 44585ad + ab28f69
commit 510f55d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 24 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,26 @@
     :class="['puik-link', `puik-link--${size}`]"
   >
     <slot></slot>
+
+    <span
+      v-if="props.target === PuikLinkTarget.BLANK"
+      class="puik-link__target__icon"
+    >
+      {{ TARGET_BLANK_ICON }}
+    </span>
   </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,40 +1,47 @@
 @use './common/typography.scss';
 
 .puik-link {
-  @apply relative text-primary transition m-0.5 p-0.5 py-[4px];
-  &:before {
-    content: '';
-    @apply absolute h-[1px] bg-primary-500 bottom-[4px] left-[50%] translate-x-[-50%] transition-all ease-in-out duration-150;
-    width: calc(100% - 4px);
-  }
+  @apply cursor-pointer 
+    relative 
+    text-primary
+
+    underline 
+    decoration-auto
+    underline-offset-[2px]
+    decoration-primary-500
+
+    transition-all
+    duration-150;
+
   &:hover,
   &:active {
-    @apply cursor-pointer;
-    &:before {
-      @apply bg-primary-800 bottom-[2.5px] transition-all ease-in-out duration-150;
-    }
-    &:before:visited {
-      @apply bg-primary-800;
-    }
+    @apply decoration-primary underline-offset-[5px];
   }
+
   &: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 align-bottom;
+
+    &:before {
+      @apply content-['_'] text-[0.35rem] leading-[0.25rem];
     }
   }
+
   &--sm {
     @extend .puik-body-small;
   }
+
   &--md {
     @extend .puik-body-default;
   }
+
   &--lg {
     @extend .puik-body-large;
   }