desy-html 10.2.2 → 11.0.1

package/src/templates/pages/_page.notification-edit-inner-content.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-edit-inner-content -->
-<section id="notification-inner-content-container" aria-labelledby="notification-inner-content-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
-  <h2 id="notification-inner-content-heading" class="sr-only">Avisos importantes en contenido central</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-inner-content', this)"
-      }
-    },
-    "id": "notification-inner-content",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mb-base"
-    })  }}
-  {% endcall %}
-</section>
-<!-- /page.notification-edit-inner-content -->
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit-inner-content -->
+<section id="notification-inner-content-container" aria-labelledby="notification-inner-content-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-inner-content-heading" class="sr-only">Avisos importantes en contenido central</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-inner-content', this)"
+      }
+    },
+    "id": "notification-inner-content",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mb-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-edit-inner-content -->

package/src/templates/pages/_page.notification-edit.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-edit -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-edit -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky top-base z-10 lg:top-28 w-full" aria-hidden="true"> {# aria-hidden must dissapear when a notification appears #}{# top-28 depends on the fixed heading height #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
 <!-- /page.notification-edit -->

package/src/templates/pages/_page.notification-footer.njk

@@ -1,33 +1,33 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-footer -->
-<section id="notification-footer-container" aria-labelledby="notification-footer-heading" class="fixed z-10 inset-x-0 bottom-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <div class="container mx-auto px-base">
-    <h2 id="notification-footer-heading" class="sr-only">Avisos importantes a pie de página</h2>
-    {% call componentAlert({
-      "button": {
-        "text": "Mostrar notificación",
-        "classes": "hidden",
-        "attributes": {
-          "onclick": "openAlert('notification-footer', this)"
-        }
-      },
-      "id": "notification-footer",
-      "attributes": {
-        "role": "alert",
-        "aria-live": "assertive"
-      }
-    })  %}
-      {{ componentNotification({
-        "title": {
-          "text": "El documento se ha cargado correctamente"
-        },
-        "type": "success",
-        "id": "type-success",
-        "isDismissible": true,
-        "classes": "c-notification--success"
-      })  }}
-    {% endcall %}
-  </div>
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-footer -->
+<section id="notification-footer-container" aria-labelledby="notification-footer-heading" class="fixed z-10 inset-x-0 bottom-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <div class="container mx-auto px-base">
+    <h2 id="notification-footer-heading" class="sr-only">Avisos importantes a pie de página</h2>
+    {% call componentAlert({
+      "button": {
+        "text": "Mostrar notificación",
+        "classes": "hidden",
+        "attributes": {
+          "onclick": "openAlert('notification-footer', this)"
+        }
+      },
+      "id": "notification-footer",
+      "attributes": {
+        "role": "alert",
+        "aria-live": "assertive"
+      }
+    })  %}
+      {{ componentNotification({
+        "title": {
+          "text": "El documento se ha cargado correctamente"
+        },
+        "type": "success",
+        "id": "type-success",
+        "isDismissible": true,
+        "classes": "c-notification--success"
+      })  }}
+    {% endcall %}
+  </div>
+</section>
 <!-- /page.notification-footer -->

package/src/templates/pages/_page.notification-header-fixed.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-header-fixed -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base lg:top-2xl w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header-fixed -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base lg:top-2xl w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
 <!-- /page.notification-header-fixed -->

package/src/templates/pages/_page.notification-header.njk

