Merge pull request #302 from PrestaShopCorp/feat/link-article

feat: articles variant added to link component
PrestaShopCorp · Jan 31, 2024 · f466985 · f466985
2 parents 1bdcedf + 5f5fbbf
commit f466985
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
@@ -64,6 +64,11 @@ export const linkProps = buildProps({
     required: false,
     default: false,
   },
+  articles: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 } as const)
 
 export type LinkProps = ExtractPropTypes<typeof linkProps>

diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
@@ -8,6 +8,7 @@
       'puik-link',
       `puik-link--${size}`,
       { 'puik-link--high-contrast': highContrast },
+      { 'puik-link--articles': articles },
     ]"
     :data-test="dataTest"
   >

diff --git a/packages/components/link/stories/link.stories.ts b/packages/components/link/stories/link.stories.ts
@@ -47,7 +47,16 @@ export default {
     },
     highContrast: {
       description:
-        'Sets the link in high contrast mode by disabling the purple color for the visited stated',
+        'Sets the link in high contrast mode by changing the gray underline color',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    articles: {
+      description:
+        'Sets the link in articles mode, adding the purple color for the visited stated',
       table: {
         defaultValue: {
           summary: false,
@@ -71,6 +80,7 @@ export default {
     to: undefined,
     target: '_self',
     highContrast: false,
+    articles: false,
     default: "I'm a cool link",
     title: "I'm a tooltip for your link",
     size: 'md',

diff --git a/packages/components/link/test/link.spec.ts b/packages/components/link/test/link.spec.ts
@@ -46,4 +46,9 @@ describe('Link tests', () => {
     factory({ highContrast: true })
     expect(findLink().classes()).toContain('puik-link--high-contrast')
   })
+
+  it('should set the link in articles mode', () => {
+    factory({ articles: true })
+    expect(findLink().classes()).toContain('puik-link--articles')
+  })
 })
diff --git a/packages/theme/src/link.scss b/packages/theme/src/link.scss
@@ -14,18 +14,15 @@
     duration-150;
 
   &:hover,
-  &:active {
+  &:active,
+  &:visited {
     @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__icon {
     @apply font-materialIcons align-bottom;
 
@@ -52,4 +49,16 @@
     }
     @apply decoration-primary;
   }
+
+  &--articles {
+    @apply decoration-primary-500;
+
+    &:visited {
+      @apply text-purple-700 decoration-primary-500;
+    }
+
+    &:focus-visible {
+      @apply decoration-primary-800;
+    }
+  }
 }