Course
Em andamentoPainel de filtros do catálogo: busca por nome, tipo de curso, modalidade e áreas de conhecimento (oito à mostra, o resto em "Ver mais"), sobre os controles do sistema (E73). Os filtros só valem ao apertar "Pesquisar".
- Função
- Cursos e matrícula
- Também chamado de
- filtros, barra de filtros, painel de busca, sidebar
- Mora em
- app/components/organisms/CourseFilterSidebar.tsx
- Última mudança
- 2026-09-29
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
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.
Quando usar
Ao lado da grade do catálogo de cursos, com os filtros vindos da URL.
Faça
- Passe os filtros atuais (
query,category,modality,area) e trate oonUpdate: o painel só sobe os valores ao pesquisar. - Passe
isSearchingdurante a busca: o botão fica em carregando ("Pesquisando cursos…" para o leitor) e bloqueia novo envio, sem perder o foco.
Evite
- Aplicar a cada clique: o painel foi feito para juntar os filtros e pesquisar uma vez.
Quando não usar. Para um filtro rápido acima de uma lista, use o FilterGroup. Para só a busca, o SearchBar.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Busca — O Input do sistema, `type="search"`, limpável.
- Pesquisar e Limpar — Button `secondary` grande e, com filtro ativo, Button `outline` "Limpar filtros" (E73).
- Tipo de Curso e Modalidade — RadioGroup com o Radio do sistema: `fieldset` com `legend`, um `name` só, linha de 44px (E73).
- Área de conhecimento — Checkbox do sistema em ordem alfabética; oito à mostra e "Ver mais N áreas" / "Ver menos áreas".
Estados
Os estados que a peça tem no código, e o que muda em cada um.
| Estado | O que muda |
|---|---|
| Filtro ativo | Aparece "Limpar filtros". |
| Pesquisando | isSearching: Pesquisar em isLoading (focável, aria-busy), Limpar desabilitado. |
| Todas as áreas | Depois de "Ver mais", as 34 áreas; "Ver menos áreas" recolhe (E73). |
Comportamento
| Situação | O que acontece |
|---|---|
| Pesquisar | Chama onUpdate com q, categoria, modalidade e area (as escolhidas, separadas por vírgula). |
| Filtros mudam por fora | O painel reespelha os valores sem perder o que se digita. |
| Ver mais / Ver menos | Mostra e esconde as áreas, com aria-expanded e aria-controls — conferido no teste da ficha. |
Relacionados
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import { CourseFilterSidebar } from '@/app/components/organisms/CourseFilterSidebar';
<CourseFilterSidebar query={…} category={…} modality={…} area={…} onUpdate={…} />Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
query | string | — | sim | — |
category | string | — | sim | — |
modality | string | — | sim | — |
area | string | — | sim | — |
isSearching | boolean | false | não | — |
onUpdate | (params: Record<string, string>) => void | — | sim | — |
onClear | () => void | — | não | — |
Tokens de cor
Os tokens semânticos que o código da peça usa, com o valor de hoje em app/globals.css.
| Token | Valor | Usado como |
|---|---|---|
--border | #E5E5E5 | border-border |
--foreground | #1A1A1A | text-ink |
Teclado
| Tecla | Faz |
|---|---|
| Tab | Busca, Pesquisar, (Limpar filtros), o grupo Tipo de Curso, o grupo Modalidade, cada área e "Ver mais". Cada grupo de rádio é uma parada; cada caixa, uma. |
| ↑↓←→ | Dentro de um grupo de rádio, trocam a opção (as do rádio nativo). |
| Espaço | Marca a caixa de área em foco. |
Leitor de tela
O que é anunciado, e por quê.
- Cada grupo é um
<fieldset>com<legend>— o leitor diz o nome do grupo junto da opção —, com os controles do sistema: o desenho, o foco e a linha de 44px são os do Radio e do Checkbox (E73, conferido no teste da ficha). - As áreas têm o rótulo com acento, e o valor do filtro continua como era, sem acento (E101).
O que sustenta o estado
Esta peça usa divulgacao. O estado dela é o de quem já foi ouvido com leitor de tela nesses padrões — e não uma passada sobre esta peça em específico.
Falta ouvir: divulgacao — ver docs/a11y-screen-reader-checklist.md.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/CourseFilterSidebar.tsx | Disponível |
| Ficha | Storybook (abre em outra aba) | 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
Os últimos commits que tocaram o arquivo, lidos do git no build.
fdd10ff2026-09-29ESTADO: E109 concluida, roteiro final fechado; proximo o merge na main
O histórico completo está no GitHub (abre em outra aba).