desy-html 10.2.0 → 10.2.2

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

@@ -1,35 +1,35 @@
-<!-- card -->
-<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-    {% if params.super %}
-    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.super.html | safe if params.super.html}}
-    </div>
-    {% endif %}
-    <div class="flex">
-      {% if params.left %}
-      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.left.html | safe if params.left.html}}
-      </div>
-      {% endif %}
-      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
-        {% if caller %}
-        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
-        {% elseif params.caller %}
-        {{ params.caller | safe | indent(4) }}
-        {% endif %}
-      </div>
-      {% if params.right %}
-      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.right.html | safe if params.right.html}}
-      </div>
-      {% endif %}
-    </div>
-    {% if params.sub %}
-    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.sub.html | safe if params.sub.html}}
-    </div>
-    {% endif %}
-  </div>
-</div>
+<!-- card -->
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    {% if params.super %}
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.super.html | safe if params.super.html}}
+    </div>
+    {% endif %}
+    <div class="flex">
+      {% if params.left %}
+      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.left.html | safe if params.left.html}}
+      </div>
+      {% endif %}
+      <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
+        {% if caller %}
+        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
+        {% elseif params.caller %}
+        {{ params.caller | safe | indent(4) }}
+        {% endif %}
+      </div>
+      {% if params.right %}
+      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.right.html | safe if params.right.html}}
+      </div>
+      {% endif %}
+    </div>
+    {% if params.sub %}
+    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.sub.html | safe if params.sub.html}}
+    </div>
+    {% endif %}
+  </div>
+</div>
 <!-- /card -->

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

@@ -1,113 +1,113 @@
-params:
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes that can be added to the inner container.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the card component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the card component.
-- name: caller
-  type: nunjucks-block
-  required: false
-  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
-- name: super
-  type: object
-  required: false
-  description: This is an area over the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the super area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the super area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the super area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the super area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the super area.
-- name: sub
-  type: object
-  required: false
-  description: This is an area under the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the sub area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the sub area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the sub area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the sub area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the sub area.
-- name: left
-  type: object
-  required: false
-  description: This is an area over the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the left area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the left area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the left area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the left area.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the super area.
-- name: right
-  type: object
-  required: false
-  description: This is an area under the card content
-  - name: backgroundFullColor
-    type: string
-    required: true
-    description: The css color used in the background image that fills all the right area.
-  - name: backgroundFullUrl
-    type: string
-    required: false
-    description: Url used in the background image that fills all the right area.
-  - name: html
-    type: string
-    required: false
-    description: HTML to use inside the right area.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the right area.
-  - name: attributes
-    type: object
-    required: false
+params:
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes that can be added to the inner container.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the card component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the card component.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Content in the flexible content area. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire media-object component in a `call` block.
+- name: super
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the super area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the super area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the super area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: sub
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the sub area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the sub area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the sub area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub area.
+- name: left
+  type: object
+  required: false
+  description: This is an area over the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the left area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the left area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the left area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the left area.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the super area.
+- name: right
+  type: object
+  required: false
+  description: This is an area under the card content
+  - name: backgroundFullColor
+    type: string
+    required: true
+    description: The css color used in the background image that fills all the right area.
+  - name: backgroundFullUrl
+    type: string
+    required: false
+    description: Url used in the background image that fills all the right area.
+  - name: html
+    type: string
+    required: false
+    description: HTML to use inside the right area.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the right area.
+  - name: attributes
+    type: object
+    required: false
     description: HTML attributes (for example data attributes) to add to the right area.

package/src/templates/components/character-count/_examples.character-count.njk

