# EventCard

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

Cartão de evento — congresso, live, encontro: imagem, a etiqueta do tipo (ou "Ao vivo agora", ou encerrado), data e duração, título, palestrante, descrição e a chamada, que muda com o estado: "Saiba mais", "Assistir agora" ou "Ver gravação". Sobre o Card: o link é o título, estendido sobre o cartão (E68).

- Função: Eventos
- Também chamado de: cartão de evento, card de evento, live, webinar
- Mora em: `app/components/organisms/EventCard.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/EventCard](https://phorte-design-system.vercel.app/styleguide/peca/EventCard)
- Ficha no Storybook: [components-complex-eventcard](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventcard--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/EventCard/0](https://phorte-design-system.vercel.app/previa/EventCard/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 { EventCard } from '@/app/components/organisms/EventCard';

<EventCard id={…} title={…} description={…} date={…} image={…} type={…}>…</EventCard>
```

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

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/EventCard/0)
2. [Ao Vivo](https://phorte-design-system.vercel.app/previa/EventCard/1)
3. [Encerrado](https://phorte-design-system.vercel.app/previa/EventCard/2)
4. [Link Externo](https://phorte-design-system.vercel.app/previa/EventCard/3)
5. [Mínimo](https://phorte-design-system.vercel.app/previa/EventCard/4)
6. [Texto Longo](https://phorte-design-system.vercel.app/previa/EventCard/5)
7. [Esqueleto](https://phorte-design-system.vercel.app/previa/EventCard/6)

Em grades e listas de eventos, na página de eventos e em destaques da página inicial.

### Quando não usar

Para o destaque de topo da página de eventos, com slides, use o HeroCarousel. Para a programação de um evento, o EventSchedule. Para curso, o CourseCard.

### Faça

- Enquanto os dados chegam, mostre o `EventCardEsqueleto` (E157) — um por cartão esperado, dentro de um `EsqueletoGrupo rotulo="Carregando eventos"` —, e troque o grupo inteiro pelos cartões quando chegarem.
- Passe `status="live"` só durante a transmissão, e `"closed"` quando houver gravação — o tipo só aceita `live`, `closed` e `open` (E68).
- Use `external` quando o link sair do site: abre em outra aba e o link avisa.
- Passe `date` em formato que o `Date` entenda (ISO): o EventDate formata em pt-BR.

### Evite

- Pôr outro link ou botão dentro do cartão: a área do link do título o cobre.
- `status="live"` num evento que ainda não começou.

### Anatomia

1. **Cartão** — O Card `interactive` como `<article>` (E68).
2. **Imagem** — Decorativa (`alt=""`, E68 — repetia o título); aproxima no hover, com movimento liberado.
3. **Etiqueta** — Uma Tag: o tipo (`default`), "Ao vivo agora" (`live`) ou o tipo em cinza (`closed`).
4. **Data** — O EventDate (E68): calendário, a data num `<time>` e a duração.
5. **Título** — `h3` de até duas linhas, com o `CardLink`.
6. **Palestrante e descrição** — O EventSpeaker (E68) e a descrição, de até duas linhas.
7. **Chamada** — Texto com seta, preso embaixo, `aria-hidden`.

### Estados

| Estado | O que muda |
| --- | --- |
| Carregando | O `EventCardEsqueleto` (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (`aria-hidden`); o grupo diz "Carregando eventos" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura. |
| Próximo | Etiqueta vermelha com o tipo; chamada "Saiba mais". |
| Ao vivo | `status="live"`: etiqueta "Ao vivo agora" com o ponto pulsante; chamada "Assistir agora". |
| Encerrado | `status="closed"`: etiqueta cinza, chamada "Ver gravação" e, no hover, um véu com o ícone de play. |
| Foco | O anel de foco do cartão, só no teclado. |
| Hover | Sombra maior, imagem aproxima, título vermelho. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Sem `link` | Leva a `/eventos/live/<id>`. |
| `external` | Abre em outra aba (`rel="noopener noreferrer"`) e o nome do link termina em "(abre em nova aba)" — conferido no teste da ficha. |
| Data que o `Date` não entende | O EventDate mostra o texto como veio. |

### Relacionados

- [Card](https://phorte-design-system.vercel.app/styleguide/md/Card.md) — A superfície e o `CardLink`.
- [EventDate](https://phorte-design-system.vercel.app/styleguide/md/EventDate.md) — Data e duração, com `<time>`.
- [EventSpeaker](https://phorte-design-system.vercel.app/styleguide/md/EventSpeaker.md) — O palestrante.
- [HeroCarousel](https://phorte-design-system.vercel.app/styleguide/md/HeroCarousel.md) — O destaque de topo dos eventos.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `id` | `number \| string` | — | sim |  |
| `title` | `string` | — | sim |  |
| `description` | `string` | — | sim |  |
| `date` | `string` | — | sim |  |
| `image` | `string` | — | sim |  |
| `type` | `string` | — | sim |  |
| `link` | `string` | — | não | Destino. Padrão `/eventos/live/<id>`. |
| `external` | `boolean` | `false` | não | O destino é de fora: abre em outra aba, e o link avisa (E68). |
| `speaker` | `string` | — | não |  |
| `duration` | `string` | — | não |  |
| `status` | `'live' \| 'closed' \| 'open'` | `'open'` | não | Tipado desde a E68: com `string`, `status="Live"` ou `"encerrado"` passava sem erro, e o cartão caía em silêncio no visual de evento aberto. |

Aceita também: `Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'id'>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Uma parada por cartão: o link do título — conferido no teste da ficha. |
| Enter | Abre o evento (em outra aba, se `external`). |

### Leitor de tela

- O nome do link é o título (mais o aviso de nova aba, no externo) — conferido no teste da ficha. Antes era o texto inteiro do cartão, com o título duas vezes.
- A etiqueta "Ao vivo agora" diz o estado em texto; o ponto pulsante e o véu de play são decorativos.

### O que sustenta o estado

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

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/EventCard.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventcard--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

- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/EventCard.tsx