Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño B.C..
Crea un formulario de preferencias de recordatorios al estilo de B.C. con tokens semánticos reales, controles Aria nativos de React, campos de contacto condicionales y validación completa.
Sistema de diseño B.C.: biblioteca actual de React y tokens
Elige la implementación mantenida
La versión actual de B.C. Design System ofrece componentes React basados en React Aria. Este ejemplo fija react-components 0.8.1 y su dependencia design-tokens 5.0.0. El antiguo repositorio B.C. Web Components es una implementación heredada independiente; importarlo no reproduce la biblioteca actual de React. Antes de copiar un ejemplo, asegúrate de que la implementación coincida con la documentación.
Importa la tipografía correcta
Los componentes esperan que el nombre de la familia tipográfica incluya un espacio: BC Sans. La versión 2.1.2 incluye css/BC_Sans.css; la antigua entrada BCSans.css está marcada como obsoleta y declara un nombre de familia diferente. Tener BC Sans instalada en el equipo de desarrollo puede ocultar que falta importar la fuente. Este ejemplo incluye la fuente publicada para que el resultado no dependa de una instalación local.
Sistema de diseño B.C. Roles semánticos de color y espaciado
Lee el rol antes de elegir el valor
Los botones principales usan el relleno azul oscuro para botones principales, mientras que el contenido complementario usa typography-color-secondary. Los mensajes de error usan typography-color-danger. La tabla registra los nombres de exportación actuales de CSS; cada nombre expresa una intención estable, aunque un tema futuro cambie el valor subyacente. No confundas el color de un control inactivo con el del texto complementario habitual.
Aplica una geometría deliberada
El formulario usa un espaciado de 24px entre campos y una separación mayor, de 48px, entre la tarea principal y la explicación complementaria. Estos valores corresponden al ritmo de la biblioteca, mientras que la composición general en dos columnas está diseñada específicamente para este ejemplo. En móviles, las columnas se apilan sin reducir el tamaño de las etiquetas del formulario ni convertir el texto explicativo en información sobre herramientas.
Sistema de diseño B.C. Campos condicionales y valores conservados
Valida únicamente el método de contacto elegido
Un RadioGroup nativo controla si se muestra el TextField de correo electrónico o el de número de teléfono. Los dos valores se conservan en el estado de React al cambiar de método, pero solo el campo seleccionado se valida durante la revisión. Así se conservan los datos útiles y se evita que un campo oculto impida completar la tarea actual.
Muestra errores locales útiles
El campo de correo electrónico comprueba un formato sencillo de dirección y el ejemplo de teléfono exige al menos diez dígitos. Se trata explícitamente de reglas de ejemplo, no de un validador internacional completo de datos de contacto. Si la revisión detecta datos no válidos, establece isInvalid y proporciona un mensaje de error específico para el campo mediante errorMessage. Si falta la aceptación, se muestra un mensaje; el foco pasa al primer control no válido.
Contratos de componentes de sistema de diseño B.C. React Aria
Usa valores controlados y los controladores documentados
TextField recibe value y onChange; RadioGroup recibe value y onChange; Checkbox usa isSelected y onChange. Estos controladores reciben los valores documentados, no un objeto de evento del navegador que siempre haya que leer mediante event.target. Button usa type=submit y el evento de envío del formulario nativo para que el envío con el teclado siga la misma ruta de validación.
Mantén sincronizados los comentarios de revisión
Sistema de diseño B.C. Nombres accesibles y composición adaptable
Mantén vinculadas las etiquetas, descripciones y errores
Los componentes nativos proporcionan las relaciones de React Aria entre las etiquetas, el texto de ayuda y los mensajes de error. La aplicación sigue teniendo que proporcionar etiquetas significativas, una descripción clara del grupo y mensajes de validación comprensibles. Las pruebas deben hacer clic en las etiquetas de radio visibles y usar el teclado; el campo de entrada interno oculto visualmente no es el objetivo visible.
Separa las indicaciones complementarias del formulario
El recuadro contiguo explica el flujo de trabajo local e incluye un elemento details nativo que revela información sobre la implementación. En pantallas estrechas, aparece después del formulario en el orden de lectura. El símbolo de información es decorativo porque el encabezado comunica el significado. No hace falta un logotipo oficial de B.C. ni afirmar que se trata de un servicio gubernamental para estudiar los componentes.
Sistema de diseño B.C. Implementación completa de React
Reproduce la fuente verificada
Crea un proyecto de Vite React e instala los paquetes fijados de componentes, tokens y tipografía. Usa los archivos main.jsx y bc.css proporcionados junto con un elemento raíz para el montaje. El paquete incluye el comportamiento nativo de radio, campo, casilla y botón, además de la validación local completa y las transiciones de estado. No necesitas ningún API privado ni credenciales.
Instala los paquetes fijados e importa css/BC_Sans.css.
Guarda main.jsx y bc.css, y conserva el elemento raíz para el montaje.
Envía el formulario vacío y, luego, corrige el campo visible.
Cambia de método y confirma que se conserve el valor anterior.
Ajusta la validación condicional al método seleccionado
Los controladores onChange de RadioGroup y TextField reciben valores, mientras que el de Checkbox recibe el booleano seleccionado. Guarda esos valores directamente en lugar de aplicar un controlador genérico event.target.value a todos los componentes. Las etiquetas visibles siguen siendo los objetivos de interacción, incluso cuando React Aria oculta visualmente un campo de entrada nativo.
Cuando cambie el método de contacto, conserva ambos valores del borrador, pero borra la revisión anterior y valida solo el método elegido. Después del envío, mueve el foco al primer control visible no válido. Así, la persona puede comparar las opciones de contacto sin perder una dirección de correo electrónico ni quedar bloqueada por un campo de teléfono invisible. La regla de diez dígitos del teléfono de este ejemplo es deliberadamente local y debe sustituirse por los requisitos internacionales reales del servicio.
Solo se valida el campo de contacto seleccionado.
Al editar cualquier opción, se borra la retroalimentación de la revisión anterior.
El resultado no afirma que se haya programado un recordatorio.
Ejemplos de componentes del sistema de diseño sistema de diseño B.C.
main.jsx — ejemplo completo y funcional
Elige una preferencia de contacto y revísala. El código siguiente es la entrada completa de React, incluidos todos los estados y la validación.
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 />);
Guárdalo junto a main.jsx. Estas reglas de composición personalizadas se distinguen de la referencia de tokens de la biblioteca.
04
Configuración del agente sistema de diseño B.C.
Punto de partida para la implementación
El ejemplo nativo fijado se empaquetó y se comprobó localmente en el navegador. El ejemplo utiliza únicamente el estado local de la aplicación.
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
Una instrucción para tu proyecto
Instrucción para el agente
Crea el formulario de recordatorio con componentes B.C. React 0.8.1 y BC Sans 2.1.2. Conserva la validación condicional, los datos introducidos, los errores visibles y la eliminación de resultados obsoletos. Usa los nombres actuales de los tokens y el nombre de familia tipográfica con los espacios correctos. Mantén el ejemplo local hasta que exista un contrato de notificación real.
05
Fuentes y alcance de sistema de diseño B.C.
Estudio de una aplicación OpenDesign que utiliza la biblioteca pública actual B.C. React. Este es un formulario local original, no un servicio oficial del gobierno; usa datos de contacto ficticios.
