Système de design Alberta.

Composants Web système de design Alberta et limites de version

Commencer par l’implémentation réellement exécutée

Cet exemple utilise @abgov/web-components 3.0.0. L’importation de JavaScript enregistre les éléments personnalisés, et celle de index.css fournit la couche globale de jetons. Les éléments bruts de HTML API utilisent le préfixe goa ; les exemples React utilisent des composants Goab avec une interface d’événements différente. Ne copiez pas directement les propriétés onChange de React sur les éléments personnalisés bruts.

Distinguer les versions du package et du design

La version d’un package et celle du style d’un composant ne désignent pas la même chose. Certains contrôles documentent un attribut de version indépendant. Cet exemple conserve les valeurs par défaut du package dont la version est verrouillée, plutôt que de changer implicitement une version de style tout en faisant référence à un autre ensemble de valeurs de jetons. Le tableau répertorie les exportations réelles du thème clair utilisées par cette version.

Système de design Alberta : rôles, rythme et typographie

Utiliser la couleur pour expliciter l’état

L’action principale et l’accent de progression utilisent le rôle interactive-default. L’examen invalide affiche un texte d’alerte accompagné d’une instruction utile ; un examen local terminé utilise une surface d’accompagnement de couleur de réussite. Cette couleur indique l’état de l’examen local, et non l’envoi d’une demande à un service gouvernemental. Les libellés textuels et le décompte numérique transmettent la même information sans dépendre de la teinte.

Documenter les limites liées aux polices

La famille publiée commence par Acumin, et la feuille de style comprend des déclarations de polices hébergées à l’extérieur. L’aperçu utilise explicitement Arial comme solution de repli et supprime ces requêtes de polices distantes ; il ne redistribue pas Acumin. La référence des jetons conserve le vrai nom de la famille afin qu’un service autorisé puisse charger les polices de marque approuvées. Vérifiez de nouveau les retours à la ligne si vous remplacez la police de repli par une police sous licence.

Système de design Alberta : libellés et descriptions des cases à cocher

Utiliser des choix indépendants pour des tâches indépendantes

Quatre cases à cocher goa-checkbox natives représentent des étapes de préparation qui peuvent être examinées dans n’importe quel ordre. Chacune a un nom unique, un texte visible et une description qui précise son objectif. Des boutons radio impliqueraient un choix unique et ne conviendraient pas à cette tâche. Un vrai service doit remplacer le contenu fictif de préparation par des instructions documentées.

• Attribuer à chaque case à cocher un nom unique et stable.
• Garder le libellé visible concis et la description précise.
• Utiliser des cases à cocher indépendantes uniquement lorsque plusieurs choix sont pertinents.

Lire les données utiles de l’événement personnalisé

Le composant Web brut émet _change ; event.detail contient name, checked et value. L’application utilise le booléen checked pour mettre à jour un ensemble Set d’index sélectionnés. Elle ne déduit pas l’état à partir du texte du libellé et n’exige pas un clic sur une petite zone de saisie interne. Cliquer sur le libellé visible ou utiliser le clavier produit donc la même transition d’état.

Système de design Alberta : état de progression et d’examen

Calculer la progression à partir des choix

Le décompte et l’élément natif de progression HTML sont calculés à partir du même ensemble Set. La sélection de deux éléments donne deux sur quatre, et l’effacement des cases ramène les deux indicateurs à zéro. L’élément de progression possède un nom accessible ; le texte d’état adjacent indique explicitement le décompte. Aucun téléversement simulé, appel réseau ou minuteur de fin n’est utilisé.

Actualiser les résumés après chaque modification

Système de design Alberta : composition adaptative de la liste de contrôle

Garder la tâche et le contexte lisibles

Sur ordinateur, la liste de contrôle se trouve à côté d’un panneau de progression complémentaire. Sur les écrans étroits, le panneau suit les contrôles dans l’ordre du document. Les libellés des tâches restent lisibles et les descriptions passent naturellement à la ligne en dessous. Le filet bleu du panneau latéral sert de repère discret ; il ne crée pas une autre action concurrente.

Préserver les zones d’interaction

La bibliothèque de composants fournit le style d’interaction des cases à cocher et des boutons. Les contrôles de CSS de l’application gèrent l’espacement et la grille environnante sans remplacer les zones de clic natives. Les deux actions peuvent passer à la ligne sur les petits écrans. Examiner est l’action principale ; Effacer les sélections est secondaire sur le plan visuel et ne se fait pas passer pour l’étape suivante d’une véritable application.

Système de design Alberta : implémentation complète de la liste de contrôle

Exécuter l’intégralité du code source

Créez un projet Vite vanilla, installez le package web-components dont la version est verrouillée, puis enregistrez le point d’entrée fourni et CSS. Conservez l’élément racine de montage. JavaScript comprend les quatre tâches rédigées, les liaisons aux événements natifs, le décompte calculé et les transitions d’examen et de réinitialisation. Aucun compte, point de terminaison privé ni jeu de données externe n’est nécessaire.

1. Installez @abgov/web-components 3.0.0 et importez JavaScript ainsi que index.css.
2. Enregistrez le point d’entrée complet et alberta.css avec l’élément racine de montage.
3. Sélectionnez plusieurs tâches et vérifiez la progression calculée.
4. Examiner, modifier un choix, puis effacer toutes les sélections natives.

Distinguer les événements des composants des règles de la liste de contrôle

Utilisez event.detail.checked de l’événement brut _change comme source de vérité pour la sélection. Les propriétés des composants enveloppants React et les événements bruts goa-checkbox sont des interfaces différentes ; copier un gestionnaire de l’une à l’autre sans adapter les données transmises peut désynchroniser l’affichage de la progression et l’état visible de la case à cocher.

Le minimum d’un élément sélectionné dans la liste relève des règles de l’application, et non d’une règle intégrée aux cases à cocher. Calculez le décompte, la valeur de progression et le texte d’examen à partir d’un seul ensemble Set. Lorsque l’utilisateur efface les sélections, réinitialisez la propriété checked de chaque élément personnalisé ainsi que l’ensemble Set. Toute modification d’un choix doit immédiatement invalider l’examen précédent afin qu’il ne décrive pas une sélection antérieure. Un véritable service de préparation peut autoriser les listes incomplètes ; définissez cette règle avant de faire de la progression une condition obligatoire.

Système de design Alberta : exemples de composants du système de design

import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});

main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}}

/* Public specimen font fallback; load approved Acumin only where licensed. */
:root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;}