Компонент · рівень 3

FAQ магазину

Згортні питання, згруповані за темами, зі смугою переходу зверху і смугою «не знайшли відповіді» знизу. Вузол 8.9, шістнадцять питань у шести групах.

рівень 3design/system/components/faq-page.css90 рядків1 сірий екран0 кольорових поки що
Анатомія

.faq-grp - група з заголовком, у якому гліф стоїть у плитці .ic, щоб шість заголовків поспіль вишикувались по одній лінії. Усередині - <details class="qa">: <summary> з .chev, який обертається на [open], і .a з відповіддю.

Механіка взята з trust-strip.css дослівно, а не виведена наново: list-style: none плюс вебкітовий маркер, обертання шеврона на [open]. Другий вивід тих самих трьох рядків - це друга відповідь, яка чекає нагоди розійтися з першою.

ЗамовленняДоставкаОплатаТовар

📦Доставка

Скільки їде замовлення? ▾
Нова Пошта - 1-3 дні по Україні. Кур'єр по Одесі - наступного дня, якщо замовлення оформлене до 14:00. Самовивіз - у день замовлення після підтвердження.
Скільки коштує доставка? ▾
Вартість залежить від служби й тарифу перевізника. Точні тарифи показуємо на етапі оформлення після вибору способу доставки. [тарифи - операційне питання]
Чи можна змінити адресу після оформлення? ▾
Так, поки замовлення не передане перевізнику. Напишіть нам у контактах, і ми поміняємо відділення.
Не знайшли відповіді?
Напишіть нам - відповідаємо в робочі години того ж дня.
Написати
Коли вживати

Тільки на вузлі 8.9 - FAQ рівня магазину: доставка, оплата, повернення, акаунт. Питання про КОНКРЕТНИЙ товар живуть на картці товару (вузол 3.2) і мають свій компонент - qa-item.css.

Обмеження

Питання стоїть ЗАКРИТИМ, і це не смак. Саме тут проходить межа з .trustsec, яка теж є згорткою: блок довіри на картці товару стоїть ВІДКРИТИМ, бо принцип 1 каже «склад, дозування, походження і сертифікація - це лід, а не деталь під згином». Блок довіри, який відкривався б кліком, ламав би принцип 1; FAQ, який стояв би відкритим, перестав би бути списком, який можна перебігти очима.

Цей файл не малює трьох речей, які здається, що малює. Смуга переходу - це .chips + .chip з chip.css. Заголовки груп - section-head. Абзац-ліда під H1 - .lintro з seo-text.css, який описує себе як «ліду просто під H1» і вже стоїть на одинадцяти сторінках; чотири екрани цієї партії оголосили її вчетверте під власними іменами, і це одне рішення, записане п'ять разів.

Стани

Два, і обидва - робота ВІДПОВІДЬ. summary:hover бере --bg-sunken і фарбує шеврон у дію за --dur-fast. [open] обертає шеврон на 180° і кладе волосину під заголовком. Розкриття самого <details> браузер робить сам і в цьому продукті не анімується: motion.md не має моменту на міждокументну чи нативну згортку.

Чого інвентар етапу 07 не побачив

У wireframes/_wf.css немає правила для faq-*; сірий екран несе власний блок <style>. Той самий рядок, що в info-page.css, nav-tile.css і article.css - і разом вони і є висновок: інвентар, зібраний зі спільної таблиці стилів, сліпий до кожного екрана, який застилював себе сам, а вся група f4 зробила саме це.

Холостий контроль

Сторінка звіряє себе з файлом: 9 власних класів і 2 стани, обидва показані наживо вище.

Токени

Прочитані з faq-page.css: 10 семантичних ролей і 17 примітивів. Список виводить node tools/roles.mjs faq-page з самого файла, тож він не може розійтися з ним.

Семантичні ролі (10)Примітиви (17)
--bg-page --bg-sunken --bg-surface --line-hair --line-strong --text-action --text-body --text-muted --text-primary --text-secondary--container-text --dur-fast --ease-standard --fs-14 --fs-16 --fs-18 --fw-black --fw-bold --lh-airy --radius-12 --radius-8 --size-30 --space-12 --space-16 --space-2 --space-32 --space-8