PlanSeatRow
One protected person = one seat (Figma "Plan Seat Row" 2058:60841, Seat Row v2) in "Quem está no plano": avatar, name, relationship, monthly price, Protection Status and, on Trial, "Grátis até …" counted from the connection.
One surface with dividers, never card in card. Put rows in a <ul> as <li> children.
<PlanSeatRow billing="trial" name="Marlene Rocha" relationship="Sua sogra · 76 anos" price="R$ 29,90/mês" avatarInitials="MR" trialBadge="Grátis até 25/12" status={<ProtectionStatus status="protecting" size="sm" />} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Plan Seat 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).
Billing · Paying
| Plan Seat Row |
|---|
Lia Alves R$ 19,90/mês Sua filha · 14 anos Protegendo |
Billing · Trial
| Plan Seat Row |
|---|
Marlene Rocha R$ 29,90/mês Sua sogra · 76 anos ProtegendoGrátis até 25/12 7 dias grátis contando da conexão, em 26/11. Depois, ela entra na sua fatura do dia 25. |
Billing · Not billed
| Plan Seat Row |
|---|
Lia Alves Sem cobrança Sua filha · 14 anos Não aceitou Só entra na fatura depois de aceitar e conectar. |
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 |
|---|---|---|---|
| billing? | PlanSeatBilling | "paying" | Figma "Billing": drives the price colour; the words carry the meaning. |
| name | string | — | Person's name ("Lia Alves"). |
| relationship | string | — | Relationship and age ("Sua filha · 14 anos"). |
| price | string | — | Monthly price as text ("R$ 19,90/mês", "Sem cobrança"). |
| avatarInitials | string | — | Initials in the brand avatar. |
| status? | ReactNode | — | The Protection Status chip (feedback family), an exposed instance in Figma. |
| trialBadge? | string | — | Trial chip words ("Grátis até 25/12"), Billing=Trial. |
| note? | ReactNode | — | Small note under the chips (trial from the connection, not billed yet). |
| showDivider? | boolean | true | Figma `showDivider`: off for the last row of the list. |
| className? | string | — |
PriceImpact
What a change does to the monthly invoice (Figma "Price Impact" 2058:60780), before the person commits: add-person step 1, its review and cancel one person.
InvoiceRow
A row of the Faturas list (Figma "Invoice Row" 2058:60906): date, what it covers, amount, a status chip (icon + word) and the action that fits.