# Units

> Componentes / Institucional · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seçã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`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/Units](https://phorte-design-system.vercel.app/styleguide/peca/Units)
- Ficha no Storybook: [components-complex-units](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-units--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/Units/0](https://phorte-design-system.vercel.app/previa/Units/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import Units from '@/app/components/organisms/Units';

<Units />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/Units/0)

Na página inicial ou em "Quem somos", para mostrar as unidades e como chegar.

### Quando não usar

Para o endereço de uma turma, o TurmaCard já traz o local. Para o contato geral, o Footer.

### 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.

### Anatomia

1. **Título** — Um SectionTitle com o chapéu "Unidades".
2. **Cartão** — Foto (`alt=""`) e o nome da unidade (`h3`).
3. **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.
4. **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

| 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

- [Footer](https://phorte-design-system.vercel.app/styleguide/md/Footer.md) — O contato geral.
- [SectionTitle](https://phorte-design-system.vercel.app/styleguide/md/SectionTitle.md) — O título da seção.

## Especificação

**Não recebe nenhuma propriedade.**

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `bg-border`, `border-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` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Um botão por unidade ("Unidade N") — medido. |
| Enter / Espaço | Abre ou recolhe os detalhes; o foco fica no botão — testado na ficha. |

### Leitor de tela

- O botão se chama "Unidade N: endereço, horário e contato", anuncia `aria-expanded` e aponta para o painel (`aria-controls`).

### O que sustenta o estado

Usa os padrões: divulgacao. Falta ouvir com leitor de tela: divulgacao.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/Units.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-units--docs | 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

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/Units.tsx