# NewsletterStrip

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

Faixa escura de campanha para captar e-mails: a partir de 1024px, o título e a frase à esquerda e o formulário à direita — o campo de e-mail (rótulo só para o leitor), o botão e a linha de privacidade. Ligada por `onSubmit` (E73, decisão de 2026-09-28); estrutura refeita na revisão 3 (E131).

- Função: Campanha (marketing)
- Também chamado de: newsletter de campanha, captação de e-mail, inscrição por e-mail
- Mora em: `app/components/organisms/marketing/NewsletterStrip.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/NewsletterStrip](https://phorte-design-system.vercel.app/styleguide/peca/NewsletterStrip)
- Ficha no Storybook: [marketing-newsletterstrip](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-newsletterstrip--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/NewsletterStrip/0](https://phorte-design-system.vercel.app/previa/NewsletterStrip/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 { NewsletterStrip } from '@/app/components/organisms/marketing/NewsletterStrip';

<NewsletterStrip />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/NewsletterStrip/0)
2. [Sem envio](https://phorte-design-system.vercel.app/previa/NewsletterStrip/1)
3. [Com textos próprios](https://phorte-design-system.vercel.app/previa/NewsletterStrip/2)

No fim de uma página de campanha, para captar a inscrição.

### Quando não usar

Na página inicial, com consentimento e ilustração, use a Newsletter. Para um contato com mensagem, o ContactForm.

### Faça

- Passe `onSubmit`: ele recebe o e-mail. **Sem ele, o formulário não aparece** — só a chamada.
- Faça o `onSubmit` lançar erro quando o serviço falhar: o componente diz que não conseguiu.
- Troque os textos pela campanha: `titulo`, `descricao`, `rotuloDoBotao` e `avisoDePrivacidade` (E131). A linha de privacidade diz a frequência e que dá para cancelar.

### Evite

- Tirar o rótulo escondido: o desenho não mostra rótulo, e o placeholder some ao digitar.

### Anatomia

1. **Chamada** — Título (h2) claro e a frase em `--ink-inverse-muted`: centrados no celular, à esquerda a partir de 1024px. A faixa sobe 20px ao entrar (só com movimento liberado).
2. **E-mail** — FormField com a legenda "E-mail" `sr-only` e o Input claro sobre o escuro, `autocomplete="email"`.
3. **Inscrever-se** — Button primário grande, com o texto de `rotuloDoBotao`.
4. **Privacidade** — A linha embaixo do campo, 14px, `--ink-inverse-muted`.
5. **Retorno** — Parágrafo `role="status"`, claro, que recebe o foco depois do envio.

### Estados

| Estado | O que muda |
| --- | --- |
| Sem `onSubmit` | Só a chamada, centrada — testado na ficha. |
| A partir de 1024px | Duas colunas: o texto à esquerda, o formulário à direita — até a revisão 3 o texto ficava à esquerda e o formulário no centro. |
| Erro | E-mail vazio ou sem @: o erro embaixo do campo, que fica `aria-invalid` — conferido no teste da ficha. |
| Enviando | O botão em `isLoading` ("Enviando inscrição…"). |
| Enviado | "Inscrição feita! As novidades vão chegar em <e-mail>." com o foco. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Inscrever-se com e-mail válido | Chama `onSubmit` com o e-mail e leva o foco ao retorno — conferido no teste da ficha. |

### Relacionados

- [Newsletter](https://phorte-design-system.vercel.app/styleguide/md/Newsletter.md) — A seção da página inicial, com a mesma lógica de envio.
- [ContactForm](https://phorte-design-system.vercel.app/styleguide/md/ContactForm.md) — Para contato com mensagem.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `onSubmit` | `(email: string) => void \| Promise<void>` | — | não | Recebe o e-mail e faz a inscrição (E73, decisão de 2026-09-28: ligar por prop). **Sem ela, o formulário não aparece** — era um "Inscrever-se" que não enviava nada nem dava retorno. |
| `titulo` | `string` | `'Pronto para acelerar sua carreira?'` | não | Título da faixa (E131). |
| `descricao` | `string` | `'Receba toda semana as novidades dos cursos, eventos e bolsas, direto no seu e-mail.'` | não | O que a pessoa recebe, numa frase. |
| `rotuloDoBotao` | `string` | `'Inscrever-se'` | não | Texto do botão (padrão "Inscrever-se"). |
| `avisoDePrivacidade` | `string` | `'Sem spam. Cancele quando quiser.'` | não | A linha de privacidade embaixo do campo (padrão "Sem spam. Cancele quando quiser."). |

### Tokens de cor

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

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelo campo e por "Inscrever-se". |
| Enter | No campo ou no botão, envia. |

### Leitor de tela

- O campo é nomeado pela legenda "E-mail" escondida (`sr-only`) e o erro fica ligado a ele pelo FormField.
- O foco do campo é a borda clara de 2px: o cinza de foco sumiria sobre o escuro.

### O que sustenta o estado

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

## Status e recursos

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