# FAQ

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

Seção "Dúvidas Frequentes": título e descrição centrados, as perguntas num Accordion e, com `hrefTodasAsPerguntas`, o link "Ver todas as perguntas", em tema escuro (padrão) ou claro. Vem com quatro perguntas de exemplo.

- Função: Conteúdo
- Também chamado de: perguntas frequentes, dúvidas, faq
- Mora em: `app/components/organisms/FAQ.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/FAQ](https://phorte-design-system.vercel.app/styleguide/peca/FAQ)
- Ficha no Storybook: [components-complex-faq](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-faq--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/FAQ/0](https://phorte-design-system.vercel.app/previa/FAQ/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 FAQ from '@/app/components/organisms/FAQ';

<FAQ>…</FAQ>
```

## Uso

### Variantes na ficha

1. [Escuro](https://phorte-design-system.vercel.app/previa/FAQ/0)
2. [Claro](https://phorte-design-system.vercel.app/previa/FAQ/1)
3. [Sem destino](https://phorte-design-system.vercel.app/previa/FAQ/2)

Perto do fim de uma página de curso ou da página inicial, para responder o que o candidato pergunta antes de se inscrever.

### Quando não usar

Para recolhíveis dentro de outro conteúdo, sem título de seção, use o Accordion. Para a grade curricular, o CurriculumAccordion.

### Faça

- Passe as `perguntas` reais do curso: sem elas, entram as quatro de exemplo.
- Escreva cada pergunta como o candidato perguntaria.
- Use `tema="claro"` quando a seção anterior já for escura.
- Passe `hrefTodasAsPerguntas` quando houver uma página de dúvidas; sem ele, a seção termina no acordeão.

### Evite

- Publicar com as perguntas de exemplo.
- Mais de oito ou dez perguntas: aí é uma página de dúvidas.

### Anatomia

1. **Seção** — `<section>` com fundo `--ink` (escuro) ou `--background` (claro), até 800px de largura.
2. **Título** — Um SectionTitle centrado: "Dúvidas Frequentes" e a descrição.
3. **Perguntas** — Um Accordion, uma pergunta aberta por vez.
4. **Ver todas** — Só com `hrefTodasAsPerguntas` (E74): Button `outline` com `href`, redondo; branco no escuro.

### Estados

| Estado | O que muda |
| --- | --- |
| Escuro | Padrão: fundo `--ink`, título branco, acordeão escuro com anel de foco claro. |
| Claro | Fundo `--background`, título `--ink`, acordeão claro. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Abrir uma pergunta | Fecha a que estava aberta (o Accordion sem `allowMultiple`). |
| "Ver todas as perguntas" | Leva ao `hrefTodasAsPerguntas`; sem a prop, não aparece (E74, decisão de 2026-09-28) — testado na ficha. |

### Relacionados

- [Accordion](https://phorte-design-system.vercel.app/styleguide/md/Accordion.md) — O acordeão que ele usa.
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md) — O título da seção.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `tema` | `TemaDoAcordeao` | `'escuro'` | não | Padrão `escuro`, que é como a peça sempre foi — ninguém muda sem querer. |
| `perguntas` | `PerguntaFrequente[]` | `PERGUNTAS_PADRAO` | não |  |
| `titulo` | `string` | `'Dúvidas Frequentes'` | não |  |
| `descricao` | `string` | `'Tudo o que você precisa saber sobre a Phorte.'` | não |  |
| `hrefTodasAsPerguntas` | `string` | — | não | Destino de "Ver todas as perguntas" (E74). Sem ele o botão não aparece: era um botão sem ação numa peça que, fora isso, estava pronta. |

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

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `bg-ink`, `text-ink` |
| `--background` | #FAFAFA | `bg-background` |
| `--border` | #E5E5E5 | `bg-border` |
| `--card` | #FFFFFF | `bg-card` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelas quatro perguntas e, com a prop, por "Ver todas as perguntas" — medido. |
| Enter / Espaço | Abre ou fecha a pergunta em foco (ver Accordion). |

### Leitor de tela

- Cada pergunta é um cabeçalho de nível 3 com o botão dentro: o leitor pula de pergunta em pergunta pela tecla H.
- A seção é uma região nomeada pelo título ("Dúvidas Frequentes"), pelo `idDoTitulo` do SectionTitle (E76).

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