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
Topo do catálogo de cursos livres, com a busca.
- Grupo
- Cursos Livres (E-commerce) — fora do catálogo
- Mora em
- app/components/organisms/cursos-phorte/PhorteCatalogHero.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.
1280px, em tamanho real
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 { PhorteCatalogHero } from '@/app/components/organisms/cursos-phorte/PhorteCatalogHero';
<PhorteCatalogHero query={…} onQueryChange={…} courseCount={…} />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 | — |
onQueryChange | (value: string) => void | — | sim | — |
courseCount | number | — | sim | — |
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 |
|---|---|---|
--primary | #D42B2B | bg-primary/10text-primary |
--border | #E5E5E5 | border-border |
--card | #FFFFFF | bg-card |
--foreground | #1A1A1A | text-ink |
--muted-foreground | #595959 | text-muted-foreground |
--secondary | #0B8434 | bg-secondary/15 |
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/PhorteCatalogHero.tsx | Disponível |
| Ficha | stories/cursos-livres/phorte-catalog-hero.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).