@@ -1,148 +1,148 @@
-{% set exampleComponent = "character-count" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "name": "more-detail-a",
-      "id": "more-detail-a",
-      "maxlength": 250,
-      "label": {
-        "text": "Esto es un label"
-      }
-    }
-  },
-  {
-    "name": "placeholder",
-    "data": {
-      "name": "placeholder",
-      "id": "placeholder",
-      "maxlength": 250,
-      "placeholder": "Esto es un placeholder",
-      "label": {
-        "text": "Esto es un label"
-      }
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "name": "more-detail-b",
-      "id": "more-detail-b",
-      "maxlength": 250,
-      "disabled": true,
-      "label": {
-        "text": "Esto es un label"
-      }
-    }
-  },
-  {
-    "name": "con pista",
-    "data": {
-      "name": "with-hint",
-      "id": "with-hint",
-      "maxlength": 250,
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      }
-    }
-  },
-  {
-    "name": "con valor por defecto",
-    "data": {
-      "id": "with-default-value",
-      "name": "default-value",
-      "maxlength": 100,
-      "label": {
-        "text": "Dirección completa"
-      },
-      "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
-    }
-  },
-  {
-    "name": "con valor por defecto excediendo el límite",
-    "data": {
-      "id": "exceeding-characters",
-      "name": "exceeding",
-      "maxlength": 250,
-      "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "errorMessage": {
-        "text": "Error: Por favor, no exceder el límite máximo"
-      }
-    }
-  },
-  {
-    "name": "con número de filas (rows) personalizada",
-    "data": {
-      "id": "custom-rows",
-      "name": "custom",
-      "maxlength": 250,
-      "label": {
-        "text": "Dirección completa"
-      },
-      "rows": 8
-    }
-  },
-  {
-    "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": {
-      "id": "textarea-with-page-heading",
-      "name": "address",
-      "maxlength": 250,
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
-  {
-    "name": "con contador de palabras",
-    "data": {
-      "id": "word-count",
-      "name": "word-count",
-      "maxwords": 10,
-      "label": {
-        "text": "Dirección completa"
-      }
-    }
-  },
-  {
-    "name": "con threshold",
-    "data": {
-      "id": "with-threshold",
-      "name": "with-threshold",
-      "maxlength": 250,
-      "threshold": 75,
-      "label": {
-        "text": "Dirección completa"
-      }
-    }
-  },
-  {
-    "name": "Con clases de css aplicadas",
-    "description": "Inline label + character-count flexible y mensaje de error",
-    "data": {
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0"
-      },
-      "label": {
-        "text": "Inline label:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "id": "classes-applied-b",
-      "name": "classes-applied-b",
-      "maxlength": 250,
-      "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "classes": "lg:flex-1"
-    }
-  }
+{% set exampleComponent = "character-count" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "name": "more-detail-a",
+      "id": "more-detail-a",
+      "maxlength": 250,
+      "label": {
+        "text": "Esto es un label"
+      }
+    }
+  },
+  {
+    "name": "placeholder",
+    "data": {
+      "name": "placeholder",
+      "id": "placeholder",
+      "maxlength": 250,
+      "placeholder": "Esto es un placeholder",
+      "label": {
+        "text": "Esto es un label"
+      }
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "name": "more-detail-b",
+      "id": "more-detail-b",
+      "maxlength": 250,
+      "disabled": true,
+      "label": {
+        "text": "Esto es un label"
+      }
+    }
+  },
+  {
+    "name": "con pista",
+    "data": {
+      "name": "with-hint",
+      "id": "with-hint",
+      "maxlength": 250,
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      }
+    }
+  },
+  {
+    "name": "con valor por defecto",
+    "data": {
+      "id": "with-default-value",
+      "name": "default-value",
+      "maxlength": 100,
+      "label": {
+        "text": "Dirección completa"
+      },
+      "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
+    }
+  },
+  {
+    "name": "con valor por defecto excediendo el límite",
+    "data": {
+      "id": "exceeding-characters",
+      "name": "exceeding",
+      "maxlength": 250,
+      "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "errorMessage": {
+        "text": "Error: Por favor, no exceder el límite máximo"
+      }
+    }
+  },
+  {
+    "name": "con número de filas (rows) personalizada",
+    "data": {
+      "id": "custom-rows",
+      "name": "custom",
+      "maxlength": 250,
+      "label": {
+        "text": "Dirección completa"
+      },
+      "rows": 8
+    }
+  },
+  {
+    "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": {
+      "id": "textarea-with-page-heading",
+      "name": "address",
+      "maxlength": 250,
+      "label": {
+        "text": "Esto es un label dentro de un encabezado <h1>",
+        "isPageHeading": true
+      }
+    }
+  },
+  {
+    "name": "con contador de palabras",
+    "data": {
+      "id": "word-count",
+      "name": "word-count",
+      "maxwords": 10,
+      "label": {
+        "text": "Dirección completa"
+      }
+    }
+  },
+  {
+    "name": "con threshold",
+    "data": {
+      "id": "with-threshold",
+      "name": "with-threshold",
+      "maxlength": 250,
+      "threshold": 75,
+      "label": {
+        "text": "Dirección completa"
+      }
+    }
+  },
+  {
+    "name": "Con clases de css aplicadas",
+    "description": "Inline label + character-count flexible y mensaje de error",
+    "data": {
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0"
+      },
+      "label": {
+        "text": "Inline label:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "id": "classes-applied-b",
+      "name": "classes-applied-b",
+      "maxlength": 250,
+      "errorMessage": {
+        "text": "Error: Esto es un mensaje de error",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "classes": "lg:flex-1"
+    }
+  }
 ] %}

package/src/templates/components/character-count/_macro.character-count.njk

@@ -1,5 +1,5 @@
-<!-- _macro.character-count.njk -->
-
-{% macro componentCharacterCount(params) %}
-{% include "./_template.character-count.njk" %}
-{% endmacro %}
+<!-- _macro.character-count.njk -->
+
+{% macro componentCharacterCount(params) %}
+{% include "./_template.character-count.njk" %}
+{% endmacro %}