DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Configurar cookies

Cómo pedimos información

Una notificación que informa y permite gestionar el uso de cookies del sitio web.

Casos de uso

Si tu web tiene actividad económica y finalidad lucrativa

Debe llevar banner de cookies que te obligue a aceptarlas o rechazarlas.

Mostrar código del ejemplo: includes/_pattern.cookies.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}
{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{% set description %}
  <div class="mt-lg">
    <p class="c-paragraph-base">Este sitio web utiliza cookies propias y de terceros para garantizar su correcto funcionamiento. Esto implica la realización de tratamientos de datos de carácter personal con arreglo a la normativa europea y española aplicables.</p>
    <p class="c-paragraph-base">Para más información consulta nuestra <a href="#" class="c-link inline-block"  title="Se abre en ventana nueva" target="_blank">política de cookies</a></p>
    <ul class="w-full flex flex-wrap gap-sm mt-lg">
      <li>
        {{ componentButton({
          "text": "Aceptar todas",
          "classes": "c-button--primary"
        }) }}
      </li>
      <li>
        {% call componentDialog({
          "button": {
            "text": "Configurar preferencias",
            "classes":"c-button--transparent",
            "attributes": {
              "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
              "id": "button-label-secondary-action-example"
            }
          },
          "id": "secondary",
          "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
          "attributes": {
            "role": "dialog",
            "aria-labelledby": "secondary-action-example",
            "aria-modal": true
          }
        }) %}
        <!-- modal -->
        <div id="secondary-action-example" class="mt-16 sm:mt-0 relative max-w-2xl mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
          <h2 id="label-secondary-action-example" class="c-h2 focus:outline-none focus:underline pr-lg" tabindex="-1">Configuración de mis preferencias en relación a las cookies</h2>
          <p class="c-paragraph-base my-base">Selecciona que cookies quieres habilitar y guarda los cambios. Puedes volver a cambiar tu configuración accediendo a ese panel</p>
          <div>
            <div class="flex gap-lg">
              <div class="grow">
                <h3 class="c-h4" id="text1">Cookies técnicas</h3>
                <p class="c-paragraph-sm">Las cookies técnicas o necesarias son esenciales para que nuestra web pueda funcionar correctamente e incluye funcionalidades básicas como identificar la sesión. Por estos motivos las cookies técnicas no se pueden desactivar.</p>
              </div>
              <div>
                {{ componentToggle({
                  "id": "toggle1",
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "pressed": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text1"
                  }
                }) }}
              </div>
            </div>
            <div class="flex gap-lg mt-base">
              <div class="grow">
                <h3 class="c-h4" id="text2">Cookies personalización</h3>
                <p class="c-paragraph-sm">Al utilizar cookies de personalización, la página web puede recordar información durante tu tiempo de navegación asociada a la forma en que la página se comporta o el aspecto que tiene.</p>
              </div>
              <div>
                {{ componentToggle({
                  "id": "toggle2",
                  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
                  "isSwitch": true,
                  "offState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">Off</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "onState": {
                    "classes": "",
                    "html": "<span class=\"flex align-center justify-between gap-xs\"><span class=\"text-sm\" aria-hidden=\"true\">Off</span><span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">On</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\"></span></span><span class=\"text-sm\" aria-hidden=\"true\">On</span></span>"
                  },
                  "attributes": {
                    "aria-labelledby": "text2"
                  }
                }) }}
              </div>
            </div>
          </div>
          <ul class="flex flex-wrap w-full justify-between gap-sm mt-lg">
            <li class="mt-sm">
              <!-- button -->
              <button class="c-button c-button--primary"  onclick="closeDialog(this)">
                Guardar configuración
              </button>
              <!-- /button -->
            </li>
            <li class="mt-sm">
              <!-- button -->
              <button class="c-button"  onclick="closeDialog(this)">
                Cancelar <span class="sr-only">y cerrar la ventana modal</span>
              </button>
              <!-- /button -->
            </li>
          </ul>
          <div class="absolute top-0 right-0 p-sm lg:p-base">
            <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" 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>
        <!-- /modal -->
        {% endcall  %}
      </li>
    </ul>
  </div>
{% endset %}

{{ componentNotification({
  "headingLevel": 4,
  "title": {
    "html": '<span class="c-h2">Gestión de cookies</span>'
  },
  "description": {
    "html": description | safe
  },
  "id": "banner-cookies"
})  }}

Ubicación

  • En la parte inferior de la página. Utiliza el bloque {% block notificationFooterBlock %} habilitado en las plantillas.

Qué componentes utilizamos

Cómo funciona

  • Este bloque aparece superpuesto al contenido cuando se accede a la página. La persona debe realizar una acción antes de navegar por ella.
  • El botón Aceptar todas cierra el bloque, mientras que el botón Configurar preferencias es un dialog que abre una modal.
  • En la modal se permite activar o desactivar varias preferencias y guardar la configuración.

Accesibilidad

  • Al abrir el dialog, el foco salta al título y queda atrapado dentro hasta que se acciona un botón.
  • Los interruptores tienen un parámetro aria-labelledby que apunta al título del apartado que permite configurar.

Si tu web no tiene actividad económica y finalidad lucrativa

Debes mostrar una notificación que avise al usuario.

Uso de cookies

Usamos cookies para que la aplicación funcione. Para más información consulta nuestra política de cookies
Mostrar código del ejemplo: includes/_pattern.cookies-simple.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.cookies-simple.njk

{% from "components/notification/_macro.notification.njk" import componentNotification %}


<div>
  {{ componentNotification({
      "title": {
        "html": "Uso de cookies"
      },
      "description": {
        "html": 'Usamos cookies para que la aplicación funcione. Para más información consulta nuestra <a class="c-link" href="https://www.aragon.es/-/detalle-sobre-las-cookies-en-el-portal-de-servicios-del-gobierno-de-aragon">política de cookies<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>'
      },
      "id": "cookies-2",
      "isDismissible": true
  })  }}
</div>

Ubicación

  • En la parte inferior de la página. Utiliza el bloque {% block notificationFooterBlock %} habilitado en las plantillas.

Qué componentes utilizamos

Cómo funciona

  • Este bloque aparece superpuesto al contenido cuando se accede a la página. La persona puede realizar acciones aunque no cierre el aviso.