# Дизайн-система B.C

## Предварительный просмотр интерфейса дизайн-система B.C.

Переключайтесь между электронной почтой и телефоном, сохраняя введённые данные, затем проверьте и просмотрите локально сохранённый способ связи.

## Справочник по дизайну дизайн-система B.C.

Нативные @bcgov/design-system-react-components 0.8.1, токены 5.0.0 и BC Sans 2.1.2.

### Роли фона и текста

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --surface-color-primary-button-default | #013366 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-primary-button-hover | #1e5189 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-primary-button-disabled | #edebe9 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-background-white | #ffffff | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-background-light-gray | #faf9f8 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-background-light-blue | #f1f8fe | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-border-default | #d8d8d8 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-border-medium | #898785 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --surface-color-border-active | #2e5dd7 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-color-primary | #2d2d2d | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-color-secondary | #474543 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-color-link | #255a90 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-color-danger | #ce3e39 | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-color-primary-invert | #ffffff | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
### Ритм компоновки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --layout-padding-hair | 0.125rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-padding-xsmall | 0.25rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-padding-small | 0.5rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-padding-medium | 1rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-padding-large | 1.5rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-padding-xlarge | 2rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-margin-medium | 1rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-margin-large | 1.5rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-margin-xlarge | 2rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-margin-xxxlarge | 3rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-border-radius-small | 2px | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-border-radius-medium | 4px | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --layout-border-radius-large | 6px | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
### Шкала типографики

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --typography-font-size-small-body | 0.875rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-body | 1rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-large-body | 1.125rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-h5 | 1.25rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-h4 | 1.5rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-h3 | 1.75rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-h2 | 2rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-h1 | 2.25rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
| --typography-font-size-display | 3rem | Опубликованная роль Британской Колумбии; используйте её по назначению, а не заменяйте произвольным цветом или размером. |
## Полное руководство дизайн-система B.C.

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система B.C. Текущая библиотека и токены React

### Выберите поддерживаемую реализацию

> Текущая библиотека B.C. Design System предоставляет компоненты React на основе React Aria. В этом примере используются react-components 0.8.1 и зависимость design-tokens 5.0.0. Старый репозиторий B.C. Web Components — это отдельная устаревшая реализация; импорт из него не даст текущую библиотеку React. Прежде чем копировать пример, убедитесь, что его реализация соответствует документации.

### Подключите правильное начертание шрифта

Компоненты ожидают имя семейства BC Sans с пробелом. В версии 2.1.2 доступен файл css/BC_Sans.css; устаревший файл BCSans.css помечен как deprecated и задаёт другое имя семейства. Если на компьютере разработчика установлен BC Sans, отсутствие импорта шрифта может остаться незамеченным. В образец включён опубликованный шрифт, поэтому результат не зависит от локальной установки.

## Дизайн-система B.C. Семантические роли цвета и интервалов

### Сначала определите роль, затем выберите значение

Для основных кнопок используется тёмно-синяя заливка primary-button, а для второстепенного содержимого — typography-color-secondary. В сообщениях об ошибках применяется typography-color-danger. В таблице указаны актуальные имена экспортируемых токенов CSS; имя обозначает стабильное назначение, даже если в будущей теме изменится лежащее в его основе значение. Не путайте цвет неактивного элемента управления с цветом обычного второстепенного текста.

### Продуманно задавайте пропорции

В форме используется интервал 24px между полями и более широкий интервал 48px между основной задачей и пояснением. Эти значения соответствуют ритму библиотеки, тогда как композиция из двух колонок создана специально для этого образца. На мобильных устройствах колонки складываются в одну, при этом подписи полей не уменьшаются, а пояснительный текст не превращается во всплывающую подсказку.

## Дизайн-система B.C. Условные поля и сохранение значений

### Проверяйте только выбранный способ связи

Встроенный RadioGroup управляет отображением TextField для адреса электронной почты или номера телефона. При смене способа связи оба значения сохраняются в состоянии React, но при проверке учитывается только выбранное поле. Так полезные данные не теряются, а скрытое поле не мешает выполнению текущей задачи.

### Показывайте понятные локальные ошибки

Для адреса электронной почты проверяется простой формат, а для номера телефона требуется не менее десяти цифр. Это примеры правил, а не полноценная международная проверка контактных данных. При ошибке проверки устанавливается isInvalid и передаётся сообщение об ошибке errorMessage для конкретного поля. Если согласие не дано, показывается заметное сообщение; фокус переводится на первый элемент с ошибкой.

