desy-html 12.1.0 → 13.0.0

package/src/templates/components/nav/_macro.nav.njk

@@ -1,3 +1,3 @@
-{% macro componentNav(params) %}
-{% include "./_template.nav.njk" %}
-{% endmacro %}
+{% macro componentNav(params) %}
+{% include "./_template.nav.njk" %}
+{% endmacro %}

package/src/templates/components/nav/_template.nav.njk

@@ -1,54 +1,54 @@
-{#- If an id 'prefix' is not passed, fall back to using a default one
-   instead -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
-
-{% set commonAttributes %} data-module="c-nav" class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
-
-
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-  {% for item in params.items %}
-  {% if item %}
-  {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-  {% if item.id %}
-  {% set id = item.id %}
-  {% else %}
-  {% set id = idPrefix + "-" + loop.index %}
-  {% endif %}
-  {% set commonItemAttributes %} {% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-<li>
-  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}  {% if item.active %} aria-current="page"{% endif %}{{- commonItemAttributes | safe }}>
-      {% if item.active %}
-      <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
-      {% else %}
-      {{ item.html | filterquotes | safe if item.html else item.text }}
-      {% endif %}
-      {% if item.disabled %}
-      <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
-      {% endif %}
-  </a>
-</li>
-  {% if item.divider %}
-<li class="my-sm border-b border-neutral-base" aria-hidden="true">
-  <div class="sr-only">Separador</div>
-</li>
-  {% endif %}
-  {% endif %}
-  {% endfor %}
-{% endset -%}
-
-<!-- nav -->
-{% if params.hasNav == false %}
-<ul {{- commonAttributes | safe }}>
-  {{ innerHtml | safe | indent(2) }}
-</ul>
-{% else %}
-<nav {{- commonAttributes | safe }}>
-  <ul>
-    {{ innerHtml | safe | indent(4) }}
-  </ul>
-</nav>
-{% endif %}
+{#- If an id 'prefix' is not passed, fall back to using a default one
+   instead -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
+
+{% set commonAttributes %} data-module="c-nav" class="text-sm{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
+
+
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  {% for item in params.items %}
+  {% if item %}
+  {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+  {% if item.id %}
+  {% set id = item.id %}
+  {% else %}
+  {% set id = idPrefix + "-" + loop.index %}
+  {% endif %}
+  {% set commonItemAttributes %} {% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+<li>
+  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %}  {% if item.active %} aria-current="page"{% endif %}{{- commonItemAttributes | safe }}>
+      {% if item.active %}
+      <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
+      {% else %}
+      {{ item.html | filterquotes | safe if item.html else item.text }}
+      {% endif %}
+      {% if item.disabled %}
+      <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+      {% endif %}
+  </a>
+</li>
+  {% if item.divider %}
+<li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
+  <div class="sr-only">Separador</div>
+</li>
+  {% endif %}
+  {% endif %}
+  {% endfor %}
+{% endset -%}
+
+<!-- nav -->
+{% if params.hasNav == false %}
+<ul {{- commonAttributes | safe }}>
+  {{ innerHtml | safe | indent(2) }}
+</ul>
+{% else %}
+<nav {{- commonAttributes | safe }}>
+  <ul>
+    {{ innerHtml | safe | indent(4) }}
+  </ul>
+</nav>
+{% endif %}
 <!-- /nav -->

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

@@ -1,62 +1,62 @@
-params:
-- name: hasNav
-  type: boolean
-  required: false
-  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
-- name: idPrefix
-  type: string
-  required: true
-  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
-- name: items
-  type: array
-  required: true
-  description: Array of items objects.
-  params:
-  - name: href
-    type: string
-    required: true
-    description: Item link. If `hasNav` is `true`, use `#` here.
-  - name: target
-    type: string
-    required: false
-    description: The target where the item should link to.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each item. 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 item. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
-  - name: active
-    type: boolean
-    required: false
-    description: If true, item will be active.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, item will be disabled.
-  - name: divider
-    type: boolean
-    required: false
-    description: If true, a divider border will be shown after the item.
-  - 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: classes
-  type: string
-  required: false
-  description: Classes to add to the nav tag container.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: hasNav
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
+- name: idPrefix
+  type: string
+  required: true
+  description: String to prefix id for each item if no id is specified on each item. If not passed, fall back to using the name option instead.
+- name: items
+  type: array
+  required: true
+  description: Array of items objects.
+  params:
+  - name: href
+    type: string
+    required: true
+    description: Item link. If `hasNav` is `true`, use `#` here.
+  - name: target
+    type: string
+    required: false
+    description: The target where the item should link to.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each item. 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 item. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, item will be active.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, item will be disabled.
+  - name: divider
+    type: boolean
+    required: false
+    description: If true, a divider border will be shown after the item.
+  - 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: classes
+  type: string
+  required: false
+  description: Classes to add to the nav tag container.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the nav tag container.

package/src/templates/components/notification/_examples.notification.njk

@@ -1,193 +1,193 @@
-{% set exampleComponent = "notification" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "id": "default"
-    }
-  },
-  {
-    "name": "por defecto con html",
-    "data": {
-      "title":{
-        "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
-      },
-      "id": "default-with-html"
-    }
-  },
-  {
-    "name": "con description",
-    "data": {
-      "title":{
-        "html": "El documento se ha cargado correctamente"
-      },
-      "description":{
-        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
-      },
-      "id": "with-description"
-    }
-  },
-  {
-    "name": "con content",
-    "data": {
-      "title":{
-        "html": "El documento se ha cargado correctamente"
-      },
-      "content":{
-        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
-      },
-      "id": "with-content"
-    }
-  },
-  {
-    "name": "con items",
-    "data": {
-      "title":{
-        "text": "Problemas encontrados"
-      },
-      "items": [
-        {
-          "text": "Campo Nombre de la empresa está vacío",
-          "href": "#empresa"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#actividad"
-        },
-        {
-          "text": "El formato de correo electrónico es incorrecto",
-          "href": "#email"
-        }
-      ],
-      "id": "with-items"
-    }
-  },
-  {
-    "name": "con tipo: éxito",
-    "data": {
-      "title": {
-        "text": "El documento se ha cargado correctamente"
-      },
-      "type": "success",
-      "id": "type-success"
-    }
-  },
-  {
-    "name": "con tipo: alerta",
-    "data": {
-      "title":{
-        "text": "Problemas encontrados"
-      },
-      "items": [
-        {
-          "text": "Campo Nombre de la empresa está vacío",
-          "href": "#empresa"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#actividad"
-        },
-        {
-          "text": "El formato de correo electrónico es incorrecto",
-          "href": "#email"
-        }
-      ],
-      "type": "alert",
-      "id": "type-alert"
-    }
-  },
-  {
-    "name": "con tipo: info",
-    "data": {
-      "title": {
-        "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
-      },
-      "description":{
-        "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
-      },
-      "type": "info",
-      "id": "type-info"
-    }
-  },
-  {
-    "name": "con botón de cerrar",
-    "description": "Usa el parámetro <code>'isDismissible': true</code>",
-    "data": {
-      "title": {
-        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
-      },
-      "isDismissible": true,
-      "id": "with-close-button"
-    }
-  },
-  {
-    "name": "Cerrar la notificación con JavaScript",
-    "description": "Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification('with-close-button-js')</code> para cerrar la notificación. Es necesario usar el parámetro <code>'isDismissible': true</code>",
-    "data": {
-      "title": {
-        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
-      },
-      "isDismissible": true,
-      "id": "with-close-button-js"
-    }
-  },
-  {
-    "name": "con icono personalizado y clases",
-    "data": {
-      "title": {
-        "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
-      },
-      "description":{
-        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
-      },
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
-      },
-      "id": "with-custom-icon",
-      "classes": "border-neutral-dark bg-neutral-lighter"
-    }
-  },
-   {
-    "name": "Con encabezado",
-    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "headingLevel": 3,
-      "title": {
-        "text": "Esto es un título con h3"
-      },
-      "id": "headinglevel"
-    }
-  },
-  {
-    "name": "con parámetros mixtos",
-    "data": {
-      "title":{
-        "text": "No olvide adjuntar el registro de alta de la asociación",
-        "classes": "font-bold"
-      },
-      "description":{
-        "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
-      },
-      "items": [
-        {
-          "text": "Desde modelo",
-          "href": "#"
-        },
-        {
-          "text": "Obligatorio previo a resolución",
-          "href": "#"
-        },
-        {
-          "text": "Condicionado",
-          "href": "#"
-        }
-      ],
-      "type": "info",
-      "isDismissible": true,
-      "id": "with-mixed-params"
-    }
-  }
-] %}
+{% set exampleComponent = "notification" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "id": "default"
+    }
+  },
+  {
+    "name": "por defecto con html",
+    "data": {
+      "title":{
+        "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
+      },
+      "id": "default-with-html"
+    }
+  },
+  {
+    "name": "con description",
+    "data": {
+      "title":{
+        "html": "El documento se ha cargado correctamente"
+      },
+      "description":{
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
+      },
+      "id": "with-description"
+    }
+  },
+  {
+    "name": "con content",
+    "data": {
+      "title":{
+        "html": "El documento se ha cargado correctamente"
+      },
+      "content":{
+        "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
+      },
+      "id": "with-content"
+    }
+  },
+  {
+    "name": "con items",
+    "data": {
+      "title":{
+        "text": "Problemas encontrados"
+      },
+      "items": [
+        {
+          "text": "Campo Nombre de la empresa está vacío",
+          "href": "#empresa"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#actividad"
+        },
+        {
+          "text": "El formato de correo electrónico es incorrecto",
+          "href": "#email"
+        }
+      ],
+      "id": "with-items"
+    }
+  },
+  {
+    "name": "con tipo: éxito",
+    "data": {
+      "title": {
+        "text": "El documento se ha cargado correctamente"
+      },
+      "type": "success",
+      "id": "type-success"
+    }
+  },
+  {
+    "name": "con tipo: alerta",
+    "data": {
+      "title":{
+        "text": "Problemas encontrados"
+      },
+      "items": [
+        {
+          "text": "Campo Nombre de la empresa está vacío",
+          "href": "#empresa"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#actividad"
+        },
+        {
+          "text": "El formato de correo electrónico es incorrecto",
+          "href": "#email"
+        }
+      ],
+      "type": "alert",
+      "id": "type-alert"
+    }
+  },
+  {
+    "name": "con tipo: info",
+    "data": {
+      "title": {
+        "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
+      },
+      "description":{
+        "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
+      },
+      "type": "info",
+      "id": "type-info"
+    }
+  },
+  {
+    "name": "con botón de cerrar",
+    "description": "Usa el parámetro <code>'isDismissible': true</code>",
+    "data": {
+      "title": {
+        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
+      },
+      "isDismissible": true,
+      "id": "with-close-button"
+    }
+  },
+  {
+    "name": "Cerrar la notificación con JavaScript",
+    "description": "Puedes usar con javascript la función global <code>closeItemNotification(element)</code>, para cerrar la notificación. Ej: Abre la consola del navegador y escribe <code>closeItemNotification('with-close-button-js')</code> para cerrar la notificación. Es necesario usar el parámetro <code>'isDismissible': true</code>",
+    "data": {
+      "title": {
+        "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
+      },
+      "isDismissible": true,
+      "id": "with-close-button-js"
+    }
+  },
+  {
+    "name": "con icono personalizado y clases",
+    "data": {
+      "title": {
+        "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
+      },
+      "description":{
+        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+      },
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
+      },
+      "id": "with-custom-icon",
+      "classes": "border-neutral-dark bg-neutral-lighter"
+    }
+  },
+   {
+    "name": "Con encabezado",
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
+    "data": {
+      "headingLevel": 3,
+      "title": {
+        "text": "Esto es un título con h3"
+      },
+      "id": "headinglevel"
+    }
+  },
+  {
+    "name": "con parámetros mixtos",
+    "data": {
+      "title":{
+        "text": "No olvide adjuntar el registro de alta de la asociación",
+        "classes": "font-bold"
+      },
+      "description":{
+        "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
+      },
+      "items": [
+        {
+          "text": "Desde modelo",
+          "href": "#"
+        },
+        {
+          "text": "Obligatorio previo a resolución",
+          "href": "#"
+        },
+        {
+          "text": "Condicionado",
+          "href": "#"
+        }
+      ],
+      "type": "info",
+      "isDismissible": true,
+      "id": "with-mixed-params"
+    }
+  }
+] %}

package/src/templates/components/notification/_macro.notification.njk

@@ -1,3 +1,3 @@
-{% macro componentNotification(params) %}
-{% include "./_template.notification.njk" %}
-{% endmacro %}
+{% macro componentNotification(params) %}
+{% include "./_template.notification.njk" %}
+{% endmacro %}