Pular para o conteúdo
Faculdade PhorteDesign System

JobsList

Em andamento

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
Última mudança
2026-10-01
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.

Na largura da página: 0px

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 destino

Quando usar

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

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.

Quando não usar. Para filtrar outra lista, use o FilterGroup. Para cursos, o CourseCard.

Anatomia

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

  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

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
Filtro ativoO FilterGroup do sistema (E76): pílula vermelha com o visto e aria-checked="true".
Filtro inativoPílula com a borda de controle.
Hover na vagaBorda vermelha e título vermelho.
Área sem vaga"Nenhuma vaga aberta no momento para esta área."

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Escolher uma áreaA 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