384 lines
13 KiB
Plaintext
384 lines
13 KiB
Plaintext
---
|
|
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 LoadingBar from '../components/LoadingBar/loadingBar.astro';
|
|
import NumericStepper from '../components/numericStepper/numericStepper.astro';
|
|
import Avatar from '../components/Avatar/avatar.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';
|
|
import Select from '../components/Select/select.astro';
|
|
import SelectOption from '../components/Select/selectOption.astro';
|
|
|
|
const initialChecked = true;
|
|
---
|
|
|
|
<Layout>
|
|
<main>
|
|
<h1>Nova Design System</h1>
|
|
<section>
|
|
<h2>Select</h2>
|
|
<div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
|
|
<Select default="option3">
|
|
<SelectOption value="option1">Option 1</SelectOption>
|
|
<SelectOption value="option2">Option 2</SelectOption>
|
|
<SelectOption value="option3" >Option 3</SelectOption>
|
|
<SelectOption value="option4" >Option 4</SelectOption>
|
|
<SelectOption value="option5" >Option 5</SelectOption>
|
|
<SelectOption value="option6" >Option 6</SelectOption>
|
|
<SelectOption value="option7" >Option 7</SelectOption>
|
|
<SelectOption value="option8" >Option 8</SelectOption>
|
|
<SelectOption value="option9" disabled>Option 9</SelectOption>
|
|
</Select>
|
|
<Select disabled>
|
|
<SelectOption value="option1">Option 1</SelectOption>
|
|
</Select>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2>Avatar</h2>
|
|
<div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
|
|
<Avatar image="https://static.vecteezy.com/system/resources/thumbnails/057/068/323/small/single-fresh-red-strawberry-on-table-green-background-food-fruit-sweet-macro-juicy-plant-image-photo.jpg" name="John Doe" type="photo"/>
|
|
<Avatar name="Jane Smith" type="initials"/>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2>Numeric Stepper</h2>
|
|
<div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
|
|
<NumericStepper min={-15} max={10} value={5} step={5} id="my-numeric-stepper"/>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2>Loading Bar</h2>
|
|
<div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
|
|
<LoadingBar type="known" percentage={75} width="500px" />
|
|
<LoadingBar type="unknown" width="500px" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<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>
|