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.

Nesta página

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 é uma página feita com este modelo.