## Дизайн-система B.C. Контракты компонентов React Aria

### Используйте управляемые значения и документированные обработчики

TextField принимает value и onChange; RadioGroup принимает value и onChange; Checkbox использует isSelected и onChange. Эти обработчики получают значения, описанные в документации, а не объект события браузера, из которого всегда нужно считывать event.target. Для Button указывается type=submit, а для нативной формы используется событие submit, поэтому отправка с клавиатуры проходит тот же путь проверки.

### Синхронизируйте сообщения после проверки

При выборе параметра связи показывается локальная сводка с выбранным способом связи. Любое изменение сбрасывает прежний результат и состояние отправки с ошибкой. В примере не утверждается, что электронное письмо отправлено или напоминание запланировано. Для таких заявлений реальному сервису уведомлений потребуются отдельные условия согласия, хранения данных и доставки.

## Дизайн-система B.C. Доступные названия и адаптивная композиция

### Свяжите подписи, описания и сообщения об ошибках

Нативные компоненты обеспечивают связи React Aria между подписями, справочным текстом и сообщениями об ошибках. При этом приложение должно предоставлять осмысленные подписи, понятное описание группы и ясные тексты проверки. При тестировании нажимайте на видимые подписи радиокнопок и пользуйтесь клавиатурой: внутренний визуально скрытый input не является видимой целью взаимодействия.

### Отделите пояснения от формы

В соседнем информационном блоке описан локальный процесс; также в нём есть встроенный элемент details с контекстом реализации. На узких экранах он располагается после формы в порядке чтения. Значок информации служит декорацией, поскольку смысл передаёт заголовок. Для изучения компонентов не нужны официальный логотип B.C. или заявления о предоставлении государственных услуг.

## Дизайн-система B.C. Полная реализация React

### Воспроизведите проверенный исходный код

Создайте проект React на Vite и установите закреплённые версии пакетов компонентов, токенов и шрифта. Используйте предоставленные main.jsx и bc.css вместе с корневым элементом монтирования. В сборку входят нативное поведение радиокнопок, полей, флажка и кнопки, а также полная локальная проверка и переходы состояния. Приватная библиотека API и учётные данные не нужны.

1. Установите закреплённые версии пакетов и импортируйте css/BC_Sans.css.

2. Сохраните main.jsx и bc.css, не удаляя корневой элемент монтирования.

3. Отправьте пустую форму, затем заполните видимое поле правильно.

4. Смените способ связи и убедитесь, что предыдущее значение сохранено.

### Согласуйте условную проверку с выбранным способом связи

Обработчики onChange у RadioGroup и TextField получают значения, а onChange у Checkbox — выбранное логическое значение. Сохраняйте эти значения напрямую, не применяя к каждому компоненту универсальный обработчик event.target.value. Видимые подписи остаются целями взаимодействия, даже когда React Aria визуально скрывает нативный input.

При смене способа связи сохраняйте оба черновых значения, но очищайте прежний результат проверки и проверяйте только выбранный способ. После отправки переводите фокус на первый видимый элемент с ошибкой. Так человек может сравнить варианты связи, не теряя адрес электронной почты и не сталкиваясь с блокировкой из-за скрытого поля телефона. Примерное правило о десяти цифрах намеренно ограничено локальным сценарием; его нужно заменить требованиями сервиса к международным номерам.

- Проверяется только выбранное поле контактных данных.

- Изменение любого значения очищает прежнее сообщение о проверке.

- В результате не утверждается, что напоминание запланировано.

## Дизайн-система B.C. Примеры компонентов дизайн-системы

### main.jsx — полный рабочий образец

Выберите способ связи и проверьте свои данные. Ниже приведён полный исходный код React, включая всё состояние и логику проверки.

```
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 name@example.com."
                description="Use a sample address, such as alex@example.com."
              />
            ) : (
              <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 />);
```

Справочник по коду

- Создайте проект React на Vite, сохраните <div id="root"></div> и загрузите этот код как src/main.jsx.

### bc.css — исходная адаптивная композиция

