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

Рядок кошика

Товар, який людина вже вибрала: фото, назва, варіант, лічильник і сума. Шість рядків на двох екранах - найменша молекула з узятих, і саме на ній набір «одного товару під різними іменами» нарешті стало видно цілком.

рівень 2design/system/components/cart-row.css169 рядків30 селекторів169 рядків11 екранів

Анатомія

Розмітка звідси - та сама, що на cart.html, скопійована рядок у рядок.

фото

Optimum Nutrition · США

Gold Standard 100% Whey 2270 г

Смак: Подвійний шоколад

1 520 ₴−15%1 290 ₴18 ₴ / порція

фото

Power Pro · Україна

BCAA 2:1:1 Powder 500 г

Смак: Лимон

Немає в наявності

890 ₴

другий рядок несе .oos: фото, назва і ціна гаснуть до opacity: .5, а над лічильником стає пілюля .ci-oostag. Лічильник і посилання лишаються при повній силі - товар прибирають саме ними

1Фото - 74px, квадрат, те саме, що в картці. До 7.68 тут стояло 10/11: рамка була вища за квадратну фотографію, яку малює. Посилання на товар

2Бренд - --text-brandline. Третій і останній читач цієї ролі, який до 7.45 брав --text-muted

3Назва - 14/600, посилання, під курсором іде в акцент. Менша за назву в картці (16), бо тут товар уже вибрано і читають не її, а суму

4Варіант - смак, розмір, те, чим цей рядок відрізняється від сусіднього з тим самим товаром

5Лічильник - атом stepper.css з 7.13. До нього він був оголошений тут і ще раз у чекауті, 32x34 проти 30x32

6Ціна - блок з трьох поверхів: закреслена з чипом, сума, ціна за порцію. Порожні поверхи ховає :empty, а не JS

7Посилання - «в обране» і «видалити». Друге носить .strong: це дія, яку не хочеться зробити випадково, тож вона важча, а не червона

Один товар, п'ять наборів імен

До цього кроку молекули показали товар у чотирьох виглядах; чекаут дає п'ятий. Це не п'ять компонентів - це один, у якого п'ять разів забули спитати, як він зветься.

Роль	сіткою	списком	угода	кошик	чекаут
фото	`.ph`	`.lph`	`.hd-ph`	`.ci-ph`	`.li-img`
бренд	`.pbrand`	`.lbrand`	`.hd-brand`	`.ci-brand`	-
назва	`.nm`	`.lnm`	`.hd-nm`	`.ci-nm`	`.li-nm`
ціна	`.pnew`	`.lprice`	`.hd-new`	`.ci-sum`	`.li-sum`
стара ціна	`.pold`	`.lold`	`.hd-old`	`.ci-old`	`.li-old`

Атоми це вже звели. Один рядок у price.css називає всі шістнадцять імен ціни; discount.css - усі вісім імен чипа; availability.css - усі чотири. Розходяться саме молекули, кожна у своєму файлі.

І значення в кошика з чекаутом уже однакові: назва 14/600 --text-body в обох, ціна 20px --text-body --lh-snug в обох. Два файли, два набори імен, ті самі числа. Звести їх в один рядок товару - Крок 6, після етапу 09.

Що перевірено і виявилось не дефектом

У назви в чекауті немає ховера, а в кошика є - і це правильно: .li-nm в розмітці це <div>, а не посилання. На чекауті товар не клікають. Це не п'ятий екземпляр «правила на два імені», яких етап уже знайшов чотири.

Товару немає - одне значення замість двох

Що	Було	Стало	Файл
`.ci.oos` фото + назва + ціна	.45	.5	cart-row.css
`.pcard.dim` фото + рядок ціни	.5	.5	product-card.css
`.pcard-l.dim` фото + ціна	.5	.5	product-card.css

Один сенс - «цього товару немає» - на одному виді поверхні, і два значення в двох файлах. Змінна: наскільки гасне товар, який не можна купити. Значення: .5. Чому: два читачі проти одного, і нічого не відрізняє пригашений рядок від пригашеної картки.

.oosgal .gmain img лишає свої .85 і в цей набір не входить: то одна велика фотографія на сторінці товару, а не рядок, і гаситься вона змішуванням, а не прозорістю.

Стани

Стан	Що робить	Чому так
спокій	волосяна лінія знизу, 16px повітря згори й знизу	рядки в списку розділяє лінія, а не картка: чотирнадцять карток у стовпчик - це чотирнадцять рамок
наведення на назву	`--text-action`	назва - посилання на товар, і поводиться як усі посилання системи
`.oos`	фото, назва і ціна на `opacity: .5` + пілюля	товар лишається читаним і перестає бути купівлею. Лічильник і «видалити» при повній силі - саме ними його прибирають
наведення на рядок	немає, і це відмова	рядок не є ціллю: цілі всередині нього - фото, назва, лічильник і два посилання, у кожного свій стан. Підсвітити весь рядок означало б пообіцяти клік, якого немає
натискання	немає в рядка	те саме: натискають контроли всередині
`.on` у посилань	було оголошено і видалено	розмітки під нього немає в жодному з двох шарів, і `_wf.css` такого правила ніколи не мав

