Event
Em andamentoProgramação de um evento: região nomeada pelo título (titulo, padrão "Programação do Evento"), banner opcional, os dias num FilterGroup (quando há mais de um) e os horários num Accordion que permite abrir vários — cada item com hora, título, descrição, palestrante e tópicos.
- Função
- Eventos
- Também chamado de
- programação, cronograma, agenda do evento
- Mora em
- app/components/organisms/EventSchedule.tsx
- Última mudança
- 2026-09-29
Prévia
A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.
1280px, em tamanho real
Variantes na ficha
Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.
Quando usar
Na página de um evento, para o cronograma por dia e horário.
Faça
- Passe cada dia com um
datejá escrito para ler ("Sex, 5 de dezembro"): o componente mostra como veio. - Escreva a hora no
timee o assunto notitle. - Use
pointspara os tópicos de uma palestra.
Evite
- Data crua (
2026-12-05) no botão do dia: é o que aparece. - Um dia sem itens sem aviso — o componente mostra "Nenhuma programação disponível para este dia."
Quando não usar. Para a data de um evento só, use o EventDate. Para a trajetória em anos, o TimelineItem. Para perguntas, o FAQ.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Banner — Imagem opcional no topo.
- Título — `titulo` (`h2`) e `descricao` (E76; eram fixos). O título nomeia a região.
- Dias — O FilterGroup do sistema, "Dias do evento" (E76): pílulas num grupo de rádio, quando há mais de um dia.
- Horários — Um Accordion com `allowMultiple`: a hora como subtítulo e o título do item.
Estados
Os estados que a peça tem no código, e o que muda em cada um.
| Estado | O que muda |
|---|---|
| Dia escolhido | Pílula vermelha com o visto, aria-checked="true" (o estado deixou de ser só a cor). |
| Outro dia | Pílula com a borda de controle; no hover, fundo --muted. |
| Um dia só | Sem os botões de dia. |
| Dia sem itens | Aviso em itálico: "Nenhuma programação disponível para este dia." |
Comportamento
| Situação | O que acontece |
|---|---|
| Trocar de dia | Mostra os horários daquele dia — medido. |
| Abrir horários | Vários podem ficar abertos ao mesmo tempo (allowMultiple). |
Relacionados
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import { EventSchedule } from '@/app/components/organisms/EventSchedule';
<EventSchedule days={…}>…</EventSchedule>Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
days | ScheduleDay[] | — | sim | — |
bannerImage | string | — | não | — |
titulo | string | 'Programação do Evento' | não | Título da seção (E76): era fixo. |
descricao | string | 'Confira o cronograma completo e prepare-se para uma experiência transformadora.' | não | Frase abaixo do título. Sem ela, só o título. |
Aceita também: React.HTMLAttributes<HTMLElement>.
Tokens de cor
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--border | #E5E5E5 | border-border |
--card | #FFFFFF | bg-card |
--muted-foreground | #595959 | text-muted-foreground |
--primary | #D42B2B | text-primary |
Teclado
| Tecla | Faz |
|---|---|
| Tab | Uma parada nos dias (o dia escolhido) e depois os horários do dia — como num grupo de rádio. |
| ←→HomeEnd | Nos dias, anda e troca o dia (E76) — testado na ficha. |
| EnterEspaço | Num horário, abre ou fecha — medido. |
Leitor de tela
O que é anunciado, e por quê.
- Cada horário é um cabeçalho de nível 3 com o botão dentro, como no Accordion.
O que sustenta o estado
Esta peça usa estatico. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.
Falta ouvir: estatico — ver docs/a11y-screen-reader-checklist.md.
Achados abertos
Defeitos conhecidos, com o que falta fazer.
- A ficha mostra a data crua. As histórias passam
2026-12-05como nome do dia, e é isso que o botão mostra (medido).
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/EventSchedule.tsx | Disponível |
| Ficha | Storybook (abre em outra aba) | Disponível |
| Teste de acessibilidade | axe em npm run test | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |
Histórico
Os últimos commits que tocaram o arquivo, lidos do git no build.
fdd10ff2026-09-29ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
O histórico completo está no GitHub (abre em outra aba).