# Notice

Um aviso dentro da página: o que a pessoa precisa saber agora, com o estado dito por cor, ícone e palavra.

## Playground

```html
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Lembrete salvo</strong><p>O primeiro aviso sai amanhã às 9h.</p></div>
```

## Quando usar

-   Depois de uma ação, logo acima do container dela, para dizer o resultado: "Agendamento criado".
-   Para algo que afeta a página toda: um serviço fora do ar, um prazo chegando.

## Quando não usar

-   **Erro de campo:** ErrorMessage e ErrorSummary.
-   **O estado de um item:** Tag.
-   **Num canto da tela, como toast:** nunca.

## Exemplos

### Os quatro

Todos com o traço em volta, na cor do estado; a informação usa o traço suave, sem cor de estado. Nenhum é laranja.

Mostrar código

```html
<div class="feitio-notice" data-status="ok" role="status">
  <svg class="feitio-icon" aria-hidden="true">…</svg>
  <strong>Agendamento criado</strong>
  <p>O primeiro aviso sai amanhã às 9h.</p>
</div>
```

## Fechar e tempo

### Com o fechar

O X no canto: o aviso fica até a pessoa fechar. Sem o X, ele fica até a tela mudar.

Mostrar código

```html
<div class="feitio-notice">
  …
  <span class="tools">
    <button type="button" class="close" aria-label="Fechar o aviso">…</button>
  </span>
</div>
```

### Com tempo

Com `data-timeout`, o aviso some sozinho, e o fio em volta do X se desfaz enquanto o tempo passa. Passe o mouse em cima: o tempo para.

Mostrar código

```html
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
  …
  <span class="tools">
    <button type="button" class="close" aria-label="Fechar o aviso">
      <svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
    </button>
  </span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>
```

-   **O tempo vem desligado.** Quando ligado, o fechar vem junto, para a pessoa poder fechar antes.
-   **Só para certo e informação.** Atenção e erro nunca somem sozinhos: a pessoa precisa ver.
-   **O tempo para** enquanto o mouse ou o foco estão no aviso. Um aviso que já vem na página só começa a contar quando aparece na janela.
-   **Já na tela, não cai de novo:** se a mesma ação acontece outra vez, o aviso troca o texto e recomeça o tempo, sem a animação de papel. Ao sair, some e o espaço fecha, deslizando.

## Anatomia

1.  **Ícone** do estado.
2.  **Título:** o que aconteceu, curto.
3.  **Fechar**, opcional. Com tempo, o fio em volta do X se desfaz até o aviso sumir.
4.  **Texto**, opcional: o que fazer ou o que vem depois.
5.  **Caixa:** o fundo e o traço na cor do estado.

## Bons e maus padrões

Faça assim

**Mudança aprovada**

A mesma palavra do botão, em duas palavras.

Não faça

**Sucesso!**

Sua solicitação foi processada com sucesso.

"Sucesso" não diz o que deu certo, e o texto repete o título.

## Como escrever

-   Título: o que aconteceu, com a palavra da ação ("Agendamento criado").
-   Texto: só se disser o que fazer ou o que vem depois.

## Onde fica

-   Logo acima do container onde a ação aconteceu, junto com o StatusOverlay.
-   No topo do conteúdo, quando é sobre a página toda.
-   Dentro de um bloco, quando é só sobre ele.

## Acessibilidade

-   Depois de uma ação, `role="status"` (ou `role="alert"` no erro), para o leitor de tela anunciar.
-   O estado nunca só pela cor: ícone e palavra no título.

## Atributos

Atributo

Valores

Para quê

`class="feitio-notice"`

obrigatório

A caixa do aviso.

`data-status`

nenhum, `"ok"`, `"warn"`, `"error"`

Informação (sem o atributo), certo, atenção ou erro.

`role`

`"status"`, `"alert"`

Quando aparece depois de uma ação.

`class="tools"` + `class="close"`

opcional

O botão de fechar, no alto à direita.

`data-timeout`

milissegundos

Some sozinho depois desse tempo; só com certo e informação. Leva o fio em volta do X.

`feitioNotice.show(el)`

JS

Mostra o aviso depois de uma ação: chega como papel, ou só recomeça o tempo se já está na tela.