Komponenty

Biblioteka tego, co naprawdę jest w aplikacji, opisana w stanie docelowym. Każda strona mówi, kiedy używać, kiedy nie, jakie są warianty i stany, jak działa z klawiatury, i czy aplikacja jest z tym zgodna dzisiaj.

Stan rozdziału:: szkic

Skąd się biorą komponenty

Z aplikacji, nie z wyobraźni. Katalog apps/web/src/components/system ma dziś: przycisk, kartę, odznakę, pole, tabelę, zakładki, menu, awatar i listę wyboru. Poza system są komponenty domenowe: stany urządzenia (stan.tsx), paszport, nawigacja, pusty stan placówki, formularze. Kanon opisuje je w kolejności od najczęściej używanych.

Żywe przykłady na tych stronach są zbudowane z tokenów brandbooka, więc pokazują stan docelowy, nie obecny wygląd aplikacji. Różnice stoją w ramkach „Rozbieżność”.

Stan rozdziału

Komponent	W aplikacji	W Kanonie	Aplikacja zgodna?
Przyciski	`system/przycisk.tsx`, `przycisk-klasy.ts`	gotowe	rozjazd: kolor, narożnik, cień
Karty	`system/karta.tsx`	gotowe	rozjazd: kolor tła i cień
Oznaczenia statusu	`stan.tsx`, `system/odznaka.tsx`	gotowe	zgodne co do zasady
Tabele	`system/tabela.tsx`	gotowe	zgodne co do układu
Pola formularza	`system/pole.tsx`	szkic	rozjazd: narożnik
Zakładki	`system/zakladki.tsx`	szkic	rozjazd: narożnik
Powiadomienia	brak komponentu	do napisania	nie ma tego elementu
Modale	brak komponentu	do napisania	nie ma tego elementu
Nawigacja	`nawigacja.tsx`	do napisania	rozjazd: znak, kolor
Stany puste	`pusta-placowka.tsx`, teksty w `pl.json`	szkic	zgodne co do zasady
Stany ładowania	brak (`loading.tsx` nie istnieje)	do napisania	nie ma tego elementu
Stany błędu	`role="alert"` w formularzach, `not-found.tsx`	szkic	zgodne co do zasady

Co każda strona komponentu zawiera

Żywy przykład zbudowany z tokenów.
Kiedy używać i kiedy nie.
Warianty i stany (spoczynek, najechanie, ognisko, wciśnięcie, wyłączony, błąd).
Dostępność z klawiatury: co robi Tab, Enter, Spacja, Escape, strzałki.
Zgodność aplikacji: co jest dziś inaczej i w którym pliku to zmienić.