Extend NDS patterns and migrate shared UI surfaces
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
fef7735a1d
commit
9aa98c892d
41 changed files with 1035 additions and 405 deletions
|
|
@ -19,6 +19,10 @@ const VARIANT_VALUES = {
|
|||
textarea: ["default", "ghost"],
|
||||
swatch: ["color", "rainbow"],
|
||||
event: ["default", "dark"],
|
||||
surface: ["default", "interactive", "tool", "filter", "modal"],
|
||||
badge: ["primary", "neutral", "gold", "success", "warning", "danger"],
|
||||
feedback: ["info", "success", "warning", "danger"],
|
||||
position: ["left", "right"],
|
||||
none: ["default"]
|
||||
};
|
||||
|
||||
|
|
@ -266,9 +270,185 @@ const COMPONENTS = [
|
|||
}
|
||||
];
|
||||
|
||||
const PATTERN_COMPONENTS = [
|
||||
{
|
||||
id: "nds-panel",
|
||||
name: "Panel",
|
||||
className: "nds-panel",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: ["default", "interactive"],
|
||||
attributes: { "data-variant": ["default", "interactive"] },
|
||||
render: ({ attributes, variant }) => (
|
||||
<article className="nds-panel design-system-pattern-card" {...attributes}>
|
||||
<p className="eyebrow">{variant}</p>
|
||||
<strong>Surface de lecture</strong>
|
||||
<span>Fond sombre, bordure Nebula et accent dore contenu.</span>
|
||||
</article>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-card",
|
||||
name: "Card",
|
||||
className: "nds-card",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: ["default", "interactive"],
|
||||
attributes: { "data-variant": ["default", "interactive"] },
|
||||
render: ({ attributes }) => (
|
||||
<article className="nds-card design-system-pattern-card" {...attributes}>
|
||||
<div className="nds-card-cover design-system-pattern-cover"><Icon name="toolbox" /></div>
|
||||
<div className="nds-card-body">
|
||||
<p className="eyebrow">Card</p>
|
||||
<strong>Element repete</strong>
|
||||
<div className="nds-card-actions"><button className="nds-button" data-size="xs" type="button">Ouvrir</button></div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-tool-panel",
|
||||
name: "Tool Panel",
|
||||
className: "nds-tool-panel",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: ["tool", "interactive"],
|
||||
attributes: { "data-variant": ["tool", "interactive"] },
|
||||
render: ({ attributes }) => (
|
||||
<section className="nds-tool-panel design-system-pattern-card" {...attributes}>
|
||||
<header className="nds-section-heading"><strong>Outil</strong><button className="nds-icon-button" data-size="xs" type="button" aria-label="Ajouter"><Icon name="add" /></button></header>
|
||||
<p>Surface de travail compacte pour les toolboxes.</p>
|
||||
</section>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-toolbar",
|
||||
name: "Toolbar",
|
||||
className: "nds-toolbar",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: {},
|
||||
render: () => (
|
||||
<div className="nds-toolbar design-system-pattern-inline">
|
||||
<button className="nds-button" data-size="xs" data-variant="primary" type="button">Ajouter</button>
|
||||
<button className="nds-icon-button" data-size="xs" type="button" aria-label="Parametres"><Icon name="settings" /></button>
|
||||
<button className="nds-icon-button" data-size="xs" data-variant="danger" type="button" aria-label="Supprimer"><Icon name="trash" /></button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-section-heading",
|
||||
name: "Section Heading",
|
||||
className: "nds-section-heading",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: {},
|
||||
render: () => (
|
||||
<header className="nds-section-heading design-system-pattern-wide">
|
||||
<div><p className="eyebrow">Heading</p><strong>Section</strong></div>
|
||||
<button className="nds-button" data-size="xs" type="button">Action</button>
|
||||
</header>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-page-hero",
|
||||
name: "Page Hero",
|
||||
className: "nds-page-hero",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: {},
|
||||
render: () => (
|
||||
<section className="nds-page-hero design-system-pattern-hero">
|
||||
<div><p className="eyebrow">Hero</p><strong>Page concise</strong><span>Introduction courte et lisible.</span></div>
|
||||
</section>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-badge",
|
||||
name: "Badge",
|
||||
className: "nds-badge",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.badge,
|
||||
attributes: { "data-variant": VARIANT_VALUES.badge },
|
||||
render: ({ attributes, variant }) => <span className="nds-badge" {...attributes}>{variant}</span>
|
||||
},
|
||||
{
|
||||
id: "nds-chip",
|
||||
name: "Chip",
|
||||
className: "nds-chip",
|
||||
sizes: ["sm", "default"],
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: { "data-size": ["sm", "default"], "data-state": STATE_VALUES },
|
||||
render: ({ attributes, state }) => <button className="nds-chip" {...attributes} type="button" disabled={state === "disabled"} aria-pressed={state === "active"}><Icon name="checklist" />Filtre</button>
|
||||
},
|
||||
{
|
||||
id: "nds-empty-state",
|
||||
name: "Empty State",
|
||||
className: "nds-empty-state",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: {},
|
||||
render: () => <div className="nds-empty-state design-system-pattern-card"><strong>Aucun contenu</strong><span>Message court et action optionnelle.</span></div>
|
||||
},
|
||||
{
|
||||
id: "nds-inline-notice",
|
||||
name: "Inline Notice",
|
||||
className: "nds-inline-notice",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.feedback,
|
||||
attributes: { "data-variant": VARIANT_VALUES.feedback },
|
||||
render: ({ attributes, variant }) => <p className="nds-inline-notice" {...attributes}>{variant === "info" ? "Information compacte" : `${variant} compact`}</p>
|
||||
},
|
||||
{
|
||||
id: "nds-progress",
|
||||
name: "Progress",
|
||||
className: "nds-progress",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: ["primary", "success", "warning", "danger"],
|
||||
attributes: { "data-variant": ["primary", "success", "warning", "danger"] },
|
||||
render: ({ attributes, variant }) => <span className="nds-progress" {...attributes} aria-label={`Progression ${variant}`}><span style={{ width: variant === "danger" ? "86%" : "58%" }} /></span>
|
||||
},
|
||||
{
|
||||
id: "nds-filter-panel",
|
||||
name: "Filter Panel",
|
||||
className: "nds-filter-panel",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
attributes: {},
|
||||
render: () => (
|
||||
<aside className="nds-filter-panel design-system-pattern-card">
|
||||
<header className="nds-section-heading"><strong>Filtres</strong><button className="nds-icon-button" data-size="xs" type="button" aria-label="Reset"><Icon name="rubber" /></button></header>
|
||||
<button className="nds-chip" data-size="sm" type="button" aria-pressed="true">Actif</button>
|
||||
</aside>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "nds-reorder-indicator",
|
||||
name: "Reorder Indicator",
|
||||
className: "nds-reorder-indicator",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: VARIANT_VALUES.none,
|
||||
configurable: { "data-axis": ["vertical", "horizontal"], "data-placement": ["before", "after"] },
|
||||
attributes: { "data-axis": ["vertical", "horizontal"], "data-placement": ["before", "after"] },
|
||||
render: ({ attributes }) => <div className="nds-reorder-indicator design-system-pattern-reorder" {...attributes}>Drop target</div>
|
||||
},
|
||||
{
|
||||
id: "nds-overlays",
|
||||
name: "Overlay Patterns",
|
||||
className: "nds-modal / nds-drawer / nds-toast / nds-popover",
|
||||
sizes: SIZE_VALUES.none,
|
||||
variants: ["modal", "drawer", "toast", "popover"],
|
||||
attributes: { "data-variant": ["modal", "drawer", "toast", "popover"] },
|
||||
render: ({ variant }) => {
|
||||
if (variant === "drawer") return <div className="nds-drawer-panel design-system-pattern-overlay">Drawer panel</div>;
|
||||
if (variant === "toast") return <div className="nds-toast design-system-pattern-toast"><span>Alerte globale</span><button className="nds-icon-button" data-size="xs" type="button" aria-label="Fermer"><Icon name="close" /></button></div>;
|
||||
if (variant === "popover") return <div className="nds-popover design-system-pattern-overlay">Menu flottant</div>;
|
||||
return <div className="nds-modal design-system-pattern-overlay"><strong>Modale</strong><footer className="nds-modal-footer"><button className="nds-button" data-size="xs" type="button">Annuler</button></footer></div>;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const NAV_ITEMS = [
|
||||
{ id: "foundations", label: "Foundations" },
|
||||
...COMPONENTS.map(({ id, name }) => ({ id, label: name })),
|
||||
...PATTERN_COMPONENTS.map(({ id, name }) => ({ id, label: name })),
|
||||
{ id: "date-picker-buttons", label: "Date Picker Buttons" },
|
||||
{ id: "specialized-components", label: "Specialized Components" },
|
||||
{ id: "audit", label: "Audit" }
|
||||
|
|
@ -629,6 +809,7 @@ export function DesignSystemPage() {
|
|||
<main className="design-system-main">
|
||||
<FoundationsSection />
|
||||
{COMPONENTS.map((component) => <ComponentCatalogSection key={component.id} component={component} />)}
|
||||
{PATTERN_COMPONENTS.map((component) => <ComponentCatalogSection key={component.id} component={component} />)}
|
||||
<DatePickerButtonsSection />
|
||||
<SpecializedComponentsSection />
|
||||
<AuditSection />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue