desy-html 12.1.0 → 13.0.0

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

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

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

@@ -1,109 +1,108 @@
-{% 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 %}
-{% from "../select/_macro.select.njk" import componentSelect %}
-
-{#- 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 "" %}
-
-{#- 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
-}) }}
-{% 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
-}) }}
-{% endif %}
-<div class="{% if params.classes %}{{ params.classes }}{% else %}flex{% endif %}"
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  {%- if params.id %} id="{{ params.id }}"{% endif %}>
-  {% for item in params.items %}
-    {% if item.isSelect %}
-      {% if item.selectItems %}
-  {{ componentSelect({
-    label: item.label,
-    id: item.id if item.id else (params.id + "-" + item.name),
-    formGroup: item.formGroup,
-    classes: "mb-0 " + (item.classes if item.classes),
-    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-    disabled: item.disabled,
-    attributes: item.attributes,
-    items: item.selectItems
-  }) | indent(2) }}
-      {% endif %}
-    {% elseif item.divider %}
-  <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
-    {% if item.divider.html %}
-      {{ item.divider.html | filterquotes | safe }}
-    {% else %}
-      <p>
-        {{ item.divider.text }}
-      </p>
-    {% endif %}
-  </div>
-    {% else %}
-  {{ componentInput({
-    label: item.label,
-    id: item.id if item.id else (params.id + "-" + item.name),
-    formGroup: item.formGroup,
-    classes: "mb-0 " + (item.classes if item.classes),
-    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-    value: item.value,
-    type: item.type if item.type else "text",
-    inputmode: item.inputmode,
-    autocomplete: item.autocomplete,
-    pattern: item.pattern,
-    placeholder: item.placeholder,
-    disabled: item.disabled,
-    attributes: item.attributes
-  }) | indent(2) }}
-    {% 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,
-    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 %}
-
-<!-- input-group -->
-<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 %}
+{% from "../select/_macro.select.njk" import componentSelect %}
+
+{#- 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 "" %}
+
+{#- 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
+}) }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + "-error" %}
+{{ componentErrorMessage({
+  id: errorId,
+  classes: params.errorMessage.classes,
+  attributes: params.errorMessage.attributes,
+  html: params.errorMessage.html,
+  text: params.errorMessage.text,
+  visuallyHiddenText: params.errorMessage.visuallyHiddenText
+}) }}
+{% endif %}
+<div class="{% if params.classes %}{{ params.classes }}{% else %}flex{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.id %} id="{{ params.id }}"{% endif %}>
+  {% for item in params.items %}
+    {% if item.isSelect %}
+      {% if item.selectItems %}
+  {{ componentSelect({
+    label: item.label,
+    id: item.id if item.id else (params.id + "-" + item.name),
+    formGroup: item.formGroup,
+    classes: "mb-0 " + (item.classes if item.classes),
+    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+    disabled: item.disabled,
+    attributes: item.attributes,
+    items: item.selectItems
+  }) | indent(2) }}
+      {% endif %}
+    {% elseif item.divider %}
+  <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="presentation" aria-hidden="true">
+    {% if item.divider.html %}
+      {{ item.divider.html | filterquotes | safe }}
+    {% else %}
+      <p>
+        {{ item.divider.text }}
+      </p>
+    {% endif %}
+  </div>
+    {% else %}
+  {{ componentInput({
+    label: item.label,
+    id: item.id if item.id else (params.id + "-" + item.name),
+    formGroup: item.formGroup,
+    classes: "mb-0 " + (item.classes if item.classes),
+    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+    value: item.value,
+    type: item.type if item.type else "text",
+    inputmode: item.inputmode,
+    autocomplete: item.autocomplete,
+    pattern: item.pattern,
+    placeholder: item.placeholder,
+    disabled: item.disabled,
+    attributes: item.attributes
+  }) | indent(2) }}
+    {% 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,
+    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 %}
+
+<!-- input-group -->
+<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>
 <!-- /input-group -->

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

@@ -1,124 +1,124 @@
-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: true
-  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: type
-    type: string
-    required: false
-    description: Type of input control to render. Defaults to "text".
-  - name: inputmode
-    type: string
-    require: false
-    description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
-  - name: value
-    type: string
-    required: false
-    description: If provided, it will be used as the initial value of the input.
-  - name: name
-    type: string
-    required: true
-    description: Item-specific name attribute.
-  - name: label
-    type: object
-    required: true
-    description: Label text or HTML by specifying value for either text or html keys.
-    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.
-  - 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: 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: placeholder
-    type: string
-    required: false
-    description: Placeholder text
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, input will be disabled.
-  - 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: isSelect
-    type: boolean
-    required: false
-    description: If true, renders a select instead of an input
-  - name: selectItems
-    type: array
-    required: false
-    description: An array of select objects with name, value and classes.
-  - 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: 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) defaults to `flex`.
-- 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: true
+  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: type
+    type: string
+    required: false
+    description: Type of input control to render. Defaults to "text".
+  - name: inputmode
+    type: string
+    require: false
+    description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
+  - name: value
+    type: string
+    required: false
+    description: If provided, it will be used as the initial value of the input.
+  - name: name
+    type: string
+    required: true
+    description: Item-specific name attribute.
+  - name: label
+    type: object
+    required: true
+    description: Label text or HTML by specifying value for either text or html keys.
+    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.
+  - 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: 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: placeholder
+    type: string
+    required: false
+    description: Placeholder text
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, input will be disabled.
+  - 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: isSelect
+    type: boolean
+    required: false
+    description: If true, renders a select instead of an input
+  - name: selectItems
+    type: array
+    required: false
+    description: An array of select objects with name, value and classes.
+  - 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: 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) defaults to `flex`.
+- 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.