# JobsList

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

Seção "Vagas Abertas": filtros por área (Todos e as áreas das vagas) e a lista de vagas — título, área, descrição, local, regime e, com `hrefDaVaga`, "Visualizar Vaga". As vagas estão no arquivo; o endereço de cada uma vem por prop (E74).

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

<JobsList />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/JobsList/0)
2. [Sem destino](https://phorte-design-system.vercel.app/previa/JobsList/1)

Numa página "Trabalhe conosco", como vitrine da lista de vagas.

### Quando não usar

Para filtrar outra lista, use o FilterGroup. Para cursos, o CourseCard.

### Faça

- Trate como exemplo: as vagas estão no componente.
- Passe `hrefDaVaga` (a vaga entra, o endereço sai): sem ele, "Visualizar Vaga" não aparece.

### Evite

- Publicar como está: as vagas são de exemplo.

### Anatomia

1. **Título** — Typography `h2` "Vagas Abertas" e a frase.
2. **Filtros** — Botões redondos: "Todos" e uma área por vaga.
3. **Vaga** — Caixa com título (`h3`), área (pílula), descrição, local, regime e, com `hrefDaVaga`, o Button "Visualizar Vaga" com `href`.

### Estados

| Estado | O que muda |
| --- | --- |
| Filtro ativo | O FilterGroup do sistema (E76): pílula vermelha com o visto e `aria-checked="true"`. |
| Filtro inativo | Pílula com a borda de controle. |
| Hover na vaga | Borda vermelha e título vermelho. |
| Área sem vaga | "Nenhuma vaga aberta no momento para esta área." |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Escolher uma área | A lista mostra só as vagas dela, e a contagem em `role="status"` diz "1 vaga em Engenharia" (E76) — testado na ficha. |
| "Visualizar Vaga" | Leva ao endereço que `hrefDaVaga` devolve; sem a prop, não aparece (E74). |

### Relacionados

- [FilterGroup](https://phorte-design-system.vercel.app/styleguide/md/FilterGroup.md) — O filtro por pílulas do sistema, com `aria-pressed`.
- [Button](https://phorte-design-system.vercel.app/styleguide/md/Button.md) — A chamada de cada vaga.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `hrefDaVaga` | `(vaga: VagaAberta) => string` | — | não | O endereço de cada vaga (E74). Sem ele, "Visualizar Vaga" não aparece — eram quatro botões que não levavam a lugar nenhum. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary/10`, `border-primary`, `shadow-primary/5`, `text-primary` |
| `--background` | #FAFAFA | `bg-background` |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Uma parada nos filtros (o marcado) e, com a prop, o "Visualizar Vaga" de cada vaga à mostra. |
| ← / → / Home / End | Nos filtros, anda e escolhe a área (E76). |

### Leitor de tela

- Cada vaga tem o título em `h3`.
- "Visualizar Vaga" leva o título da vaga no nome (`sr-only`, E74): eram quatro links iguais.

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