SetupDependentRow
One person in the setup list (Figma "Setup Dependent Row" 186:1475): a selectable row with the warm avatar, the name and the status chips.
A native button with aria-pressed for the selected row.
<SetupDependentRow state="consented" name="Lia Alves" avatarInitials="LA" status={<Badge tone="ok" icon={<Check />}>Autorizou</Badge>} selected onClick={open} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Setup Dependent Row
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).
| Pending | Consented | Connected | Selected | Declined |
|---|---|---|---|---|
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 |
|---|---|---|---|
| state | "connected" | "consented" | "declined" | "pending" | — | Figma State (domain): where the person is on the way to protection. |
| selected? | boolean | false | Figma State=Selected: the row whose details are open (aria-pressed). |
| name | string | — | The person's name. |
| avatarInitials | string | — | Initials in the warm avatar. |
| status? | ReactNode | — | The chips under the name (icon + word each). Declined shows a single "Não aceitou" chip; the person is shown but not counted. |
| className? | string | — |
ConsentRosterRow
One person in the consent roster on the guardian setup (Figma "Consent Roster Row" 186:1743): avatar, name, the status as icon + words and the one action that fits.
SetupPersonCard
One person during setup and connect (Figma "Setup Person Card" 2137:11156): avatar, name, age and phone, the Protection Status chip, the Progress Track, two lines of status copy and the actions.