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

Дизайн-система NSW Зафиксированные версия среды выполнения и тема

Используйте встроенную реализацию вкладок

Пример работает на nsw-design-system 3.27.0. Он импортирует пакет CSS и класс Tabs, а затем инициализирует единую группу вкладок после создания разметки. Такая точечная инициализация позволяет не регистрировать неиспользуемые компоненты. В актуальной документации может описываться более новая версия; код для скачивания и значения токенов в этом примере соответствуют проверенному пакету.

Разделяйте компоненты и состояние приложения

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

Дизайн-система NSW Роли бренда и читаемые поверхности

Используйте тёмную и светлую роли в паре

Стандартный тёмный цвет бренда — #002664, а светлая поверхность — #CBEDFD. Для панели запросов используется светлая роль и тёмная кнопка действия. Активная вкладка оформлена с помощью акцентного стиля пакета. Это настоящие роли темы, а не произвольно выбранная синяя палитра, призванная напоминать сайт государственного учреждения. В примере не используется официальный логотип правительства.

Точно интерпретируйте названия токенов

Токен text-light задаёт белый цвет. Он предназначен для тёмного фона, а не для обозначения приглушённого текста. Для поясняющего текста этапа используется более тёмная нейтральная роль. В справочнике приведены пары цветов переднего плана и фона для статусов, но в практическом примере не добавляются уведомления об ошибке или успехе лишь ради демонстрации всех доступных цветов.

Дизайн-система NSW Public Sans и адаптивная шкала

Перед проверкой макета загрузите шрифт

В примере локально загружаются начертания Public Sans 400 и 700. В пакете размеры для мобильных устройств и настольных экранов заданы отдельно: средний размер текста увеличивается с 1.125rem до 1.25rem, а наибольший размер заголовка — с 2.25rem до 3rem. Эти пары помогают сохранять иерархию текста при изменении доступной ширины.

Соблюдайте умеренную иерархию содержимого

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

Дизайн-система NSW Разметка вкладок и работа с клавиатурой

Пусть компонент дополняет настоящие ссылки

В исходном списке вкладок используются ссылки на уникальные идентификаторы содержимого. При инициализации добавляются семантические роли tablist, tab и tabpanel, настраиваются выбор вкладки и фокусируемая вкладка. Чтобы компонент мог находить панели, необходимо правильно указать цели href. Не дублируйте идентификаторы при размещении на странице нескольких групп вкладок.

• Свяжите каждую ссылку вкладки с одним идентификатором панели.
• Инициализируйте группу после добавления её разметки.
• Поручите встроенному компоненту управлять выбором вкладки и фокусом клавиатуры.

Проверьте выбор вкладок и щелчком, и с клавиатуры

Дизайн-система NSW Сохранённые запросы и честная обратная связь

Храните сохранённое состояние отдельно от активной вкладки

Действие каждого этапа переключает состояние соответствующего запроса в Set, обновляет aria-pressed и меняет подпись кнопки с Save на Remove. Число записей в списке для чтения и сами записи формируются на основе Set. При возвращении к сохранённому этапу корректно отображается его выбранное состояние. Кнопка Clear reading list удаляет все выбранные элементы и становится неактивной, если очищать нечего.

Ясно обозначьте границы хранения данных

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

Дизайн-система NSW Полная реализация и проверка

Воспроизведите исходный код и установите его зависимости

Создайте проект Vite на чистом JavaScript, установите nsw-design-system 3.27.0 и Public Sans, затем сохраните предоставленные файлы entry и nsw.css. Добавьте корневой элемент монтирования. В комплект входят всё содержимое трёх этапов, оригинальные запросы, инициализация встроенного Tabs и обработчики списка для чтения. Поведение сохранения и сброса реализовано полностью, а не заменено псевдокодом.

1. Установите зафиксированную версию пакета NSW и файлы шрифта Public Sans.
2. Сохраните полный файл entry и nsw.css с корневым элементом монтирования.
3. Сохраните запросы в двух разных вкладках и проверьте, что состояние сохраняется.
4. Нажмите ArrowRight, очистите список и проверьте его пустое состояние.

Отделяйте навигацию по вкладкам от сохранённого содержимого

Инициализируйте встроенный класс Tabs, только когда уже существуют целевые ссылки и панели. Связь между идентификаторами фрагментов — условие корректной работы улучшения: если изменить ID панели, не изменив соответствующий href, связь нарушится, даже если метки вкладок выглядят правильно. Если на одной странице несколько групп, задайте каждой уникальные ID.

Храните список для чтения как состояние приложения, отдельно от экземпляра вкладок. Сохранённое состояние запроса должно сохраняться при смене панелей, а после возвращения к панели aria-pressed должен отражать это состояние. Используйте вкладки для равноправного содержимого, к которому читатель может возвращаться; для последовательной формы с обязательными этапами нужна другая модель навигации. Чтобы обеспечить постоянное хранение данных, также потребуется явно определить политику хранения и восстановления, а не менять это поведение для примера, ограниченного одной страницей, незаметно для пользователя.

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

import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});

body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}}