Компоненты и секции

Библиотека сохраняет единый внешний вид и поведение. Структура страницы показывает, что означает конкретный экземпляр и что он делает в этом месте.

Читайте три отдельных примера: виды страницы default/empty на разных ширинах; нативные варианты кнопки Type=Primary/Secondary; действие с целью filters-open. Вариант компонента — не вид страницы, а объявление цели состояния не реализует переход во время работы приложения. Открыть в полном размере.

В визуальном экскурсе общий компонент задаёт вид кнопки, а её экземпляр на странице указывает на локальное окно.

Два уровня библиотеки

• UI Kit содержит повторяемые элементы интерфейса: кнопки, поля, карточки и контролы;
• Page Sections содержит крупные блоки страницы со своей структурой и продуктовой ролью.

Уровень определяет не размер компонента, а его источник и ответственность.

Компонент и экземпляр

Общий компонент задаёт визуальные состояния и стандартное поведение. Экземпляр на странице получает собственные контент, контекст и действие:

contact-button [action=modal:contact-modal]

Одна и та же кнопка может открывать разные цели в разных местах. Не записывайте действие конкретной страницы в имя общего компонента.

Идентичность секции

Экземпляр из Page Sections уже имеет стабильный источник. Не повторяйте [section], если локальный фрейм не является границей секции. Секция, собранная прямо на странице, получает явный ключ:

checkout-summary [section=checkout-summary]

Сохраняйте источник правды

Используйте экземпляры вместо отвязанных копий, пока библиотека остаётся владельцем компонента. Оставляйте контент страницы видимым и редактируемым. Данные, действия и состояния храните на уровне страницы или структурированного контракта.

Проверьте перед передачей

• можно ли найти исходный компонент;
• виден ли контент конкретной страницы;
• относится ли действие к текущему месту;
• показаны ли реальные состояния вместо спрятанных старых слоёв.

Общая политика источника правды описана в правилах подготовки макета.