DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Notificaciones

Avisos

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Alert

Parámetros Nunjucks del componente: "Alert". Versión: 4.1.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: button\n  type: component\n  required: true\n  description: Button component to intereact with the dialog.\n- name: labelledId\n  type: string\n  required: true\n  description: Required id attribute to reference with aria-labelledby in the div container tag.\n- name: id\n  type: string\n  required: true\n  description: Required id attribute to add to the div container tag.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the div container tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the div container tag.\n- name: caller\n  type: nunjucks-block\n  required: true\n  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.\n","length":1044}

Alert mostrando una notificación de éxito

Utilizamos los atributos 'role': 'alert' y 'aria-live': 'assertive' para que no pasen desapercibidas al lector de pantalla si no movemos el foco tras abrir la notificación. Si la notificación fuese de estado, como que la página se ha cargado, entonces se usará 'role': 'alert' y 'aria-live': 'polite'. La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente.

Ejemplo: "Alert mostrando una notificación de éxito", de código HTML, para maquetar el componente: "Alert", versión: 4.1.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- alert -->
<div>
  <!-- button -->
  <button class="c-button" onclick="openAlert(&#39;success-id&#39;, this)">
    Abrir éxito
  </button>
  <!-- /button -->
  <div id="success-id" role="alert" aria-live="assertive">
  </div>
  <div class="hidden" id="template-success-id">
    <!-- notification -->
    <div id="default-id" data-module="c-notification" class="c-notification c-notification--success">
      <div class="h-full mr-base">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img">
          <path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
        </svg>
      </div>
      <div class="lg:flex flex-1 self-center">
        <div class="lg:flex-1 lg:self-center">
          <p id="default-id-title" class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1">
            El documento se ha cargado correctamente
          </p>
        </div>
        <div class="absolute top-0 right-0 p-sm">
          <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
            <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation">
              <path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- /notification -->
  </div>
</div>
<!-- /alert -->

Ejemplo: "Alert mostrando una notificación de éxito", de código Nunjucks, para maquetar el componente: "Alert", versión: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert ("{\"button\":{\"text\":\"Abrir éxito\",\"attributes\":{\"onclick\":\"openAlert('success-id', this)\"}},\"id\":\"success-id\",\"attributes\":{\"role\":\"alert\",\"aria-live\":\"assertive\"}}") %}
  <!-- notification -->
<div id="default-id" data-module="c-notification" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-id-title"  class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->



{% endcall  %}
Mostrar códigodel ejemplo: Alert mostrando una notificación de éxito

Contenido

Nunjucks macro

{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir éxito",
    "attributes": {
      "onclick": "openAlert('success-id', this)"
    }
  },
  "id": "success-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="default-id" data-module="c-notification" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="default-id-title"  class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1">
        El documento se ha cargado correctamente
      </p>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->
{% endcall  %}

Alert mostrando una notificación de alerta

La función openAlert toma como primer argumento el id del elemento emergente a mostrar y como segundo argumento el nodo HTML que debe tomar foco al cerrar el elemento emergente. El tercer argumento es el id del elemento al que queremos que vaya el foco al abrir el elemento emergente, que suele ser el título de una notificación. Debido al uso de este argumento tras abrir este alert movemos el foco al título de la notificación, en este caso no es necesario usar los atributos 'role': 'alert' y 'aria-live': 'assertive'.

Ejemplo: "Alert mostrando una notificación de alerta", de código HTML, para maquetar el componente: "Alert", versión: 4.1.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- alert -->
<div>
  <!-- button -->
  <button class="c-button" onclick="openAlert(&#39;alert-id&#39;, this, &#39;secondary-id-title&#39;);">
    Abrir alerta
  </button>
  <!-- /button -->
  <div id="alert-id" role="alert" aria-live="assertive">
  </div>
  <div class="hidden" id="template-alert-id">
    <!-- notification -->
    <div id="secondary-id" data-module="c-notification" class="c-notification c-notification--alert">
      <div class="h-full mr-base">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img">
          <path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
        </svg>
      </div>
      <div class="lg:flex flex-1 self-center">
        <div class="lg:flex-1 lg:self-center">
          <p id="secondary-id-title" class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1">
            Problemas encontrados
          </p>
          <ul class="mt-base">
            <li>
              <a href="#empresa" class="inline-block pb-sm c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
            </li>
            <li>
              <a href="#actividad" class="inline-block pb-sm c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
            </li>
            <li>
              <a href="#email" class="inline-block pb-sm c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
            </li>
          </ul>
        </div>
        <div class="absolute top-0 right-0 p-sm">
          <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
            <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation">
              <path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <!-- /notification -->
  </div>
</div>
<!-- /alert -->

Ejemplo: "Alert mostrando una notificación de alerta", de código Nunjucks, para maquetar el componente: "Alert", versión: 4.1.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert ("{\"button\":{\"text\":\"Abrir alerta\",\"attributes\":{\"onclick\":\"openAlert('alert-id', this, 'secondary-id-title');\"}},\"id\":\"alert-id\",\"attributes\":{\"role\":\"alert\",\"aria-live\":\"assertive\"}}") %}
  <!-- notification -->
<div id="secondary-id" data-module="c-notification" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="secondary-id-title"  class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1">
        Problemas encontrados
      </p>
      <ul class="mt-base">
        <li>
          <a href="#empresa" class="inline-block pb-sm c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="inline-block pb-sm c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="inline-block pb-sm c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->



{% endcall  %}
Mostrar códigodel ejemplo: Alert mostrando una notificación de alerta

Contenido

Nunjucks macro

{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Abrir alerta",
    "attributes": {
      "onclick": "openAlert('alert-id', this, 'secondary-id-title');"
    }
  },
  "id": "alert-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  }
}) %}
<!-- notification -->
<div id="secondary-id" data-module="c-notification" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
      <p id="secondary-id-title"  class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1">
        Problemas encontrados
      </p>
      <ul class="mt-base">
        <li>
          <a href="#empresa" class="inline-block pb-sm c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
        </li>
        <li>
          <a href="#actividad" class="inline-block pb-sm c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
        </li>
        <li>
          <a href="#email" class="inline-block pb-sm c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
        </li>
      </ul>
    </div>
    <div class="absolute top-0 right-0 p-sm">
      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
      </button>
    </div>
  </div>
</div>
<!-- /notification -->
{% endcall  %}