# EventSpeaker

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

Palestrante de um evento: foto pequena (quando há), nome em negrito e cargo embaixo. É o `PessoaResumo` (E72) com o cargo — o mesmo primitivo do autor do BlogCard e do autor do depoimento.

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

<EventSpeaker name={…}>…</EventSpeaker>
```

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

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/EventSpeaker/0)
2. [Sem Foto](https://phorte-design-system.vercel.app/previa/EventSpeaker/1)
3. [Só nome](https://phorte-design-system.vercel.app/previa/EventSpeaker/2)
4. [Lista](https://phorte-design-system.vercel.app/previa/EventSpeaker/3)
5. [Texto Longo](https://phorte-design-system.vercel.app/previa/EventSpeaker/4)
6. [PessoaResumo nos dois fundos](https://phorte-design-system.vercel.app/previa/EventSpeaker/5)

Na página de um evento ou na programação, para dizer quem fala.

### Quando não usar

Para a equipe da instituição, com cartões, use o TeamGrid. Para vários rostos sem nome, o AvatarGroup.

### Faça

- Passe `jobTitle` com a credencial que importa para o evento ("Fisioterapeuta, doutora pela USP").
- Use em lista quando houver vários palestrantes.
- Para outra pessoa (autor, depoente), use o `PessoaResumo` direto: `linha`, `href` para o nome, `tamanho` (`sm`, `md`), `superficie` (`clara`, `escura`) e `nomeComo` (`h3` quando o nome abre um bloco).

### Evite

- Contar com as iniciais quando falta a foto: sem `avatar`, o círculo não aparece.

### Nota de uso

Passou a usar o `Avatar` do sistema em vez de um `<img>` próprio. Ganha o tratamento de imagem quebrada e para de duplicar o átomo, **mas a borda mudou de 1px `border` para 2px `surface`** — diferença pequena e real, declarada no commit. O avatar é `decorativo`: o nome está logo ao lado, em texto, e o leitor não precisa ouvi-lo duas vezes.

### Anatomia

1. **Foto** — Um Avatar `sm` (32px), decorativo — o nome está ao lado.
2. **Nome** — `text-sm` em negrito.
3. **Cargo** — `text-xs` cinza.

### Estados

| Estado | O que muda |
| --- | --- |
| Com foto | Avatar, nome e cargo. |
| Sem foto | Só nome e cargo, sem círculo. |
| Só nome | Sem cargo. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Foto que falha | O Avatar troca pelas iniciais do nome. |

### Relacionados

- [Avatar](https://phorte-design-system.vercel.app/styleguide/md/Avatar.md) — A foto que ele usa.
- [BlogCard](https://phorte-design-system.vercel.app/styleguide/md/BlogCard.md) — O autor do post, pelo mesmo `PessoaResumo`.
- [TeamGrid](https://phorte-design-system.vercel.app/styleguide/md/TeamGrid.md) — A equipe, em cartões.
- [EventSchedule](https://phorte-design-system.vercel.app/styleguide/md/EventSchedule.md) — A programação onde os palestrantes aparecem.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `name` | `string` | — | sim |  |
| `jobTitle` | `string` | — | não | Cargo do palestrante. Chamava-se `role`, e o `jsx-a11y` da E12 acusou: em JSX, `role` é o atributo ARIA, e o linter não tem como distinguir `role="Fisiologista"` de um papel ARIA inválido. Nem quem lê o código tem. Hoje o componente espalha props no DOM — o que só é seguro **porque** a prop mudou de nome. |
| `avatar` | `string` | — | não |  |

Aceita também: `React.HTMLAttributes<HTMLDivElement>`.

### Medidas

| Parte | Valor | Classe |
| --- | --- | --- |
| Foto | 32px | `size="sm"` |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `text-ink` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Sem `href`, nada recebe foco. Com `href` no PessoaResumo, o nome é um link, e é a única parada — conferido no teste da ficha. |
| Enter | Segue o link do nome. |

### Leitor de tela

- O `PessoaResumo` (E72) corrige os três de uma vez: a foto é decorativa em todos, e o nome pode ser cabeçalho ou link — conferido no teste da ficha.
- A foto é `decorativo`: o leitor diz o nome uma vez só, no texto.

### 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/molecules/EventSpeaker.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-eventspeaker--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

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/molecules/EventSpeaker.tsx