Feedback
ProgressTrack
A person's way to protection in three steps (Figma "Progress Track" 2022:2560): done steps get a check, the current one its number or its outcome (waiting, declined, failed) plus a note in words.
Use it on setup and person cards; it is an ordered list with aria-current="step".
<ProgressTrack step="connection" steps={["Autorização", "Conexão", "Protegendo"]} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Progress Track
string
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Step · Autorização
| Status | Progress Track |
|---|---|
| Default |
|
| Waiting |
|
| Declined |
|
| Failed |
|
Step · Conexão
| Status | Progress Track |
|---|---|
| Default |
|
| Waiting |
|
| Failed |
|
Step · Protegendo
| Status | Progress Track |
|---|---|
| Default |
|
Step · Concluído
| Status | Progress Track |
|---|---|
| Default |
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| step? | "connection" | "consent" | "done" | "protecting" | "consent" | The current step (Figma Step: Autorização, Conexão, Protegendo, Concluído). |
| status? | ProgressTrackStatus | "default" | How the current step is going; anything but default needs a `note`. |
| steps | [ReactNode, ReactNode, ReactNode] | — | The three step names, in order ("Autorização", "Conexão", "Protegendo"). |
| note? | ReactNode | — | The word under the current step: "Esperando o sim", "Link venceu"… |
| className? | string | — |