Consent & billing
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.
Given is brand-tinted, Needs renewal warm-tinted; Declined ("Não aceitou por enquanto", minus) and Stopped ("Parou a proteção") use the same words as Protection Status. Never red.
<ConsentRosterRow status="pending" name="Lia Alves" avatarInitials="LA" statusLabel="Aguardando resposta" action={<Button variant="ghost" size="36">Copiar link</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Consent Roster Row
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).
Status · Given
| Consent Roster Row |
|---|
Lia AlvesAutorizou |
Status · Pending
| Consent Roster Row |
|---|
Lia AlvesAguardando resposta |
Status · Expired
| Consent Roster Row |
|---|
Lia AlvesO link venceu |
Status · Revoked
| Consent Roster Row |
|---|
Lia AlvesCancelou a autorização |
Status · Needs renewal
| Consent Roster Row |
|---|
Lia AlvesPrecisa autorizar de novoEnquanto isso, a conexão do WhatsApp dela espera. |
Status · Missing
| Consent Roster Row |
|---|
Lia AlvesAinda não enviamos |
Status · Declined
| Consent Roster Row |
|---|
Lia AlvesNão aceitou por enquanto |
Status · Stopped
| Consent Roster Row |
|---|
Lia AlvesParou a proteção |
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 |
|---|---|---|---|
| status | "declined" | "expired" | "given" | "missing" | "needs-renewal" | "pending" | "revoked" | "stopped" | — | Figma Status. |
| name | string | — | The person's name ("Lia Alves"). |
| avatarInitials | string | — | Initials in the warm avatar ("LA"). |
| statusLabel | string | — | The status words ("Autorizou", "Não aceitou por enquanto"): the icon only repeats them. |
| note? | string | — | A second line under the status (Needs renewal: what renewing holds up). |
| action? | ReactNode | — | The one action that fits (Copiar link, Reenviar, Como puxar a conversa): a Button with a label that works alone. |
| className? | string | — |