desy-html 4.2.1 → 5.1.0

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

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

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

@@ -0,0 +1,45 @@
+/* ==========================================================================
+   _styles.tree.css
+   ========================================================================== */
+
+@layer components {
+  .c-tree--sm {
+    input[type="checkbox"],
+    input[type="radio"] {
+      @apply w-base !important;
+      @apply h-base !important;
+    }
+  }
+
+  .c-tree__item {
+    &[aria-expanded="true"] {
+      & > ul {
+        @apply block;
+      }
+      .c-tree__plus {
+        @apply hidden;
+      }
+      .c-tree__minus {
+        @apply block;
+      }
+    }
+
+    &[aria-expanded="false"] {
+      & > ul {
+        @apply hidden;
+      }
+      .c-tree__plus {
+        @apply block;
+      }
+      .c-tree__minus {
+        @apply hidden;
+      }
+    }
+  }
+
+  .c-tree__item--focus {
+    @apply bg-warning-base outline-none shadow-outline-focus text-black;
+  }
+}
+
+

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

@@ -0,0 +1,175 @@
+{% 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 subLevel = "" %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
+{#- macro to generate checkboxes -#}
+{% macro checkboxItem(item, id, name, type) %}
+  {% 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) | trim %}
+  <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <div class="relative flex items-start py-xs">
+      <div class="flex items-center mx-sm">
+        <input x-model="isChecked" x-ref="inputCheck" 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 }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif -%} value="{{ item.value }}"
+        {{-" checked" if item.checked }}
+        {{-" disabled" if item.disabled }}
+        {%- 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 %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}
+        {%- if item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+      </div>
+      <div class="flex-1 pt-0.5 leading-5">
+        {{ componentLabel({
+          html: item.html,
+          text: item.text,
+          classes: item.label.classes if item.label.classes else 'block relative -top-xs -left-8 pl-8 py-xs',
+          attributes: item.label.attributes,
+          for: id + '-input'
+        }) | indent(6) | 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(6) | trim }}
+        {% endif %}
+      </div>
+    </div>
+  </div>
+{% endmacro %}
+
+{#- macro to generate children -#}
+{% macro childrenTree(itemNode, id, name, type) %}
+    {% if itemNode.sub %}
+      <div class="w-full h-full">
+        <span class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
+        {%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
+          </span>
+          {{ checkboxItem(itemNode, id, name, type) }}
+        </span>
+      </div>
+    {% else %}
+      {{ checkboxItem(itemNode, id, name, type) }}
+    {% endif %}
+    {% if itemNode.sub.items %}
+      {% set subLevel = subLevel + "sub-" %}
+      <ul role="group" class="c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}" {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% for subitem in itemNode.sub.items %}
+          {% if subitem %}
+            {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+            {%- if subitem.id -%}
+              {%- set subId = subitem.id -%}
+            {%- else -%}
+              {%- set subId = subLevel + id + "-" + loop.index0 -%}
+            {%- endif %}
+            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+              {% if subitem.sub %}
+                {{ childrenTree(subitem, subId, name, type) }}
+              {% else %}
+                <div {%- if subitem.id %} id="{{ id }}"{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+                  {% if subitem.active %}
+                    <strong>
+                      {{ checkboxItem(subitem, subId, name, type) }}
+                    </strong>
+                  {% else %}
+                    {{ checkboxItem(subitem, subId, name, type) }}
+                  {% endif %}
+                </div>
+              {% endif %}
+            </li>
+          {% endif %}
+       {% endfor %}
+     </ul>
+  {% endif %}
+{% endmacro %}
+
+{#- 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 %}
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" role="tree" aria-labelledby="{{ idPrefix }}-heading" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+    {% 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 -%}
+          {%- set id = idPrefix + "-" + loop.index0 -%}
+        {%- endif -%}
+        {% set subId = "sub-" + id %}
+        {% set name = item.name if item.name else params.name %}
+        {% 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) | trim %}
+        <li id="{{ id }}" class="c-tree__item ml-4 focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}{%- if item.active %} aria-current="page"{% endif %} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %}>
+          {{ childrenTree(item, id, name, params.type) }}
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- tree -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {% 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 %}
+</div>
+<!-- /tree -->

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

@@ -0,0 +1,159 @@
+params:
+- name: type
+  type: string
+  required: false
+  description: Type of input control to render. Admitted values are `checkbox` and `radio` or not set. Defaults to `radio`.
+- 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 item if no id is specified on each item.
+- name: name
+  type: string
+  required: true
+  description: Name attribute for all checkbox/radio items.
+- name: heading
+  type: object
+  required: true
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: items
+  type: array
+  required: true
+  description: Array of tree items objects.
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each tree 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 tree item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: name
+    type: string
+    required: true
+    description: Specific name for the checkbox/radio item. If omitted, then component global `name` string will be applied.
+  - name: value
+    type: string
+    required: true
+    description: Value for the checkbox/radio input.
+  - name: label
+    type: object
+    required: false
+    description: Provide attributes and classes to each checkbox/radio item label.
+    isComponent: true
+  - name: hint
+    type: object
+    required: false
+    description: Provide hint to each checkbox/radio item.
+    isComponent: true
+  - name: checked
+    type: boolean
+    required: false
+    description: If true, checkbox/radio 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. Only for checkbox item.
+  - name: indeterminateChecked
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value. Only for checkbox item.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, tree 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 item.
+  - name: expanded
+    type: boolean
+    required: false
+    description: If true, tree sub will be expanded.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+  - name: sub.classes
+    type: string
+    required: false
+    description: Classes to add to the sub container.
+  - name: sub.attributes
+    type: string
+    required: false
+    description: HTML attributes (for example data attributes) to add to the sub container.
+  - name: sub.items
+    type: array
+    required: false
+    description: Provide subitems for the sub reveal. Each items have same params as this item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the tree container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the tree container.
+
+accessibilityCriteria: |
+  ## sub reveals
+  Must:
+  - be visible as static content if JavaScript is unavailable or fails
+  - be hidden if JavaScript is available and is collapsed
+  - indicate if content is expanded or collapsed
+  - indicate that there is collapsed content to interact with
+
+  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575