Consent & billing
InfoBlock
One idea per block on the consent intro (Figma "Info Block" 189:1684).
Points and Paragraph sit on the muted surface with a title; Calm note (heart-handshake: "you can stop here") and Privacy note (lock: what is kept, why and until when) sit on the lilac calm surface. One surface, no card in a card.
<InfoBlock content="points" title="O que a Mariana recebe" points={["Só um alerta, com o trecho e quem mandou.", "Nada mais."]} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Info Block
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).
Content · Points
| Info Block |
|---|
O que a Mariana recebe
|
Content · Paragraph
| Info Block |
|---|
Por que pedir sua autorizaçãoSeu WhatsApp é seu. Sem o seu sim, a Superdinda não analisa nada. |
Content · Calm note
| Info Block |
|---|
Se alguém está te pressionando pra aceitar, você pode parar aqui. A Mariana só vai saber que você não aceitou por enquanto. |
Content · Privacy note
| Info Block |
|---|
Sua foto e sua voz ficam criptografadas, só como prova do seu sim, e são apagadas 6 meses depois que a proteção parar. |
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 |
|---|---|---|---|
| content? | "calm" | "paragraph" | "points" | "privacy" | "points" | Figma "Content": Points (2–4 Consent Points), Paragraph, Calm note (heart-handshake, the pressure exit) or Privacy note (lock). |
| title? | string | — | Block title (Points, Paragraph). |
| points? | ReactNode[] | — | Content=Points: 2–4 points (Figma showPoint3 / showPoint4). |
| icon? | ReactNode | — | Replaces the note icon (Calm, Privacy); decorative. |
| className? | string | — | |
| children? | ReactNode | — | Paragraph text, or the note's body. |