Слой компоновки приложения поверх нативных компонентов.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    16px/1.5 "BC Sans",
    sans-serif;
  color: var(--typography-color-primary, #2d2d2d);
  background: white;
}
main {
  padding: 32px;
}
header {
  border-top: 6px solid #fcba19;
  border-bottom: 1px solid #d8d8d8;
  padding: 24px 0;
  margin-bottom: 32px;
}
.eyebrow {
  font-size: 13px;
  color: #474543;
}
h1 {
  font-size: 32px;
  line-height: 1.25;
  margin: 8px 0 16px;
}
h2 {
  font-size: 24px;
  margin: 0 0 16px;
}
p {
  margin: 8px 0 16px;
}
.columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
form {
  max-width: 620px;
}
.field {
  margin: 24px 0;
}
aside {
  padding: 24px;
  background: #f1f8fe;
  border-left: 4px solid #1a5a96;
  align-self: start;
}
.status-mark {
  background: #1a5a96;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-weight: bold;
  margin-bottom: 16px;
}
ol {
  padding-left: 24px;
}
li {
  padding-left: 4px;
  margin: 12px 0;
}
.error {
  color: #ce3e39;
  font-size: 14px;
}
.result {
  margin-top: 24px;
  color: #24613b;
}
summary {
  cursor: pointer;
  text-decoration: underline;
  color: #1a5a96;
}
details {
  margin-top: 24px;
}
details p {
  font-size: 14px;
}
@media (max-width: 767px) {
  main {
    padding: 16px;
  }
  .columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  h1 {
    font-size: 28px;
  }
  aside {
    padding: 16px;
  }
}
```

Справочник по коду

- Сохраните рядом с main.jsx. Эти собственные правила композиции отделены от справочника токенов библиотеки.

## Дизайн-система B.C. Настройка агента

### Отправная точка для реализации

Пример с закреплёнными версиями нативных компонентов собран и проверен в браузере локально. В образце используется только локальное состояние приложения.

```
npm create vite@latest bc-reminder -- --template react
cd bc-reminder
npm install
npm install @bcgov/design-system-react-components@0.8.1 @bcgov/design-tokens@5.0.0 @bcgov/bc-sans@2.1.2
# Replace src/main.jsx and add src/bc.css using the complete examples.
npm run dev
```

### Запрос для вашего проекта

```
Создайте форму напоминания с компонентами B.C. React версии 0.8.1 и BC Sans версии 2.1.2. Сохраните условную проверку, введённые данные, видимые сообщения об ошибках и сброс устаревшего результата. Используйте актуальные имена токенов и правильное имя семейства шрифта с пробелом. Оставьте пример локальным, пока не появятся реальные условия работы сервиса уведомлений.
```

## Дизайн-система B.C. Источники и область применения

Изучение приложения OpenDesign с использованием актуальной общедоступной библиотеки B.C. React. Это самостоятельно созданная локальная форма, а не официальная государственная услуга; используйте вымышленные контактные данные.

- Исходный код актуальных компонентов Библиотека React Aria и границы пакетов.

- Токены дизайн-системы Модель семантических токенов и актуальные значения.

- Типографика Основа и использование BC Sans.

- Исходный код BC Sans Общедоступное семейство шрифтов и правильная точка входа CSS.

## Дизайн-система B.C. Связанные ресурсы

### Canada.ca дизайн-система

Изучите типографику GC Design System, семантические токены и встроенные веб-компоненты на примере полного руководства по подготовке с поиском, раскрываемыми блоками и состоянием без результатов.

### CFPB дизайн-система

Реализуйте редакционную сетку CFPB, актуальную типографику и встроенные компоненты Expandables, добавив рабочую форму для заметок, проверенные API пакетов и чёткие границы идентификации.

### CMS дизайн-система

Реализуйте CMS Core с версионированными переменными темы, реальными API компонентов Review и работающим сценарием редактирования и проверки, который сохраняет ответы пользователя и фокус.


- [Справочник по реализации](https://github.com/bcgov/design-system/)
- [Источник](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Справочник по коду](https://github.com/bcgov/design-system/)
- [Исходный код актуальных компонентов Библиотека React Aria и границы пакетов.](https://github.com/bcgov/design-system/)
- [Токены дизайн-системы Модель семантических токенов и актуальные значения.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Типографика Основа и использование BC Sans.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/typography)
- [Исходный код BC Sans Общедоступное семейство шрифтов и правильная точка входа CSS.](https://github.com/bcgov/bc-sans)