StepCard

Karta jednoho kroku vícekrokového nastavení. Nese svůj stav natrvalo — hotový krok zůstane hotový a je vidět i po návratu na obrazovku.

Kdy použít

Nastavení, které se nedělá jedním dlouhým formulářem, ale kroky. Jednotlivé kroky se dokončují v různé dny a různými lidmi, takže každý z nich potřebuje vlastní rám a vlastní stav.
Krok, jehož obsahem je seznam nebo vnořená tabulka toho, co v něm vzniklo — země a měny, skupiny vlastností. Do těla karty patří právě tenhle výčet, ne pole formuláře jedno pod druhým.
Přehled, ve kterém má být na první pohled vidět, co už je hotové. Hotový krok má zelené záhlaví a fajfku místo čísla, takže se stav čte z odstupu.
Krok, do kterého se průběžně přidávají další položky. Na to je patička — jedna akce typu „Přidat…“ pod obsahem karty.
Nastavení o mnoha krocích, kde by hotové kroky odsunuly ten rozdělaný pod okraj obrazovky. collapsible nechá z hotového kroku jen záhlaví, takže přehled zůstane přehled.

Krok, který se potvrzuje tlačítkem. Krok je hotový tehdy, když má, co potřebuje — tlačítko „Hotovo“ v patičce by zavedlo druhý stav, který s obsahem karty nesouvisí.
Průvodce, který ukazuje jen jednu obrazovku po druhé a předchozí krok zahodí. Tahle karta stojí na tom, že všechny kroky zůstávají vidět vedle sebe.
Obyčejné seskupení obsahu bez pořadí a bez stavu. Očíslované záhlaví a fajfka tam slibují postup, který ve skutečnosti neexistuje.
Zvýraznění chyby nebo varování. Karta zná jediný stav — hotovo, nebo ne; červené a oranžové hlášky patří dovnitř obsahu.

step: string — Pořadí kroku, dvojmístně („02“). Hotový krok ho nahradí fajfkou.
kicker: string — Řádek nad nadpisem — mono verzálky, typicky „Krok 02“.
title: ReactNode — Nadpis kroku. Co se v kroku nastavuje, ne co má uživatel udělat.
meta: ReactNode — Shrnutí za nadpisem — počet položek, jednotka („2 / 2 aktivní“). U sbalitelné karty je to jediné, co ze sbaleného kroku zbude.
done: boolean — Hotový krok. Přebarví záhlaví a vymění číslo za fajfku.
doneLabel: string — Přeložený popisek stavu pro odečítač („Hotovo“). Bez něj je fajfka němá.
collapsible: boolean — Přidá do záhlaví sbalovací tlačítko. Hotové kroky se sbalují samy — i ten, který se dokončí až na obrazovce.
toggleLabel: string — Přeložený popisek sbalovacího tlačítka („Sbalit krok“). Bez něj je tlačítko pro odečítač bezejmenné.
children: ReactNode — Tělo karty — typicky vnořená tabulka nebo seznam toho, co krok obsahuje.
footer: ReactNode — Patička pro přidání další položky, ne pro potvrzení kroku.
testId: string — Značka pro testy na kořeni karty.