desy-html 12.1.0 → 13.0.0

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

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

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

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

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

@@ -1,134 +1,133 @@
-{% 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.fieldset.describedBy if params.fieldset.describedBy else "" %}
-
-{% set conditionalValue = false %}
-{% for item in params.items %}
-  {% if item.checked %}
-    {% set conditionalValue = item.value %}
-  {% endif %}
-{% endfor %}
-
-{#- 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
-}) | trim | indent(2) }}
-{% 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
-}) | trim | indent(2) }}
-{% endif %}
-<div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% for item in params.items %}
-    {% if item %}
-  <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-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
-
-    {#- 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 conditionalId = "conditional-" + id %}
-    {% if item.divider %}
-    <div><p>{{ item.divider }}</p></div>
-    {% else %}
-    {% set hasHint = true if item.hint.text or item.hint.html %}
-    {% set itemHintId = id + '-item-hint' %}
-
-    <div>
-      <div class="relative flex items-start py-base">
-        <div class="flex items-center mx-sm">
-          <input class="w-6 h-6 text-primary-base 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="{{ params.name }}" type="radio" value="{{ item.value }}"
-          {{-" checked" if item.checked }}
-          {{-" disabled" if item.disabled }}
-          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-          {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-          {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
-          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        </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>
-    </div>
-        {% if item.conditional.html %}
-    <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
-      {{ item.conditional.html | filterquotes | safe | indent(6) }}
-    </div>
-        {% endif %}
-        {% endif %}
-  </div>
-    {% endif %}
-  {% endfor %}
-</div>
-{% endset -%}
-
-{% set radiosContent %}
-  {% 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 | trim | safe }}
-  {% endcall %}
-  {% else %}
-  {{ innerHtml | trim | safe }}
-  {% endif %}
-{% endset %}
-
-<!-- radios -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ radiosContent | safe | indent(2) }}
-</div>
-<!-- /radios -->
+{% 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.fieldset.describedBy if params.fieldset.describedBy else "" %}
+
+{% set conditionalValue = false %}
+{% for item in params.items %}
+  {% if item.checked %}
+    {% set conditionalValue = item.value %}
+  {% endif %}
+{% endfor %}
+
+{#- 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
+}) | trim | indent(2) }}
+{% 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
+}) | trim | indent(2) }}
+{% endif %}
+<div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% for item in params.items %}
+    {% if item %}
+  <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-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
+
+    {#- 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 conditionalId = "conditional-" + id %}
+    {% if item.divider %}
+    <div><p>{{ item.divider }}</p></div>
+    {% else %}
+    {% set hasHint = true if item.hint.text or item.hint.html %}
+    {% set itemHintId = id + '-item-hint' %}
+
+    <div>
+      <div class="relative flex items-start py-base">
+        <div class="flex items-center mx-sm">
+          <input class="w-6 h-6 text-primary-base transition duration-150 ease-in-out border-black focus:border-black focus:outline-black focus:outline-1 focus:outline-offset-2 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="{{ params.name }}" type="radio" value="{{ item.value }}"
+          {{-" checked" if item.checked }}
+          {{-" disabled" if item.disabled }}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+          {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
+          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        </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>
+    </div>
+        {% if item.conditional.html %}
+    <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
+      {{ item.conditional.html | filterquotes | safe | indent(6) }}
+    </div>
+        {% endif %}
+        {% endif %}
+  </div>
+    {% endif %}
+  {% endfor %}
+</div>
+{% endset -%}
+
+{% set radiosContent %}
+  {% 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 | trim | safe }}
+  {% endcall %}
+  {% else %}
+  {{ innerHtml | trim | safe }}
+  {% endif %}
+{% endset %}
+
+<!-- radios -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ radiosContent | safe | indent(2) }}
+</div>
+<!-- /radios -->

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

@@ -1,104 +1,104 @@
-params:
-- 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 `idPrefix` is not passed, fallback to using the name attribute instead.
-- name: name
-  type: string
-  required: true
-  description: Name attribute for each radio item.
-- name: items
-  type: array
-  required: true
-  description: Array of radio items objects.
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each radio 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 radio item label. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
-  - name: value
-    type: string
-    required: true
-    description: Value for the radio input.
-  - name: label
-    type: object
-    required: false
-    description: Provide attributes and classes to each radio item label.
-    isComponent: true
-  - name: hint
-    type: object
-    required: false
-    description: Provide hint to each checkbox item.
-    isComponent: true
-  - name: divider
-    type: string
-    required: false
-    description: Divider text to separate radio items, for example the text "or".
-  - name: checked
-    type: boolean
-    required: false
-    description: If true, radio will be checked.
-  - name: conditional
-    type: string
-    required: false
-    description: If true, content provided will be revealed when the item is checked.
-  - name: conditional.html
-    type: html
-    required: false
-    description: Provide content for the conditional reveal.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, radio 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 radio 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 radio container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the radio input tag.
+params:
+- 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 `idPrefix` is not passed, fallback to using the name attribute instead.
+- name: name
+  type: string
+  required: true
+  description: Name attribute for each radio item.
+- name: items
+  type: array
+  required: true
+  description: Array of radio items objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each radio 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 radio item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the radio item. If omitted, then `idPrefix` string will be applied.
+  - name: value
+    type: string
+    required: true
+    description: Value for the radio input.
+  - name: label
+    type: object
+    required: false
+    description: Provide attributes and classes to each radio item label.
+    isComponent: true
+  - name: hint
+    type: object
+    required: false
+    description: Provide hint to each checkbox item.
+    isComponent: true
+  - name: divider
+    type: string
+    required: false
+    description: Divider text to separate radio items, for example the text "or".
+  - name: checked
+    type: boolean
+    required: false
+    description: If true, radio will be checked.
+  - name: conditional
+    type: string
+    required: false
+    description: If true, content provided will be revealed when the item is checked.
+  - name: conditional.html
+    type: html
+    required: false
+    description: Provide content for the conditional reveal.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, radio 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 radio 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 radio container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the radio input tag.