desy-html 10.2.2 → 11.0.1

package/src/templates/components/date-input/_macro.date-input.njk

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

package/src/templates/components/date-input/_template.date-input.njk

@@ -1,127 +1,127 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../input/_macro.input.njk" import componentInput %}
-
-{#- 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.fieldset.describedBy if params.fieldset.describedBy else "" %}
-
-{% if params.items | length %}
-  {% set dateInputItems = params.items %}
-{% else %}
-  {% set dateInputItems = [
-    {
-      name: "día",
-      classes: "w-14",
-      attributes: {
-        maxlength: "2"
-      }
-    },
-    {
-      name: "mes",
-      classes: "w-14",
-      attributes: {
-        maxlength: "2"
-      }
-    },
-    {
-      name: "año",
-      classes: "w-20",
-      attributes: {
-        maxlength: "4"
-      }
-    }
-  ] %}
-{% endif %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-{% 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 %}
-  <div class="flex {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-    {%- if params.id %} id="{{ params.id }}"{% endif %}>
-    {% for item in dateInputItems %}
-      {% if item.divider %}
-    <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
-          {% if item.divider.html %}
-            {{ item.divider.html | safe }}
-          {% else %}
-      <p>
-        {{ item.divider.text }}
-      </p>
-          {% endif %}
-    </div>
-      {% else %}
-    <div class="mr-base">
-      {{ componentInput({
-        label: item.label if item.label else { "text" : item.name | capitalize },
-        id: item.id if item.id else (params.id + "-" + item.name),
-        classes: "mb-0 " + (item.classes if item.classes),
-        errorId: errorId if item.hasErrors,
-        name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-        value: item.value,
-        type: "text",
-        inputmode: "numeric",
-        autocomplete: item.autocomplete,
-        pattern: item.pattern if item.pattern else "[0-9]*",
-        disabled: item.disabled,
-        attributes: item.attributes
-      }) | indent(6) | trim }}
-    </div>
-      {% endif %}
-  {% endfor %}
-  </div>
-{% endset %}
-
-{% set formGroupContent %}
-  {% if params.fieldset %}
-  {#- We override the fieldset's role to 'group' because otherwise JAWS does not
-      announce the description for a fieldset comprised of text inputs, but
-      adding the role to the fieldset always makes the output overly verbose for
-      radio buttons or checkboxes. -#}
-    {% call componentFieldset({
-      describedBy: describedBy,
-      errorId: errorId,
-      classes: params.fieldset.classes,
-      role: 'group',
-      attributes: params.fieldset.attributes,
-      legend: params.fieldset.legend,
-      headingLevel: params.fieldset.headingLevel
-    }) %}
-    {{ innerHtml | safe }}
-    {% endcall %}
-
-  {% else %}
-    {{ innerHtml | safe }}
-  {% endif %}
-{% endset %}
-
-<!-- date-input -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ formGroupContent | safe | indent(2) }}
-</div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../input/_macro.input.njk" import componentInput %}
+
+{#- 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.fieldset.describedBy if params.fieldset.describedBy else "" %}
+
+{% if params.items | length %}
+  {% set dateInputItems = params.items %}
+{% else %}
+  {% set dateInputItems = [
+    {
+      name: "día",
+      classes: "w-14",
+      attributes: {
+        maxlength: "2"
+      }
+    },
+    {
+      name: "mes",
+      classes: "w-14",
+      attributes: {
+        maxlength: "2"
+      }
+    },
+    {
+      name: "año",
+      classes: "w-20",
+      attributes: {
+        maxlength: "4"
+      }
+    }
+  ] %}
+{% endif %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+{% 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 %}
+  <div class="flex {%- if params.classes %} {{ params.classes }}{% endif %}"
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {% for item in dateInputItems %}
+      {% if item.divider %}
+    <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
+          {% if item.divider.html %}
+            {{ item.divider.html | safe }}
+          {% else %}
+      <p>
+        {{ item.divider.text }}
+      </p>
+          {% endif %}
+    </div>
+      {% else %}
+    <div class="mr-base">
+      {{ componentInput({
+        label: item.label if item.label else { "text" : item.name | capitalize },
+        id: item.id if item.id else (params.id + "-" + item.name),
+        classes: "mb-0 " + (item.classes if item.classes),
+        errorId: errorId if item.hasErrors,
+        name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+        value: item.value,
+        type: "text",
+        inputmode: "numeric",
+        autocomplete: item.autocomplete,
+        pattern: item.pattern if item.pattern else "[0-9]*",
+        disabled: item.disabled,
+        attributes: item.attributes
+      }) | indent(6) | trim }}
+    </div>
+      {% endif %}
+  {% endfor %}
+  </div>
+{% endset %}
+
+{% set formGroupContent %}
+  {% if params.fieldset %}
+  {#- We override the fieldset's role to 'group' because otherwise JAWS does not
+      announce the description for a fieldset comprised of text inputs, but
+      adding the role to the fieldset always makes the output overly verbose for
+      radio buttons or checkboxes. -#}
+    {% call componentFieldset({
+      describedBy: describedBy,
+      errorId: errorId,
+      classes: params.fieldset.classes,
+      role: 'group',
+      attributes: params.fieldset.attributes,
+      legend: params.fieldset.legend,
+      headingLevel: params.fieldset.headingLevel
+    }) %}
+    {{ innerHtml | safe }}
+    {% endcall %}
+
+  {% else %}
+    {{ innerHtml | safe }}
+  {% endif %}
+{% endset %}
+
+<!-- date-input -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ formGroupContent | safe | indent(2) }}
+</div>
 <!-- /date-input -->

package/src/templates/components/date-input/params.date-input.yaml

@@ -1,98 +1,98 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: This is used for the main component and to compose id attribute for each item.
-- name: namePrefix
-  type: string
-  required: false
-  description: Optional prefix. This is used to prefix each `item.name` using `-`.
-- name: items
-  type: array
-  required: false
-  description: An array of input objects with name, value and classes.
-  params:
-  - name: id
-    type: string
-    required: false
-    description: Item-specific id. If provided, it will be used instead of the generated id.
-  - name: name
-    type: string
-    required: true
-    description: Item-specific name attribute.
-  - name: label
-    type: component
-    required: true
-    description: Item-specific label params.
-  - name: hasErrors
-    type: boolean
-    required: false
-    description: If true, the input will have aria-errormessage pointing to the errorMessage.
-  - name: value
-    type: string
-    required: false
-    description: If provided, it will be used as the initial value of the input.
-  - 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 "bday-day". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
-  - name: pattern
-    type: string
-    required: false
-    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, input will be disabled.
-  - name: divider
-    type: object
-    required: false
-    description: Divider item that separates items.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within the divider. 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 divider. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to date input item.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the date input tag.
-- 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: fieldset
-  type: object
-  required: false
-  description: Options for the fieldset component (e.g. legend).
-  isComponent: true
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the date-input container.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: This is used for the main component and to compose id attribute for each item.
+- name: namePrefix
+  type: string
+  required: false
+  description: Optional prefix. This is used to prefix each `item.name` using `-`.
+- name: items
+  type: array
+  required: false
+  description: An array of input objects with name, value and classes.
+  params:
+  - name: id
+    type: string
+    required: false
+    description: Item-specific id. If provided, it will be used instead of the generated id.
+  - name: name
+    type: string
+    required: true
+    description: Item-specific name attribute.
+  - name: label
+    type: component
+    required: true
+    description: Item-specific label params.
+  - name: hasErrors
+    type: boolean
+    required: false
+    description: If true, the input will have aria-errormessage pointing to the errorMessage.
+  - name: value
+    type: string
+    required: false
+    description: If provided, it will be used as the initial value of the input.
+  - 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 "bday-day". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+  - name: pattern
+    type: string
+    required: false
+    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, input will be disabled.
+  - name: divider
+    type: object
+    required: false
+    description: Divider item that separates items.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within the divider. 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 divider. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to date input item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the date input tag.
+- 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: fieldset
+  type: object
+  required: false
+  description: Options for the fieldset component (e.g. legend).
+  isComponent: true
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the date-input container.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the date-input container.