desy-html 10.2.2 → 11.0.1

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

@@ -1,132 +1,132 @@
-{% set exampleComponent = "textarea" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "name": "more-detail-a",
-      "id": "more-detail-a",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista o texto descriptivo."
-      }
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "name": "more-detail-b",
-      "id": "more-detail-b",
-      "disabled": true,
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista o texto descriptivo."
-      }
-    }
-  },
-  {
-    "name": "con mensaje de error",
-    "data": {
-      "name": "no-ni-reason",
-      "id": "no-ni-reason",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con valor por defecto",
-    "data": {
-      "id": "full-address-a",
-      "name": "address-a",
-      "value": "Calle Rosales 25. 2 izda",
-      "label": {
-        "text": "Dirección completa"
-      }
-    }
-  },
-  {
-    "name": "con número de filas (rows) personalizada",
-    "data": {
-      "id": "full-address-b",
-      "name": "address-b",
-      "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>.',
-    "data": {
-      "id": "textarea-with-page-heading-a",
-      "name": "address",
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "data": {
-      "id": "textarea-with-page-heading-b",
-      "name": "address",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "formGroup": {
-        "classes": "p-base bg-primary-light"
-      }
-    }
-  },
-  {
-    "name": "con valores de autocompletado",
-    "data": {
-      "id": "textarea-with-autocomplete-attribute",
-      "name": "address",
-      "label": {
-        "text": "Dirección completa"
-      },
-      "autocomplete": "street-address"
-    }
-  },
-  {
-    "name": "placeholder",
-    "data": {
-      "id": "placeholder",
-      "name": "placeholder",
-      "label": {
-        "text": "Valor"
-      },
-      "placeholder": "Esto es un placeholder"
-    }
-  },
-  {
-    "name": "Con clases de css aplicadas",
-    "description": "Label inline + Textarea flexible y Mensaje de error",
-    "data": {
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
-      },
-      "label": {
-        "text": "Label inline:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "id": "classes-applied-b",
-      "name": "classes-applied-b",
-      "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "classes": "lg:flex-1"
-    }
-  }
+{% set exampleComponent = "textarea" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "name": "more-detail-a",
+      "id": "more-detail-a",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista o texto descriptivo."
+      }
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "name": "more-detail-b",
+      "id": "more-detail-b",
+      "disabled": true,
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista o texto descriptivo."
+      }
+    }
+  },
+  {
+    "name": "con mensaje de error",
+    "data": {
+      "name": "no-ni-reason",
+      "id": "no-ni-reason",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "errorMessage": {
+        "text": "Error: esto es un mensaje de error"
+      }
+    }
+  },
+  {
+    "name": "con valor por defecto",
+    "data": {
+      "id": "full-address-a",
+      "name": "address-a",
+      "value": "Calle Rosales 25. 2 izda",
+      "label": {
+        "text": "Dirección completa"
+      }
+    }
+  },
+  {
+    "name": "con número de filas (rows) personalizada",
+    "data": {
+      "id": "full-address-b",
+      "name": "address-b",
+      "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>.',
+    "data": {
+      "id": "textarea-with-page-heading-a",
+      "name": "address",
+      "label": {
+        "text": "Esto es un label dentro de un encabezado <h1>",
+        "isPageHeading": true
+      }
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "data": {
+      "id": "textarea-with-page-heading-b",
+      "name": "address",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "formGroup": {
+        "classes": "p-base bg-primary-light"
+      }
+    }
+  },
+  {
+    "name": "con valores de autocompletado",
+    "data": {
+      "id": "textarea-with-autocomplete-attribute",
+      "name": "address",
+      "label": {
+        "text": "Dirección completa"
+      },
+      "autocomplete": "street-address"
+    }
+  },
+  {
+    "name": "placeholder",
+    "data": {
+      "id": "placeholder",
+      "name": "placeholder",
+      "label": {
+        "text": "Valor"
+      },
+      "placeholder": "Esto es un placeholder"
+    }
+  },
+  {
+    "name": "Con clases de css aplicadas",
+    "description": "Label inline + Textarea flexible y Mensaje de error",
+    "data": {
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
+      },
+      "label": {
+        "text": "Label inline:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "id": "classes-applied-b",
+      "name": "classes-applied-b",
+      "errorMessage": {
+        "text": "Error: Esto es un mensaje de error",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "classes": "lg:flex-1"
+    }
+  }
 ] %}

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

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

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

@@ -1,49 +1,49 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-<!-- textarea -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ componentLabel({
-    html: params.label.html,
-    text: params.label.text,
-    classes: params.label.classes,
-    isPageHeading: params.label.isPageHeading,
-    attributes: params.label.attributes,
-    for: params.id
-  }) | indent(2) | trim }}
-{% if params.hint %}
-  {% set hintId = params.id + '-hint' %}
-  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ componentHint({
-    id: hintId,
-    classes: params.hint.classes,
-    attributes: params.hint.attributes,
-    html: params.hint.html,
-    text: params.hint.text
-  }) | indent(2) | trim }}
-{% endif %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
-  {{ componentErrorMessage({
-    id: errorId,
-    classes: params.errorMessage.classes,
-    attributes: params.errorMessage.attributes,
-    html: params.errorMessage.html,
-    text: params.errorMessage.text,
-    visuallyHiddenText: params.errorMessage.visuallyHiddenText
-  }) | indent(2) | trim }}
-{% endif %}
-  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
-  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-  {{-" disabled" if params.disabled }}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+<!-- textarea -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ componentHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+  {{ componentErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+  {{-" disabled" if params.disabled }}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
+</div>
 <!-- /textarea -->

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

@@ -1,65 +1,65 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the textarea.
-- name: name
-  type: string
-  required: true
-  description: The name of the textarea, which is submitted with the form data.
-- name: rows
-  type: string
-  required: false
-  description: Optional number of textarea rows (default is 5 rows).
-- name: value
-  type: string
-  required: false
-  description: Optional initial value of the textarea.
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: label
-  type: object
-  required: true
-  description: Options for the label component.
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component.
-  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: classes
-  type: string
-  required: false
-  description: Classes to add to the textarea.
-- name: autocomplete
-  type: string
-  required: false
-  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
-- name: placeholder
-  type: string
-  required: false
-  description: Placeholder text
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, textarea will be disabled.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the textarea.
+- name: name
+  type: string
+  required: true
+  description: The name of the textarea, which is submitted with the form data.
+- name: rows
+  type: string
+  required: false
+  description: Optional number of textarea rows (default is 5 rows).
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the textarea.
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+  type: object
+  required: true
+  description: Options for the label component.
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component.
+  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: classes
+  type: string
+  required: false
+  description: Classes to add to the textarea.
+- name: autocomplete
+  type: string
+  required: false
+  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, textarea will be disabled.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the textarea.