StatusPanel
The lifecycle card on a person's page (Figma "Status Panel" 2130:12171): Paused (muted), Connection (attention: the WhatsApp disconnected), Renewal (consent renewal), Stopped (the person asked to stop), Info (how it works) and Reconnected.
The state is the icon plus the overline word, never colour alone. Actions are full-width and stacked, primary first.
<StatusPanel kind="paused" overline="Pausada" title="A proteção da Marlene está pausada"
primaryAction={<Button variant="brand" size="48">Retomar a proteção</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Status Panel
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 · Paused
| Status Panel |
|---|
Pausada A proteção da Marlene está pausadaDurante a pausa, nenhuma mensagem é guardada nem analisada, e não chegam alertas. |
Kind · Connection
| Status Panel |
|---|
Sem conexão O WhatsApp da Marlene desconectouA proteção volta quando ela conectar de novo. Leva 2 minutos, com o celular dela na mão. |
Kind · Renewal
| Status Panel |
|---|
Renovação O aceite da Lia vence em 12 diasEla confirma de novo pelo link, no celular dela. Nada muda até lá. |
Kind · Stopped
| Status Panel |
|---|
Proteção encerrada A Lia pediu pra pararOs alertas pararam e a vaga ficou livre. O aceite e os alertas antigos são apagados em 30 dias. |
Kind · Info
| Status Panel |
|---|
Como funciona Você só recebe um alerta quando algo parece perigoO resto das conversas continua só dela. |
Kind · Reconnected
| Status Panel |
|---|
Conectada de novo O WhatsApp da Marlene voltou a conectarA proteção voltou hoje às 09:12. Ela não precisou fazer mais nada. |
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? | StatusPanelKind | "info" | Figma "Kind". |
| icon? | ReactNode | — | Replaces the kind's glyph (a lucide element). |
| overline | string | — | The overline word, "Pausada". With the icon it says the state. |
| title | string | — | Heading/4 title. |
| headingLevel? | 2 | 3 | 4 | 2 | Outline level of the title. |
| body? | string | — | Figma `showBody`. |
| primaryAction? | ReactNode | — | Figma "Primary action" (`showPrimaryAction`): a Button Brand 48. |
| secondaryAction? | ReactNode | — | Figma "Secondary action" (`showSecondaryAction`): a Button Outline 48. |
| children? | ReactNode | — | Figma "content" SLOT (`showContent`): steps, facts, a list. |
| className? | string | — |
PersonHeader
The top of a person's page (Figma "Person Page Header" 2058:62926): the figure on the state colour, relation, name, protection status, a calm description and up to two actions.
PersonCard
One protected person in the Família list and detail (Figma "Person Card" 2024:2880): avatar, name, protection status, the reason in one or two lines, the last check and an optional action.