# BlogCard

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

Cartão de post do blog, em dois desenhos: o padrão (capa, etiqueta, data, título, resumo e autor com foto) e o de destaque (`size="lg"`, capa larga com o título por cima, a etiqueta de destaque e o tempo de leitura). Nos dois, o link é o título, estendido sobre o cartão (E68).

- Função: Institucional
- Também chamado de: cartão de post, card de blog, artigo
- Mora em: `app/components/molecules/BlogCard.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/BlogCard](https://phorte-design-system.vercel.app/styleguide/peca/BlogCard)
- Ficha no Storybook: [components-complex-blogcard](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-blogcard--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/BlogCard/0](https://phorte-design-system.vercel.app/previa/BlogCard/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 { BlogCard } from '@/app/components/molecules/BlogCard';

<BlogCard post={…}>…</BlogCard>
```

O `…` marca as props obrigatórias — ver *Propriedades*.

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/BlogCard/0)
2. [Tamanhos](https://phorte-design-system.vercel.app/previa/BlogCard/1)
3. [Sem Tempo De Leitura](https://phorte-design-system.vercel.app/previa/BlogCard/2)
4. [Texto Longo](https://phorte-design-system.vercel.app/previa/BlogCard/3)
5. [Esqueleto](https://phorte-design-system.vercel.app/previa/BlogCard/4)

Em listas e grades do blog, com os dados de um `BlogPost`; o destaque, para o post principal da página.

### Quando não usar

Para a vitrine fixa da página inicial, o Blog já existe (sem dados). Para eventos, o EventCard; para cursos, o CourseCard.

### Faça

- Enquanto os dados chegam, mostre o `BlogCardEsqueleto` (E157) — um por cartão esperado, dentro de um `EsqueletoGrupo rotulo="Carregando publicações"` —, e troque o grupo inteiro pelos cartões quando chegarem.
- Passe `formatDate` para a data ficar legível ("12 de outubro"): sem ele, sai como veio.
- Use `size="lg"` em um post só por página — o título dele é `h2` —, e troque a etiqueta com `destaque` ("Mais lido").
- Troque o `href` quando o site clonado tiver outras rotas (padrão `/blog/<id>`).
- Dê `readTime` quando souber: aparece no destaque.
- Passe `href={null}` quando a publicação não tiver página: o cartão só informa, sem link (E77) — é o que o Blog faz.

### Evite

- Dois destaques na mesma página.
- Pôr outro link dentro do cartão: a área do link do título o cobre.

### Nota de uso

A variante grande usava `<h1>` dentro de um cartão, o que quebra a hierarquia de qualquer página que mostre mais de um. Hoje o nível é o do cartão.

### Anatomia

1. **Capa** — Imagem decorativa (`alt=""`); não é mais link (E68).
2. **Etiqueta e data** — A primeira tag do post (Tag `outline`, ou "Artigo") e a data num `<time>`.
3. **Título** — No padrão, `h3`; no destaque, `h2` sobre a capa. Os dois com o `CardLink`.
4. **Resumo** — Até três linhas; no destaque, só a partir de 768px. Fora do nome do link.
5. **Autor** — No padrão: o PessoaResumo (E72) — Avatar pequeno, o nome e "Autoria".

### Estados

| Estado | O que muda |
| --- | --- |
| Carregando | O `BlogCardEsqueleto` (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (`aria-hidden`); o grupo diz "Carregando publicações" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura. |
| Padrão | `md`: coluna com capa 16:10. O `sm` saiu na E68 — era igual ao `md`. |
| Destaque | `lg`: capa 4:3 (21:9 a partir de 768px) com degradê escuro, a etiqueta (`destaque`, padrão "Em destaque") e o título grande em branco. |
| Hover | A capa aproxima (com movimento liberado); no padrão, o título fica vermelho. |
| Foco | O anel de foco no cartão inteiro, só no teclado — nos dois tamanhos. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Clique em qualquer lugar do cartão | Leva ao `href` (padrão `/blog/<id>`). |
| Post sem tags | A etiqueta diz "Artigo". |

### Relacionados

- [Card](https://phorte-design-system.vercel.app/styleguide/md/Card.md) — O `CardLink` que o cartão usa.
- [Blog](https://phorte-design-system.vercel.app/styleguide/md/Blog.md) — A vitrine da página inicial.
- [Avatar](https://phorte-design-system.vercel.app/styleguide/md/Avatar.md) — A foto do autor.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `post` | `BlogPost` | — | sim |  |
| `size` | `'md' \| 'lg'` | `'md'` | não | `md` na grade; `lg` em destaque, com a capa por trás do texto. O `sm` saiu na E68 (decisão com padrão): era igual ao `md` e ninguém o usava — uma prop morta publicada no catálogo. |
| `formatDate` | `(date: string) => string` | `(d) => d` | não |  |
| `href` | `string \| null` | — | não | Destino (E68). Padrão `/blog/<id>`. `null` (E77) = sem link: o cartão só informa — é o que o Blog faz com a publicação que vem sem endereço. |
| `destaque` | `string` | `'Em destaque'` | não | Etiqueta do `lg` (E68): "Mais lido", "Novo". Padrão "Em destaque". |

Aceita também: `React.HTMLAttributes<HTMLElement>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--foreground` | #1A1A1A | `from-ink/80`, `text-ink`, `via-ink/20` |
| `--border` | #E5E5E5 | `border-border`, `text-border` |
| `--ink-inverse` | #FAFAFA | `text-ink-inverse` |
| `--ink-inverse-muted` | #C7C7C7 | `text-ink-inverse-muted` |
| `--muted` | #F4F6F9 | `bg-muted` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary` | #D42B2B | `text-primary` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Uma parada por cartão, nos dois tamanhos: o link do título — conferido no teste da ficha. |
| Enter | Abre o post. |

### Leitor de tela

- O nome do link é o título, nos dois tamanhos — conferido no teste da ficha. No destaque era a etiqueta, o título, o resumo e a data.
- A capa é decorativa: o título está em texto logo ao lado.

### O que sustenta o estado

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

## Status e recursos

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

- `251416b` 2026-10-01 — E159: Testimonials — o vídeo toca dentro do cartão, YouTube e Vimeo
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/molecules/BlogCard.tsx