ComprehensionCheck
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Comprehension Check / Option
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).
Size · Default
| Default | Hover | Focus | Pressed | Selected | Disabled |
|---|---|---|---|---|---|
Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios |
Size · Large
| Default | Hover | Focus | Pressed | Selected | Disabled |
|---|---|---|---|---|---|
Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios | Todas as minhas conversasMensagens, fotos e áudios |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
ComprehensionCheckRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| question | string | — | Figma `question`: names the radio group ("O que a Mariana recebe?"). |
| helper? | string | — | Figma `helper`: the line under the question. |
| value? | Value | null | — | Controlled answer. `null` while unanswered. |
| defaultValue? | Value | null | null | Uncontrolled initial answer. |
| onValueChange? | ((value: Value) => void) | — | |
| size? | ComprehensionCheckSize | "default" | Size of every Option inside (Large on the older-adult track). |
| className? | string | — | |
| children | ReactNode | — | The Options, then the Feedback once answered. |
ComprehensionCheckOptionProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | string | — | The answer's value in the group. |
| icon | ReactNode | — | Figma `icon` (INSTANCE_SWAP): a lucide element; decorative. |
| title | string | — | Figma `title`: the answer. |
| hint? | string | — | Figma `hint`: the line under it. |
| size? | ComprehensionCheckSize | — | Figma Size; defaults to the Root's. |
| className? | string | — |
ComprehensionCheckFeedbackProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| result | "correct" | "incorrect" | — | Figma Result. Incorrect is attention-subtle, never red, never blocks. |
| className? | string | — | |
| children | ReactNode | — | The message (an override per result in Figma). |
ConsentOutcome
The end of the consent flow, for good or not (Figma "Consent Outcome" 191:1936): an icon badge that pops in once, the title, what happens from here and, when there is something to do, a brand action with an optional ghost secondary.
ReviewItem
One proof on the "Confira e envie" review step (Figma "Review Item" 2056:57028): Photo (thumb + "Tirar outra"), Voice (Audio Player + "Gravar de novo") and Phrase (the exact versioned consent text).