shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extend NDS patterns and migrate shared UI surfaces
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-02 15:50:04 +02:00
parent fef7735a1d
commit 9aa98c892d
41 changed files with 1035 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/src/pages/LibraryPage.jsx
View file

@ -212,14 +212,14 @@ export function LibraryPage({ siteContent, actions }) {
return (
<div className="library-page">
<section className="page-hero library-hero">
<section className="page-hero nds-page-hero library-hero">
<div>
<p className="eyebrow">{content.eyebrow}</p>
<h1>{content.title}</h1>
<p>{content.description}</p>
</div>
</section>
<section className="library-summary nebula-panel" aria-label={content.summaryLabel}>
<section className="library-summary nebula-panel nds-panel" aria-label={content.summaryLabel}>
{content.summaryItems.map((item) => (
<article key={item.title}>
<span className="library-summary-icon" aria-hidden="true">
@ -232,8 +232,8 @@ export function LibraryPage({ siteContent, actions }) {
</article>
))}
</section>
{libraryError && <section className="empty"><h2>Librairie indisponible</h2><p>{libraryError}</p></section>}
{!libraryError && !libraryPayload && <section className="empty"><p>Chargement des exemples...</p></section>}
{libraryError && <section className="empty nds-empty-state"><h2>Librairie indisponible</h2><p>{libraryError}</p></section>}
{!libraryError && !libraryPayload && <section className="empty nds-empty-state"><p>Chargement des exemples...</p></section>}
{libraryPayload && (
<>
<div className="library-doc-layout">
@ -288,7 +288,7 @@ export function LibraryPage({ siteContent, actions }) {
function LibraryDocNav({ content, categories, activeCategoryKey, onSelectCategory }) {
return (
<nav className="library-doc-nav nebula-panel" aria-label={content.tocLabel || "Sommaire des outils"}>
<nav className="library-doc-nav nebula-panel nds-panel" aria-label={content.tocLabel || "Sommaire des outils"}>
<div className="library-toc-heading">
<h2>{content.docTocTitle || content.tocTitle || "Sommaire"}</h2>
<p>{content.tocDescription || "Accédez directement à un exemple d’outil dans la page."}</p>
@ -338,7 +338,7 @@ function LibraryToolExample({ module, sourceData, description, categoryTitle, do
const title = module.title || definition.label || "Outil";
return (
<section id={getLibraryAnchorId(module)} className="library-tool-section">
<section id={getLibraryAnchorId(module)} className="library-tool-section nds-panel">
<div className="library-tool-intro">
<div>
<div className="library-tool-title-row">
@ -347,13 +347,13 @@ function LibraryToolExample({ module, sourceData, description, categoryTitle, do
</span>
<h2>{title}</h2>
</div>
<span className="library-tool-badge">{categoryTitle}</span>
<span className="library-tool-badge nds-badge">{categoryTitle}</span>
{description && <p>{description}</p>}
</div>
</div>
<div className={`library-example-layout ${Array.isArray(docs?.controls) && docs.controls.length ? "has-legend" : ""}`}>
<ToolControlLegend items={docs?.controls} heading={controlLegendHeading || "Repères"} />
<article className={`module library-tool-example ${scrollable ? "is-scrollable" : ""}`} data-module-type={module.type}>
<article className={`module nds-tool-panel library-tool-example ${scrollable ? "is-scrollable" : ""}`} data-module-type={module.type}>
<header>
<div>
<h2>{definition.label}</h2>
@ -393,7 +393,7 @@ function LibraryToolExample({ module, sourceData, description, categoryTitle, do
</div>
</header>
<div className={`module-content ${scrollable ? "is-scrollable legacy-scrollbar" : ""}`}>
<Suspense fallback={<div className="empty"><p>Chargement de l'outil...</p></div>}>
<Suspense fallback={<div className="empty nds-empty-state"><p>Chargement de l'outil...</p></div>}>
<Component
toolboxId={LIBRARY_TOOLBOX_ID}
moduleId={module.id}