Système de design Queensland Government.

Système de design Queensland Government Choisir une implémentation du Queensland

Préciser le nom de l’environnement d’exécution

Les documents du Queensland décrivent plusieurs voies d’implémentation. Cette étude utilise le package public @qld-gov-au/qgds-bootstrap5, version 2.4.1, avec le comportement de modal Bootstrap. Elle ne prétend pas utiliser la nouvelle série de composants Web Lit. Afficher clairement le nom et la version de l’implémentation évite de confondre des composants aux noms similaires, mais dont les règles d’initialisation sont incompatibles.

Distinguer les exemples stables des versions en développement

Le dépôt officiel des composants Web indique que la version actuelle est en alpha, tandis que l’ancienne voie Vanilla constitue une implémentation de référence distincte. L’exemple exécutable présenté ici s’en tient à une seule voie testée, fondée sur Bootstrap. Avant toute migration, il faudra vérifier à nouveau le balisage, les noms des jetons et les contrats des composants, plutôt que de simplement remplacer l’URL de la feuille de style.

Système de design Queensland Government Rôles de thème et illustration des ressources

Lire ensemble les rôles clair et sombre

Le tableau des paramètres présente les rôles clair et sombre associés dans le package réel. Les actions principales, les couleurs des liens, les rôles de focus et de texte varient selon le contexte de surface. Le pack de ressources actuel utilise une composition claire ; les valeurs sombres sont fournies à titre de référence et ne signifient pas que la page dispose d’un contrôle permettant de changer de thème.

Utiliser des illustrations sans inventer de jetons de marque

Chaque carte contient une illustration originale représentant un document numéroté. Les quatre arrière-plans d’illustration aux tons atténués distinguent les types de ressources créés. Ces couleurs et le rayon extérieur de 8px des cartes relèvent du style de l’application et sont indiqués séparément du tableau des rôles publiés. La bibliothèque fournit les véritables boutons, le style des cases à cocher et les styles de modale qui structurent l’interface.

Système de design Queensland Government Échelle typographique et contenu des cartes

Charger la police de texte principale publique

Le rôle de texte principal du package utilise sa famille sans empattement, avec une taille de 1rem et une hauteur de ligne de 1.5. L’aperçu charge des polices Noto Sans locales afin de ne pas dépendre d’une requête à Google Fonts. Les titres, les descriptions et le statut du nombre d’éléments sélectionnés restent lisibles lorsque les cartes passent sur une seule colonne.

Fournir une description utile pour chaque ressource

Chaque carte indique un type, une durée de lecture indicative, un titre concret et un bref objectif. Les durées sont des estimations établies pour l’atelier, et non des données analytiques d’utilisation. Le libellé de sélection reprend le nom de la ressource afin que l’action reste compréhensible lorsqu’elle est présentée seule par une technologie d’assistance. La carte entière ne devient pas une cible cliquable ambiguë.

Système de design Queensland Government Sélection par cases à cocher et retour dérivé

Désactiver l’action d’examen lorsqu’aucun élément n’est sélectionné

Les cases à cocher indépendantes permettent de sélectionner n’importe quelle combinaison des quatre ressources. Un objet Set conserve les index sélectionnés ; le nombre et la liste d’examen sont dérivés de cet état. Le bouton d’examen de la sélection est désactivé tant que le Set est vide. Cela évite d’ouvrir une boîte de dialogue sans contenu utile, tout en indiquant la raison au moyen du compteur visible, qui affiche zéro.

• Utiliser des cases à cocher indépendantes pour une liste de plusieurs ressources.
• Calculer le nombre d’éléments sélectionnés à partir des mêmes données que celles de la boîte de dialogue.
• Inclure le nom de la ressource dans le libellé de chaque case à cocher.

Effacer toute confirmation devenue obsolète après une modification

Système de design Queensland Government Boîte de dialogue de vérification et retour du focus

Utiliser la modale native comme étape de vérification

L’instance Modal Bootstrap ouvre une boîte de dialogue dont le titre sert de libellé. Le corps présente les noms des ressources actuellement sélectionnées, et les actions permettent de poursuivre la modification ou de confirmer localement. La touche Échap et le bouton de fermeture ferment la boîte de dialogue. L’application rétablit le focus sur « Examiner la sélection » lorsque l’événement natif de masquage se déclenche.

Éviter les conflits de transition superflus

L’exemple omet la classe facultative fade. Ainsi, une confirmation rapide ou la touche Échap ferme immédiatement la boîte de dialogue, au lieu d’être ignorée pendant une transition d’ouverture. La modale assure toujours la gestion du focus et du fond superposé. Il ne doit pas être nécessaire de comprendre les animations pour savoir si une action d’examen a été prise en compte.

Système de design Queensland Government Implémentation complète du pack de ressources

Reproduire exactement l’étude locale

Créer un projet Vite vanilla et installer la version épinglée du package QGDS Bootstrap avec Bootstrap et Noto Sans. Utiliser le chemin qld.bootstrap.css exporté par le package plutôt qu’un import profond dist supposé. Enregistrer le fichier d’entrée complet et queensland.css avec un élément de montage racine. Le code source comprend toutes les fiches de ressources, les illustrations SVG originales, la logique de sélection et les transitions de la modale.

1. Installer le package QGDS Bootstrap en version épinglée et la police publique.
2. Utiliser le chemin de feuille de style exporté, avec le fichier d’entrée complet et CSS.
3. Sélectionner deux ressources, puis tester la touche Échap et le retour du focus.
4. Confirmer localement, modifier la sélection et vérifier que l’ancien résultat est effacé.

Définir soigneusement les règles de transition de la modale et de gestion du focus

La voie QGDS Bootstrap utilise la modale Modal Bootstrap ; la fermeture doit donc respecter son cycle de vie natif. Rétablir le focus sur « Examiner la sélection » après hidden.bs.modal plutôt que de deviner un délai. Si la classe fade est ajoutée ultérieurement, tenir compte de la durée de transition : une demande de fermeture immédiate pendant l’ouverture peut être ignorée.

Générer la liste de vérification à partir de la sélection actuelle lors de l’ouverture de la modale, et invalider toute confirmation locale précédente dès qu’une case à cocher est modifiée. La touche Échap doit fermer l’écran de vérification sans modifier les sélections. En séparant les cibles des cases à cocher des illustrations des cartes, on évite que toute la carte réagisse au clic et on attribue à chaque ressource un libellé de sélection précis et accessible.

Système de design Queensland Government Exemples de composants du système de design

import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});

body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}}