desy-html 12.1.0 → 13.0.0

package/src/templates/components/tree/params.tree.yaml

@@ -1,169 +1,169 @@
-params:
-- name: type
-  type: string
-  required: false
-  description: Type of input control to render. Admitted values are `navigation`, `checkbox` and `radio` or not set. Defaults to `radio`.
-- name: searchbar
-  type: component
-  required: false
-  description: A searchbar component to filter the items. Inherits all the searchbar component params.
-- name: ariaLabel
-  type: text
-  required: false
-  description: aria-label for nav tag. Should be a description of tree type navigation.
-- name: hasUnderline
-  type: boolean
-  required: false
-  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-- name: fieldset
-  type: object
-  required: false
-  description: Options for the fieldset component (e.g. legend).
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component (e.g. text).
-  isComponent: true
-- name: errorMessage
-  type: object
-  required: false
-  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
-  isComponent: true
-- name: formGroup
-  type: object
-  required: false
-  description: Options for the form-group wrapper
-  params:
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the form group (e.g. to show error state for the whole group)
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each item if no id is specified on each item.
-- name: name
-  type: string
-  required: true
-  description: Name attribute for all checkbox/radio items.
-- name: heading
-  type: object
-  required: true
-  description: Options for the heading
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the heading.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the component. If omitted, then idPrefix option will be applied.
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
-- name: items
-  type: array
-  required: true
-  description: Array of tree items objects.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
-  - name: html
-    type: string
-    required: true
-    description: If `text` is set, this is not required. HTML to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
-  - name: href
-    type: string
-    required: false
-    description: Item link in tree type navigation.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-  - name: name
-    type: string
-    required: true
-    description: Specific name for the checkbox/radio item. If omitted, then component global `name` string will be applied.
-  - name: value
-    type: string
-    required: true
-    description: Value for the checkbox/radio input.
-  - name: label
-    type: object
-    required: false
-    description: Provide attributes and classes to each checkbox/radio item label.
-    isComponent: true
-  - name: hint
-    type: object
-    required: false
-    description: Provide hint to each checkbox/radio item.
-    isComponent: true
-  - name: checked
-    type: boolean
-    required: false
-    description: If true, checkbox/radio will be checked.
-  - name: isIndeterminate
-    type: boolean
-    required: false
-    description: If true, the checkbox will have an additional indeterminate state to show a partial true. Only for checkbox item.
-  - name: indeterminateChecked
-    type: boolean
-    required: false
-    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value. Only for checkbox item.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, tree will be disabled.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the item.
-  - name: expanded
-    type: boolean
-    required: false
-    description: If true, tree sub will be expanded.
-  - name: sub
-    type: boolean
-    required: false
-    description: If true, content provided will be revealed when the item is expanded.
-  - name: sub.classes
-    type: string
-    required: false
-    description: Classes to add to the sub container.
-  - name: sub.attributes
-    type: string
-    required: false
-    description: HTML attributes (for example data attributes) to add to the sub container.
-  - name: sub.items
-    type: array
-    required: false
-    description: Provide subitems for the sub reveal. Each items have same params as this item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the tree container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the tree container.
+params:
+- name: type
+  type: string
+  required: false
+  description: Type of input control to render. Admitted values are `navigation`, `checkbox` and `radio` or not set. Defaults to `radio`.
+- name: searchbar
+  type: component
+  required: false
+  description: A searchbar component to filter the items. Inherits all the searchbar component params.
+- name: ariaLabel
+  type: text
+  required: false
+  description: aria-label for nav tag. Should be a description of tree type navigation.
+- name: hasUnderline
+  type: boolean
+  required: false
+  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
+- name: fieldset
+  type: object
+  required: false
+  description: Options for the fieldset component (e.g. legend).
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component (e.g. text).
+  isComponent: true
+- name: errorMessage
+  type: object
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+  isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the form group (e.g. to show error state for the whole group)
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: name
+  type: string
+  required: true
+  description: Name attribute for all checkbox/radio items.
+- name: heading
+  type: object
+  required: true
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the component. If omitted, then idPrefix option will be applied.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: items
+  type: array
+  required: true
+  description: Array of tree items objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within each tree item label. If `html` is provided, the `text` argument will be ignored.
+  - name: href
+    type: string
+    required: false
+    description: Item link in tree type navigation.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: name
+    type: string
+    required: true
+    description: Specific name for the checkbox/radio item. If omitted, then component global `name` string will be applied.
+  - name: value
+    type: string
+    required: true
+    description: Value for the checkbox/radio input.
+  - name: label
+    type: object
+    required: false
+    description: Provide attributes and classes to each checkbox/radio item label.
+    isComponent: true
+  - name: hint
+    type: object
+    required: false
+    description: Provide hint to each checkbox/radio item.
+    isComponent: true
+  - name: checked
+    type: boolean
+    required: false
+    description: If true, checkbox/radio will be checked.
+  - name: isIndeterminate
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an additional indeterminate state to show a partial true. Only for checkbox item.
+  - name: indeterminateChecked
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value. Only for checkbox item.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, tree will be disabled.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+  - name: expanded
+    type: boolean
+    required: false
+    description: If true, tree sub will be expanded.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+  - name: sub.classes
+    type: string
+    required: false
+    description: Classes to add to the sub container.
+  - name: sub.attributes
+    type: string
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub container.
+  - name: sub.items
+    type: array
+    required: false
+    description: Provide subitems for the sub reveal. Each items have same params as this item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the tree container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the tree container.

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

@@ -1,3 +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 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/_abrir-notificaciones.njk

@@ -1,3 +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>
+<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>
 </p>

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

@@ -1,28 +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>
+{% 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

@@ -1,5 +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.
+<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

@@ -1,5 +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.
+<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/_test-include.njk

@@ -1,14 +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 %}
+{% 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

@@ -1,33 +1,33 @@
-<!-- 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 type="module" src="js/cally.js"></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>
-
+<!-- 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 type="module" src="js/cally.js"></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

@@ -1,8 +1,8 @@
-<!-- page.foot -->
-<script type="module" src="js/cally.js"></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>
-
+<!-- page.foot -->
+<script type="module" src="js/cally.js"></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.footer.njk

@@ -1,20 +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 -->
+{% 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

@@ -1,13 +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>
+<!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 -->