desy-html 12.1.0 → 13.0.0

package/src/templates/components/error-summary/_examples.error-summary.njk

@@ -1,82 +1,82 @@
-{% set exampleComponent = "error-summary" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "titleText": "Problemas encontrados",
-      "headingLevel": 2,
-      "errorList": [
-        {
-          "text": "El campo de Nombre no puede estar vacío.",
-          "href": "#example-error-1"
-        },
-        {
-          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
-          "href": "#example-error-2"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado de nivel 3",
-    "data": {
-      "titleText": "Título con h3",
-      "headingLevel": 3,
-      "errorList": [
-        {
-          "text": "El campo de Nombre no puede estar vacío.",
-          "href": "#example-error-1"
-        },
-        {
-          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
-          "href": "#example-error-2"
-        }
-      ]
-    }
-  },
-  {
-    "name": "sin enlaces",
-    "data": {
-      "titleText": "Problemas encontrados",
-      "headingLevel": 2,
-      "errorList": [
-        {
-          "text": "Nombre de usuario o contraseña incorrectos."
-        }
-      ]
-    }
-  },
-  {
-    "name": "con y sin enlaces",
-    "data": {
-      "titleText": "Problemas encontrados",
-      "headingLevel": 2,
-      "errorList": [
-        {
-          "text": "Nombre de usuario o contraseña incorrectos."
-        },
-        {
-          "text": "Acepta los términos del servicio para acceder.",
-          "href": "#example-error-1"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con todo",
-    "data": {
-      "titleText": "Problemas encontrados",
-      "headingLevel": 2,
-      "descriptionText": "Por favor, corrige los problemas siguientes.",
-      "errorList": [
-        {
-          "text": "Nombre de usuario o contraseña incorrectos."
-        },
-        {
-          "text": "Acepta los términos del servicio para acceder.",
-          "href": "#example-error-1"
-        }
-      ]
-    }
-  }
+{% set exampleComponent = "error-summary" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "titleText": "Problemas encontrados",
+      "headingLevel": 2,
+      "errorList": [
+        {
+          "text": "El campo de Nombre no puede estar vacío.",
+          "href": "#example-error-1"
+        },
+        {
+          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
+          "href": "#example-error-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado de nivel 3",
+    "data": {
+      "titleText": "Título con h3",
+      "headingLevel": 3,
+      "errorList": [
+        {
+          "text": "El campo de Nombre no puede estar vacío.",
+          "href": "#example-error-1"
+        },
+        {
+          "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
+          "href": "#example-error-2"
+        }
+      ]
+    }
+  },
+  {
+    "name": "sin enlaces",
+    "data": {
+      "titleText": "Problemas encontrados",
+      "headingLevel": 2,
+      "errorList": [
+        {
+          "text": "Nombre de usuario o contraseña incorrectos."
+        }
+      ]
+    }
+  },
+  {
+    "name": "con y sin enlaces",
+    "data": {
+      "titleText": "Problemas encontrados",
+      "headingLevel": 2,
+      "errorList": [
+        {
+          "text": "Nombre de usuario o contraseña incorrectos."
+        },
+        {
+          "text": "Acepta los términos del servicio para acceder.",
+          "href": "#example-error-1"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con todo",
+    "data": {
+      "titleText": "Problemas encontrados",
+      "headingLevel": 2,
+      "descriptionText": "Por favor, corrige los problemas siguientes.",
+      "errorList": [
+        {
+          "text": "Nombre de usuario o contraseña incorrectos."
+        },
+        {
+          "text": "Acepta los términos del servicio para acceder.",
+          "href": "#example-error-1"
+        }
+      ]
+    }
+  }
 ] %}

package/src/templates/components/error-summary/_macro.error-summary.njk

@@ -1,5 +1,5 @@
-<!-- _macro.error-message.njk -->
-
-{% macro componentErrorSummary(params) %}
-{% include "./_template.error-summary.njk" %}
-{% endmacro %}
+<!-- _macro.error-message.njk -->
+
+{% macro componentErrorSummary(params) %}
+{% include "./_template.error-summary.njk" %}
+{% endmacro %}

package/src/templates/components/error-summary/_template.error-summary.njk

@@ -1,49 +1,49 @@
-<!-- error-summary -->
-<div class="p-base bg-white border-2 border-alert-base
-  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-error-summary">
-  {% if params.headingLevel == "1" %}
-  <h1 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h1>
-  {% elseif params.headingLevel == "2" %}
-  <h2 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h2>
-  {% elseif params.headingLevel == "3" %}
-  <h3 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h3>
-  {% elseif params.headingLevel == "4" %}
-  <h4 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h4>
-  {% elseif params.headingLevel == "5" %}
-  <h5 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h5>
-  {% else %}
-  <h2 class="mb-base font-bold" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h2>
-  {% endif %}
-  <div>
-    {% if params.descriptionHtml or params.descriptionText %}
-    <p class="mb-base">
-      {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
-    </p>
-    {% endif %}
-    <ul class="font-semibold text-alert-base">
-    {% for item in params.errorList %}
-      <li>
-      {% if item.href %}
-        <a href="{{ item.href }}" class="c-link c-link--alert"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
-      {% else %}
-        {{ item.html | filterquotes | safe if item.html else item.text }}
-      {% endif %}
-      </li>
-    {% endfor %}
-    </ul>
-  </div>
-</div>
+<!-- error-summary -->
+<div class="p-base bg-white border-2 border-alert-base
+  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-error-summary">
+  {% if params.headingLevel == "1" %}
+  <h1 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h1>
+  {% elseif params.headingLevel == "2" %}
+  <h2 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h2>
+  {% elseif params.headingLevel == "3" %}
+  <h3 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h3>
+  {% elseif params.headingLevel == "4" %}
+  <h4 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h4>
+  {% elseif params.headingLevel == "5" %}
+  <h5 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h5>
+  {% else %}
+  <h2 class="mb-base font-bold" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h2>
+  {% endif %}
+  <div>
+    {% if params.descriptionHtml or params.descriptionText %}
+    <p class="mb-base">
+      {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
+    </p>
+    {% endif %}
+    <ul class="font-semibold text-alert-base">
+    {% for item in params.errorList %}
+      <li>
+      {% if item.href %}
+        <a href="{{ item.href }}" class="c-link c-link--alert inline-block pb-sm"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
+      {% else %}
+        {{ item.html | filterquotes | safe if item.html else item.text }}
+      {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>
 <!-- /error-summary -->

package/src/templates/components/error-summary/params.error-summary.yaml

@@ -1,53 +1,53 @@
-params:
-- name: titleText
-  type: string
-  required: true
-  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
-- name: titleHtml
-  type: string
-  required: true
-  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
-- 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: descriptionText
-  type: string
-  required: false
-  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
-- name: descriptionHtml
-  type: string
-  required: false
-  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
-- name: errorList
-  type: array
-  required: true
-  description: Contains an array of error link items and all their available arguments.
-  params:
-  - name: href
-    type: string
-    required: false
-    description: Href attribute for the error link item. If provided item will be an anchor.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text for the error link 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 for the error link item. If `html` is provided, the `text` argument will be ignored.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the error link anchor.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the error-summary container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the error-summary container.
-
-accessibilityCriteria: |
+params:
+- name: titleText
+  type: string
+  required: true
+  description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
+- name: titleHtml
+  type: string
+  required: true
+  description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
+- 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: descriptionText
+  type: string
+  required: false
+  description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
+- name: descriptionHtml
+  type: string
+  required: false
+  description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
+- name: errorList
+  type: array
+  required: true
+  description: Contains an array of error link items and all their available arguments.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: Href attribute for the error link item. If provided item will be an anchor.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the error link 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 for the error link item. If `html` is provided, the `text` argument will be ignored.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the error link anchor.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the error-summary container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the error-summary container.
+
+accessibilityCriteria: |
   - Must be focused when the page loads

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

@@ -1,89 +1,89 @@
-{% from "components/input/_macro.input.njk" import componentInput %}
-
-{% macro callerExample(id='id') %}
-{{ componentInput({
-  "label": {
-    "text": "Número de teléfono"
-  },
-  "id": "tel-id-" + id,
-  "name": "tel-name-" + id
-})  }}
-{% endmacro %}
-
-{% macro callerErrorExample(id='id') %}
-{{ componentInput({
-  "label": {
-    "text": "Número de teléfono"
-  },
-  "id": "tel-error-id-" + id,
-  "name": "tel-error-name-" + id,
-  "errorMessage": {
-    "text": "Error: Mensaje de error aqui"
-  }
-})  }}
-{% endmacro %}
-
-
-{% set exampleComponent = "fieldset" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "mb-sm"
-      },
-      "caller": callerExample('1').val
-    }
-  },
-  {
-    "name": "con error",
-    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "mb-sm"
-      },
-      "errorId": "error-id",
-      "caller": callerErrorExample('1').val
-    }
-  },
-  {
-    "name": "con label como encabezado",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h1 mb-sm",
-        "isPageHeading": true
-      },
-      "caller": callerExample('2').val
-
-    }
-  },
-  {
-    "name": "con label como encabezado con h3",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h3 mb-sm",
-        "isPageHeading": true
-      },
-      "headingLevel": 3,
-      "caller": callerExample('3').val
-
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "mb-sm -ml-base px-base bg-white"
-      },
-      "classes": "p-lg border border-neutral-base",
-      "caller": callerExample('4').val
-    }
-  }
+{% from "components/input/_macro.input.njk" import componentInput %}
+
+{% macro callerExample(id='id') %}
+{{ componentInput({
+  "label": {
+    "text": "Número de teléfono"
+  },
+  "id": "tel-id-" + id,
+  "name": "tel-name-" + id
+})  }}
+{% endmacro %}
+
+{% macro callerErrorExample(id='id') %}
+{{ componentInput({
+  "label": {
+    "text": "Número de teléfono"
+  },
+  "id": "tel-error-id-" + id,
+  "name": "tel-error-name-" + id,
+  "errorMessage": {
+    "text": "Error: Mensaje de error aqui"
+  }
+})  }}
+{% endmacro %}
+
+
+{% set exampleComponent = "fieldset" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "legend": {
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "mb-sm"
+      },
+      "caller": callerExample('1').val
+    }
+  },
+  {
+    "name": "con error",
+    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML.",
+    "data": {
+      "legend": {
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "mb-sm"
+      },
+      "errorId": "error-id",
+      "caller": callerErrorExample('1').val
+    }
+  },
+  {
+    "name": "con label como encabezado",
+    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
+    "data": {
+      "legend": {
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "c-h1 mb-sm",
+        "isPageHeading": true
+      },
+      "caller": callerExample('2').val
+
+    }
+  },
+  {
+    "name": "con label como encabezado con h3",
+    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
+    "data": {
+      "legend": {
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "c-h3 mb-sm",
+        "isPageHeading": true
+      },
+      "headingLevel": 3,
+      "caller": callerExample('3').val
+
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "legend": {
+        "text": "¿Cuál es tu número de teléfono?",
+        "classes": "mb-sm -ml-base px-base bg-white"
+      },
+      "classes": "p-lg border border-neutral-base",
+      "caller": callerExample('4').val
+    }
+  }
 ] %}

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

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