Дизайн-система Alberta.

Веб-компоненты и границы версий дизайн-система Alberta

Начните с реально работающей реализации

В этом примере работает @abgov/web-components 3.0.0. Импорт его JavaScript регистрирует пользовательские элементы, а импорт index.css подключает глобальный слой токенов. В исходном HTML API используются элементы с префиксом goa; в примерах React используются обёртки Goab с другим набором событий. Не копируйте свойства onChange из React напрямую в исходные пользовательские элементы.

Различайте версии пакета и дизайн-системы

Версия пакета и версия стилизации компонентов — это разные параметры. Для некоторых элементов управления документирован отдельный атрибут версии. В этом примере сохранены настройки по умолчанию закреплённой версии пакета: версия стилизации не меняется незаметно при ссылке на другой набор значений токенов. В таблице указаны фактические экспорты светлой темы, используемые этой сборкой.

Роли, ритм и типографика дизайн-система Alberta

Используйте цвет, чтобы обозначить состояние

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

Уточните ограничения, связанные со шрифтами

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

Подписи и описания флажков дизайн-система Alberta

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

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

• Задайте каждому флажку стабильное уникальное имя.
• Сделайте видимую подпись краткой, а описание — конкретным.
• Используйте отдельные флажки, только если можно выбрать несколько вариантов.

Прочитайте полезную нагрузку пользовательского события

Исходный веб-компонент отправляет событие _change с полями name, checked и value в event.detail. Приложение использует логическое значение checked для обновления Set с выбранными индексами. Оно не определяет состояние по тексту подписи и не требует нажимать на маленький внутренний элемент ввода. Поэтому щелчок по видимой подписи и выбор с клавиатуры приводят к одному и тому же изменению состояния.

Прогресс и состояние проверки дизайн-система Alberta

Вычисляйте прогресс на основе выбранных пунктов

Счётчик и нативный элемент прогресса HTML вычисляются по одному и тому же Set. При выборе двух пунктов отображается два из четырёх; очистка элементов управления сбрасывает оба индикатора в ноль. Элемент прогресса имеет доступное имя, а расположенный рядом текст состояния явно указывает количество. Имитации загрузки, сетевого запроса или таймера завершения нет.

Обновляйте сводку после каждого изменения

Адаптивная компоновка списка дизайн-система Alberta

Обеспечьте удобочитаемость задач и контекста

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

Сохраняйте удобные области взаимодействия

Библиотека компонентов обеспечивает стилизацию взаимодействия для флажков и кнопок. Отступами и окружающей сеткой управляет CSS приложения, не заменяя нативные области нажатия. На небольших экранах два действия могут переноситься. Проверка — основное действие; очистка выбора визуально вторична и не выдаёт себя за следующий шаг реального приложения.

Полная реализация списка дизайн-система Alberta

Запустите полный исходный код

Создайте проект Vite без фреймворка, установите пакет web-components с фиксированной версией и сохраните предоставленные entry-файл и CSS. Оставьте корневой элемент монтирования. В JavaScript содержатся все четыре подготовленные задачи, привязки нативных событий, вычисляемое количество и переходы для проверки и сброса. Учётная запись, закрытая конечная точка и внешний набор данных не нужны.

1. Установите @abgov/web-components 3.0.0 и импортируйте JavaScript и index.css.
2. Сохраните полный entry-файл и alberta.css вместе с корневым элементом монтирования.
3. Выберите несколько задач и проверьте вычисляемый прогресс.
4. Проверьте, измените выбор, затем снимите все выделения.

Отделяйте события компонента от логики списка задач

Используйте event.detail.checked из исходного события _change как источник истины для выбора. Свойства обёртки React и исходные события goa-checkbox — это разные интерфейсы. Если скопировать обработчик одного интерфейса для другого, не адаптировав данные события, отображаемый прогресс может перестать соответствовать установленным флажкам.

Минимум в одну задачу — это правило приложения, а не встроенное правило флажка. Вычисляйте количество, значение прогресса и текст проверки на основе одного Set выбранных элементов. При нажатии «Снять выделение» сбрасывайте свойство checked каждого пользовательского элемента и сам Set. При изменении выбора сразу удаляйте прежний результат проверки, чтобы он не описывал предыдущий выбор. Служба подготовки к реальному процессу может разрешать неполные списки: определите это правило, прежде чем использовать прогресс как условие продолжения.

Примеры компонентов дизайн-системы дизайн-система Alberta

import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});

main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}}

/* Public specimen font fallback; load approved Acumin only where licensed. */
:root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;}