# EventSchedule

> Componentes / Eventos · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Programaçã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`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/EventSchedule](https://phorte-design-system.vercel.app/styleguide/peca/EventSchedule)
- Ficha no Storybook: [components-complex-eventschedule](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventschedule--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/EventSchedule/0](https://phorte-design-system.vercel.app/previa/EventSchedule/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { EventSchedule } from '@/app/components/organisms/EventSchedule';

<EventSchedule days={…}>…</EventSchedule>
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/EventSchedule/0)
2. [Um Dia](https://phorte-design-system.vercel.app/previa/EventSchedule/1)
3. [Com Banner](https://phorte-design-system.vercel.app/previa/EventSchedule/2)
4. [Texto Longo](https://phorte-design-system.vercel.app/previa/EventSchedule/3)

Na página de um evento, para o cronograma por dia e horário.

### 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.

### Faça

- Passe cada dia com um `date` já escrito para ler ("Sex, 5 de dezembro"): o componente mostra como veio.
- Escreva a hora no `time` e o assunto no `title`.
- Use `points` para 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."

### Anatomia

1. **Banner** — Imagem opcional no topo.
2. **Título** — `titulo` (`h2`) e `descricao` (E76; eram fixos). O título nomeia a região.
3. **Dias** — O FilterGroup do sistema, "Dias do evento" (E76): pílulas num grupo de rádio, quando há mais de um dia.
4. **Horários** — Um Accordion com `allowMultiple`: a hora como subtítulo e o título do item.

### Estados

| 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

- [Accordion](https://phorte-design-system.vercel.app/styleguide/md/Accordion.md) — O acordeão dos horários.
- [EventSpeaker](https://phorte-design-system.vercel.app/styleguide/md/EventSpeaker.md) — Quem fala em cada horário.
- [EventDate](https://phorte-design-system.vercel.app/styleguide/md/EventDate.md) — A data de um evento.

## Especificação

### Propriedades

| 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

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--card` | #FFFFFF | `bg-card` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Uma parada nos dias (o dia escolhido) e depois os horários do dia — como num grupo de rádio. |
| ← / → / Home / End | Nos dias, anda e troca o dia (E76) — testado na ficha. |
| Enter / Espaço | Num horário, abre ou fecha — medido. |

### Leitor de tela

- Cada horário é um cabeçalho de nível 3 com o botão dentro, como no Accordion.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

### Achados abertos

- **A ficha mostra a data crua.** As histórias passam `2026-12-05` como 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 | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventschedule--docs | 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

- `fdd10ff` 2026-09-29 — ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/EventSchedule.tsx