# DocPage

O modelo de página da documentação: o cabeçalho do site, a navegação da área, o conteúdo e o índice da página, prontos. Quem usa só preenche as regiões.

## Quando usar

-   Em toda página da documentação do Feitio: fundamentos, guias de desenvolvimento, componentes e modelos.
-   Em qualquer documentação que siga o Feitio, trocando só o conteúdo das regiões.

## Quando não usar

-   **Na página inicial do site:** ela é uma apresentação, sem navegação lateral nem índice.
-   **Numa tela de trabalho de um produto:** é o `AppShell`.

## As regiões

O modelo só reparte a página. O que vai em cada região chega por propriedade; o resto ele monta sozinho.

Região

Recebe

Para quê

`area`

`"design"`, `"dev"`, `"comp"`

A área do site. Marca a área atual no cabeçalho.

`sideNav`

a navegação da área

Os grupos e páginas da área, com a atual marcada. À esquerda na tela larga; no Drawer, no mobile.

`crumb`

texto curto

Onde a página está: a área e o grupo.

`title`

texto

O título da página, o único `h1`.

`lede`

uma ou duas frases

O que é, numa frase, logo embaixo do título.

`children`

as seções

O conteúdo: seções com `h2` e, dentro, `h3`, cada um com `id`. A Anchor sai deles.

`toc`

`true` (padrão), `false`

Mostra a Anchor. Desligue só em páginas curtas, de uma seção.

### O que vem pronto

-   O cabeçalho do site: as áreas, Buscar, idioma, dia e noite e o GitHub.
-   No mobile, o Drawer com tudo isso e a navegação da área.
-   A Anchor, montada dos `h2` e `h3` com `id`: à direita na tela larga, num "Nesta página" fechado no mobile.
-   Na tela larga, a coluna da navegação vai até o rodapé, com a linha fina; a lista fica presa na tela e, quando não cabe, rola sozinha com o próprio ScrollFade. A Anchor faz o mesmo, sem a linha.
-   O ScrollFade da página, o BackToTop no canto inferior direito, e o rodapé.

## Larguras

-   **Mobile:** uma coluna. O cabeçalho some ao rolar para baixo e volta ao rolar para cima.
-   **A partir de 64rem:** a navegação da área à esquerda, numa coluna que vai até o rodapé, e as áreas no cabeçalho.
-   **A partir de 80rem:** a Anchor à direita.
-   **Telas grandes:** o conjunto para em 90rem e fica no centro; o conteúdo, em 46rem.

## Regras do conteúdo

-   Um `h1` só, o `title`.
-   Toda seção começa com `h2` e tem `id`; subseções com `h3`, também com `id`. Sem `id`, não entram na Anchor.
-   Exemplos vão num `Example`, com o código dele.
-   Nada fora das regiões: uma barra a mais no cabeçalho, um aviso fixo num canto.

## Código

### React

```jsx
<DocPage
  area="comp"
  sideNav={componentsNav}
  crumb="Componentes, base"
  title="Button"
  lede="Um botão faz uma ação na tela onde está."
>
  <Section id="quando" title="Quando usar">…</Section>
  <Section id="exemplos" title="Exemplos">
    <Example id="ex-principal" title="Principal" code={primarySource}>
      <Button variant="primary">Salvar alterações</Button>
    </Example>
  </Section>
</DocPage>
```

### O HTML que sai

```html
<header class="site-header">…</header>          <!-- automático -->
<div class="site-body has-side has-toc">
  <aside class="site-side">                   <!-- a coluna, até o rodapé -->
    <div class="side-inner">…sideNav…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
  <main class="site-main" id="conteudo" tabindex="-1">
    <p class="crumb">…crumb…</p>
    <h1>…title…</h1>
    <p class="lede">…lede…</p>
    <details class="toc-mobile">…</details>    <!-- automático, dos h2 e h3 -->
    …children…
  </main>
  <aside class="site-toc">                    <!-- automático, dos h2 e h3 -->
    <div class="side-inner">…Anchor…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
</div>
<a class="feitio-button feitio-back-to-top" …>Topo</a>   <!-- automático -->
<span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- automático -->
<footer class="site-footer">…</footer>       <!-- automático -->
```

A página do [Button](/pt/components/button/) é uma página feita com este modelo.