Services publics et administration · Nouvelle ressource
Système de design Canada.ca.
Découvrez la typographie, les jetons sémantiques et les composants Web natifs de GC Design System grâce à un guide de préparation complet avec recherche, divulgation et gestion de l’état vide.
Éléments personnalisés input, details et button natifs du système de design GC 1.6.0 ; contenu local et filtrage originaux. · Référence de mise en œuvre
02
Référence de conception système de design Canada.ca
Les exports de @gcds-core/components 1.6.0 CSS et les contrats des composants sont publiés ; l’aperçu local intègre @gcds-core/fonts 1.1.1.
Composants actuels et périmètre du package système de design Canada.ca
Utilisez l’espace de noms actuel
GC Design System est le système de composants utilisé dans cette ressource Canada.ca. L’exemple fixe la version de @gcds-core/components à 1.6.0 et enregistre les éléments personnalisés autonomes input, details et button. Les exemples plus anciens peuvent utiliser l’espace de noms @cdssnc. Suivez la version du package réellement installée plutôt que de mélanger du code d’enregistrement provenant de versions différentes.
Distinguez l’étude de contenu d’un service
L’exemple présente six sujets de préparation rédigés. Il ne comporte ni signature du gouvernement du Canada, ni intégration de réservation, ni affirmation concernant des documents obligatoires. Il sert à illustrer un véritable modèle de divulgation avec recherche. La réutilisation de ces composants ne signifie pas qu’une application est un service officiel ni que son contenu respecte toutes les exigences de Canada.ca.
Typographie et rythme de lecture système de design Canada.ca
Chargez les deux familles de polices
Les titres utilisent Lato et le texte courant, Noto Sans. Le style de corps publié pour ordinateur est de 1.25rem avec une hauteur de ligne de 160 % ; la référence de largeur de lecture exportée est de 65ch. Ces valeurs créent un rythme de lecture nettement plus aéré que celui d’un tableau de bord compact. L’aperçu local intègre les fichiers de police publiés afin qu’un échec de requête vers une police externe ne modifie pas le résultat à votre insu.
Respecter le raccourci complet de police
Le tableau des jetons inclut le véritable raccourci de police CSS, et pas seulement les tailles nominales en pixels. L’épaisseur, la hauteur de ligne et la famille de polices comptent toutes. Le titre principal utilise un court soulignement rouge, détail de composition inspiré de Canada.ca ; sa largeur de 72px n’est pas présentée comme un jeton d’espacement général du GC. Sur un écran étroit, la mise en page passe sur une colonne tout en conservant un texte courant lisible.
Système de design Canada.ca Couleurs sémantiques et comportement du focus
Utiliser les rôles exposés pour les états significatifs
Le texte principal est de couleur #333, le texte secondaire de couleur #595959 et le rôle de surface bleu atténué correspond à #26374a. Les liens, le focus et les erreurs ont des rôles distincts dans CSS exporté. Un lien ne se distingue pas uniquement par sa couleur : l’élément details natif comporte également un indice visuel et un état d’expansion accessible.
Ne pas supprimer le traitement visible du focus
Le champ de saisie et les boutons natifs fournissent le comportement de focus propre à leurs composants. CSS de l’application gère la mise en page environnante sans accéder aux racines du Shadow DOM pour supprimer les contours. Le bouton de réinitialisation redonne le focus au champ de recherche afin qu’une personne utilisant le clavier puisse immédiatement affiner sa requête. Le Shadow DOM modifie l’application des règles de style et de visibilité personnalisées ; inspectez donc le composant rendu au lieu de supposer que les sélecteurs d’éléments classiques couvrent tous les états.
Système de design Canada.ca Contenu des volets dépliants et priorité de l’information
Réserver les volets dépliants aux explications complémentaires
Chaque élément gcds-details natif reçoit un details-title et un texte complémentaire dans son slot par défaut. Les instructions essentielles restent visibles dans la barre latérale. Une véritable heure de rendez-vous, une adresse ou une exigence ne doit pas être accessible uniquement après l’ouverture d’un volet. Les six sujets d’exemple sont volontairement informatifs ; ils ne recueillent pas de données d’identité et ne simulent pas la réservation d’un rendez-vous.
Garder les informations essentielles sur le service visibles sans ouvrir de volet.
Choisir un titre de volet court et précis.
Éviter les volets dépliants imbriqués, qui rendent le contenu difficile à trouver.
Préserver l’état des volets lors du filtrage
Système de design Canada.ca État de recherche et récupération en cas d’absence de résultats
Écouter l’événement personnalisé documenté
gcds-input nécessite label, input-id et name. Son événement gcdsInput fournit la nouvelle valeur dans event.detail. L’application compare une requête débarrassée des espaces superflus et convertie en minuscules aux titres et au corps du texte des sujets. Un statut dynamique indique le nombre de résultats visibles ; en l’absence de correspondance, un message utile permet de reprendre la recherche au lieu de laisser une zone vide inexpliquée.
Effectuer une réinitialisation complète
Le bouton natif secondaire efface la valeur du composant, rétablit les six entrées et place le focus dans le champ de saisie interne. Il ne réinitialise pas l’état du volet précédemment ouvert par la personne qui consulte la page. Cette séparation rend prévisibles l’état de la requête et l’état de lecture. Une recherche en production dans un ensemble de données distant nécessiterait aussi des règles de chargement, de gestion des échecs de requête et d’ordre des résultats ; ce filtre local de six éléments n’en a pas besoin.
Système de design Canada.ca Intégration complète de JavaScript
Reproduire l’exemple fonctionnel
Créez un projet Vite vanilla, installez la version verrouillée du package de composants et remplacez le fichier d’entrée par le code complet de JavaScript ci-dessous. Enregistrez canada.css à côté et conservez un élément racine de montage. Les points d’entrée directs des éléments personnalisés enregistrent les dépendances nécessaires ; le package CSS fournit la couche de jetons. Le code source contient l’ensemble des données, l’enregistrement, le filtrage et le comportement de réinitialisation.
Installez la version verrouillée du package dans un projet Vite vanilla.
Enregistrez le fichier d’entrée complet et canada.css, en conservant l’élément racine de montage.
Recherchez un mot sans correspondance et vérifiez l’apparition du message de récupération.
Réinitialisez, ouvrez un sujet, puis filtrez de nouveau pour vérifier que l’état de lecture est conservé.
Masquer les conteneurs de résultats sans détruire l’état des volets
Placez chaque élément gcds-details dans un conteneur ordinaire et activez ou désactivez l’état hidden de ce conteneur lors du filtrage. Sinon, les propres règles display d’un élément personnalisé peuvent contredire les hypothèses des sélecteurs génériques CSS. Laissez les instances montées afin qu’un sujet ouvert retrouve son état lorsque la requête est effacée.
La recherche et l’ouverture des volets sont des commandes distinctes. Récupérez la requête depuis event.detail de gcdsInput, annoncez le nombre de résultats et laissez l’élément details natif gérer son propre état d’expansion. La réinitialisation doit mettre à jour la valeur du composant ainsi que le modèle de requête, puis redonner le focus au champ de saisie ; recréer toute la zone de résultats ferait perdre à la personne qui consulte la page sa position de lecture.
Système de design Canada.ca Exemples de composants du système de design
main.js — filtre complet des sujets avec composants natifs
Fichier d’entrée complet avec l’enregistrement des composants, les sujets rédigés, le filtrage, la conservation de l’état des volets et la réinitialisation.
javascript
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
Enregistrez ce fichier sous src/main.js avec un élément racine de montage. Le package publié CSS charge les URL de polices par défaut ; cet aperçu local intègre les mêmes polices publiques.
canada.css — composition de contenu adaptative
Mise en page originale autour des styles des composants natifs.
Le point de rupture de la mise en page et la géométrie du soulignement du titre sont des choix propres à cet exemple, et non des jetons officiels supplémentaires.
04
Système de design Canada.ca Configuration de l’agent d’IA
Point de départ de l’implémentation
L’aperçu local exécute les éléments personnalisés dans leur version verrouillée ; aucun service distant ni identifiant d’accès n’est requis.
sh
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Créez le guide de préparation à six sujets avec GC Design System 1.6.0. Chargez la véritable typographie et la couche de jetons CSS, utilisez les composants natifs de champ de saisie, de volet dépliant et de bouton, préservez l’état des volets lors du filtrage, annoncez le nombre de résultats et assurez une réinitialisation complète. Gardez le contenu essentiel visible et distinguez les explications d’exemple des exigences officielles du service.
05
Système de design Canada.ca Sources et portée
Étude d’une application Canada.ca rédigée par OpenDesign à l’aide de GC Design System 1.6.0. Les sujets proposés sont des exemples fictifs et ne constituent ni des exigences gouvernementales ni un service officiel de réservation.
