Units
Em andamentoSeção "Onde encontrar a Phorte": as duas unidades em funcionamento — Rui Barbosa e Martiniano (Marquês e Lapa saíram na E128) — em cartões com foto e nome; o botão "Unidade N" de cada cartão abre e fecha os detalhes — endereço, horário e contato — por cima da foto. Não recebe propriedades.
- Função
- Institucional
- Também chamado de
- unidades, endereços, onde estamos, campi, localização
- Mora em
- app/components/organisms/Units.tsx
- Última mudança
- 2026-09-30
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.
Quando usar
Na página inicial ou em "Quem somos", para mostrar as unidades e como chegar.
Faça
- Edite as unidades no arquivo da peça: não há propriedade para elas.
Evite
- Contar que o detalhe continua aberto ao abrir outro: uma unidade por vez.
Quando não usar. Para o endereço de uma turma, o TurmaCard já traz o local. Para o contato geral, o Footer.
Anatomia
As partes, na ordem em que o olho — e o teclado — passam.
- Título — Um SectionTitle com o chapéu "Unidades".
- Cartão — Foto (`alt=""`) e o nome da unidade (`h3`).
- Botão — Um só, que fica (E76): fechado, a pílula "Unidade N" com um mais, e o cartão inteiro como alvo; aberto, o círculo com o menos no canto.
- Painel — No lugar da foto, com pelo menos 240px: "Unidade N" e os três dados numa `dl` a 14px (eram 11px). O cartão cresce com o painel — era fixo e rolava por dentro com a barra escondida, e a 320px o endereço ficava fora da caixa (E139, testado).
Estados
Os estados que a peça tem no código, e o que muda em cada um.
| Estado | O que muda |
|---|---|
| Fechado | A foto; o painel com hidden; o botão com aria-expanded="false". |
| Aberto | O painel por cima da foto; o mesmo botão, no canto, com aria-expanded="true". |
| Hover (fechado) | A foto aproxima. |
Comportamento
| Situação | O que acontece |
|---|---|
| Abrir uma unidade | Fecha a que estava aberta. |
| Abrir ou recolher | O botão fica onde está e o foco não sai dele (E76, APG Disclosure) — testado na ficha. |
| Depois de abrir | A leitura e o Tab seguem para o endereço, o horário e o contato: o painel vem depois do botão na ordem do documento (E142, Magoo — Detalhes). Vinha antes, e quem ouvia passava para a próxima unidade — testado na ficha. |
Relacionados
Como usar no código
A importação e o menor uso, lidos do arquivo. O … marca as props obrigatórias.
import Units from '@/app/components/organisms/Units';
<Units />Propriedades
Lidas do código da peça no build — não escritas à mão.
Units não recebe nenhuma propriedade. O conteúdo está escrito dentro do componente; para mudá-lo, é preciso editar o arquivo.
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 | bg-borderborder-border |
--card | #FFFFFF | bg-card |
--foreground | #1A1A1A | text-ink |
--ink-inverse | #FAFAFA | text-ink-inverse |
--muted | #F4F6F9 | bg-muted |
--muted-foreground | #595959 | text-muted-foreground |
--ring | var(--footer-red)), decisão da revisão 2. Se outra peça precisar
* dele como superfície, o nome vira de papel (ex.: --surface-brand-strong). */
--footer-red: #7D1B1B | ring-ring |
Teclado
| Tecla | Faz |
|---|---|
| Tab | Um botão por unidade ("Unidade N") — medido. |
| EnterEspaço | Abre ou recolhe os detalhes; o foco fica no botão — testado na ficha. |
Leitor de tela
O que é anunciado, e por quê.
- O botão se chama "Unidade N: endereço, horário e contato", anuncia
aria-expandede aponta para o painel (aria-controls).
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/Units.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.
0298af82026-09-30E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
O histórico completo está no GitHub (abre em outra aba).