From b3ec60db5dee4eaf392ac6f541aa2b0a99ac6e60 Mon Sep 17 00:00:00 2001
From: unkn0wn <louis1.potevin1@gmail.com>
Date: Thu, 4 Jun 2026 14:07:25 +0200
Subject: [PATCH] feat: add ListItem component with title and subtitle

---
 src/components/ListItem/_listItem.scss        | 70 +++++++++++++++++++
 src/components/ListItem/listItem.astro        | 15 ++++
 .../ListItem/listItemSubtitle.astro           |  7 ++
 src/components/ListItem/listItemTitle.astro   |  7 ++
 src/components/index.ts                       |  5 +-
 src/pages/index.astro                         | 12 ++++
 6 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ListItem/_listItem.scss
 create mode 100644 src/components/ListItem/listItem.astro
 create mode 100644 src/components/ListItem/listItemSubtitle.astro
 create mode 100644 src/components/ListItem/listItemTitle.astro

diff --git a/src/components/ListItem/_listItem.scss b/src/components/ListItem/_listItem.scss
new file mode 100644
index 0000000..de9bbf5
--- /dev/null
+++ b/src/components/ListItem/_listItem.scss
@@ -0,0 +1,70 @@
+@use '../../styles/tokens/typography' as *;
+
+.list-item {
+  width: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--nds-spacing-md);
+  border-radius: var(--nds-radius-sm);
+  background: var(--nds-background, #040B0B);
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background: color-mix(in srgb, var(--nds-secondary) 25%, transparent);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--nds-accent) 25%, transparent);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-radius: var(--nds-radius-md);
+    border-color: transparent;
+    background:
+      linear-gradient(var(--nds-background, #040B0B), var(--nds-background, #040B0B)) padding-box,
+      linear-gradient(
+        135deg,
+        transparent 0%,
+        transparent 20%,
+        rgba(245, 250, 250, 0.08) 50%,
+        rgba(245, 250, 250, 0.28) 100%
+      ) border-box;
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -1px;
+    width: 1px;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-md);
+  }
+
+  &__subTitle {
+    @include text-base;
+  }
+
+  &__title {
+    @include text-xl;
+  }
+}
\ No newline at end of file
diff --git a/src/components/ListItem/listItem.astro b/src/components/ListItem/listItem.astro
new file mode 100644
index 0000000..7234d08
--- /dev/null
+++ b/src/components/ListItem/listItem.astro
@@ -0,0 +1,15 @@
+---
+import Arrow2 from "../Icons/Arrow2/Arrow2.astro"
+---
+<div class='list-item'>
+  <div class='list-item__content'>
+    <slot/>
+  </div>
+  <Arrow2 
+  size={24}
+  orientation='right' />
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>
\ No newline at end of file
diff --git a/src/components/ListItem/listItemSubtitle.astro b/src/components/ListItem/listItemSubtitle.astro
new file mode 100644
index 0000000..50a75b5
--- /dev/null
+++ b/src/components/ListItem/listItemSubtitle.astro
@@ -0,0 +1,7 @@
+<div class='list-item__subTitle'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>
\ No newline at end of file
diff --git a/src/components/ListItem/listItemTitle.astro b/src/components/ListItem/listItemTitle.astro
new file mode 100644
index 0000000..378fa43
--- /dev/null
+++ b/src/components/ListItem/listItemTitle.astro
@@ -0,0 +1,7 @@
+<div class='list-item__title'>
+    <slot/>
+</div>
+
+<style lang="scss">
+@use './listItem';
+</style>
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index b61f0d2..49f7886 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,4 +7,7 @@ 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';
-export { default as Link }         from './Link/link.astro';
\ No newline at end of file
+export { default as Link }         from './Link/link.astro';
+export { default as ListItem }     from './ListItem/listItem.astro';
+export { default as ListItemTitle } from './ListItem/listItemTitle.astro';
+export { default as ListItemSubtitle } from './ListItem/listItemSubtitle.astro';
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a454a92..9a603d4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,6 +7,9 @@ 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 ListItem from '../components/ListItem/listItem.astro';
+import ListItemTitle from '../components/ListItem/listItemTitle.astro';
+import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -21,6 +24,15 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>List Item</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <ListItem>
+          <ListItemTitle>List Item Title</ListItemTitle>
+          <ListItemSubtitle>List Item Subtitle</ListItemSubtitle>
+        </ListItem>
+      </div>
+    </section>
     <section>
       <h2>Link</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">