30 lines
2.2 KiB
Markdown
30 lines
2.2 KiB
Markdown
# 06 — Botão Ajuda com popup por pergunta
|
|
|
|
## Contexto do projeto (leia sempre)
|
|
Sistema web "Briefing de Site" da SeConectai: o cliente se cadastra e depois preenche o briefing de criação do site, com um botão **Ajuda** em cada pergunta que abre um popup com o texto do guia auxiliar. O dono (Tiago) acompanha tudo por um painel admin.
|
|
**Stack fixa:** Next.js 14+ (App Router) + TypeScript, PostgreSQL 16, Prisma, Tailwind + shadcn/ui, React Hook Form + Zod, Auth.js v5 (Credentials, estratégia JWT), Docker Compose. Idioma da interface: pt-BR.
|
|
**Regras gerais:** leia `00-arquitetura-briefing-site.md` e `99-progresso.md` antes de começar; não avance se a etapa anterior estiver incompleta; ao terminar, devolva o `99-progresso.md` atualizado. Não invente dependências fora da stack. Nada de senhas de clientes em lugar nenhum.
|
|
|
|
## Pré-requisito
|
|
Etapa 05 concluída.
|
|
|
|
## Tarefa
|
|
Criar `components/ajuda/AjudaButton.tsx` e usá-lo em **toda** pergunta que tenha `ajuda`:
|
|
- Botão pequeno ao lado do rótulo: ícone `HelpCircle` + texto "Ajuda" (o texto some só em telas muito estreitas, mantendo `aria-label="Ajuda sobre: {rotulo}"`).
|
|
- Ao clicar, abre um `Dialog` (shadcn) com:
|
|
- **Título:** o `rotulo` da pergunta.
|
|
- **O que responder** — `oQueResponder`
|
|
- **Por que perguntamos** — `porQuePerguntamos`
|
|
- **Mini exemplo** — `miniExemplo`, em caixa destacada, com aviso fixo: "Os exemplos servem apenas como referência. Substitua pelas informações reais da sua empresa."
|
|
- Rodapé: botão Fechar; opcional "Usar 'Não se aplica'" / "Usar 'A definir'" que preenche o campo e fecha o popup (apenas em campos de texto).
|
|
- Acessibilidade: foco preso no diálogo, fecha com Esc e clique fora, foco volta ao botão, leitura por leitor de tela.
|
|
- Dados de ajuda já vêm junto da estrutura (consulta única da etapa 03); não fazer requisição por clique.
|
|
- Se a pergunta não tiver ajuda, não renderizar o botão.
|
|
|
|
## Critérios de aceite
|
|
- [ ] Todas as 149 perguntas exibem o botão e abrem o texto correto do guia (conferir por amostragem de pelo menos 1 pergunta por seção).
|
|
- [ ] Popup funciona em celular e desktop, com teclado e leitor de tela.
|
|
- [ ] Abrir/fechar o popup não perde o que foi digitado no campo.
|
|
|
|
Atualize `99-progresso.md` (06).
|