# Дизайн-система Alberta ## Предварительный просмотр интерфейса дизайн-система Alberta Выберите отдельные задачи, посмотрите прогресс, выполните локальную проверку и очистите нативные элементы управления. ## Справочник по дизайну дизайн-система Alberta Фактические экспорты светлой темы CSS из @abgov/web-components 3.0.0; лицензированный шрифт Acumin не включён. ### Интерактивные элементы и роли состояний светлой темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-interactive-hover | #045092 | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-interactive-focus | #006dcc | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-text-default | var(--goa-color-greyscale-black) | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-greyscale-100 | #f2f0f0 | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-emergency-default | #da291c | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-success-default | #006f4c | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | | --goa-color-success-light | #d8f7e6 | Значения извлечены из таблицы стилей версии 3.0.0 до переопределений тёмной темы. Для нужного состояния используйте семантические роли. | ### Шкала отступов и скруглений | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --goa-space-3xs | .125rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-2xs | .25rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-xs | .5rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-s | .75rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-m | 1rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-l | 1.5rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-xl | 2rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-2xl | 3rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-space-3xl | 4rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-border-radius-xs | .25rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-border-radius-s | .375rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-border-radius-m | .5rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | | --goa-border-radius-l | .625rem | Опубликованный примитив отступа или радиуса. Порог перехода приложения к двухколоночному макету выбран разработчиками. | ### Примитивы типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-2 | .875rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-3 | 1rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-4 | 1.125rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-6 | 1.5rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-8 | 2rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-size-9 | 2.5rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-line-height-3 | 1.5rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-line-height-6 | 2.5rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-line-height-7 | 3rem | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-weight-regular | 400 | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | | --goa-font-weight-bold | 700 | Здесь указано официальное имя семейства; в опубликованном примере намеренно используется резервный шрифт Arial вместо распространения лицензированных файлов шрифта Acumin. | ## Полное руководство дизайн-система 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 ### main.js — полный нативный список задач Регистрация компонентов, содержимое подготовленных задач, обработка выбора и переходы для проверки и сброса. ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; 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()}); ``` Справочник по коду - Исходные пользовательские элементы используют события _change и _click; не заменяйте их обработчиками обёртки React. ### alberta.css — оформление задач и явно заданный резервный шрифт Исходная адаптивная компоновка с нативными элементами управления. ``` 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;} ``` Справочник по коду - В локальном предварительном просмотре пропущен импорт неиспользуемых внешних шрифтов. Полная таблица стилей пакета может содержать объявления внешних шрифтов; переопределение позволяет использовать в этом примере Arial. ## Настройка агента дизайн-система Alberta ### Отправная точка для реализации Закреплённые версии нативных элементов управления локально проверены в браузере; серверная часть для отправки данных не используется. ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### Запрос для вашего проекта ``` Создайте список подготовки к процессу в Альберте с помощью web-components 3.0.0, настоящих семантических ролей CSS и явных ограничений на использование шрифтов. Используйте описания нативных флажков, вычисляйте прогресс на основе выбора, не допускайте проверки пустого списка, удаляйте устаревшие сводки после изменения выбора и сбрасывайте сами элементы управления. Все результаты должны оставаться локальными, а подготовленные задачи — быть явно обозначены как примеры. ``` ## Источники и область применения дизайн-система Alberta Пример компонента OpenDesign на основе web components Альберты версии 3.0.0 с явно заданным резервным шрифтом Arial. Подготовленные задачи вымышлены и не определяют право на получение государственных услуг или требования к отправке заявления. - Настройка для разработчиков Импорт пакетов и поддерживаемые реализации. - Флажок API Атрибуты и события исходного пользовательского элемента. - Кнопка API Типы действий и поведение компонента. - Публичный исходный код Версионированная реализация компонентов и экспорты CSS. ## Связанные материалы дизайн-система Alberta ### Amsterdam Используйте реальный контракт открытого компонента Switch от Amsterdam, полную нейтральную тему, доступные подписи и настройки чтения с мгновенным применением. ### B.C. дизайн-система Создайте форму настройки напоминаний в стиле B.C. с реальными семантическими токенами, встроенными элементами управления Aria от React, условными полями контактных данных и полной валидацией. ### Canada.ca дизайн-система Изучите типографику GC Design System, семантические токены и встроенные веб-компоненты на примере полного руководства по подготовке с поиском, раскрываемыми блоками и состоянием без результатов. - [Справочник по реализации](https://design.alberta.ca/components/checkbox/) - [Источник](https://github.com/GovAlta/ui-components) - [Справочник по коду](https://design.alberta.ca/components/checkbox/) - [Справочник по коду](https://design.alberta.ca/get-started/developers/setup/) - [Настройка для разработчиков Импорт пакетов и поддерживаемые реализации.](https://design.alberta.ca/get-started/developers/setup/) - [Флажок API Атрибуты и события исходного пользовательского элемента.](https://design.alberta.ca/components/checkbox/) - [Кнопка API Типы действий и поведение компонента.](https://design.alberta.ca/components/button/) - [Публичный исходный код Версионированная реализация компонентов и экспорты CSS.](https://github.com/GovAlta/ui-components)