NotificationShortcutCard
Something useful to do while waiting (Figma "Notification Shortcut Card" 2130:12389): a bell tile, two lines and a shortcut to the notification settings.
Inline on desktop: the text keeps at least 180 px and the action wraps under it when narrow; Stacked on phone.
<NotificationShortcutCard title="Enquanto espera, ajuste seus avisos" body="Escolha como a Dinda te avisa: push, e-mail ou os dois." action={<Button variant="outline" size="40">Ajustar avisos</Button>} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Notification Shortcut Card
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).
Layout · Inline
| Notification Shortcut Card |
|---|
Enquanto espera, ajuste seus avisos Escolha como a Dinda te avisa: push, e-mail ou os dois. |
Layout · Stacked
| Notification Shortcut Card |
|---|
Enquanto espera, ajuste seus avisos Escolha como a Dinda te avisa: push, e-mail ou os dois. |
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 |
|---|---|---|---|
| layout? | "inline" | "stacked" | "inline" | Figma Layout: Inline (desktop, action on the right) or Stacked (phone, full-width action). |
| title | string | — | Figma `title` ("Enquanto espera, ajuste seus avisos"). |
| body? | string | — | Figma `body`. |
| action? | ReactNode | — | Figma `showAction`: the Outline 40 link to the notification settings, e.g. `<Button variant="outline" size="40" render={<NextLink href="/conta/avisos" />}>Ajustar avisos</Button>`. |
| icon? | ReactNode | — | The tile icon; a bell by default. Decorative. |
| className? | string | — |
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.
EmailConfirmRow
Confirms which e-mail got the sign-in link or code (Figma "Email Confirm Row" 2056:47322), with "Trocar".