# Notice

Una notificación dentro de la página: lo que la persona necesita saber ahora, con el estado indicado por color, ícono y palabra.

## Playground

```html
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Recordatorio guardado</strong><p>El primer aviso sale mañana a las 9.</p></div>
```

## Cuándo usarlo

-   Después de una acción, justo encima de su contenedor, para indicar el resultado: "Cronograma creado".
-   Para algo que afecta a toda la página: un servicio caído, un plazo próximo.

## Cuándo no usarlo

-   **Error de campo:** ErrorMessage y ErrorSummary.
-   **Estado de un elemento:** Tag.
-   **En una esquina de la pantalla, como un toast:** nunca.

## Ejemplos

### Cuatro

Todos con la línea alrededor, en el color de estado; la información usa la línea suave, sin color de estado. Ninguno es naranja.

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

## Cerrar y tiempo

### Con cerrar

La X en la esquina: el aviso permanece hasta que la persona lo cierra. Sin la X, permanece hasta que cambia la pantalla.

Mostrar código

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

### Con tiempo

Con `data-timeout`, el aviso se va por sí solo, y el hilo alrededor de la X se deshilacha con el paso del tiempo. Pasa el mouse sobre él: el tiempo 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>
```

-   **El tiempo está fuera por defecto.** Cuando está activado, el botón de cerrar viene con él, así que la persona puede cerrarlo antes.
-   **Solo para éxito e información.** Las advertencias y errores nunca se van por sí solos: la persona necesita verlos.
-   **El tiempo se detiene** mientras el mouse o el foco están en la notificación. Una notificación ya en la página solo empieza a contar cuando aparece en la ventana.
-   **Ya en pantalla, no vuelve a aterrizar:** si ocurre la misma acción de nuevo, la notificación cambia su texto y reinicia el tiempo, sin la animación del papel. Al salir, se desvanece y el espacio se cierra deslizándose.

## Anatomía

1.  **Icono de estado**.
2.  **Título:** qué sucedió, brevemente.
3.  **Cerrar**, opcional. Con el tiempo, el hilo alrededor de la X se deshará hasta que la notificación desaparezca.
4.  **Texto**, opcional: qué hacer o qué viene a continuación.
5.  **Caja:** el fondo y la línea en el color de estado.

## Hacer y no hacer

Do

**Change approved**

La propia palabra del botón, en dos palabras.

Don’t

**Success!**

Tu solicitud se procesó con éxito.

""Success" no dice qué funcionó y el texto repite el título.

## Escritura

-   Título: ¿qué pasó?, con la palabra de la acción ("Se creó el calendario").
-   Texto: solo si indica qué hacer o qué viene después.

## Donde va

-   Justo encima del contenedor donde ocurrió la acción, con el StatusOverlay.
-   En la parte superior del contenido, cuando se refiere a toda la página.
-   Dentro de un bloque, cuando solo se refiere a él.

## Accesibilidad

-   Después de una acción, `role="status"` (o `role="alert"` para errores), para que los lectores de pantalla lo anuncien.
-   El estado nunca por color solo: icona y palabra en el título.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-notice"`

obligatorio

La caja de aviso.

`data-status`

nada, `"ok"`, `"warn"`, `"error"`

Información (sin atributo), éxito, advertencia o error.

`role`

`"status"`, `"alert"`

Cuando aparece después de una acción.

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

opcional

El botón de cerrar, arriba a la derecha.

`data-timeout`

milisegundos

Se va después de este tiempo; solo con éxito e información. Lleva el hilo alrededor de la X.

`feitioNotice.show(el)`

JS

Muestra la notificación después de una acción: aterriza como papel o solo reinicia el tiempo si ya está en pantalla.