desy-html 12.1.0 → 13.0.0

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

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

package/src/templates/components/checkboxes/_styles.checkboxes.css

@@ -1,31 +1,31 @@
-/* ==========================================================================
-   _styles.checkboxes.css
-   ========================================================================== */
-
-@layer components {
-  .c-checkboxes--base {
-    input[type="checkbox"] {
-      @apply w-6;
-      @apply h-6;
-    }
-  }
-
-  .c-checkboxes--sm {
-    input[type="checkbox"] {
-      @apply w-base !important;
-      @apply h-base !important;
-    }
-  }
-
-  .c-checkboxes__conditional-active {
-    .c-checkboxes__conditional-item{
-      @apply block;
-    }
-  }
-
-  .c-checkboxes__conditional-hidden {
-    .c-checkboxes__conditional-item{
-      @apply hidden;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.checkboxes.css
+   ========================================================================== */
+
+@layer components {
+  .c-checkboxes--base {
+    input[type="checkbox"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
+  .c-checkboxes--sm {
+    input[type="checkbox"] {
+      @apply w-base !important;
+      @apply h-base !important;
+    }
+  }
+
+  .c-checkboxes__conditional-active {
+    .c-checkboxes__conditional-item{
+      @apply block;
+    }
+  }
+
+  .c-checkboxes__conditional-hidden {
+    .c-checkboxes__conditional-item{
+      @apply hidden;
+    }
+  }
+}

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

@@ -1,138 +1,137 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. We need this for error messages and hints as well -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
-
-{#- 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 "" %}
-{% if params.fieldset.describedBy %}
-   {% set describedBy = params.fieldset.describedBy %}
-{% endif %}
-
-{% set isConditional = false %}
-{% for item in params.items %}
-  {% if item.conditional.html %}
-    {% set isConditional = true %}
-  {% endif %}
-{% endfor %}
-
-{#- fieldset is false by default -#}
-{% set hasFieldset = true if params.fieldset else false %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-{% if params.hint %}
-  {% set hintId = idPrefix + '-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 = idPrefix + '-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="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-checkboxes"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    {% for item in params.items %}
-      {% if item %}
-        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-        {%- if item.id -%}
-          {%- set id = item.id -%}
-        {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {% else %}
-            {%- set id = idPrefix + "-" + loop.index -%}
-          {%- endif -%}
-        {%- endif -%}
-        {% set name = item.name if item.name else params.name %}
-        {% set conditionalId = "conditional-" + id %}
-        {% set hasHint = true if item.hint.text or item.hint.html %}
-        {% set itemHintId = id + "-item-hint" if hasHint else "" %}
-        {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
-        {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) %}
-    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {%- elif item.isIndeterminate and not item.indeterminateChecked %} c-checkboxes__indeterminate {%- elif item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate c-checkboxes__indeterminate-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
-      <div class="relative flex items-start py-base">
-        <div class="flex items-center mx-sm">
-          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
-          {{-" checked" if item.checked }}
-          {{-" disabled" if item.disabled }}
-          {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
-          {%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
-          {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
-          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-          {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
-        </div>
-        <div class="pt-0.5 leading-5">
-          {{ componentLabel({
-            html: item.html,
-            text: item.text,
-            classes: (item.label.classes if item.label.classes),
-            attributes: item.label.attributes,
-            for: id
-          }) | indent(10) | trim }}
-          {% if hasHint %}
-          {{ componentHint({
-            id: itemHintId,
-            classes: (item.hint.classes if item.hint.classes),
-            attributes: item.hint.attributes,
-            html: item.hint.html,
-            text: item.hint.text
-          }) | indent(10) | trim }}
-          {% endif %}
-        </div>
-      </div>
-      {% if item.conditional.html %}
-      <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
-        {{ item.conditional.html | filterquotes | safe | indent(10) }}
-      </div>
-      {% endif %}
-    {% endif %}
-    </div>
-    {% endfor %}
-  </div>
-{% endset -%}
-
-{% set checkboxesContent %}
-  {% if params.fieldset %}
-    {% call componentFieldset({
-      describedBy: describedBy,
-      errorId: errorId,
-      classes: params.fieldset.classes,
-      attributes: params.fieldset.attributes,
-      legend: params.fieldset.legend,
-      headingLevel: params.fieldset.headingLevel
-    }) %}
-    {{ innerHtml | safe }}
-    {% endcall %}
-  {% else %}
-    {{ innerHtml | safe }}
-  {% endif %}
-{% endset %}
-
-<!-- checkboxes -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ checkboxesContent | safe |indent(2) | trim }}
-</div>
-<!-- /checkboxes -->
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else params.name %}
+
+{#- 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 "" %}
+{% if params.fieldset.describedBy %}
+   {% set describedBy = params.fieldset.describedBy %}
+{% endif %}
+
+{% set isConditional = false %}
+{% for item in params.items %}
+  {% if item.conditional.html %}
+    {% set isConditional = true %}
+  {% endif %}
+{% endfor %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+{% if params.hint %}
+  {% set hintId = idPrefix + '-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 = idPrefix + '-error' %}
+  {{ 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="c-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-checkboxes"
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+          {%- if loop.first -%}
+            {%- set id = idPrefix %}
+          {% else %}
+            {%- set id = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        {% set name = item.name if item.name else params.name %}
+        {% set conditionalId = "conditional-" + id %}
+        {% set hasHint = true if item.hint.text or item.hint.html %}
+        {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+        {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
+        {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) %}
+    <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.conditional.html %} c-checkboxes__conditional{% endif %} {%- if item.checked %} c-checkboxes__conditional-active {%- elif item.isIndeterminate and not item.indeterminateChecked %} c-checkboxes__indeterminate {%- elif item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate c-checkboxes__indeterminate-active {% else %} c-checkboxes__conditional-hidden{% endif %}">
+      <div class="relative flex items-start py-base">
+        <div class="flex items-center mx-sm">
+          <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 focus:ring-3 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+          {{-" checked" if item.checked }}
+          {{-" disabled" if item.disabled }}
+          {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy | trim }}"{% endif -%}
+          {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
+          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
+          {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+        </div>
+        <div class="pt-0.5 leading-5">
+          {{ componentLabel({
+            html: item.html,
+            text: item.text,
+            classes: (item.label.classes if item.label.classes),
+            attributes: item.label.attributes,
+            for: id
+          }) | indent(10) | trim }}
+          {% if hasHint %}
+          {{ componentHint({
+            id: itemHintId,
+            classes: (item.hint.classes if item.hint.classes),
+            attributes: item.hint.attributes,
+            html: item.hint.html,
+            text: item.hint.text
+          }) | indent(10) | trim }}
+          {% endif %}
+        </div>
+      </div>
+      {% if item.conditional.html %}
+      <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
+        {{ item.conditional.html | filterquotes | safe | indent(10) }}
+      </div>
+      {% endif %}
+    {% endif %}
+    </div>
+    {% endfor %}
+  </div>
+{% endset -%}
+
+{% set checkboxesContent %}
+  {% if params.fieldset %}
+    {% call componentFieldset({
+      describedBy: describedBy,
+      errorId: errorId,
+      classes: params.fieldset.classes,
+      attributes: params.fieldset.attributes,
+      legend: params.fieldset.legend,
+      headingLevel: params.fieldset.headingLevel
+    }) %}
+    {{ innerHtml | safe }}
+    {% endcall %}
+  {% else %}
+    {{ innerHtml | safe }}
+  {% endif %}
+{% endset %}
+
+<!-- checkboxes -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ checkboxesContent | safe |indent(2) | trim }}
+</div>
+<!-- /checkboxes -->

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

@@ -1,116 +1,116 @@
-params:
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-- name: fieldset
-  type: object
-  required: false
-  description: Options for the fieldset component (e.g. legend).
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component (e.g. text).
-  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: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-- name: name
-  type: string
-  required: true
-  description: Name attribute for all checkbox items.
-- name: items
-  type: array
-  required: true
-  description: Array of checkbox items objects.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each checkbox item label. 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 each checkbox item label. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
-  - name: name
-    type: string
-    required: true
-    description: Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
-  - name: value
-    type: string
-    required: true
-    description: Value for the checkbox input.
-  - name: label
-    type: object
-    required: false
-    description: Provide attributes and classes to each checkbox item label.
-    isComponent: true
-  - name: hint
-    type: object
-    required: false
-    description: Provide hint to each checkbox item.
-    isComponent: true
-  - name: checked
-    type: boolean
-    required: false
-    description: If true, checkbox will be checked.
-  - name: isIndeterminate
-    type: boolean
-    required: false
-    description: If true, the checkbox will have an additional indeterminate state to show a partial true.
-  - name: indeterminateChecked
-    type: boolean
-    required: false
-    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
-  - name: conditional
-    type: boolean
-    required: false
-    description: If true, content provided will be revealed when the item is checked.
-  - name: conditional.html
-    type: string
-    required: false
-    description: Provide content for the conditional reveal.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, checkbox will be disabled.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the checkbox input tag.
-- name: hasDividers
-  type: boolean
-  required: false
-  description: With hasDividers equal to true, the items have an horizontal border to visually separate items.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the checkboxes container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the anchor tag.
+params:
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the input `aria-describedby` attribute without a fieldset, used to provide additional descriptive information for screenreader users.
+- name: fieldset
+  type: object
+  required: false
+  description: Options for the fieldset component (e.g. legend).
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component (e.g. text).
+  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: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
+- name: name
+  type: string
+  required: true
+  description: Name attribute for all checkbox items.
+- name: items
+  type: array
+  required: true
+  description: Array of checkbox items objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each checkbox item label. 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 each checkbox item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the checkbox item. If omitted, then idPrefix option will be applied.
+  - name: name
+    type: string
+    required: true
+    description: Specific name for the checkbox item. If omitted, then component global `name` string will be applied.
+  - name: value
+    type: string
+    required: true
+    description: Value for the checkbox input.
+  - name: label
+    type: object
+    required: false
+    description: Provide attributes and classes to each checkbox item label.
+    isComponent: true
+  - name: hint
+    type: object
+    required: false
+    description: Provide hint to each checkbox item.
+    isComponent: true
+  - name: checked
+    type: boolean
+    required: false
+    description: If true, checkbox will be checked.
+  - name: isIndeterminate
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an additional indeterminate state to show a partial true.
+  - name: indeterminateChecked
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
+  - name: conditional
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is checked.
+  - name: conditional.html
+    type: string
+    required: false
+    description: Provide content for the conditional reveal.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, checkbox will be disabled.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the checkbox input tag.
+- name: hasDividers
+  type: boolean
+  required: false
+  description: With hasDividers equal to true, the items have an horizontal border to visually separate items.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the checkboxes container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the anchor tag.