Pular para o conteúdo
Faculdade PhorteDesign System

TurmaCard

Em andamento

Cartão de uma turma: cidade (ou "Online"), estado da turma, preço em parcelas, previsão, local, horário, modalidade, matrícula e inscrição, aviso de poucas vagas e o indicador de escolha. Dentro de um TurmaCardGroup, é um botão de opção de um grupo de rádio (E69). Recebe os dados de um SisCourseDTO.

Função
Cursos e matrícula
Também chamado de
turma, cartão de turma, oferta, escolha de turma
Mora em
app/components/molecules/TurmaCard.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. Selecionada
  3. Em Destaque
  4. Online
  5. Escolha de turma
  6. Últimas vagas
  7. Esqueleto

Quando usar

Na página de um curso, lado a lado, para a pessoa comparar as turmas e escolher uma — sempre dentro do `TurmaCardGroup`.

Faça

  • Enquanto os dados chegam, mostre o TurmaCardEsqueleto (E157) — um por cartão esperado, dentro de um EsqueletoGrupo rotulo="Carregando turmas" —, e troque o grupo inteiro pelos cartões quando chegarem.
  • Ponha os cartões num TurmaCardGroup com value e onChange: é ele que faz a escolha funcionar pelo teclado e pelo clique.
  • Troque o label do grupo quando "Escolha a turma" não disser o bastante.
  • Mande vagasRestantes do serviço: sem o dado, o aviso de poucas vagas não aparece (E69.3).

Evite

  • Um TurmaCard solto esperando que ele selecione: fora do grupo ele só mostra o estado (isSelected).
  • Controle dentro do cartão: o cartão inteiro já é a opção.

Quando não usar. Para o curso em si, no catálogo, use o CourseCard. Para uma linha do tempo de datas, o TimelineItem.

Anatomia

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

  1. Destaque — Tag `aviso` "Destaque" no canto, quando a turma é destaque no site.
  2. Local — Cidade e UF (ou "Online"), com ícone — o começo do nome da opção.
  3. Estado — Badge (estado do objeto, E64): "Turma confirmada" (`success`, com visto), "Inscrições abertas" (`default`), "Em formação" (`warning`, com alerta) ou o estado cru (`outline`).
  4. Preço — Parcelas em destaque ("12x R$ …") ou "Consulte valores" — no nome da opção, depois do local e da situação.
  5. Detalhes — Uma lista de definição (`dl`): Previsão, Local, Horário, Modalidade, Matrícula e Inscrição — rótulo e valor ligados para quem ouve.
  6. Vagas — "Últimas N vagas!" com 10 ou menos `vagasRestantes`.
  7. Indicador — Rodapé com o desenho do Button (E127): `tonal` (verde claro) com o anel de seleção e "Escolher esta turma", ou `secondary` (verde cheio) com o visto e "Turma selecionada" — decorativo (`aria-hidden`): o estado vai em `aria-checked`.

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
CarregandoO TurmaCardEsqueleto (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (aria-hidden); o grupo diz "Carregando turmas" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura.
Não escolhidaBorda --border; rodapé verde claro com o anel de seleção vazio (E127) — antes era cinza com um círculo fino, que parecia desabilitado.
EscolhidaBorda --secondary, sombra, rodapé em verde cheio com o visto (E127) — estado por cor e ícone e texto.
FocoO anel de foco no cartão, só no teclado.
Poucas vagasCom vagasRestantes de 1 a 10: "Últimas N vagas!" (ou "Última vaga!") em amarelo escuro.
Hover (no grupo)Borda de controle e sombra maior.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique num cartão do grupoChama onChange com o sigId — conferido no teste da ficha.
VagasPelas vagas livres (vagasRestantes), e não pela capacidade: 9 livres de 10 dizem "Últimas 9 vagas!", 2 de 40 dizem "Últimas 2", sem o dado não diz nada — conferido no teste da ficha.
Sem cronogramaUsa as informações adicionais de data, se houver.
Sem data"A definir".
Matrícula zeroNão mostra a linha de matrícula.

Relacionados