WeekStrip
A week of protection (Figma "Week Strip" 2056:59964): a name, the count and seven Day Tiles.
Small (440, desktop cards) and Medium (326, phone cards) stack the name above the days or, with layout="inline", put name, days and count on one line. Large (1000, the weekly summary) adds the person's figure and fills the row with 108 px day cards that wrap when narrow. Never shows message counts.
<WeekStrip size="small" label="Lia" count="7 de 7" aria-label="Semana da Lia" days={week} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Week Strip
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 · Small
| Layout | Week Strip |
|---|---|
| Stacked | Lia 7 de 7 |
| Inline | Lia 7 de 7 |
Size · Medium
| Layout | Week Strip |
|---|---|
| Stacked | Lia 7 de 7 |
| Inline | Lia 7 de 7 |
Size · Large
| Layout | Week Strip |
|---|---|
| Stacked | Lia 7 de 7 dias protegida
|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
DayTileProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| state | DayState | — | |
| size? | "large" | "medium" | "small" | null | "small" | |
| day? | string | — | Figma "day": the weekday letter on Small and Medium ("S"). |
| date? | string | — | Figma "date": the date line on Large ("SEG 12"). |
| word? | ReactNode | — | The word under the icon on Large ("Protegida", "Alerta · resolvido", "3 h fora · voltou", "Pausada"). |
| label | string | — | What a screen reader hears for this day ("segunda, 12: protegida"). Required: a letter alone says nothing. |
| className? | string | — |
WeekStripProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| size? | "large" | "medium" | "small" | null | "small" | |
| layout? | "inline" | "stacked" | null | "stacked" | |
| label? | ReactNode | — | Figma "label": whose week it is ("Lia"). |
| count? | ReactNode | — | Figma "count" ("7 de 7"); Large shows `summary` instead. |
| summary? | ReactNode | — | Figma "summary" on Large ("7 de 7 dias protegida"). |
| thumbnail? | ReactNode | — | Figma "thumbnail" on Large: a person figure, framed 96 px on lilac, e.g. `<PersonArt audience="teen" />`. |
| days | WeekStripDay[] | — | The seven days, Monday first. |
| className? | string | — |