@@ -1,31 +1,31 @@
-{% from "components/alert/_macro.alert.njk" import componentAlert %}
-{% from "components/notification/_macro.notification.njk" import componentNotification %}
-<!-- page.notification-header -->
-<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
-  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
-  {% call componentAlert({
-    "button": {
-      "text": "Mostrar notificación",
-      "classes": "hidden",
-      "attributes": {
-        "onclick": "openAlert('notification-header', this)"
-      }
-    },
-    "id": "notification-header",
-    "attributes": {
-      "role": "alert",
-      "aria-live": "assertive"
-    }
-  })  %}
-    {{ componentNotification({
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success",
-      "isDismissible": true,
-      "classes": "c-notification--success mt-base"
-    })  }}
-  {% endcall %}
-</section>
-<!-- /page.notification-header -->
+{% from "components/alert/_macro.alert.njk" import componentAlert %}
+{% from "components/notification/_macro.notification.njk" import componentNotification %}
+<!-- page.notification-header -->
+<section id="notification-header-container" aria-labelledby="notification-header-heading" class="sticky z-10 top-base w-full" aria-hidden="true">{# aria-hidden must dissapear when a notification appears #}
+  <h2 id="notification-header-heading" class="sr-only">Avisos importantes</h2>
+  {% call componentAlert({
+    "button": {
+      "text": "Mostrar notificación",
+      "classes": "hidden",
+      "attributes": {
+        "onclick": "openAlert('notification-header', this)"
+      }
+    },
+    "id": "notification-header",
+    "attributes": {
+      "role": "alert",
+      "aria-live": "assertive"
+    }
+  })  %}
+    {{ componentNotification({
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success",
+      "isDismissible": true,
+      "classes": "c-notification--success mt-base"
+    })  }}
+  {% endcall %}
+</section>
+<!-- /page.notification-header -->

package/src/templates/pages/_page.sidebar-content.njk

@@ -1,21 +1,21 @@
-<!-- page.sidebar-content -->
-<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl">
-  <div class="col-span-2 lg:col-span-1">
-    <!-- sidebarBlock -->
-    {% block sidebarBlock %}
-    {% endblock %}
-    <!-- /sidebarBlock -->
-  </div>
-  <div class="col-span-2 lg:col-span-3">
-    <!-- notificationInnerContentBlock -->
-    {% block notificationInnerContentBlock %}
-      {% include "pages/_page.notification-edit-inner-content.njk" %}
-    {% endblock %}
-    <!-- /notificationInnerContentBlock -->
-    <!-- innerContentBlock -->
-    {% block innerContentBlock %}
-    {% endblock %}
-    <!-- /innerContentBlock -->
-  </div>
-</div>
+<!-- page.sidebar-content -->
+<div class="grid grid-cols-2 lg:grid-cols-4 gap-xl">
+  <div class="col-span-2 lg:col-span-1">
+    <!-- sidebarBlock -->
+    {% block sidebarBlock %}
+    {% endblock %}
+    <!-- /sidebarBlock -->
+  </div>
+  <div class="col-span-2 lg:col-span-3">
+    <!-- notificationInnerContentBlock -->
+    {% block notificationInnerContentBlock %}
+      {% include "pages/_page.notification-edit-inner-content.njk" %}
+    {% endblock %}
+    <!-- /notificationInnerContentBlock -->
+    <!-- innerContentBlock -->
+    {% block innerContentBlock %}
+    {% endblock %}
+    <!-- /innerContentBlock -->
+  </div>
+</div>
 <!-- /page.sidebar-content -->

package/src/templates/pages/_page.spinner-block.njk

@@ -1,15 +1,15 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-<!-- page.spinner-block -->
-<div class="relative pb-2xl lg:pb-0">
-  <p>
-    {{ componentSpinner({
-      "text": "Espera por favor, el contenido principal de la página se está cargando",
-      "classes": "absolute inset-0 z-50 h-full pt-2xl text-4xl text-neutral-base",
-      "attributes": {
-        "id": spinnerId if spinnerId else "spinner-block"
-      }
-    })  }}
-  </p>
-  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
-</div>
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-block -->
+<div class="relative pb-2xl lg:pb-0">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "absolute inset-0 z-50 h-full pt-2xl text-4xl text-neutral-base",
+      "attributes": {
+        "id": spinnerId if spinnerId else "spinner-block"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+</div>
 <!-- /page.spinner-block -->

package/src/templates/pages/_page.spinner-show.njk

@@ -1,16 +1,16 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-<!-- page.spinner-show -->
-<aside aria-labelledby="page-spinner">
-  <p>
-    {{ componentSpinner({
-      "text": "Espera por favor, el contenido principal de la página se está cargando",
-      "classes": "fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
-      "attributes": {
-        "id": "page-spinner"
-      }
-    })  }}
-  </p>
-  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
-  {# Habría que validar una vez que se carga el contenido, qué anuncia el lector (si se ha previsto algún mensaje de “contenido principal cargado”) y qué elemento coge el foco (puesto que el usuario puede moverse por la página, no debería movérsele el foco). #}
-</aside>
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner-show -->
+<aside aria-labelledby="page-spinner">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, el contenido principal de la página se está cargando",
+      "classes": "fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
+      "attributes": {
+        "id": "page-spinner"
+      }
+    })  }}
+  </p>
+  {# This spinner must be visible for 5 seconds. When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... After 5 seconds the spinner must dissapear #}
+  {# Habría que validar una vez que se carga el contenido, qué anuncia el lector (si se ha previsto algún mensaje de “contenido principal cargado”) y qué elemento coge el foco (puesto que el usuario puede moverse por la página, no debería movérsele el foco). #}
+</aside>
 <!-- /page.spinner-show -->

package/src/templates/pages/_page.spinner.njk

@@ -1,16 +1,16 @@
-{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
-<!-- page.spinner -->
-<aside aria-labelledby="page-spinner" aria-hidden="true">
-  <p>
-    {{ componentSpinner({
-      "text": "Espera por favor, la página se está cargando",
-      "classes": "hidden fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
-      "attributes": {
-        "id": "page-spinner"
-      }
-    })  }}
-  </p>
-  {# aria-hidden and .hidden must dissapear when showing the spinner in page #}{# When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... #}
-  {# Habría que validar una vez que se carga el contenido: qué anuncia el lector (si se ha previsto algún mensaje de "página cargada") y qué elemento coge el foco (puesto que se está cargando la página entera, lo esperable sería el primer elemento, esto es, el botón Ir al contenido principal). #}
-</aside>
+{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
+<!-- page.spinner -->
+<aside aria-labelledby="page-spinner" aria-hidden="true">
+  <p>
+    {{ componentSpinner({
+      "text": "Espera por favor, la página se está cargando",
+      "classes": "hidden fixed inset-0 z-50 h-screen text-6xl text-neutral-base",
+      "attributes": {
+        "id": "page-spinner"
+      }
+    })  }}
+  </p>
+  {# aria-hidden and .hidden must dissapear when showing the spinner in page #}{# When new content is loaded, the text must change to "Se ha cargado la página _título de la página_"... #}
+  {# Habría que validar una vez que se carga el contenido: qué anuncia el lector (si se ha previsto algún mensaje de "página cargada") y qué elemento coge el foco (puesto que se está cargando la página entera, lo esperable sería el primer elemento, esto es, el botón Ir al contenido principal). #}
+</aside>
 <!-- /page.spinner -->

package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk

@@ -1,36 +1,36 @@
-{% extends "pages/_template.edit-fixed.njk" %}
-
-{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
-
-{% block headerSkipLinkBlock %}
-  <!-- headerSkipLinkBlock -->
-  {{ componentSkipLink({
-    "text": "Saltar al contenido principal",
-    "href": "#content-center"
-  })  }}
-  <!-- /headerSkipLinkBlock -->
-{% endblock %}
-
-{% block contentBlock %}
-  <!-- contentBlock -->
-  <div class="grid grid-cols-4 gap-x-lg">
-    <div class="sticky top-0 hidden lg:block lg:col-span-1 h-screen  lg:-mt-2xl lg:pt-24 pb-lg overflow-y-auto">
-      <!-- sidebarBlock -->
-      {% block sidebarBlock %}
-      {% endblock %}
-      <!-- /sidebarBlock -->
-    </div>
-    <section id="content-center" class="col-span-4 lg:col-span-3 py-base lg:-mt-2xl lg:pt-28 lg:pl-lg" aria-label="Contenido central">
-      <!-- notificationInnerContentBlock -->
-      {% block notificationInnerContentBlock %}
-        {% include "pages/_page.notification-edit-inner-content.njk" %}
-      {% endblock %}
-      <!-- /notificationInnerContentBlock -->
-      <!-- innerContentBlock -->
-      {% block innerContentBlock %}
-      {% endblock %}
-      <!-- /innerContentBlock -->
-    </section>
-  </div>
-  <!-- /contentBlock -->
-{% endblock %}
+{% extends "pages/_template.edit-fixed.njk" %}
+
+{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
+
+{% block headerSkipLinkBlock %}
+  <!-- headerSkipLinkBlock -->
+  {{ componentSkipLink({
+    "text": "Saltar al contenido principal",
+    "href": "#content-center"
+  })  }}
+  <!-- /headerSkipLinkBlock -->
+{% endblock %}
+
+{% block contentBlock %}
+  <!-- contentBlock -->
+  <div class="grid grid-cols-4 gap-x-lg">
+    <div class="sticky top-0 hidden lg:block lg:col-span-1 h-screen  lg:-mt-2xl lg:pt-24 pb-lg overflow-y-auto">
+      <!-- sidebarBlock -->
+      {% block sidebarBlock %}
+      {% endblock %}
+      <!-- /sidebarBlock -->
+    </div>
+    <section id="content-center" class="col-span-4 lg:col-span-3 py-base lg:-mt-2xl lg:pt-28 lg:pl-lg" aria-label="Contenido central">
+      <!-- notificationInnerContentBlock -->
+      {% block notificationInnerContentBlock %}
+        {% include "pages/_page.notification-edit-inner-content.njk" %}
+      {% endblock %}
+      <!-- /notificationInnerContentBlock -->
+      <!-- innerContentBlock -->
+      {% block innerContentBlock %}
+      {% endblock %}
+      <!-- /innerContentBlock -->
+    </section>
+  </div>
+  <!-- /contentBlock -->
+{% endblock %}