desy-html 10.2.2 → 11.0.1

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

@@ -1,55 +1,55 @@
-{% 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 "" %}
-{% set errorId = params.errorId if params.errorId else "" %}
-<!-- input -->
-<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 %}
-  {% if not params.errorId %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {% endif %}
-  {{ 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 %}
-  <input class="c-input block mt-sm border-black rounded font-semibold 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 }}" type="{{ params.type | default('text') }}"
-  {%- if params.value %} value="{{ params.value}}"{% endif %}
-  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
-  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-  {{-" disabled" if params.disabled }}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-</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 "" %}
+{% set errorId = params.errorId if params.errorId else "" %}
+<!-- input -->
+<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 %}
+  {% if not params.errorId %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  {% endif %}
+  {{ 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 %}
+  <input class="c-input block mt-sm border-black rounded font-semibold 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 }}" type="{{ params.type | default('text') }}"
+  {%- if params.value %} value="{{ params.value}}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+  {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+  {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+  {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+  {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+  {{-" disabled" if params.disabled }}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+</div>
 <!-- /input -->

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

@@ -1,81 +1,81 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the input.
-- name: name
-  type: string
-  required: true
-  description: The name of the input, which is submitted with the form data.
-- 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: Optional initial value of the input.
-- 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: errorId
-  type: string
-  required: false
-  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
-- 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: 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 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 "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: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the input.
+- name: name
+  type: string
+  required: true
+  description: The name of the input, which is submitted with the form data.
+- 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: Optional initial value of the input.
+- 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: errorId
+  type: string
+  required: false
+  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
+- 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: 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 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 "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: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the anchor tag.