Services publics et administration · Nouvelle ressource
Système de design B.C..
Créez un formulaire de préférences de rappel inspiré de la Colombie-Britannique, avec de véritables jetons sémantiques, les commandes Aria natives de React, des champs de contact conditionnels et une validation complète.
Système de design B.C. Bibliothèque et jetons actuels React
Choisir l’implémentation maintenue
La version actuelle de B.C. Design System fournit des composants React reposant sur React Aria. Cet exemple utilise react-components 0.8.1 et sa dépendance design-tokens 5.0.0. L’ancien dépôt B.C. Web Components est une implémentation historique distincte ; l’importer ne reproduit pas la bibliothèque React actuelle. Vérifiez que l’implémentation correspond à la documentation avant de reprendre un exemple.
Importer la véritable police
Les composants attendent le nom de famille de police BC Sans, avec une espace. La version 2.1.2 fournit css/BC_Sans.css ; l’ancien fichier BCSans.css est indiqué comme obsolète et déclare un autre nom de famille. La présence de BC Sans sur le poste d’un développeur peut masquer l’absence d’importation de la police. L’exemple inclut la police publiée afin que le résultat ne dépende pas d’une installation locale.
Rôles sémantiques des couleurs et de l’espacement de système de design B.C.
Consulter le rôle avant de choisir la valeur
Les boutons principaux utilisent le fond bleu foncé réservé aux boutons principaux, tandis que le contenu complémentaire utilise typography-color-secondary. Les messages d’erreur utilisent typography-color-danger. Le tableau répertorie les noms exportés actuels de CSS ; le nom exprime une intention stable, même si un thème futur modifie la valeur sous-jacente. Ne confondez pas la couleur d’un contrôle inactif avec celle du texte complémentaire ordinaire.
Soigner la géométrie
Le formulaire utilise un espacement de 24px entre les champs et un écart plus large de 48px entre la tâche principale et les explications complémentaires. Ces valeurs correspondent au rythme de la bibliothèque, tandis que la composition générale en deux colonnes a été conçue pour cet exemple. Sur mobile, les colonnes se replient sans réduire les libellés du formulaire ni transformer le texte explicatif en infobulle.
Champs conditionnels et conservation des valeurs de système de design B.C.
Valider uniquement la méthode de contact choisie
Un RadioGroup natif contrôle l’affichage du TextField « Adresse courriel » ou « Numéro de téléphone ». Les deux valeurs sont conservées dans l’état de React lorsque la méthode change, mais seule la valeur du champ sélectionné est validée lors de la vérification. Cela permet de conserver les saisies utiles tout en évitant qu’un champ masqué bloque la tâche en cours.
Afficher des erreurs locales utiles
Le champ de courriel vérifie une forme d’adresse simple, et l’exemple de numéro de téléphone exige au moins dix chiffres. Il s’agit explicitement de règles d’exemple, et non d’un validateur international complet des coordonnées. Lors d’une vérification invalide, isInvalid est défini et un errorMessage propre au champ est fourni. L’absence de consentement entraîne l’affichage d’un message ; le premier contrôle invalide reçoit le focus.
Contrats des composants React Aria de système de design B.C.
Utiliser les valeurs contrôlées et les gestionnaires documentés
TextField reçoit value et onChange ; RadioGroup reçoit value et onChange ; Checkbox utilise isSelected et onChange. Ces gestionnaires reçoivent les valeurs documentées, et non un objet événement du navigateur qu’il faudrait toujours lire via event.target. Button utilise type=submit et l’événement submit du formulaire natif afin que l’envoi au clavier suive le même parcours de validation.
Synchroniser les commentaires de vérification
Noms accessibles et composition adaptative de système de design B.C.
Relier les libellés, les descriptions et les erreurs
Les composants natifs fournissent les associations Aria de React pour les libellés, les textes d’aide et les messages d’erreur. L’application doit tout de même fournir des libellés pertinents, une description claire du groupe et des messages de validation compréhensibles. Les tests doivent vérifier que l’on peut cliquer sur les libellés radio visibles et utiliser le clavier ; le champ interne masqué visuellement n’est pas la cible visible.
Séparer les conseils complémentaires du formulaire
L’encadré adjacent explique le fonctionnement local et comprend un élément natif de divulgation « details » avec des précisions sur la mise en œuvre. Sur les écrans étroits, il suit le formulaire dans l’ordre de lecture. Le symbole d’information est décoratif, car le titre en indique déjà le sens. Il n’est pas nécessaire d’utiliser un logo officiel de la C.-B. ni de prétendre qu’il s’agit d’un service gouvernemental pour étudier les composants.
Système de design B.C. Implémentation complète de React
Reproduire la source vérifiée
Créez un projet Vite React et installez les packages épinglés des composants, des jetons et des polices. Utilisez les fichiers main.jsx et bc.css fournis avec un élément racine de montage. Le bundle comprend le comportement natif des boutons radio, champs, cases à cocher et boutons, ainsi que l’ensemble de la validation locale et des transitions d’état. Aucun accès privé à API ni identifiant n’est nécessaire.
Installez les packages épinglés et importez css/BC_Sans.css.
Enregistrez main.jsx et bc.css en conservant l’élément racine de montage.
Soumettez le formulaire vide, puis corrigez le champ signalé.
Changez de méthode et vérifiez que la valeur précédente est conservée.
Adaptez la validation conditionnelle à la méthode sélectionnée
Les gestionnaires onChange de RadioGroup et TextField reçoivent des valeurs, tandis que celui de Checkbox reçoit la valeur booléenne sélectionnée. Stockez ces valeurs directement au lieu d’appliquer à tous les composants un gestionnaire générique event.target.value. Les libellés visibles restent les cibles d’interaction, même lorsque React Aria masque visuellement un champ de saisie natif.
Lorsque la méthode de contact change, conservez les deux valeurs en cours de saisie, mais effacez l’ancien résultat et ne validez que la méthode choisie. Après la soumission, placez le focus sur le premier contrôle visible invalide. Ainsi, chacun peut comparer les options de contact sans perdre une adresse courriel ni être bloqué par un champ téléphonique invisible. La règle d’exemple exigeant dix chiffres pour le numéro de téléphone est volontairement propre à cette démonstration : elle doit être remplacée par les exigences réelles du service en matière de numéros internationaux.
Seul le champ de contact sélectionné est validé.
Toute modification efface les anciens messages de validation.
Le résultat ne prétend pas qu’un rappel a été programmé.
Système de design B.C. Exemples de composants du système de design
main.jsx — exemple complet fonctionnel
Choisissez une préférence de contact et vérifiez-la. Le code ci-dessous constitue l’entrée React complète, avec toute la gestion d’état et la validation.
jsx
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import {
Button,
Radio,
RadioGroup,
TextField,
Checkbox,
} from "@bcgov/design-system-react-components";
import "@bcgov/bc-sans/css/BC_Sans.css";
import "./bc.css";
function App() {
const [method, setMethod] = useState("email"),
[email, setEmail] = useState(""),
[phone, setPhone] = useState(""),
[consent, setConsent] = useState(false),
[submitted, setSubmitted] = useState(false),
[result, setResult] = useState("");
const panel = useRef(null);
const invalidEmail = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
invalidPhone = phone.replace(/\D/g, "").length < 10;
function change(fn, value) {
fn(value);
setResult("");
setSubmitted(false);
}
function review(e) {
e.preventDefault();
setSubmitted(true);
if ((method === "email" ? invalidEmail : invalidPhone) || !consent) {
requestAnimationFrame(() =>
panel.current
.querySelector(
'[aria-invalid="true"] input,input[aria-invalid="true"],input[type=checkbox]:not(:checked)',
)
?.focus(),
);
return;
}
setResult(
`Local preference ready: ${method === "email" ? "Email to " + email : "Phone call to " + phone}. No reminder has been scheduled.`,
);
}
return (
<main>
<header>
<div className="eyebrow">
SERVICE REMINDER / ORIGINAL APPLICATION STUDY
</div>
<h1>Choose how to hear from us</h1>
<p>
Set a sample reminder preference. Use fictional contact details in
this local example.
</p>
</header>
<div className="columns">
<form onSubmit={review} noValidate ref={panel}>
<RadioGroup
label="Contact method"
value={method}
onChange={(v) => change(setMethod, v)}
description="Choose one way to receive a reminder."
>
<Radio value="email">Email</Radio>
<Radio value="phone">Phone call</Radio>
</RadioGroup>
<div className="field">
{method === "email" ? (
<TextField
label="Email address"
type="email"
value={email}
onChange={(v) => change(setEmail, v)}
isRequired
isInvalid={submitted && invalidEmail}
errorMessage="Enter an email address in the format [email protected]."
description="Use a sample address, such as [email protected]."
/>
) : (
<TextField
label="Phone number"
type="tel"
value={phone}
onChange={(v) => change(setPhone, v)}
isRequired
isInvalid={submitted && invalidPhone}
errorMessage="Enter a phone number with at least 10 digits."
description="Sample validation only; a real service needs a jurisdiction-aware phone rule."
/>
)}
</div>
<div className="field">
<Checkbox
isSelected={consent}
onChange={(v) => change(setConsent, v)}
isInvalid={submitted && !consent}
>
I agree to use these details for this sample reminder
</Checkbox>
{submitted && !consent && (
<p className="error" role="alert">
Confirm the reminder preference before continuing.
</p>
)}
</div>
<Button type="submit" variant="primary">
Review preference
</Button>
<p className="result" role="status">
{result}
</p>
</form>
<aside>
<div className="status-mark" aria-hidden="true">
i
</div>
<h2>What happens next</h2>
<ol>
<li>Choose a contact method.</li>
<li>Review the sample details.</li>
<li>Connect a real notification service before scheduling.</li>
</ol>
<p>
This example keeps both fields while switching methods, but only
reviews the selected method.
</p>
<details>
<summary>About this specimen</summary>
<p>
Native B.C. React Aria components with BC Sans. The form is
original and is not an official government service.
</p>
</details>
</aside>
</div>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Enregistrez ce fichier à côté de main.jsx. Ces règles de composition personnalisées se distinguent de la référence des jetons de la bibliothèque.
04
Configuration de l’agent système de design B.C.
Point de départ de l’implémentation
L’exemple natif épinglé a été assemblé et vérifié localement dans un navigateur. Cet exemple utilise uniquement l’état local de l’application.
sh
npm create vite@latest bc-reminder -- --template react
cd bc-reminder
npm install
npm install @bcgov/[email protected] @bcgov/[email protected] @bcgov/[email protected]
# Replace src/main.jsx and add src/bc.css using the complete examples.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Créez le formulaire de rappel avec les composants B.C. React 0.8.1 et BC Sans 2.1.2. Préservez la validation conditionnelle, les saisies conservées, les erreurs visibles et l’effacement des résultats obsolètes. Utilisez les noms de jetons actuels et le nom de famille de polices avec l’espacement approprié. Gardez l’exemple local tant qu’il n’existe pas de véritable contrat de notification.
05
Système de design B.C. Sources et portée
Étude d’application OpenDesign utilisant la bibliothèque publique B.C. React actuelle. Il s’agit d’un formulaire local original, et non d’un service gouvernemental officiel. Utilisez des coordonnées fictives.
