Protection
TimelineItem
One event of a person's protection history (Figma "Timeline Item" 2058:52517, Kind × 7): a 32 px dot with the kind's icon on its role colour, a 2 px connector, title and meta.
Renders an <li>: put it in Timeline.Root.
<Timeline.Item kind="paused" title="Você pausou a proteção por 1 dia" meta="sábado, 18/10 · 14:30" showConnector={false} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Timeline Item
string
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).
Kind · Protected
| Timeline Item |
|---|
|
Kind · Alert
| Timeline Item |
|---|
|
Kind · Resolved
| Timeline Item |
|---|
|
Kind · Paused
| Timeline Item |
|---|
|
Kind · Disconnected
| Timeline Item |
|---|
|
Kind · Reconnected
| Timeline Item |
|---|
|
Kind · Consent
| Timeline Item |
|---|
|
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 |
|---|---|---|---|
| kind | TimelineKind | — | |
| title | string | — | Figma "title": what happened, as a sentence (the meaning is in words, the dot colour only repeats it). |
| meta? | string | — | Figma "meta": when ("quarta, 24/09 · 10:12"). |
| showConnector? | boolean | true | Figma "showConnector": the 2 px line down to the next item. Off on the last. |
| className? | string | — |