From feebe17abfecc5a4cd1522850cc1d9697c2b0308 Mon Sep 17 00:00:00 2001
From: LOUIS POTEVIN <louis.potevin@legrand.com>
Date: Thu, 4 Jun 2026 12:49:20 +0200
Subject: [PATCH] feat: add Link component with hover and active states

---
 src/components/Link/_link.scss | 30 ++++++++++++++++++++++++++++++
 src/components/Link/link.astro | 16 ++++++++++++++++
 src/components/index.ts        |  3 ++-
 src/pages/index.astro          |  8 ++++++++
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Link/_link.scss
 create mode 100644 src/components/Link/link.astro

diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
new file mode 100644
index 0000000..62f95c8
--- /dev/null
+++ b/src/components/Link/_link.scss
@@ -0,0 +1,30 @@
+@use '../../styles/tokens/typography' as *;
+
+.link { 
+  text-decoration: none;
+  color: var(--nds-primary);
+  @include text-base;
+    &:hover {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+    &:active {
+        color: var(--nds-text);
+        opacity: 0.25;
+    }
+  &__container {
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    &:hover {
+      background-color: var(--nds-secondary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-accent);
+    }
+    &:active {
+      background-color: var(--nds-primary);
+      border-bottom: var(--nds-border-width-medium) dashed var(--nds-secondary);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/Link/link.astro b/src/components/Link/link.astro
new file mode 100644
index 0000000..556cd99
--- /dev/null
+++ b/src/components/Link/link.astro
@@ -0,0 +1,16 @@
+---
+export interface Props {
+  url:        string;
+  blank?:      boolean;
+}
+const { url, blank } = Astro.props;
+---
+<div class='link__container'>
+  <a href={url} class='link' { ...(blank && { target: '_blank', rel: 'noopener noreferrer' }) }>
+    <slot/>
+  </a>
+</div>
+
+<style lang="scss">
+@use './link';
+</style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 2ea01af..b61f0d2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -6,4 +6,5 @@ export { default as Toggle }       from './Toggle/toggle.astro';
 export { default as Tab }          from './Tabs/tab.astro';
 export { default as TabItem }      from './Tabs/tabItem.astro';
 export { default as TabContent }   from './Tabs/tabContent.astro';
-export { default as Button }       from './Button/button.astro';
\ No newline at end of file
+export { default as Button }       from './Button/button.astro';
+export { default as Link }         from './Link/link.astro';
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c0268b0..a454a92 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,7 @@ import Tab from '../components/Tabs/tab.astro';
 import TabItem from '../components/Tabs/tabItem.astro';
 import TabContent from '../components/Tabs/tabContent.astro';
 import Button from '../components/Button/button.astro';
+import Link from '../components/Link/link.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -20,6 +21,13 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>Link</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Link url="https://example.com">Example Link</Link>
+        <Link url="https://example.com" blank={true}>Example Link (opens in new tab)</Link>
+      </div>
+    </section>
     <section>
       <h2>Button</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">