Filip Rut Kiddosy Design System English

DokumentacjaKomponenty

Karta zajęć

Rdzeń listy zajęć: zdjęcie, kategoria, termin, wiek i cena.

Warianty

Jedna anatomia, części opcjonalne. Karta jest kontenerem rozmiaru: węższa niż 480 px przechodzi w układ telefonu (mniejsze zdjęcie, tytuł w osobnej linii, cena w pionie).

Pełna karta: plakietki dnia i godziny, wolne miejsca, wiek, dojazd, cena od.
Z oceną (opcjonalna; w aplikacji ukryta do czasu opinii).
Online: ikona monitora zamiast dojazdu; cena „Bezpłatne”.
Układ telefonu: ta sama karta w kontenerze węższym niż 480 px (czas pieszo znika).
bez ograniczeńdo 3 lat3–6 latod 7 lat12–15 latod 15 lat
Rodzina etykiet wieku: sześć ikon według progu (bez ograniczeń, do 3, od 3, 7, 12, 15 lat).

Stany

Hover i fokus są poniżej wymuszone. Reaguje cała karta, bo link tytułu ją pokrywa: hover barwi ramkę i tytuł na głęboki niebieski, fokus z klawiatury rysuje pierścień 3 px wokół karty.

Hover
Fokus (klawiatura)
Wyprzedane: brak miejsc. Ze zdjęciem zdjęcie przechodzi w szarość przy kryciu 70 %; tekst miejsc podaje aplikacja.
Ładowanie: OfferCardSkeleton ma tę samą anatomię z pulsującymi blokami; kontener listy niesie role="status" i aria-busy.
Serce ulubionych: spoczynek · hover (biel, serce wypełnia się kolorem primary) · fokus z klawiatury (pierścień w środku).

API

Propsy OfferCard. Każdy tekst przychodzi gotowy z tłumaczeń aplikacji; OfferCardSkeleton nie ma propsów treści.

PropTypDomyślnieOpis
href, title, link string, string, komponent linku – Tytuł to link rozciągnięty na całą kartę; aplikacja wstrzykuje swój link routera.
category "all" | "education" | "sport" | "art" | "events" | "places" | "gastronomy" | "health" – Ustawia data-cat: tło zdjęcia i zaślepka biorą kolor kategorii.
categoryIconSrc, niche string, string – Glif kategorii 14 px i nazwa niszy nad tytułem.
photoSrc, placeholderIconSrc string | null, string – Zdjęcie 4:3; bez niego glif kategorii 32 px na tincie kategorii.
mediaAction ReactNode – Slot na zdjęciu dla serca ulubionych; pusty = bez serca.
day, time string – Plakietka dnia (obrys) i godziny (ciemna).
spots, spotsTone string, "warn" | "none" "warn" Gotowy tekst z liczbą miejsc; warn jest czerwony.
age ReactNode – AgeLabel: ikona wieku 14 px + podpis 13 / 600.
rating { value, count? } – Opcjonalna ocena z liczbą opinii.
travel drive (car, walk?) | online | home – Czas dojazdu albo forma zajęć; ukryty poniżej 768 px, czas pieszo ukryty w układzie telefonu.
priceUnit, price string, string – Jednostka przed kwotą („od”) i kwota albo „Bezpłatne”.
soldOut boolean false Brak miejsc: zdjęcie w odcieniach szarości przy kryciu 70 %.

Dostępność

  • Karta to article; jej tytuł to jedyny link, rozciągnięty na kartę, więc czytnik słyszy jeden link na kartę, nazwany tytułem.
  • Serce ulubionych stoi w DOM przed tytułem, więc Tab trafia w nie pierwsze; ma własną nazwę („Zapisz w ulubionych: …”) i cel 44 px.
  • Ikony dojazdu są dekoracyjne; „Autem” / „Pieszo” czyta tylko czytnik.
  • Ładowanie: szkielet jest ukryty przed czytnikiem; stan ogłasza kontener listy (role="status", aria-busy).
  • Kontrast na białej karcie: tytuł 20,2:1 (hover 8,4:1), meta 7,6:1, wolne miejsca 6,5:1, plakietka godziny 20,2:1. Pierścień fokusu: 3 px w tokenie ring, 4,0:1 wobec bieli.
  • Ramka 2 px w spoczynku to tylko miękka krawędź (1,1:1 wobec tła strony); kartę rozpoznaje się po białej powierzchni i cieniu wiersza, a hover podnosi ramkę do 7,6:1.

Dobre praktyki

TakNiech kolor kategorii przychodzi z data-cat. Tło zdjęcia i zaślepka same idą za kategorią.
NieNie maluj karty pełnym kolorem kategorii. Kategoria żyje w tincie (12 %) i glifie, nie w wypełnionej powierzchni.
Kiddosy Design System