Варіанти і розміри

Вісь	Значення	Правило вибору
Наявність	звичайний · `.oos`	Товар, який був у кошику й закінчився. Рядок не зникає сам - людина мала його там і має вирішити, що з ним робити.
Поверхи ціни	1, 2 або 3	Сума завжди; закреслена з чипом - тільки якщо є знижка; ціна за порцію - тільки якщо вона відома. Порожні ховає `:empty`, тож у розмітці вони стоять завжди й нічого не рахує JS.
Вага посилання	звичайне · `.strong`	«Видалити» важче за «в обране». Не червоне: видалити рядок кошика не є небезпечним - його повертають одним дотиком.

Коли вживати

У кошику й у його шухляді. Не на лістингу - там товар ще обирають, і це Картка товару. Не на чекауті - там свій рядок, .co-line, у якого товар уже не клікають.

Правило і антиправило

Правило

Рядок кошика показує рішення, а не пропозицію. Товар уже вибрано, тому головне тут - сума й кількість, а не фото й назва: вони менші, ніж у картці, і це навмисно.

Антиправило

Не роби рядок клікабельним цілком. У ньому п'ять окремих цілей, і рядок-посилання поверх них означає, що палець ніколи не знає, у що влучив.

Обмеження

Правила вживання, які називають саме цей компонент: U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.

Два посилання рядка кошика - це ряд дій: .actions плюс власні gap: 16 і flex-wrap: nowrap, які лишились у цьому файлі.

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

Сторінка звіряє себе з файлом: 17 власних класів і 3 стани оголошено в cart-row.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці.

ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4

Від якого порогу: жодного, і ніколи не було. Рядок кошика плинний зроду - фото фіксоване, текстова колонка тягнеться, керування переноситься. Раунд молекул його не чіпав.

Рух

Робота: ВІДПОВІДЬ. Рухається: колір дії в рядку. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var(): підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Токени

Прочитані з cart-row.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Семантичні ролі (7)	Примітиви (14)
`--bg-page` `--line-hair` `--text-action` `--text-body` `--text-brandline` `--text-muted` `--text-secondary`	`--fs-10` `--fs-12` `--fs-14` `--fs-20` `--fw-medium` `--fw-semibold` `--fw-bold` `--lh-snug` `--radius-8` `--space-2` `--space-4` `--space-8` `--space-12` `--space-16`
–	`--dur-fast` `--ease-standard`

Розмітка

<article class="ci" data-unit="1290" data-old="1520"> <a href="product.html" class="ci-ph">фото</a> <div class="ci-mid"> <div class="ci-brand">Optimum Nutrition · США</div> <a href="product.html" class="ci-nm">Gold Standard 100% Whey</a> <div class="ci-var">Смак: Подвійний шоколад</div> <div class="ci-row">…лічильник…ціна…</div> <div class="ci-links">…два посилання…</div> </div> </article>

article у селекторі - не прикраса. Крок 7.21: продукт вживає .ci для двох різних речей - рядок кошика це <article> у всіх 14 місцях, а мітка рядка в каталожному оверлеї це <span>. Без елемента в селекторі сітка з колонкою 74px і нижня лінія лягали й на іконку 24px: на 360 мітка сиділа НА першій літері з перекриттям 11px, а під кожним рядком стояла зайва риска. Розділено елементом, бо розмітка вже каже, що є що, і каже це в обох шарах одразу - додавати клас означало б правити wireframes/, заморожений з етапу 05.

Де вживається

Якорі: .ci .ci-mid .ci-price

Заміряно в браузері на 390, 860 і 1280: 6 рядків на двох кольорових екранах - cart і cart-oos. Другий сенс .ci - мітка в каталожному оверлеї - рендериться 0 разів у кольорі: оверлей відкриває JS, і в спокої його немає. Захист із 7.21 стереже випадок, який сьогодні живий тільки в сірому шарі, і лишається на місці.

Немає в коді -> етап 09

Чого бракує

Ціна за порцію в двох іменах і з двома обличчями: .ci-per тут - 12/500 приглушена, .perserv у картці - --text-secondary з <b> у моноширинній. Одна величина, дві типографіки. Той самий клас питання, що .hd-meta на 7.44
Немає стану «кількість більша за залишок» - лічильник дозволяє набрати будь-що, а рядок про це не каже нічого
Немає правила, що робити з рядком після «видалити» - зникає, гасне чи лишається з «повернути». Це питання до IA й до мікрокопії, а не до CSS
Звести .ci і .co-line в один рядок товару - значення вже однакові, розходяться тільки імена. Крок 6

Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.