From 2e5ac5d2903b0126c66c3e9280e2d7beec385f1c Mon Sep 17 00:00:00 2001 From: Francisco Solla Date: Fri, 25 Sep 2026 13:39:01 -0300 Subject: [PATCH] feat(S27-FOLLOWUP): polimento visual da Central de Conteudos (hero e filtros) Hero com pattern oficial, placa do 1313 e faixa amarela; 1313 visivel no mobile. Filtros com ChevronDown do lucide centralizado (nao mais o glifo baixo) e accordion exclusivo via
. Artefato: docs/plans/central-conteudos-hero-polimento-ui-design.html --- .../2026-09-25-central-hero-filtros.md | 1 + ...al-conteudos-hero-polimento-ui-design.html | 943 ++++++++++++++++++ .../(frontend)/conteudos/(catalog)/page.tsx | 2 +- .../conteudos/ContentPieceFilters.tsx | 35 +- src/components/conteudos/ContentPieceHero.tsx | 75 +- tests/e2e/frontendConteudos.e2e.spec.ts | 23 +- 6 files changed, 1053 insertions(+), 26 deletions(-) create mode 100644 docs/changelog/2026-09-25-central-hero-filtros.md create mode 100644 docs/plans/central-conteudos-hero-polimento-ui-design.html diff --git a/docs/changelog/2026-09-25-central-hero-filtros.md b/docs/changelog/2026-09-25-central-hero-filtros.md new file mode 100644 index 00000000..a082c2cf --- /dev/null +++ b/docs/changelog/2026-09-25-central-hero-filtros.md @@ -0,0 +1 @@ +**Central de Conteúdos pública — revisão visual do hero e correção dos filtros (2026-09-25):** a rota `/conteudos` ganhou o polimento aprovado no artefato `docs/plans/central-conteudos-hero-polimento-ui-design.html` (cenas 01–04, designer). O hero passa a ter textura do `pattern-shapes.png` do kit, placa azul translúcida com o `numero-negativo.png` em maior escala no desktop, faixa amarela inferior de fechamento e o 1313 também no mobile (antes o ativo desaparecia no celular), mantendo a copy contratual e o único objetivo de voto; o separator `border-t` separa a barra de busca do cabeçalho dos resultados. Os filtros deixam de usar o glifo textual `⌄` (tinta no rodapé da caixa de linha, lida como subscrito) e passam a usar o `ChevronDown` do lucide centralizado por `inline-flex + items-center`, girando no menu aberto; os `
` das facetas vazias agora compartilham `name="content-facet"` (accordion exclusivo nativo, sem JS) — abrir um filtro fecha o outro — e o dropdown ganhou alvo de 40px e largura mínima de 192px. O board de peças ficou fora do redesenho. Cobertura: e2e `frontendConteudos` 12/12 (a spec S37 mede o centro do chevron contra o centro do chip com tolerância de 1px e asserta um único `details[open]` após abrir o segundo menu — o comportamento antigo foi reproduzido em produção antes do fix, `open after second click: 2`), `pnpm gate:fast`, `format:check`, `knip` e `check:cycles` verdes; sem migration/access/Consent. diff --git a/docs/plans/central-conteudos-hero-polimento-ui-design.html b/docs/plans/central-conteudos-hero-polimento-ui-design.html new file mode 100644 index 00000000..f3b83d30 --- /dev/null +++ b/docs/plans/central-conteudos-hero-polimento-ui-design.html @@ -0,0 +1,943 @@ + + + + + + + Design — Central de Conteúdos · hero e filtros + + + +
+
+ + POLIMENTO VISUAL · GATE + +

+ Central mais viva, sem competir com as peças +

+

+ O 1313 passa a ser protagonista também no celular; a busca continua sendo a próxima ação + óbvia. Abaixo, hero e filtros em 1280 px e 390 px — o board não está sendo redesenhado. +

+
+ +
+
+ CENA 01 +

Desktop 1280 · hero de campanha + barra fechada

+
+ +
+
+ Jorge Solla + Central de Conteúdos +
+ +
+
+
+
+ +
+
+

+ Peça voto pra Solla 1313 +

+

+ Uma mensagem sua pode conquistar mais um voto. +

+

+ Escolha uma peça, mande para alguém que você conhece e peça o voto no 1313. +

+
+ + Peças oficiais para baixar e compartilhar +
+
+ +
+
+ 1313 — Mais Saúde, Mais Futuro +
+
+
+ +
+
+
+
+ Encontre uma peça por assunto, cidade ou pessoa… +
+
+
+ Buscar por: +
+ + Termo exato + + + ✦ Por tema + +
+
+ +
+ + + + + + +
+
+ +
+

+ Escolha, compartilhe e peça voto +

+

+ O board existente começa aqui, sem mudanças. +

+
+
+
+
+ +
+
+ CENA 02 +

Mobile 390 · o 1313 deixa de desaparecer

+
+ +
+
+ Jorge Solla + Central de Conteúdos +
+ +
+
+
+
+ +

+ Peça voto pra Solla 1313 +

+

+ Mande uma peça.
Peça mais um voto. +

+

+ Escolha alguém, compartilhe e peça o voto no 1313. +

+ +
+ + 1313 — Mais Saúde, Mais Futuro +
+
+ +
+
+
+ Encontre uma peça por assunto, cidade ou pessoa… +
+ +
+ Buscar por: +
+ Termo exato + ✦ Por tema +
+
+ +
+ + + + + + +
+
+ +
+

