desy-html 12.1.0 → 13.0.0

package/src/templates/components/status-item/_template.status-item.njk

@@ -1,100 +1,100 @@
-{% from "components/error-message/_macro.error-message.njk" import componentErrorMessage %}
-{% from "components/hint/_macro.hint.njk" import componentHint %}
-{% from "components/status/_macro.status.njk" import componentStatus %}
-
-{#- a record of other elements that we need to associate with the item 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 "" -%}
-
-{%- set commonHtml %}
-  {% if params.title %}
-  <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">{{ params.title.html | filterquotes | safe  if params.title.html else params.title.text }}</p>
-  {% endif %}
-  {% 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
-    }) | trim | indent(6) }}
-  {% 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
-    }) | trim | indent(6) }}
-  {% endif %}
-{% endset %}
-
-
-{%- set innerItems %}
-  {%- for item in params.items %}
-  <div class="flex lg-flex-wrap {%- if item.classes %} {{ item.classes }}{% endif %}"
-  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}w-1/2 my-sm{% endif %}"
-    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
-    </dt>
-    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}w-1/2 my-sm font-semibold{% endif %}"
-    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
-    </dd>
-  </div>
-  {% endfor %}
-{% endset -%}
-
-
-{%- set innerHtml %}
-  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
-    {% if params.items %}
-    <div class="lg:w-2/3">
-      {{ commonHtml | safe | trim }}
-      <dl>
-        {{ innerItems | trim | safe | indent(6) }}
-      </dl>
-    </div>
-    {% else %}
-    <div class="lg:w-2/3">
-      {{ commonHtml | safe | trim }}
-    </div>
-    {% endif %}
-    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
-      {% if caller %}
-        {% set myCaller = caller() %}
-        {% if myCaller | string != '' %}
-      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
-        {{ myCaller }}
-      </div>
-        {% endif %}
-      {% elseif params.caller %}
-      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
-        {{ params.caller | safe }}
-      </div>
-      {% endif %}
-      {% if params.status %}
-      <div class="mb-base lg:mb-0 ml-base py-sm">
-        {{ componentStatus(params.status) | trim | indent(8) }}
-      </div>
-      {% endif %}
-    </div>
-  </div>
-{% endset -%}
-
-<!-- status-item -->
-<div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {{ innerHtml | trim | safe }}
-</div>
+{% from "components/error-message/_macro.error-message.njk" import componentErrorMessage %}
+{% from "components/hint/_macro.hint.njk" import componentHint %}
+{% from "components/status/_macro.status.njk" import componentStatus %}
+
+{#- a record of other elements that we need to associate with the item 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 "" -%}
+
+{%- set commonHtml %}
+  {% if params.title %}
+  <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">{{ params.title.html | filterquotes | safe  if params.title.html else params.title.text }}</p>
+  {% endif %}
+  {% 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
+    }) | trim | indent(6) }}
+  {% 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
+    }) | trim | indent(6) }}
+  {% endif %}
+{% endset %}
+
+
+{%- set innerItems %}
+  {%- for item in params.items %}
+  <div class="flex lg-flex-wrap {%- if item.classes %} {{ item.classes }}{% endif %}"
+  {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}w-1/2 my-sm{% endif %}"
+    {%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
+    </dt>
+    <dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}w-1/2 my-sm font-semibold{% endif %}"
+    {%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
+    </dd>
+  </div>
+  {% endfor %}
+{% endset -%}
+
+
+{%- set innerHtml %}
+  <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
+    {% if params.items %}
+    <div class="lg:w-2/3">
+      {{ commonHtml | safe | trim }}
+      <dl>
+        {{ innerItems | trim | safe | indent(6) }}
+      </dl>
+    </div>
+    {% else %}
+    <div class="lg:w-2/3">
+      {{ commonHtml | safe | trim }}
+    </div>
+    {% endif %}
+    <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
+      {% if caller %}
+        {% set myCaller = caller() %}
+        {% if myCaller | string != '' %}
+      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
+        {{ myCaller }}
+      </div>
+        {% endif %}
+      {% elseif params.caller %}
+      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
+        {{ params.caller | safe }}
+      </div>
+      {% endif %}
+      {% if params.status %}
+      <div class="mb-base lg:mb-0 ml-base py-sm">
+        {{ componentStatus(params.status) | trim | indent(8) }}
+      </div>
+      {% endif %}
+    </div>
+  </div>
+{% endset -%}
+
+<!-- status-item -->
+<div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{ innerHtml | trim | safe }}
+</div>
 <!-- /status-item -->

package/src/templates/components/status-item/params.status-item.yaml

@@ -1,107 +1,107 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: The id of the item.
-- name: title
-  type: object
-  required: false
-  description: This is the title
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item title.
-- 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`.
-- 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.
-- 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: items
-  type: array
-  required: false
-  description: Description list items
-  params:
-  - name: term
-    type: object
-    required: true
-    description: term in dt.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dt item. 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 dt item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dt.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dt.
-  - name: definition
-    type: object
-    required: true
-    description: definition in dd.
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use within each dd item. 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 dd item. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the dd.
-    - name: attributes
-      type: object
-      required: false
-      description: HTML attributes (for example data attributes) to add to the dd.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to a div container that contain the dt/dd pair.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
-- name: status
-  type: object
-  required: false
-  description: Options for the status component.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the status container div tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the container div tag.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: The id of the item.
+- name: title
+  type: object
+  required: false
+  description: This is the title
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item title.
+- 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`.
+- 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.
+- 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: items
+  type: array
+  required: false
+  description: Description list items
+  params:
+  - name: term
+    type: object
+    required: true
+    description: term in dt.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dt item. 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 dt item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dt.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dt.
+  - name: definition
+    type: object
+    required: true
+    description: definition in dd.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each dd item. 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 dd item. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the dd.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the dd.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to a div container that contain the dt/dd pair.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to a div container that contain the dt/dd pair.
+- name: status
+  type: object
+  required: false
+  description: Options for the status component.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the status container div tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the container div tag.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.