Merge pull request #45 from thelia/feat/Link

add link component

components/Molecules/Links/Link.twig

@@ -0,0 +1,13 @@
+{% set classes = classes %}
+
+<a href="{{ href }}" {% if target %}target="{{ target }}"{% endif %} class="Link paragraph-3 {{ classes }} {% if error %}Link--error{% endif %}" {% if disabled %}aria-disabled="true" tabindex="-1" disabled{% endif %}
+  aria-label="{{ label }}" role="link">
+  {% if iconLeft %}
+    <span class="Link-icon h-2 w-2 {{ iconSize }}" aria-hidden="true">{{ source("/icons/" ~ iconLeft ~ ".svg") }}</span>
+  {% endif %}
+  {{ label }}
+  {% if iconRight %}
+    <span class="Link-icon h-2 w-2 {{ iconSize }}" aria-hidden="true">{{ source("/icons/" ~ iconRight ~ ".svg") }}</span>
+  {% endif %}
+</a>
+

components/Molecules/Links/Links.stories.js

@@ -0,0 +1,66 @@
+import Link from './Link.twig';
+
+export default {
+  title: 'Design System/Molecules/Link',
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Text that should be displayed for the link'
+    },
+    classes: {
+      control: 'text',
+      description: 'Tailwind or CSS classes to apply to the link for styling'
+    },
+    href: {
+      control: 'text',
+      description: 'URL that the link should navigate to'
+    },
+    target: {
+      control: 'text',
+      description:
+        'Specifies where to open the linked document (e.g., _blank for a new tab)'
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description:
+        'State of the link if true then the style disabled is applied to the link'
+    },
+    error: {
+      control: { type: 'boolean' },
+      description:
+        'State of the link if true then the style error is applied to the link'
+    },
+    iconLeft: {
+      control: 'text',
+      description:
+        'Name of the icon that should be on the left side of the link'
+    },
+    iconRight: {
+      control: 'text',
+      description:
+        'Name of the icon that should be on the right side of the link'
+    },
+    iconSize: {
+      control: 'text',
+      description: 'CSS classes to define the size of the icon'
+    }
+  }
+};
+
+export const Default = {
+  render: (args) => Link(args),
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    label: 'Link',
+    classes: '',
+    href: '#',
+    target: '',
+    disabled: false,
+    error: false,
+    iconLeft: 'arrow-left',
+    iconRight: 'arrow-right',
+    iconSize: 'h-5 w-5'
+  }
+};

components/Molecules/Links/links.css

@@ -0,0 +1,56 @@
+.Link {
+  @apply text-xs;
+  color: var(--black);
+  display: inline-flex;
+  align-items: center;
+  outline: 0;
+  text-decoration-line: underline;
+
+  &:hover {
+    color: var(--grey-dark);
+  }
+
+  &:focus-visible:not([disabled]) {
+    background-color: var(--vermillon-light);
+    outline: none;
+    padding: 0px 8px;
+    color: var(--black);
+
+    &:hover {
+      color: var(--grey-dark);
+    }
+  }
+
+  &--error {
+    color: var(--error-darkest);
+
+    &:hover {
+      color: var(--error-dark);
+    }
+
+    &:focus-visible:not([disabled]) {
+      background-color: var(--error-lightest);
+      outline: none;
+      padding: 0px 8px;
+      color: var(--error-darkest);
+
+      &:hover {
+        color: var(--error-dark);
+      }
+    }
+  }
+
+  &[disabled] {
+    color: var(--grey);
+    pointer-events: none;
+    cursor: not-allowed;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &:has(.Link-icon) {
+    gap: 10px;
+  }
+}