Add link component

src/stories/Link.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Link from '@/stories/Link.vue'
+
+const meta: Meta<typeof Link> = {
+  component: Link
+}
+
+export default meta;
+
+type Story = StoryObj<typeof Link>
+
+export const Internal: Story = {
+  args: {
+    text: "Lien",
+    url: '#',
+    target: '_self'
+  }
+}
+
+export const NewTab: Story = {
+  args: {
+    text: "Lien dans un nouvel onglet",
+    url: '#',
+    target: "_blank"
+  }
+}

src/stories/Link.vue

@@ -0,0 +1,35 @@
+<template>
+  <a
+    :href='url'
+    :target='target'
+    :class="classes"
+    v-bind:title="target==='_blank' ? 'ouvrir dans un nouvel onglet': ''"
+  >{{ text }}</a>
+</template>
+
+<script
+  setup
+  lang="ts"
+>
+
+import './link.css'
+import { computed } from 'vue'
+
+interface Link {
+  text: string,
+  url: string,
+  target: '_self' | '_blank'
+}
+
+const props = withDefaults(defineProps<Link>(), {
+  text: 'Lien',
+  url: '#',
+  target: '_self'
+})
+
+const classes = computed(() => ({
+  'storybook-link': true,
+  'storybook-link--external': props.target === '_blank'
+}))
+
+</script>

src/stories/link.css

@@ -0,0 +1,22 @@
+.storybook-link{
+    color: var(--color-link-text-default);
+}
+
+.storybook-link:hover{
+    color: var(--color-link-text-hover);
+    background: var(--color-link-background-hover);
+}
+
+.storybook-link:visited{
+    color: var(--color-link-text-visited);
+}
+
+.storybook-link:active{
+    color: var(--color-link-text-pressed);
+}
+
+.storybook-link--external{
+    &::after{
+        content: ' \2750';
+    }
+}

src/tokens/colors.css

@@ -24,6 +24,9 @@
     --color-cyan-100: #D2F4F8FF;
     --color-cyan-050: #E9FAFCFF;
 
+    /*GREEN*/
+    --color-green-700: #1E8549FF;
+
     /*NAVY*/
     --color-navy-900: #000018FF;
     --color-navy-800: #000031FF;
@@ -106,6 +109,12 @@
     --color-button-background-destructive-subtle-active:var(--color-white-900);
     --color-button-text-destructive-subtle-disabled: var(--color-white-300);
 
+    --color-link-text-default: var(--color-navy-500);
+    --color-link-text-hover: var(--color-navy-700);
+    --color-link-background-hover: var(--color-navy-050);
+    --color-link-text-pressed: var(--color-navy-700);
+    --color-link-text-visited: var(--color-green-700);
+
 }