+ Escolha, compartilhe e peça voto +

+

O board existente começa aqui.

+
+
+
+
+ +
+
+ CENA 03 +

Dropdown aberto · chevron correto e exclusividade nativa

+
+ +
+
+
+
+ Encontre uma peça por assunto, cidade ou pessoa… +
+
+
+ Buscar por: +
+ Termo exato + ✦ Por tema +
+
+ +
+
+ + Tipo + + + +
+ +
+ + Cidade + + +
    +
  • Salvador
    • +
  • + Feira de Santana +
    • +
+
+ +
+ + Região + + +
+
+ + Tema + + +
+
+ + Instituição + + +
+
+ + Lideranças + + +
+
+
+ +
+ 1 +

+ Somente um details do grupo + permanece aberto. +

+
+
+
+ +
+
+ CENA 04 +

Filtros ativos · desktop e mobile

+
+ +
+
+

+ Desktop +

+
+
+
saúde pública
+ +
+
+ Buscar por: +
+ Termo exato + ✦ Por tema +
+
+
+ Tipo · Vídeo × + Cidade · Salvador × + + + +
+
+ +
+
+

+ Peças com Maria Silva +

+

+ O filtro combina com cidade, tema e os demais recortes. +

+
+ Lideranças · Maria Silva × +
+
+ +
+

+ Mobile +

+
+
+
saúde pública
+ +
+
+ Buscar por: +
+ Termo exato + ✦ Por tema +
+
+
+ Tipo · Vídeo × + Cidade · Salvador × + Lideranças · Maria Silva × + +
+
+
+

Peças com Maria Silva

+

+ No mobile, Lideranças permanece na barra. +

+
+
+
+
+ +
+

Notas para aprovação e port

+
+
+

O que mudou em relação ao S27

+
    +
  • + O hero ganhou profundidade com o pattern oficial, uma placa azul translúcida e o + número 1313 em escala maior. +
    • +
  • + No mobile, o ativo numero-negativo.png passa a + aparecer sem aumentar demais a altura do hero. +
    • +
  • A faixa amarela inferior fecha o hero e separa a marca da tarefa de busca.
    • +
  • + A barra mantém a geometria e a escala atuais; o polimento corrige apenas ícones, + estados e legibilidade. +
    • +
+
+
+

Contratos visuais a respeitar

+
    +
  • + Usar Lucide ChevronDown em 14 px, centralizado + por inline-flex + items-center; nunca + o glifo textual ⌄. +
    • +
  • + Todos os filtros vazios compartilham o mesmo grupo exclusivo de + details; abrir um fecha o anterior. +
    • +
  • + O chip ativo de Lideranças fica no cabeçalho dos resultados no desktop e dentro da + barra no mobile. +
    • +
  • + O “×” da busca fica dentro do campo; chips ativos mantêm label, valor e remoção + explícitos. +
    • +
  • + Ativos usados: numero-negativo.png, + pattern-shapes.png e o lockup já existente no + cabeçalho (jorge-solla-negativo.png). +
    • +
+
+
+
+ Copy: nenhuma mudança de contrato. O título desktop continua “Uma + mensagem sua pode conquistar mais um voto.” e a variante mobile continua “Mande uma peça. + Peça mais um voto.” +
+
+
+ + diff --git a/src/app/(frontend)/conteudos/(catalog)/page.tsx b/src/app/(frontend)/conteudos/(catalog)/page.tsx index 4f04aba1..22f8ed65 100644 --- a/src/app/(frontend)/conteudos/(catalog)/page.tsx +++ b/src/app/(frontend)/conteudos/(catalog)/page.tsx @@ -133,7 +133,7 @@ export default async function ConteudosPage({ themeUnavailable={themeUnavailable} /> -
+

diff --git a/src/components/conteudos/ContentPieceFilters.tsx b/src/components/conteudos/ContentPieceFilters.tsx index 3ae021e0..5bebfad4 100644 --- a/src/components/conteudos/ContentPieceFilters.tsx +++ b/src/components/conteudos/ContentPieceFilters.tsx @@ -1,3 +1,4 @@ +import { ChevronDown } from 'lucide-react' import Link from 'next/link' import { @@ -22,7 +23,20 @@ const FIELD_CLASS = 'min-h-11 w-full rounded-[10px] border border-black/18 bg-white py-2.5 pr-10 pl-3 text-[15px] text-black placeholder:text-(--campaign-muted) focus-visible:border-(--pt-red) focus-visible:outline-[3px] focus-visible:outline-offset-[2px] focus-visible:outline-(--pt-red) [&::-webkit-search-cancel-button]:hidden' const DROPDOWN_LINK = - 'flex min-h-9 items-center rounded-lg px-2.5 text-sm font-medium text-black hover:bg-(--campaign-band) focus-visible:outline-[3px] focus-visible:outline-offset-[2px] focus-visible:outline-(--pt-red)' + 'flex min-h-10 items-center rounded-lg px-3 text-sm font-medium text-black hover:bg-(--campaign-band) focus-visible:outline-[3px] focus-visible:outline-offset-[2px] focus-visible:outline-(--pt-red)' + +/** + * S27 — the facet menu chevron (artefato: cena 03): a real icon centered by + * `inline-flex + items-center`, never the text glyph `⌄` (whose ink sits at the + * bottom of the line box and reads as a subscript). It flips on the open menu. + */ +const FACET_CHEVRON = ( +