@unkn0wndo3s/nova-design-system 0.1.0 → 0.2.0

package/src/pages/index.astro

@@ -1,338 +1,338 @@
----
-import Layout from '../layouts/Layout.astro';
-import Notification from '../components/Notifications/notification.astro';
-import Toggle from '../components/Toggle/toggle.astro';
-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 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,
-  LinkIcon, MinusIcon, MoreIcon, OverviewIcon, PlusIcon, ProfileIcon,
-  SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
-  UploadIcon,
-} from '../components/Icons/index.ts';
-
-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);">
-        <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);">
-        <Button type="primary">Primary Button</Button>
-        <Button type="secondary">Secondary Button</Button>
-        <Button type="primary" disabled>disabled</Button>
-      </div>
-    </section>
-    <section>
-      <h2>Tabs</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Tab id="my-tab" defaultActive="images">
-          <TabItem id="images">images</TabItem>
-          <TabItem id="videos">Videos</TabItem>
-          <TabItem id="docs">Documents</TabItem>
-        </Tab>
-        <TabContent id="my-tab" itemId="images">
-          <p>my images</p>
-        </TabContent>
-
-        <TabContent id="my-tab" itemId="videos">
-          <p>Video player here</p>
-        </TabContent>
-
-        <TabContent id="my-tab" itemId="docs">
-          <p>Document list here</p>
-        </TabContent>
-      </div>
-    </section>
-    <section>
-      <h2>Toggle</h2>
-      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
-        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
-      </div>
-    </section>
-    <section>
-      <h2>Notifications — Error / Warning / Success / Info</h2>
-      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <Notification type="error">
-            An error occurred during the operation. Please try again.
-        </Notification>
-        <Notification type="success">
-            The operation was completed successfully.
-        </Notification>
-        <Notification type="warning">
-            A warning occurred during the operation. Please check the details.
-        </Notification>
-        <Notification type="info">
-            Information about the operation.
-        </Notification>
-      </div>
-    </section>
-    <section>
-      <h2>Icon — 16 / 24 / 32</h2>
-      <div class="icon-grid">
-        <div class="icon-row">
-          <Arrow2Icon size={16} orientation="up" />
-          <Arrow2Icon size={16} orientation="right" />
-          <Arrow2Icon size={16} orientation="down" />
-          <Arrow2Icon size={16} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2Icon size={24} orientation="up" />
-          <Arrow2Icon size={24} orientation="right" />
-          <Arrow2Icon size={24} orientation="down" />
-          <Arrow2Icon size={24} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <Arrow2Icon size={32} orientation="up" />
-          <Arrow2Icon size={32} orientation="right" />
-          <Arrow2Icon size={32} orientation="down" />
-          <Arrow2Icon size={32} orientation="left" />
-        </div>
-        <div class="icon-row">
-          <ProfileIcon size={16} />
-          <ProfileIcon size={24} />
-          <ProfileIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <ShareIcon size={16} />
-          <ShareIcon size={24} />
-          <ShareIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SearchIcon size={16} />
-          <SearchIcon size={24} />
-          <SearchIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CloseIcon size={16} />
-          <CloseIcon size={24} />
-          <CloseIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <UploadIcon size={16} />
-          <UploadIcon size={24} />
-          <UploadIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <BinIcon size={16} />
-          <BinIcon size={24} />
-          <BinIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <BurgerIcon size={16} />
-          <BurgerIcon size={24} />
-          <BurgerIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CalendarIcon size={16} />
-          <CalendarIcon size={24} />
-          <CalendarIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CheckIcon size={16} />
-          <CheckIcon size={24} />
-          <CheckIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CodeIcon size={16} />
-          <CodeIcon size={24} />
-          <CodeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <CubeIcon size={16} />
-          <CubeIcon size={24} />
-          <CubeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <DownloadIcon size={16} />
-          <DownloadIcon size={24} />
-          <DownloadIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <FilterIcon size={16} />
-          <FilterIcon size={24} />
-          <FilterIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <HelpIcon size={16} />
-          <HelpIcon size={24} />
-          <HelpIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <HomeIcon size={16} />
-          <HomeIcon size={24} />
-          <HomeIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <LinkIcon size={16} />
-          <LinkIcon size={24} />
-          <LinkIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <MinusIcon size={16} />
-          <MinusIcon size={24} />
-          <MinusIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <MoreIcon size={16} />
-          <MoreIcon size={24} />
-          <MoreIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <OverviewIcon size={16} />
-          <OverviewIcon size={24} />
-          <OverviewIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <PlusIcon size={16} />
-          <PlusIcon size={24} />
-          <PlusIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SettingsIcon size={16} />
-          <SettingsIcon size={24} />
-          <SettingsIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <ShieldIcon size={16} />
-          <ShieldIcon size={24} />
-          <ShieldIcon size={32} />
-        </div>
-        <div class="icon-row">
-          <SortIcon size={16} variant="default" />
-          <SortIcon size={16} variant="ascend" />
-          <SortIcon size={16} variant="descend" />
-          <SortIcon size={24} variant="default" />
-          <SortIcon size={24} variant="ascend" />
-          <SortIcon size={24} variant="descend" />
-          <SortIcon size={32} variant="default" />
-          <SortIcon size={32} variant="ascend" />
-          <SortIcon size={32} variant="descend" />
-        </div>
-        <div class="icon-row">
-          <StatsIcon size={16} />
-          <StatsIcon size={24} />
-          <StatsIcon size={32} />
-        </div>
-      </div>
-    </section>
-  </main>
-</Layout>
-
-<script>
-    const toggle = document.getElementById('my-toggle') as any;
-    const stateLabel = document.getElementById('toggle-state');
-
-    // Défaut: thème sombre
-    if (!document.documentElement.hasAttribute('data-theme')) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    }
-    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
-
-    toggle?.addEventListener('change', (e: CustomEvent) => {
-      const { checked } = e.detail;
-
-      if (checked) {
-        document.documentElement.setAttribute('data-theme', 'dark');
-        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
-      } else {
-        document.documentElement.setAttribute('data-theme', 'light');
-        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
-      }
-    });
-</script>
-
-<style lang="scss" scoped>
-
-  body {
-    background-color: var(--nds-background);
-    color: var(--nds-text);
-  }
-  
-  main {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
-  }
-
-  h1 {
-    font-size: var(--nds-type-h1-size);
-    font-weight: var(--nds-type-h1-weight);
-    line-height: var(--nds-type-h1-line-height);
-    letter-spacing: var(--nds-type-h1-letter-spacing);
-    margin-bottom: var(--nds-spacing-xl);
-  }
-
-  h2 {
-    font-size: var(--nds-type-h2-size);
-    font-weight: var(--nds-type-h2-weight);
-    line-height: var(--nds-type-h2-line-height);
-    letter-spacing: var(--nds-type-h2-letter-spacing);
-    color: var(--nds-text-muted);
-    margin-bottom: var(--nds-spacing-md);
-  }
-
-  section {
-    margin-bottom: var(--nds-spacing-2xl);
-  }
-
-  .row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--nds-spacing-sm);
-  }
-
-  .icon-grid {
-    display: flex;
-    flex-direction: column;
-    gap: var(--nds-spacing-xs);
-  }
-
-  .icon-row {
-    display: flex;
-    align-items: center;
-    gap: var(--nds-spacing-lg);
-    color: var(--nds-text);
-  }
-
-  .icon-name {
-    font-size: var(--nds-type-body-small-size);
-    color: var(--nds-text-muted);
-    width: 100px;
-    flex-shrink: 0;
-  }
-
-  .icon-sizes {
-    display: flex;
-    align-items: center;
-    gap: var(--nds-spacing-md);
-    color: var(--nds-default);
-  }
-</style>
+---
+import Layout from '../layouts/Layout.astro';
+import Notification from '../components/Notifications/notification.astro';
+import Toggle from '../components/Toggle/toggle.astro';
+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 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,
+  LinkIcon, MinusIcon, MoreIcon, OverviewIcon, PlusIcon, ProfileIcon,
+  SearchIcon, SettingsIcon, ShareIcon, ShieldIcon, SortIcon, StatsIcon,
+  UploadIcon,
+} from '../components/Icons/index.ts';
+
+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);">
+        <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);">
+        <Button type="primary">Primary Button</Button>
+        <Button type="secondary">Secondary Button</Button>
+        <Button type="primary" disabled>disabled</Button>
+      </div>
+    </section>
+    <section>
+      <h2>Tabs</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Tab id="my-tab" defaultActive="images">
+          <TabItem id="images">images</TabItem>
+          <TabItem id="videos">Videos</TabItem>
+          <TabItem id="docs">Documents</TabItem>
+        </Tab>
+        <TabContent id="my-tab" itemId="images">
+          <p>my images</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="videos">
+          <p>Video player here</p>
+        </TabContent>
+
+        <TabContent id="my-tab" itemId="docs">
+          <p>Document list here</p>
+        </TabContent>
+      </div>
+    </section>
+    <section>
+      <h2>Toggle</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Toggle data-checked={initialChecked} data-name="notifications" id="my-toggle" />
+        <p id="toggle-state">State: {initialChecked ? 'Checked' : 'Unchecked'}</p>
+      </div>
+    </section>
+    <section>
+      <h2>Notifications — Error / Warning / Success / Info</h2>
+      <div style="max-width: 400px; display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <Notification type="error">
+            An error occurred during the operation. Please try again.
+        </Notification>
+        <Notification type="success">
+            The operation was completed successfully.
+        </Notification>
+        <Notification type="warning">
+            A warning occurred during the operation. Please check the details.
+        </Notification>
+        <Notification type="info">
+            Information about the operation.
+        </Notification>
+      </div>
+    </section>
+    <section>
+      <h2>Icon — 16 / 24 / 32</h2>
+      <div class="icon-grid">
+        <div class="icon-row">
+          <Arrow2Icon size={16} orientation="up" />
+          <Arrow2Icon size={16} orientation="right" />
+          <Arrow2Icon size={16} orientation="down" />
+          <Arrow2Icon size={16} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <Arrow2Icon size={24} orientation="up" />
+          <Arrow2Icon size={24} orientation="right" />
+          <Arrow2Icon size={24} orientation="down" />
+          <Arrow2Icon size={24} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <Arrow2Icon size={32} orientation="up" />
+          <Arrow2Icon size={32} orientation="right" />
+          <Arrow2Icon size={32} orientation="down" />
+          <Arrow2Icon size={32} orientation="left" />
+        </div>
+        <div class="icon-row">
+          <ProfileIcon size={16} />
+          <ProfileIcon size={24} />
+          <ProfileIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <ShareIcon size={16} />
+          <ShareIcon size={24} />
+          <ShareIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SearchIcon size={16} />
+          <SearchIcon size={24} />
+          <SearchIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CloseIcon size={16} />
+          <CloseIcon size={24} />
+          <CloseIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <UploadIcon size={16} />
+          <UploadIcon size={24} />
+          <UploadIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <BinIcon size={16} />
+          <BinIcon size={24} />
+          <BinIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <BurgerIcon size={16} />
+          <BurgerIcon size={24} />
+          <BurgerIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CalendarIcon size={16} />
+          <CalendarIcon size={24} />
+          <CalendarIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CheckIcon size={16} />
+          <CheckIcon size={24} />
+          <CheckIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CodeIcon size={16} />
+          <CodeIcon size={24} />
+          <CodeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <CubeIcon size={16} />
+          <CubeIcon size={24} />
+          <CubeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <DownloadIcon size={16} />
+          <DownloadIcon size={24} />
+          <DownloadIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <FilterIcon size={16} />
+          <FilterIcon size={24} />
+          <FilterIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <HelpIcon size={16} />
+          <HelpIcon size={24} />
+          <HelpIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <HomeIcon size={16} />
+          <HomeIcon size={24} />
+          <HomeIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <LinkIcon size={16} />
+          <LinkIcon size={24} />
+          <LinkIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <MinusIcon size={16} />
+          <MinusIcon size={24} />
+          <MinusIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <MoreIcon size={16} />
+          <MoreIcon size={24} />
+          <MoreIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <OverviewIcon size={16} />
+          <OverviewIcon size={24} />
+          <OverviewIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <PlusIcon size={16} />
+          <PlusIcon size={24} />
+          <PlusIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SettingsIcon size={16} />
+          <SettingsIcon size={24} />
+          <SettingsIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <ShieldIcon size={16} />
+          <ShieldIcon size={24} />
+          <ShieldIcon size={32} />
+        </div>
+        <div class="icon-row">
+          <SortIcon size={16} variant="default" />
+          <SortIcon size={16} variant="ascend" />
+          <SortIcon size={16} variant="descend" />
+          <SortIcon size={24} variant="default" />
+          <SortIcon size={24} variant="ascend" />
+          <SortIcon size={24} variant="descend" />
+          <SortIcon size={32} variant="default" />
+          <SortIcon size={32} variant="ascend" />
+          <SortIcon size={32} variant="descend" />
+        </div>
+        <div class="icon-row">
+          <StatsIcon size={16} />
+          <StatsIcon size={24} />
+          <StatsIcon size={32} />
+        </div>
+      </div>
+    </section>
+  </main>
+</Layout>
+
+<script>
+    const toggle = document.getElementById('my-toggle') as any;
+    const stateLabel = document.getElementById('toggle-state');
+
+    // Défaut: thème sombre
+    if (!document.documentElement.hasAttribute('data-theme')) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    }
+    if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
+
+    toggle?.addEventListener('change', (e: CustomEvent) => {
+      const { checked } = e.detail;
+
+      if (checked) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        if (stateLabel) stateLabel.textContent = 'Thème : Sombre';
+      } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+        if (stateLabel) stateLabel.textContent = 'Thème : Clair';
+      }
+    });
+</script>
+
+<style lang="scss" scoped>
+
+  body {
+    background-color: var(--nds-background);
+    color: var(--nds-text);
+  }
+  
+  main {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: var(--nds-spacing-xl) var(--nds-spacing-md);
+  }
+
+  h1 {
+    font-size: var(--nds-type-h1-size);
+    font-weight: var(--nds-type-h1-weight);
+    line-height: var(--nds-type-h1-line-height);
+    letter-spacing: var(--nds-type-h1-letter-spacing);
+    margin-bottom: var(--nds-spacing-xl);
+  }
+
+  h2 {
+    font-size: var(--nds-type-h2-size);
+    font-weight: var(--nds-type-h2-weight);
+    line-height: var(--nds-type-h2-line-height);
+    letter-spacing: var(--nds-type-h2-letter-spacing);
+    color: var(--nds-text-muted);
+    margin-bottom: var(--nds-spacing-md);
+  }
+
+  section {
+    margin-bottom: var(--nds-spacing-2xl);
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nds-spacing-sm);
+  }
+
+  .icon-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nds-spacing-xs);
+  }
+
+  .icon-row {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-lg);
+    color: var(--nds-text);
+  }
+
+  .icon-name {
+    font-size: var(--nds-type-body-small-size);
+    color: var(--nds-text-muted);
+    width: 100px;
+    flex-shrink: 0;
+  }
+
+  .icon-sizes {
+    display: flex;
+    align-items: center;
+    gap: var(--nds-spacing-md);
+    color: var(--nds-default);
+  }
+</style>