SeConectai_Web/Schema/06-botao-ajuda-popup.md

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