desy-html 7.2.0 → 7.3.0

package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html

@@ -0,0 +1,157 @@
+{% set title = "Plantilla logueado con selector de app y sidebar. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-with-sidebar.njk" %}
+
+{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
+
+{% block sidebarBlock %}
+  <div class="pb-lg"></div>
+  <h2 id="apartados-de-pagina" class="sr-only">Índice de apartados de esta página</h2>
+  {{ componentMenuVertical({
+    "idPrefix": "sidebar-item",
+    "items": [
+      {
+        "href": "#datos-generales",
+        "text": "Datos generales",
+        "sub": {
+          "items": [
+            {
+              "href": "#denominacion",
+              "text": "Denominación"
+            },
+            {
+              "href": "#descripcion",
+              "text": "Descripción"
+            },
+            {
+              "href": "#organos-o-unidades-gestoras",
+              "text": "Órganos o unidades gestoras"
+            },
+            {
+              "href": "#categorias",
+              "text": "Categorías"
+            },
+            {
+              "href": "#etiquetas-libres",
+              "text": "Etiquetas libres"
+            }
+          ]
+        }
+      },
+      {
+        "text": "Normativa general",
+        "href": "#normativa-general"
+      },
+      {
+        "href": "#caracteristicas-generales-de-tramitacion",
+        "text": "Características generales de tramitación",
+        "sub": {
+          "items": [
+            {
+              "href": "#grupos-de-destinatarios",
+              "text": "Grupos de destinatarios"
+            },
+            {
+              "href": "#destinatarios",
+              "text": "Destinatarios"
+            },
+            {
+              "href": "#requisitos-generales",
+              "text": "Requisitos generales"
+            },
+            {
+              "href": "#canales-de-informacion",
+              "text": "Canales de información"
+            },
+            {
+              "href": "#tramites-principales",
+              "text": "Trámites principales"
+            },
+            {
+              "href": "#resolucion",
+              "text": "Resolución"
+            }
+          ]
+        }
+      }
+    ],
+    "attributes": {
+      "aria-labelledby": "apartados-de-pagina"
+    }
+  })  }}
+{% endblock %}
+
+{% block headerContentBlock %}
+  <div class="pb-lg"></div>
+  <h1 class="c-h1">Titulo de app</h1>
+  <p class="c-paragraph-base mb-lg">
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum et, laboriosam perferendis nesciunt. Recusandae, dolorum! Error doloribus, quisquam. Quasi possimus provident delectus incidunt voluptas quos quaerat quis minima itaque impedit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum et, laboriosam perferendis nesciunt. Recusandae, dolorum! Error doloribus, quisquam. Quasi possimus provident delectus incidunt voluptas quos quaerat quis minima itaque impedit.
+  </p>
+{% endblock %}
+
+{% block innerContentBlock %}
+  <div class="pb-lg"></div>
+  <h2 id="datos-generales" class="c-h2 c-anchor-scroll">Datos generales (h2)</h2>
+  <h3 id="denominacion" class="c-anchor-scroll c-h3">Denominación (h3)</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  {% include "includes/_abrir-notificaciones.njk" %}
+  <div class="pb-xl"></div>
+  <h3 id="descripcion" class="c-anchor-scroll c-h3">Descripción</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="organos-o-unidades-gestoras" class="c-anchor-scroll c-h3">Órganos o unidades gestoras</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="categorias" class="c-anchor-scroll c-h3">Categorías</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="etiquetas-libres" class="c-anchor-scroll c-h3">Etiquetas libres</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <hr class="border-neutral-base my-2xl">
+  <h2 id="normativa-general" class="c-h1 c-anchor-scroll">Normativa general</h2>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <hr class="border-neutral-base my-2xl">
+  <h2 id="caracteristicas-generales-de-tramitacion" class="c-h1 c-anchor-scroll">Características generales de tramitación</h2>
+  <h3 id="grupos-de-destinatarios" class="c-anchor-scroll c-h3">Grupos de destinatarios</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="destinatarios" class="c-anchor-scroll c-h3">Destinatarios</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="requisitos-generales" class="c-anchor-scroll c-h3">Requisitos generales</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="canales-de-informacion" class="c-anchor-scroll c-h3">Canales de información</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="tramites-principales" class="c-anchor-scroll c-h3">Trámites principales</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+  <div class="pb-xl"></div>
+  <h3 id="resolucion" class="c-anchor-scroll c-h3">Resolución</h3>
+  <p class="c-paragraph-base">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem veniam facilis sapiente ea explicabo ipsa dolores placeat quis quam ut officia voluptas sed natus eius sequi inventore, saepe repellendus quae.
+  </p>
+{% endblock %}

package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html

@@ -0,0 +1,9 @@
+{% set title = "Plantilla logueado con selector de app y subheader. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-subheader.njk" %}
+
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_loremipsum-large.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+{% endblock %}

package/docs/plantilla-logueado-con-selector-de-app.html

@@ -0,0 +1,7 @@
+{% set title = "Plantilla logueado con selector de app. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+{% endblock %}

package/docs/plantilla-logueado-con-titulo-de-app.html

@@ -0,0 +1,7 @@
+{% set title = "Plantilla logueado con título de app. Gobierno de Aragón" %}
+{% extends "pages/_template.logged.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+{% endblock %}

package/docs/plantilla-sin-loguear.html

@@ -0,0 +1,7 @@
+{% set title = "Plantilla sin loguear. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-out.njk" %}
+
+{% block contentBlock %}
+  {% include "includes/_ejemplo-titulo-parrafo.njk" %}
+  {% include "includes/_abrir-notificaciones.njk" %}
+{% endblock %}

package/docs/plantillas.html

@@ -0,0 +1,88 @@
+{% set title = "Plantillas para desy-html. Gobierno de Aragón" %}
+{% extends "_template.default.njk" %}
+
+{% block contentBlock %}
+  <div class="lg:w-3/4">
+    <div class="pb-lg"></div>
+    <h1 class="c-h1">Plantillas</h1>
+    <p class="c-paragraph-base">
+      Aqui encontrarás plantillas de página típicas que se utilizan en aplicaciones del Gobierno de Aragón. Los ejemplos que aquí aparecen han pasado revisiones de accesibilidad, por lo que son seguros para ser utilizados en tus proyectos como punto de partida.
+    </p>
+
+    <div class="pb-lg"></div>
+
+    <h2 id="plantillas" class="c-h2">Plantillas de página</h2>
+    <ul class="mb-lg">
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-sin-loguear.html">Plantilla sin loguear</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-titulo-de-app.html">Plantilla logueado con título de app</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-selector-de-app.html">Plantilla logueado con selector de app</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-cabecera-fija.html">Plantilla logueado con cabecera fija</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-cabecera-fija-headroom.html">Plantilla logueado con cabecera fija con librería headroom.js</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-editar-con-cabecera-fija.html">Plantilla editar con cabecera fija</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html">Plantilla editar con cabecera fija y sidebar sticky</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-selector-de-app-y-subheader.html">Plantilla logueado con selector de app y subheader</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-logueado-con-selector-de-app-y-sidebar.html">Plantilla logueado con selector de app y sidebar</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="plantilla-con-header-advanced.html">Plantilla con header advanced</a>
+      </li>
+    </ul>
+
+    <div class="pb-lg"></div>
+
+    <h2 id="spinners" class="c-h2">Spinners en plantillas</h2>
+    <ul class="mb-lg">
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-sin-loguear.html">Spinner de página en Plantilla sin loguear</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-logueado-con-titulo-de-app.html">Spinner de contenido en Plantilla logueado con título de app</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-logueado-con-cabecera-fija.html">Spinner de contenido en Plantilla logueado con cabecera fija</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-editar-con-cabecera-fija.html">Spinner de contenido en Plantilla editar con cabecera fija</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-logueado-con-selector-de-app-y-subheader.html">Spinner de contenido en Plantilla logueado con selector de app y subheader</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="spinner-plantilla-con-header-advanced.html">Spinner de contenido en Plantilla con header advanced</a>
+      </li>
+    </ul>
+
+    <div class="pb-lg"></div>
+
+    <h2 id="paginas" class="c-h2">Páginas</h2>
+    <h3 class="c-h3">Páginas varias</h3>
+    <p class="c-paragraph-base">
+      Esto son ejemplos de varios tipos de páginas de una aplicación.
+    </p>
+    <ul class="mb-lg">
+      <li class="mb-base">
+        <a class="c-link" href="pagina-mapa-web.html">Mapa web</a>
+      </li>
+      <li class="mb-base">
+        <a class="c-link" href="pagina-accesibilidad.html">Accesibilidad</a>
+      </li>
+    </ul>
+  </div>
+{% endblock %}

package/docs/spinner-plantilla-con-header-advanced.html

@@ -0,0 +1,2 @@
+{% set title = "Spinner de contenido en Plantilla con header advanced. Gobierno de Aragón" %}
+{% extends "pages/_template.with-header-advanced.njk" %}

package/docs/spinner-plantilla-editar-con-cabecera-fija.html

@@ -0,0 +1,5 @@
+{% set title = "Spinner de contenido en Plantilla editar con cabecera fija. Gobierno de Aragón" %}
+{% extends "pages/_template.edit-fixed.njk" %}
+
+{# Use headerTitleEditBlock and headerActionsEditBlock template blocks to customize the fixed header #}
+

package/docs/spinner-plantilla-logueado-con-cabecera-fija.html

@@ -0,0 +1,2 @@
+{% set title = "Spinner de contenido en Plantilla logueado con cabecera fija. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-fixed.njk" %}

package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html

@@ -0,0 +1,4 @@
+{% set title = "Spinner de contenido en Plantilla logueado con selector de app y subheader. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-selector-subheader.njk" %}
+
+

package/docs/spinner-plantilla-logueado-con-titulo-de-app.html

@@ -0,0 +1,2 @@
+{% set title = "Spinner de contenido en Plantilla logueado con título de app. Gobierno de Aragón" %}
+{% extends "pages/_template.logged.njk" %}

package/docs/spinner-plantilla-sin-loguear.html

@@ -0,0 +1,18 @@
+{% set title = "Spinner de página en Plantilla sin loguear. Gobierno de Aragón" %}
+{% extends "pages/_template.logged-out.njk" %}
+
+{% block pageSpinnerBlock %}
+  {% include "pages/_page.spinner-show.njk" %}
+{% endblock %}
+{% block headerBlock %}
+{% endblock %}
+{% block notificationHeaderBlock %}
+{% endblock %}
+{% block contentBlock %}
+{% endblock %}
+{% block notificationFooterBlock %}
+{% endblock %}
+{% block footerBlock %}
+{% endblock %}
+{% block modalBlock %}
+{% endblock %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/css/component.headroom.css

@@ -0,0 +1,31 @@
+/* ==========================================================================
+   component.headroom.css
+   ========================================================================== */
+
+
+@layer components {
+  .headroom {
+    @apply lg:fixed !important;
+    @apply lg:top-0;
+    @apply lg:w-full;
+    @apply lg:transform;
+    @apply lg:transition-transform;
+    @apply lg:duration-500;
+    @apply lg:z-10;
+  }
+  .headroom--pinned {
+    @apply lg:translate-y-0;
+  }
+  .headroom--unpinned {
+    @apply lg:-translate-y-full;
+  }
+
+  .c-anchor-scroll {
+    scroll-margin-top: 4rem;
+  }
+
+  .c-anchor-scroll-edit {
+    scroll-margin-top: 5.375rem;
+  }
+}
+

package/src/css/styles.css

@@ -39,6 +39,7 @@
 @import "../templates/components/tree/_styles.tree.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";
+@import "./component.headroom.css";
 
 /* Framework utilities */
 @import "tailwindcss/utilities";

package/src/js/headroom.min.js

@@ -0,0 +1,7 @@
+/*!
+ * headroom.js v0.12.0 - Give your page some headroom. Hide your header until you need it
+ * Copyright (c) 2020 Nick Williams - http://wicky.nillia.ms/headroom.js
+ * License: MIT
+ */
+
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).Headroom=n()}(this,function(){"use strict";function t(){return"undefined"!=typeof window}function d(t){return function(t){return t&&t.document&&function(t){return 9===t.nodeType}(t.document)}(t)?function(t){var n=t.document,o=n.body,s=n.documentElement;return{scrollHeight:function(){return Math.max(o.scrollHeight,s.scrollHeight,o.offsetHeight,s.offsetHeight,o.clientHeight,s.clientHeight)},height:function(){return t.innerHeight||s.clientHeight||o.clientHeight},scrollY:function(){return void 0!==t.pageYOffset?t.pageYOffset:(s||o.parentNode||o).scrollTop}}}(t):function(t){return{scrollHeight:function(){return Math.max(t.scrollHeight,t.offsetHeight,t.clientHeight)},height:function(){return Math.max(t.offsetHeight,t.clientHeight)},scrollY:function(){return t.scrollTop}}}(t)}function n(t,s,e){var n,o=function(){var n=!1;try{var t={get passive(){n=!0}};window.addEventListener("test",t,t),window.removeEventListener("test",t,t)}catch(t){n=!1}return n}(),i=!1,r=d(t),l=r.scrollY(),a={};function c(){var t=Math.round(r.scrollY()),n=r.height(),o=r.scrollHeight();a.scrollY=t,a.lastScrollY=l,a.direction=l<t?"down":"up",a.distance=Math.abs(t-l),a.isOutOfBounds=t<0||o<t+n,a.top=t<=s.offset[a.direction],a.bottom=o<=t+n,a.toleranceExceeded=a.distance>s.tolerance[a.direction],e(a),l=t,i=!1}function h(){i||(i=!0,n=requestAnimationFrame(c))}var u=!!o&&{passive:!0,capture:!1};return t.addEventListener("scroll",h,u),c(),{destroy:function(){cancelAnimationFrame(n),t.removeEventListener("scroll",h,u)}}}function o(t){return t===Object(t)?t:{down:t,up:t}}function s(t,n){n=n||{},Object.assign(this,s.options,n),this.classes=Object.assign({},s.options.classes,n.classes),this.elem=t,this.tolerance=o(this.tolerance),this.offset=o(this.offset),this.initialised=!1,this.frozen=!1}return s.prototype={constructor:s,init:function(){return s.cutsTheMustard&&!this.initialised&&(this.addClass("initial"),this.initialised=!0,setTimeout(function(t){t.scrollTracker=n(t.scroller,{offset:t.offset,tolerance:t.tolerance},t.update.bind(t))},100,this)),this},destroy:function(){this.initialised=!1,Object.keys(this.classes).forEach(this.removeClass,this),this.scrollTracker.destroy()},unpin:function(){!this.hasClass("pinned")&&this.hasClass("unpinned")||(this.addClass("unpinned"),this.removeClass("pinned"),this.onUnpin&&this.onUnpin.call(this))},pin:function(){this.hasClass("unpinned")&&(this.addClass("pinned"),this.removeClass("unpinned"),this.onPin&&this.onPin.call(this))},freeze:function(){this.frozen=!0,this.addClass("frozen")},unfreeze:function(){this.frozen=!1,this.removeClass("frozen")},top:function(){this.hasClass("top")||(this.addClass("top"),this.removeClass("notTop"),this.onTop&&this.onTop.call(this))},notTop:function(){this.hasClass("notTop")||(this.addClass("notTop"),this.removeClass("top"),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){this.hasClass("bottom")||(this.addClass("bottom"),this.removeClass("notBottom"),this.onBottom&&this.onBottom.call(this))},notBottom:function(){this.hasClass("notBottom")||(this.addClass("notBottom"),this.removeClass("bottom"),this.onNotBottom&&this.onNotBottom.call(this))},shouldUnpin:function(t){return"down"===t.direction&&!t.top&&t.toleranceExceeded},shouldPin:function(t){return"up"===t.direction&&t.toleranceExceeded||t.top},addClass:function(t){this.elem.classList.add.apply(this.elem.classList,this.classes[t].split(" "))},removeClass:function(t){this.elem.classList.remove.apply(this.elem.classList,this.classes[t].split(" "))},hasClass:function(t){return this.classes[t].split(" ").every(function(t){return this.classList.contains(t)},this.elem)},update:function(t){t.isOutOfBounds||!0!==this.frozen&&(t.top?this.top():this.notTop(),t.bottom?this.bottom():this.notBottom(),this.shouldUnpin(t)?this.unpin():this.shouldPin(t)&&this.pin())}},s.options={tolerance:{up:0,down:0},offset:0,scroller:t()?window:null,classes:{frozen:"headroom--frozen",pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},s.cutsTheMustard=!!(t()&&function(){}.bind&&"classList"in document.documentElement&&Object.assign&&Object.keys&&requestAnimationFrame),s});

package/src/templates/includes/_abrir-notificaciones.njk

@@ -0,0 +1,3 @@
+<p class="c-paragraph-base">
+  Abrir <a href="javascript:void(0)" class="c-link" onclick="document.getElementById('notification-header-container').removeAttribute('aria-hidden'); openAlert('notification-header', this);">Notification header</a>, <a href="javascript:void(0)" class="c-link" onclick="document.getElementById('notification-footer-container').removeAttribute('aria-hidden'); openAlert('notification-footer', this);">Notification footer</a>, <a href="javascript:void(0)" class="c-link" onclick="document.getElementById('notification-inner-content-container').removeAttribute('aria-hidden'); openAlert('notification-inner-content', this);">Notification inner-content (sólo en páginas con barra lateral)</a>
+</p>

package/src/templates/includes/_acciones-de-cabecera.njk

@@ -0,0 +1,28 @@
+{% from "components/button/_macro.button.njk" import componentButton %}
+
+<nav aria-labelledby="acciones-de-cabecera">
+  <p class="sr-only" id="acciones-de-cabecera">Menú de acciones</p>
+  <ul class="flex flex-wrap flex-column-reverse lg:flex-row-reverse gap-sm lg:items-center lg:ml-auto lg:pl-base">
+    <li>
+      {{ componentButton({
+        "text": "Guardar y salir",
+        "href": "#",
+        "classes": "c-button--primary c-button--sm"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Guardar",
+        "href": "#",
+        "classes": "c-button--sm"
+      })  }}
+    </li>
+    <li>
+      {{ componentButton({
+        "text": "Salir",
+        "href": "#",
+        "classes": "c-button--sm"
+      })  }}
+    </li>
+  </ul>
+</nav>

package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk

@@ -0,0 +1,5 @@
+<div class="pb-lg"></div>
+<h2 class="c-h1">Título de página (h2)</h2>
+<p class="c-paragraph-base">
+  Aqui un ejemplo de párrafo explicativo de la página. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, nobis quae amet esse! Accusamus, enim. Corrupti expedita officia perferendis quas dicta earum placeat voluptates, laudantium at, optio minus consequuntur pariatur.
+</p>

package/src/templates/includes/_ejemplo-titulo-parrafo.njk

@@ -0,0 +1,5 @@
+<div class="pb-lg"></div>
+<h1 class="c-h1">Título de página (h1)</h1>
+<p class="c-paragraph-base">
+  Aqui un ejemplo de párrafo explicativo de la página. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, nobis quae amet esse! Accusamus, enim. Corrupti expedita officia perferendis quas dicta earum placeat voluptates, laudantium at, optio minus consequuntur pariatur.
+</p>

package/src/templates/includes/_loremipsum-large.njk

@@ -0,0 +1 @@
+<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quia recusandae quibusdam cum nam quaerat, reprehenderit, doloribus excepturi odit praesentium dolorum at aut cumque eius ullam reiciendis! Aspernatur, vero, doloremque! Quaerat veniam velit totam atque voluptatum facilis cupiditate aperiam a harum, voluptate sapiente repellendus natus culpa ipsum illum earum libero nostrum debitis cumque. Nihil explicabo dolorem nulla illo architecto ipsam. Tenetur minima nihil doloremque praesentium ullam, odio animi quisquam eaque aperiam suscipit porro voluptate repellendus itaque laudantium! Molestiae quos quae error corrupti minima hic eveniet quod reiciendis, consectetur suscipit quidem. Distinctio, in, assumenda nulla debitis obcaecati temporibus fuga provident excepturi vel, beatae sit reprehenderit harum unde, accusamus quod ipsa blanditiis ea aperiam quasi inventore. Beatae earum pariatur, eius officia vitae! Dolores explicabo tenetur rem illo, odio! Sint temporibus, explicabo cupiditate voluptate ex, possimus magni quibusdam, molestiae porro quidem molestias sed! Nam sit, deserunt quisquam in! Eum, nemo id nostrum illo. Officia omnis amet, officiis quia tempora reprehenderit ipsam praesentium nam at eum soluta labore impedit cum distinctio quo placeat. Est architecto omnis ducimus perspiciatis rem accusamus illum voluptatibus voluptates distinctio. Explicabo sapiente iure laboriosam hic, dignissimos ducimus inventore quaerat reiciendis iusto, sit corporis modi quam eligendi eum asperiores nihil accusantium nostrum voluptatibus sint, doloremque officiis voluptate deleniti recusandae. Impedit, consequuntur. Iusto tempora minus cumque debitis beatae itaque, aliquam corrupti quia natus, voluptas eligendi, facere voluptatum quam. Excepturi voluptatem, iste numquam tenetur corporis, adipisci similique est mollitia, nobis inventore, nemo harum. Quia ex accusantium impedit architecto quidem optio laudantium facere dolorum, minima autem eum repellendus fuga ullam praesentium cupiditate neque fugit hic quae incidunt illum accusamus, rerum, quod. Atque, consectetur, aut? Quod, in. Corrupti voluptatem natus ipsum, sunt et accusantium aliquam eum quidem dolore sint explicabo nemo neque debitis dicta necessitatibus provident dolores corporis, ut suscipit. Perferendis quo quos fuga, praesentium! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta quia recusandae quibusdam cum nam quaerat, reprehenderit, doloribus excepturi odit praesentium dolorum at aut cumque eius ullam reiciendis! Aspernatur, vero, doloremque! Quaerat veniam velit totam atque voluptatum facilis cupiditate aperiam a harum, voluptate sapiente repellendus natus culpa ipsum illum earum libero nostrum debitis cumque. Nihil explicabo dolorem nulla illo architecto ipsam. Tenetur minima nihil doloremque praesentium ullam, odio animi quisquam eaque aperiam suscipit porro voluptate repellendus itaque laudantium! Molestiae quos quae error corrupti minima hic eveniet quod reiciendis, consectetur suscipit quidem. Distinctio, in, assumenda nulla debitis obcaecati temporibus fuga provident excepturi vel, beatae sit reprehenderit harum unde, accusamus quod ipsa blanditiis ea aperiam quasi inventore. Beatae earum pariatur, eius officia vitae! Dolores explicabo tenetur rem illo, odio! Sint temporibus, explicabo cupiditate voluptate ex, possimus magni quibusdam, molestiae porro quidem molestias sed! Nam sit, deserunt quisquam in! Eum, nemo id nostrum illo. Officia omnis amet, officiis quia tempora reprehenderit ipsam praesentium nam at eum soluta labore impedit cum distinctio quo placeat. Est architecto omnis ducimus perspiciatis rem accusamus illum voluptatibus voluptates distinctio. Explicabo sapiente iure laboriosam hic, dignissimos ducimus inventore quaerat reiciendis iusto, sit corporis modi quam eligendi eum asperiores nihil accusantium nostrum voluptatibus sint, doloremque officiis voluptate deleniti recusandae. Impedit, consequuntur. Iusto tempora minus cumque debitis beatae itaque, aliquam corrupti quia natus, voluptas eligendi, facere voluptatum quam. Excepturi voluptatem, iste numquam tenetur corporis, adipisci similique est mollitia, nobis inventore, nemo harum. Quia ex accusantium impedit architecto quidem optio laudantium facere dolorum, minima autem eum repellendus fuga ullam praesentium cupiditate neque fugit hic quae incidunt illum accusamus, rerum, quod. Atque, consectetur, aut? Quod, in. Corrupti voluptatem natus ipsum, sunt et accusantium aliquam eum quidem dolore sint explicabo nemo neque debitis dicta necessitatibus provident dolores corporis, ut suscipit. Perferendis quo quos fuga, praesentium!</p>

package/src/templates/includes/_test-include.njk

@@ -0,0 +1,14 @@
+{% from "components/test-component/_macro.test-component.njk" import componentTestComponent %}
+{% from "components/test-component-caller/_macro.test-component-caller.njk" import componentTestComponentCaller %}
+
+<div class="p-base border border-neutral-base">
+  <p>Este es un include de prueba</p>
+  {{ componentTestComponent({
+    "html": 'Este es <strong class="font-bold">un componente de prueba</strong>'
+  })  }}
+  {% call componentTestComponentCaller({
+    "html": 'Este es un componente <strong class="font-bold ">con caller</strong>'
+  })  %}
+      <div class="w-48 p-2"><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+  {% endcall %}
+</div>

package/src/templates/pages/_page.foot-headroom.njk

@@ -0,0 +1,32 @@
+<!-- page.foot-headroom -->
+<script src="js/headroom.min.js"></script>
+<script>
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-header'){
+      const options = {
+        // vertical offset in px before element is first unpinned
+        offset : 0,
+        // scroll tolerance in px before state changes
+        tolerance : {
+          up : 0,
+          down : 0
+        },
+        // callback when unpinned, `this` is headroom object
+        onUnpin : function() {
+          // oculta todos los dropdowns que hubiese abiertos en el header
+        }
+      };
+      const headroom = new Headroom(modules[item], options);
+      headroom.init();
+    }
+  }
+</script>
+<script src="js/popper.min.js"></script>
+<script src="js/tippy-bundle.umd.min.js"></script>
+<script type="module" src="js/index.js"></script>
+</body>
+</html>
+

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

@@ -0,0 +1,7 @@
+<!-- page.foot -->
+<script src="js/popper.min.js"></script>
+<script src="js/tippy-bundle.umd.min.js"></script>
+<script type="module" src="js/index.js"></script>
+</body>
+</html>
+

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

@@ -0,0 +1,20 @@
+<!-- page.footer -->
+{% from "components/footer/_macro.footer.njk" import componentFooter %}
+{{ componentFooter({
+  "meta": {
+    "visuallyHiddenTitle": "Enlaces a pie de página",
+    "items": [
+      {
+        "href": "pagina-accesibilidad.html",
+        "text": "Accesibilidad"
+      },
+      {
+        "href": "pagina-mapa-web.html",
+        "text": "Mapa web"
+      }
+    ],
+    "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+  },
+  "classes": "mt-lg lg:mt-48"
+})  }}
+<!-- /page.footer -->

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

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ title if title else "Project title" }}</title>
+  <link rel="icon" type="image/x-icon" href="https://aplicaciones.aragon.es/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<!-- /page.head -->

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

@@ -0,0 +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 -->

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

@@ -0,0 +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>
+<!-- /page.notification-edit -->