Crea un modulo per le preferenze dei promemoria nello stile di B.C., con token semantici reali, controlli React Aria nativi, campi di contatto condizionali e comportamento completo di convalida.
Libreria e token sistema di design B.C. attuali React
Scegli l’implementazione mantenuta
La versione attuale di B.C. Design System offre componenti React basati su React Aria. Questo esempio fissa react-components alla versione 0.8.1 e la sua dipendenza design-tokens alla versione 5.0.0. Il vecchio repository B.C. Web Components è un’implementazione legacy distinta: importarlo non riproduce la libreria React attuale. Prima di copiare un esempio, verifica che l’implementazione corrisponda alla documentazione.
Importa il font corretto
I componenti si aspettano che il nome della famiglia sia BC Sans, con uno spazio. La versione 2.1.2 include css/BC_Sans.css; il vecchio file BCSans.css è contrassegnato come deprecato e dichiara un nome di famiglia diverso. Se BC Sans è installato sul computer dello sviluppatore, l’assenza dell’importazione del font può passare inosservata. L’esempio include il font pubblicato, così il risultato non dipende da un’installazione locale.
Ruoli semantici di colore e spaziatura sistema di design B.C.
Scegli il valore in base al ruolo
I pulsanti primari usano il riempimento blu scuro previsto per i pulsanti primari, mentre i contenuti di supporto usano typography-color-secondary. I messaggi di errore usano typography-color-danger. La tabella riporta i nomi esportati attualmente da CSS: il nome esprime un intento stabile anche se un tema futuro cambia il valore sottostante. Non confondere il colore di un controllo inattivo con quello del normale testo di supporto.
Definisci con cura la geometria
Il modulo usa 24px di spaziatura tra i campi e un intervallo più ampio di 48px tra l’attività principale e la spiegazione di supporto. Questi valori corrispondono al ritmo della libreria, mentre la composizione complessiva a due colonne è stata creata per questo esempio. Su dispositivi mobili le colonne si impilano, senza ridurre le etichette del modulo né trasformare il testo esplicativo in un suggerimento contestuale.
Campi condizionali e valori mantenuti sistema di design B.C.
Convalida solo il metodo di contatto scelto
Un RadioGroup nativo determina se visualizzare il TextField dell’indirizzo email o quello del numero di telefono. Quando si cambia metodo, entrambi i valori restano nello stato React, ma in fase di revisione viene convalidato solo il campo selezionato. In questo modo si conservano i dati utili senza che un campo nascosto blocchi l’attività in corso.
Mostra errori chiari e contestuali
Il campo email verifica un formato semplice dell’indirizzo, mentre l’esempio per il telefono richiede almeno dieci cifre. Sono regole esemplificative, non un sistema completo di convalida dei recapiti internazionali. In caso di revisione non valida, isInvalid viene impostato e viene fornito un errorMessage specifico per il campo. Se manca l’accettazione, viene mostrato un messaggio; il primo controllo non valido riceve lo stato attivo.
Contratti dei componenti React Aria sistema di design B.C.
Usa i valori controllati e gli handler documentati
TextField riceve value e onChange; RadioGroup riceve value e onChange; Checkbox usa isSelected e onChange. Questi handler ricevono i valori documentati, non un oggetto evento del browser da cui leggere sempre event.target. Button usa type=submit e l’evento submit del form nativo, così l’invio da tastiera segue lo stesso percorso di convalida.
Mantieni sincronizzati i feedback della revisione
Nomi accessibili e composizione adattabile sistema di design B.C.
Collega etichette, descrizioni ed errori
I componenti nativi forniscono le relazioni React Aria tra etichette, testo di supporto e messaggi di errore. L’applicazione deve comunque fornire etichette significative, una descrizione chiara del gruppo e testi di convalida comprensibili. Durante i test, seleziona le etichette dei pulsanti di scelta visibili e usa la tastiera: l’input interno, nascosto alla vista, non è l’elemento visibile da selezionare.
Separa le indicazioni di supporto dal modulo
Il riquadro adiacente spiega il flusso di lavoro locale e include un elemento nativo details che mostra il contesto dell’implementazione. Su schermi stretti segue il modulo nell’ordine di lettura. Il simbolo informativo è decorativo, perché il significato è già espresso dall’intestazione. Per esaminare i componenti non servono un logo ufficiale della Columbia Britannica né affermazioni di natura governativa.
Implementazione completa React sistema di design B.C.
Riproduci il codice sorgente verificato
Crea un progetto React con Vite e installa i pacchetti bloccati per i componenti, i token e il font. Usa main.jsx e bc.css forniti insieme a un elemento radice per il montaggio. Il bundle include il comportamento nativo di pulsanti di scelta, campi, caselle di controllo e pulsanti, oltre alla convalida locale completa e alle transizioni di stato. Non serve alcun API privato né alcuna credenziale.
Installa i pacchetti bloccati e importa css/BC_Sans.css.
Salva main.jsx e bc.css, mantenendo l’elemento radice per il montaggio.
Invia il modulo vuoto, poi correggi il campo visibile.
Cambia metodo e verifica che il valore precedente venga mantenuto.
Fai corrispondere la convalida condizionale al metodo selezionato
Gli handler onChange di RadioGroup e TextField ricevono valori, mentre quello di Checkbox riceve il valore booleano selezionato. Memorizza direttamente questi valori, senza applicare a ogni componente un handler generico event.target.value. Le etichette visibili restano gli elementi da selezionare anche quando React Aria nasconde alla vista un input nativo.
Quando cambia il metodo di contatto, conserva entrambi i valori temporanei, ma cancella la revisione precedente e convalida solo il metodo scelto. Dopo l’invio, sposta lo stato attivo sul primo controllo visibile non valido. Così è possibile confrontare le opzioni di contatto senza perdere un indirizzo email e senza essere bloccati da un campo telefonico nascosto. La regola esemplificativa delle dieci cifre è volutamente limitata all’esempio e va sostituita con i requisiti internazionali effettivi del servizio.
Viene convalidato solo il campo di contatto selezionato.
Modificare una qualsiasi scelta cancella i feedback della revisione precedente.
Il risultato non afferma che sia stato programmato un promemoria.
Esempi di componenti del sistema di design sistema di design B.C.
main.jsx — esempio completo funzionante
Scegli e rivedi una preferenza di contatto. Il codice qui sotto è l’implementazione completa di React, inclusi tutti gli stati e la convalida.
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 />);
Salva il file accanto a main.jsx. Queste regole di composizione personalizzate sono distinte dal riferimento ai token della libreria.
04
Configurazione dell’agente sistema di design B.C.
Punto di partenza per l’implementazione
L’esempio nativo bloccato è stato incluso nel bundle e verificato localmente nel browser. L’esempio usa solo lo stato locale dell’applicazione.
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 per il tuo progetto
Prompt per l’agente
Realizza il modulo per i promemoria con i componenti B.C. React 0.8.1 e BC Sans 2.1.2. Mantieni la convalida condizionale, i dati inseriti, gli errori visibili e la cancellazione dei risultati obsoleti. Usa i nomi attuali dei token e il nome corretto della famiglia del font, con lo spazio. Mantieni l’esempio in locale finché non esiste un contratto reale per il servizio di notifica.
05
Fonti e ambito sistema di design B.C.
Studio di un’applicazione OpenDesign che usa la libreria pubblica attuale React della Columbia Britannica. Si tratta di un modulo locale originale, non di un servizio governativo ufficiale; usa recapiti fittizi.
