Système de design NSW.

Environnement d’exécution épinglé et thème système de design NSW

Utilisez l’implémentation native des onglets

L’exemple utilise nsw-design-system 3.27.0. Il importe le package CSS et la classe Tabs, puis initialise le groupe unique d’onglets après avoir créé la structure. Cette initialisation ciblée évite d’enregistrer des composants sans rapport qui ne sont pas présents. La documentation en ligne peut décrire une version plus récente ; le code téléchargeable et les valeurs des jetons restent liés au package vérifié.

Séparez les composants de l’état de l’application

La classe native Tabs gère la sélection des onglets, la visibilité des panneaux et la navigation au clavier. L’application gère un Set d’invites enregistrées. Le passage d’une étape à l’autre ne modifie donc pas la liste de lecture. Cette séparation est explicite dans le code source : aucun magasin global caché, aucune requête au serveur dorsal et aucune imitation d’un compte gouvernemental.

Système de design NSW Rôles de marque et surfaces lisibles

Utilisez les rôles sombre et clair en paire

La couleur de marque sombre par défaut est #002664, tandis que la surface claire est #CBEDFD. Le panneau de consigne utilise le rôle clair, et une action sombre. L’onglet actif reprend le traitement d’accentuation du package. Il s’agit des rôles réels du thème, et non d’une palette bleue arbitraire choisie pour évoquer un site du secteur public. L’exemple n’utilise pas de logo officiel du gouvernement.

Interprétez soigneusement les noms des jetons

Le jeton text-light est blanc. Il doit être utilisé sur un arrière-plan sombre et ne doit pas servir de synonyme générique pour un texte atténué. Le texte secondaire des étapes utilise plutôt le rôle neutre plus sombre. La référence comprend des paires de couleurs de premier plan et d’arrière-plan pour les statuts, mais l’atelier n’invente pas d’alerte d’erreur ou de réussite dans le seul but d’afficher toutes les couleurs disponibles.

Système de design NSW Public Sans et échelle responsive

Chargez la police avant d’examiner la mise en page

L’exemple charge localement les graisses 400 et 700 de Public Sans. Le package définit séparément les tailles pour mobile et ordinateur : le texte moyen passe de 1.125rem à 1.25rem, et la taille de référence du plus grand titre passe de 2.25rem à 3rem. Ces paires contribuent à préserver la hiérarchie de lecture lorsque la largeur disponible change.

Gardez une hiérarchie de contenu sobre

Une courte étiquette d’étape précède un titre descriptif, une introduction, un paragraphe explicatif et une consigne enregistrée. La page ne transforme pas chaque phrase en carte. Sur les écrans étroits, la liste de lecture apparaît sous le panneau de l’étape, tandis que la courte barre de trois onglets reste utilisable sans que le texte soit comprimé sur plusieurs lignes.

Système de design NSW Balisage des onglets et comportement au clavier

Laissez le composant enrichir de vrais liens

La liste d’onglets initiale contient des liens vers des identifiants de contenu uniques. L’initialisation ajoute les sémantiques tablist/tab/tabpanel, gère la sélection et définit l’onglet pouvant recevoir le focus. Les valeurs href doivent être correctes pour que le composant puisse trouver les panneaux correspondants. Ne dupliquez pas les identifiants si la page contient plusieurs groupes d’onglets.

• Associez chaque lien d’onglet à l’identifiant d’un seul panneau.
• Initialisez le groupe après avoir inséré son balisage.
• Laissez le composant natif gérer la sélection et le focus clavier.

Vérifiez la sélection au clavier, ainsi que les clics

Système de design NSW Consignes enregistrées et retours clairs

Ne liez pas l’état enregistré à l’onglet visible

Le bouton d’action de chaque étape ajoute la consigne à un Set ou l’en retire, met à jour aria-pressed et remplace son libellé de Save par Remove. Le nombre d’éléments et le contenu de la liste de lecture sont dérivés de ce Set. Lorsqu’on revient à une étape enregistrée, son état sélectionné est correctement affiché. Clear reading list supprime toutes les sélections et est désactivé lorsque la liste est vide.

Expliquez les limites de la persistance

La liste de lecture est conservée dans l’état local de la page et disparaît au rechargement. L’interface le précise clairement. Une véritable liste persistante nécessiterait un modèle de stockage explicite et un comportement de restauration, qui ne sont ni l’un ni l’autre sous-entendus ici. Le contenu est un exercice original de discussion sur le design, et non un guide d’admissibilité à un service ni une prétendue reproduction d’un processus officiel de NSW.

Système de design NSW Implémentation complète et vérification

Reproduisez la source avec ses dépendances

Créez un projet Vite vanilla, installez nsw-design-system 3.27.0 et Public Sans, puis enregistrez le fichier d’entrée fourni et nsw.css. Conservez un élément de montage à la racine. Le contenu complet des trois étapes, les consignes originales, l’initialisation native de Tabs et les gestionnaires de la liste de lecture sont inclus. Le comportement d’enregistrement et de réinitialisation n’est pas remplacé par du pseudocode.

1. Installez la version épinglée du package NSW et les fichiers de police Public Sans.
2. Enregistrez le fichier d’entrée complet et nsw.css avec un élément de montage à la racine.
3. Enregistrez des consignes dans deux onglets différents et vérifiez que leur état est conservé.
4. Utilisez ArrowRight, videz la liste et examinez son état vide.

Séparez la navigation par onglets du contenu enregistré

Initialisez la classe Tabs native seulement après la création de ses liens cibles et de ses panneaux. La correspondance des identifiants de fragment définit le contrat d’enrichissement : modifier l’identifiant d’un panneau sans modifier son href rompt le lien, même si les libellés des onglets semblent toujours corrects. Si plusieurs groupes figurent sur une même page, attribuez des identifiants distincts à chacun.

Traitez la liste de lecture comme un état applicatif indépendant de l’instance d’onglets. L’état enregistré d’une consigne doit être conservé lors du changement de panneau, et aria-pressed doit refléter cet état au retour dans le panneau. Utilisez des onglets pour du contenu de même niveau auquel les lecteurs peuvent revenir ; un formulaire séquentiel exigeant de valider les étapes nécessite un autre modèle de navigation. La persistance nécessite également une politique explicite de stockage et de restauration, au lieu de modifier silencieusement cet exemple limité à la page.

Système de design NSW Exemples de composants du système de design

import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});

body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}}