Pular para o conteúdo
Faculdade PhorteDesign System

Newsletter

Em andamento

Seção de assinatura da newsletter: chamada, o e-mail num FormField, o consentimento no Checkbox com o link da Política de Privacidade e o botão verde "Assinar gratuitamente", com uma ilustração ao lado. Ligada por onSubmit (E73, decisão de 2026-09-28).

Função
Institucional
Também chamado de
newsletter, assinar, captação de e-mail, inscrição por e-mail
Mora em
app/components/organisms/Newsletter.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Sem envio

Quando usar

Perto do fim da página inicial ou de um artigo, para captar a assinatura.

Faça

  • Passe onSubmit: ele recebe o e-mail e faz a assinatura. 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 mostra "Não conseguimos assinar agora".

Evite

  • Um formulário "de mentira" para a vitrine: a prop existe para que não haja botão que não envia.

Quando não usar. Numa página de campanha, em faixa escura, use a NewsletterStrip. Para um contato com mensagem, o ContactForm.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Chamada — Chapéu verde, título e a frase de apoio.
  2. E-mail — FormField "E-mail" (obrigatório) com o Input, `autocomplete="email"`.
  3. Consentimento — O Checkbox do sistema, opcional, com o link para a Política de Privacidade no rótulo.
  4. Assinar — Button `secondary` (o verde de interface), na largura toda.
  5. Retorno — Parágrafo `role="status"`, que recebe o foco depois do envio.
  6. Ilustração — Decorativa (`alt=""`), à direita a partir de 768px.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Sem `onSubmit`Só a chamada e a ilustração: nada de formulário.
ErroE-mail vazio ou sem @: o erro em pt-BR embaixo do campo, que fica aria-invalid — conferido no teste da ficha.
EnviandoO botão em isLoading ("Assinando…"), focável.
Enviado"Pronto! A newsletter vai chegar em <e-mail>." no retorno, com o foco nele.
Falhou"Não conseguimos assinar agora. Tente de novo em alguns minutos."

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Assinar com e-mail válidoChama onSubmit com o e-mail e leva o foco ao retorno — conferido no teste da ficha. A página não recarrega.
Clique no link da políticaAbre a política e não marca a caixa: o label não ativa o controle quando o clique é num link (é o HTML) — conferido no teste da ficha.

Relacionados