# Notice

Une notification dans la page : ce dont la personne a besoin à présent, avec le statut indiqué par couleur, icône et mot.

## Playground

```html
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Rappel enregistré</strong><p>Le premier rappel part demain à 9 h.</p></div>
```

## Quand l'utiliser

-   Après une action, juste au-dessus de son conteneur, pour indiquer le résultat : « Planification créée ».
-   Pour quelque chose qui affecte toute la page : un service en panne, une échéance à venir.

## Quand ne pas l'utiliser

-   **Erreur de champ :** ErrorMessage et ErrorSummary.
-   **Statut d'un élément :** Tag.
-   **Dans un coin de l'écran, comme un toast :** jamais.

## Exemples

### Les quatre

Tout avec la ligne autour, dans la couleur du statut ; l'information utilise la ligne douce, sans couleur de statut. Aucun n'est orange.

Afficher le code

```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>
```

## Fermer et temps

### Avec fermeture

Le X dans le coin : le message reste jusqu'à ce que la personne le ferme. Sans le X, il reste jusqu'à ce que l'écran change.

Afficher le code

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

### Avec temps

Avec `data-timeout`, le message disparaît tout seul, et la chaîne autour du X se dénoue avec le temps. Passez la souris dessus : le temps s'arrête.

Afficher le code

```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>
```

-   **L'heure est hors de l'état par défaut.** Quand activé, le bouton de fermeture vient avec lui, afin que la personne puisse le fermer plus tôt.
-   **Uniquement pour succès et information.** Les avertissements et les erreurs ne disparaissent jamais tout seul : la personne doit les voir.
-   **L'heure s'arrête** tant que la souris ou le focus sont sur l'avertissement. Un avertissement déjà présent sur la page ne commence à compter que lorsqu'il apparaît dans la fenêtre.
-   **Déjà à l'écran, il ne se pose plus :** si la même action se produit à nouveau, l'avertissement change son texte et redémarre le compteur, sans l'animation du papier. Au départ, il s'estompe et l'espace se ferme en glissant.

## Anatomie

1.  **Icone de statut**.
2.  **Titre :** ce qui s'est passé, brièvement.
3.  **Fermer**, optionnel. Avec le temps, le fil autour du X se dénoue jusqu'à ce que l'avertissement disparaisse.
4.  **Texte**, optionnel : quoi faire ou ce qui suit.
5.  **Cadre :** l'arrière-plan et la ligne dans la couleur du statut.

## Faire et ne pas faire

Do

**Change approved**

Le mot propre du bouton, en deux mots.

Don’t

**Success!**

Votre demande a été traitée avec succès.

"Success" ne dit pas ce qui a fonctionné, et le texte répète le titre.

## Écriture

-   Titre : ce qui s'est passé, avec le mot de l'action ("Création planifiée").
-   Texte : uniquement s'il indique quoi faire ou ce qui vient ensuite.

## Où cela va

-   Juste au-dessus du conteneur où l'action s'est produite, avec le StatusOverlay.
-   Au sommet du contenu, lorsqu'il concerne toute la page.
-   À l'intérieur d'un bloc, lorsqu'il ne concerne que celui-ci.

## Accessibilité

-   Après une action, `role="status"` (ou `role="alert"` pour les erreurs), afin que les lecteurs d'écran l'annoncent.
-   Le statut n'est jamais uniquement par la couleur : icône et mot dans le titre.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-notice"`

obligatoire

La boîte de notification.

`data-status`

aucune, `"ok"`, `"warn"`, `"error"`

Information (sans attribut), succès, avertissement ou erreur.

`role`

`"status"`, `"alert"`

Lorsqu'il apparaît après une action.

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

optionnel

Le bouton de fermeture, en haut à droite.

`data-timeout`

millisecondes

Déparaît après ce temps ; uniquement avec succès et information. Porte le fil autour du X.

`feitioNotice.show(el)`

JS

Affiche l'avertissement après une action : il s'atterrit comme du papier, ou redémarre le temps uniquement s'il est déjà à l'écran.