Fora do catálogo
Peça de produto do fluxo de cursos livres. Não é uma das 81 peças do kit, não tem estado de promoção e não foi feita para reuso em outras páginas. Segue as mesmas regras de cor e acessibilidade que o resto do repositório.
Phorte
Filtros de área, modalidade e nível.
- Grupo
- Cursos Livres (E-commerce) — fora do catálogo
- Mora em
- app/components/organisms/cursos-phorte/PhorteCatalogFilters.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.
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import { PhorteCatalogFilters } from '@/app/components/organisms/cursos-phorte/PhorteCatalogFilters';
<PhorteCatalogFilters categories={…} modalities={…} levels={…} selectedCategory={…} selectedModality={…} selectedLevel={…} onCategoryChange={…} onModalityChange={…} onLevelChange={…} onClear={…} />Propriedades
Lidas do código da peça no build — não escritas à mão.
| Prop | Tipo | Padrão | Obrigatória | Descrição |
|---|---|---|---|---|
categories | string[] | — | sim | — |
modalities | string[] | — | sim | — |
levels | string[] | — | sim | — |
selectedCategory | string | — | sim | — |
selectedModality | string | — | sim | — |
selectedLevel | string | — | sim | — |
onCategoryChange | (value: string) => void | — | sim | — |
onModalityChange | (value: string) => void | — | sim | — |
onLevelChange | (value: string) => void | — | sim | — |
onClear | () => void | — | sim | — |
theme | "light" | "dark" | "light" | 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 |
|---|---|---|
--ink-inverse | #FAFAFA | border-ink-inversetext-ink-inverse |
--border | #E5E5E5 | border-border |
--card | #FFFFFF | bg-card |
--ink-inverse-muted | #C7C7C7 | text-ink-inverse-muted |
--muted-foreground | #595959 | text-muted-foreground |
Sem estado de promoção
A peça está fora do catálogo e não passa pela promoção de estado. O axe roda nas variantes da ficha em npm run test; contraste abaixo de AA vira exceção declarada na própria ficha, com a conta — pendência registrada, não aprovação.
Status e recursos
| Tipo | Recurso | Status |
|---|---|---|
| Código | app/components/organisms/cursos-phorte/PhorteCatalogFilters.tsx | Disponível |
| Ficha | stories/cursos-livres/phorte-catalog-filters.stories.tsx | Storybook local |
| Teste de acessibilidade | axe em npm run test | No gate de todo commit |
| 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).