# PromoMarquee

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

Faixa promocional que rola sozinha, com mensagens em caixa alta separadas por pontos, e um botão de pausa. Recebe as mensagens, o `tema` (primário, secundário ou escuro) e o `rotulo` da região.

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

<PromoMarquee />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/PromoMarquee/0)
2. [Em verde](https://phorte-design-system.vercel.app/previa/PromoMarquee/1)
3. [Escura](https://phorte-design-system.vercel.app/previa/PromoMarquee/2)

No topo de uma página de campanha, para uma chamada curta de oferta.

### Quando não usar

Para logotipos, use o LogoMarquee. Para um aviso que a pessoa precisa ler com calma, o Alert.

### Faça

- Passe `messages` curtas e verdadeiras.
- Escolha a superfície por `tema`: `primario` (padrão), `secundario` ou `escuro` — as três passam em contraste (E75; eram duas props de classe livre).

### Evite

- Urgência inventada ("ÚLTIMAS 10 VAGAS") que a página não sustenta.
- Cor por `className`: a superfície é do `tema`, que só oferece as que passam.

### Anatomia

1. **Faixa** — Região com nome ("Faixa promocional"), no fundo do `tema`, com bordas claras em cima e embaixo.
2. **Mensagens** — Em caixa alta, negrito, separadas por um ponto; a lista se repete três vezes para o laço.
3. **Pausa** — Botão redondo de 44px à direita.

### Estados

| Estado | O que muda |
| --- | --- |
| Rolando | A faixa corre; o botão diz "Pausar a rolagem da faixa promocional". |
| Pausada | A faixa para; "Retomar…", com `aria-pressed="true"` — medido. |
| Movimento reduzido | A faixa não corre e o botão some; os itens quebram linha, cada um uma vez (E145). Era uma rolagem manual sem nada focável dentro — o teclado não chegava ao que ficava fora da largura. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Laço | As mensagens são repetidas três vezes no DOM; as duas cópias ficam `aria-hidden`. |

### Relacionados

- [LogoMarquee](https://phorte-design-system.vercel.app/styleguide/md/LogoMarquee.md) — Faixa de logotipos.
- [MarketingHero](https://phorte-design-system.vercel.app/styleguide/md/MarketingHero.md) — O topo de campanha abaixo dela.
- [Alert](https://phorte-design-system.vercel.app/styleguide/md/Alert.md) — Aviso para ler com calma.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `messages` | `string[]` | `defaultMessages` | não |  |
| `tema` | `'primario' \| 'secundario' \| 'escuro'` | `'primario'` | não | A superfície: `primario` (vermelho de interface, padrão), `secundario` (verde) ou `escuro`. |
| `rotulo` | `string` | `'Faixa promocional'` | não | Nome da região para o leitor de tela. |
| `className` | `string` | — | não |  |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `bg-ink`, `bg-ink/30`, `bg-ink/50` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--primary` | #D42B2B | `bg-primary` |
| `--primary-foreground` | #FFFFFF | `text-primary-foreground` |
| `--ring-inverse` | #FAFAFA | `ring-ring-inverse` |
| `--secondary` | #0B8434 | `bg-secondary` |
| `--secondary-foreground` | #FFFFFF | `text-secondary-foreground` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Só o botão de pausa — medido. |
| Enter / Espaço | Pausa ou retoma a faixa — medido. |

### Leitor de tela

- A pausa é a de `usePausaDeMovimento` (E75), com o mesmo rótulo e o `aria-pressed` das outras peças que se movem; a guarda `pausaSemControle` do audit passou a ver a animação CSS contínua.
- A faixa é uma região com nome: dá para pular inteira pelos marcos.
- Quem ouve recebe cada mensagem uma vez: as cópias do laço e os pontos separadores são `aria-hidden` — medido no navegador (4 de 12 itens na árvore).

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

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/marketing/PromoMarquee.tsx