Backoffice
Timeline
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Timeline Item
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).
Tone · Neutral
| Position | Backoffice / Timeline Item |
|---|---|
| Middle |
|
| Last |
|
Tone · Ok
| Position | Backoffice / Timeline Item |
|---|---|
| Middle |
|
| Last |
|
Tone · Attention
| Position | Backoffice / Timeline Item |
|---|---|
| Middle |
|
| Last |
|
Tone · Critical
| Position | Backoffice / Timeline Item |
|---|---|
| Middle |
|
| Last |
|
Tone · Info
| Position | Backoffice / Timeline Item |
|---|---|
| Middle |
|
| Last |
|
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 |
|---|---|---|---|
| tone? | "attention" | "critical" | "info" | "neutral" | "ok" | "neutral" | Figma "Tone": the dot's colour. The title says what happened; the colour only echoes it. |
| position? | "last" | "middle" | "middle" | Figma "Position": Last ends the rail at the dot. |
| title | ReactNode | — | "Sessão caiu". |
| meta? | ReactNode | — | Figma "meta" (showMeta): "heartbeat parou · worker-02". |
| time | ReactNode | — | "14:32"; pass a `<time dateTime>` for the exact instant. |
| className? | string | — |
RevealField
A personal value shown masked until an operator reveals it with a reason (Figma "Backoffice / Reveal Field" 2058:52243): Masked, Focus, Revealed, No permission.
BalanceCard
A supplier's prepaid balance against the next renewal (Figma "Backoffice / Balance Card" 2058:55415): Ok, Shortfall, Stale.