Изучите типографику GC Design System, семантические токены и встроенные веб-компоненты на примере полного руководства по подготовке с поиском, раскрываемыми блоками и состоянием без результатов.
Нативные пользовательские элементы ввода, details и кнопки GC Design System 1.6.0; оригинальный локальный контент и фильтрация. · Справочник по реализации
02
Справочник дизайн-система Canada.ca
Опубликованные экспорты CSS и контракты компонентов @gcds-core/components 1.6.0; в локальном предварительном просмотре встроен @gcds-core/fonts 1.1.1.
Текущие компоненты и область действия пакета дизайн-система Canada.ca
Используйте актуальное пространство имён
GC Design System — это система компонентов, используемая в этом ресурсе Canada.ca. В примере зафиксирована версия @gcds-core/components 1.6.0 и регистрируются отдельные пользовательские элементы input, details и button. В старых примерах может использоваться пространство имён @cdssnc. Ориентируйтесь на установленную версию пакета и не смешивайте код регистрации из разных выпусков.
Отделяйте материалы для ознакомления от материалов услуги
В примере представлены шесть подготовленных тем для ознакомления. Здесь нет символики Правительства Канады, интеграции с системой бронирования или утверждений об обязательных документах. Цель примера — показать работающий шаблон раскрываемого содержимого с поиском. Повторное использование компонентов не означает, что приложение является официальной услугой или что его содержимое соответствует всем требованиям Canada.ca.
Типографика и ритм чтения дизайн-система Canada.ca
Загрузите оба семейства шрифтов
В заголовках используется Lato, в обычном тексте — Noto Sans. Опубликованная роль основного текста для настольных устройств задаёт размер 1.25rem и межстрочный интервал 160%; справочная ширина для чтения, указанная в экспорте, — 65ch. Благодаря этим значениям ритм чтения заметно свободнее, чем в компактной панели управления. В локальный предварительный просмотр встроены опубликованные файлы шрифтов, поэтому сбой внешнего запроса шрифта не приведёт к незаметному изменению результата.
Сохраняйте полное сокращённое описание шрифта
В таблице токенов указано полное значение font в формате shorthand из CSS, а не только условный размер в пикселях. Важны одновременно насыщенность, межстрочный интервал и семейство. В качестве авторского композиционного элемента в духе Canada.ca под главным заголовком проведена короткая красная линия; её ширина 72px не представлена как универсальный токен интервалов GC. При узкой ширине экрана макет становится одноколоночным, а основной текст сохраняет удобочитаемость.
Семантические цвета и поведение фокуса дизайн-система Canada.ca
Используйте публичные роли для значимых состояний
Основной цвет текста — #333, вторичного — #595959, а приглушённая синяя поверхность — #26374a. В экспортированном CSS для ссылок, фокуса и опасных состояний предусмотрены отдельные роли. Ссылка не должна отличаться только цветом: нативный раскрываемый блок details также имеет визуальную подсказку и доступное состояние раскрытия.
Не удаляйте видимое оформление фокуса
Нативные поле ввода и кнопки обеспечивают собственное поведение фокуса компонентов. Код приложения CSS задаёт окружающую компоновку, не обращаясь к корневым узлам теневого дерева для удаления контуров. При сбросе фокус возвращается в поле поиска, чтобы пользователь клавиатуры сразу мог уточнить запрос. Shadow DOM влияет на применение правил стилей и видимости для пользовательских компонентов, поэтому проверяйте отображённый компонент, а не исходите из того, что обычные селекторы элементов охватывают все состояния.
Содержание details и приоритет информации дизайн-система Canada.ca
Используйте раскрываемые блоки для дополнительных пояснений
Каждому нативному gcds-details передаются details-title и поясняющий текст в слот по умолчанию. Важные инструкции остаются видимыми в боковой панели. Настоящие время и адрес записи или требования нельзя показывать только после раскрытия панели. Шесть примеров намеренно носят информационный характер: они не собирают личные данные и не имитируют завершённую запись.
Оставляйте критически важную информацию об услуге видимой без раскрытия блока.
Используйте короткий и конкретный заголовок details.
Не вкладывайте раскрываемые блоки друг в друга — так содержимое труднее обнаружить.
Сохраняйте состояние раскрытия при фильтрации
Дизайн-система Canada.ca Поиск и восстановление при отсутствии результатов
Подпишитесь на документированное пользовательское событие
Для gcds-input необходимы атрибуты label, input-id и name. Событие gcdsInput передаёт новое значение в event.detail. Приложение сравнивает запрос без пробелов по краям и в нижнем регистре с заголовками тем и текстом. В области статуса с динамическим обновлением отображается число найденных тем; если совпадений нет, выводится полезное сообщение с дальнейшими действиями, а не необъяснимо пустая область.
Сброс должен полностью обновлять состояние
Вторая нативная кнопка очищает значение компонента, восстанавливает все шесть записей и устанавливает фокус на внутреннее поле ввода. При этом она не сбрасывает раскрытую ранее тему. Такое разделение делает состояние поиска и чтения предсказуемым. Для поиска по удалённому набору данных в рабочем приложении также понадобились бы правила обработки загрузки, ошибок запросов и порядка результатов; для этого локального фильтра из шести элементов ничего из этого не требуется.
Полная интеграция дизайн-система Canada.ca с JavaScript
Воспроизведите работающий пример
Создайте проект Vite с vanilla-шаблоном, установите закреплённую версию пакета компонентов и замените точку входа полным кодом ниже JavaScript. Сохраните canada.css рядом с ней и оставьте корневой элемент для монтирования. Точки входа пользовательских элементов напрямую регистрируют необходимые зависимости; пакет CSS подключает слой токенов. В исходном коде содержатся полный набор данных, регистрация, фильтрация и логика сброса.
Установите закреплённую версию пакета в проект Vite с vanilla-шаблоном.
Сохраните полный файл точки входа и canada.css, оставив корневой элемент для монтирования.
Найдите слово без совпадений и убедитесь, что появилось сообщение с дальнейшими действиями.
Выполните сброс, раскройте тему и снова примените фильтр, чтобы проверить сохранение состояния чтения.
Скрывайте обёртки результатов, не сбрасывая состояние раскрытых элементов
Поместите каждый gcds-details в обычную обёртку и при фильтрации переключайте для неё состояние hidden. Иначе собственные правила отображения пользовательского элемента могут нарушить предположения, заложенные в универсальных селекторах CSS. Не удаляйте экземпляры из DOM: после очистки запроса раскрытые темы должны возвращаться в прежнем состоянии.
Поиск и раскрытие — отдельные элементы управления. Получайте запрос из event.detail события gcdsInput, сообщайте число результатов и оставляйте нативному элементу details управление собственным состоянием раскрытия. При сбросе обновляйте как значение компонента, так и модель запроса, а затем возвращайте фокус в поле ввода; пересоздание всей области результатов сбросило бы позицию читателя.
main.js — полный фильтр тем на нативных компонентах
Полный файл точки входа с регистрацией компонентов, авторскими темами, фильтрацией, сохранением состояния раскрытия и сбросом.
javascript
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
Сохраните как src/main.js, добавив корневой элемент для монтирования. Опубликованный пакет CSS загружает URL шрифтов по умолчанию; в локальном предпросмотре встроены те же общедоступные шрифты.
canada.css — адаптивная композиция содержимого
Исходная компоновка страницы вокруг стилей нативных компонентов.
Контрольная точка макета и геометрия подчёркивания заголовка — решения для примера, а не дополнительные официальные токены.
04
Дизайн-система Canada.ca Настройка агента
Отправная точка для реализации
Для локального предпросмотра используются закреплённые версии пользовательских элементов; удалённые сервисы и учётные данные не нужны.
sh
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
Запрос для вашего проекта
Промпт для AI-агента
Создайте руководство по подготовке из шести тем с помощью GC Design System 1.6.0. Подключите настоящие шрифты и набор токенов CSS, используйте нативные компоненты ввода, details и button, сохраняйте состояние раскрытия при фильтрации, сообщайте число результатов и обеспечьте полноценный сброс. Оставьте важное содержимое видимым и чётко отделите пояснения к примеру от официальных требований сервиса.
05
Дизайн-система Canada.ca Источники и область применения
Учебный пример приложения для Canada.ca, созданный с помощью OpenDesign и GC Design System 1.6.0. Примеры тем — вымышленные рекомендации, а не требования правительства или официальная система записи.
