desy-html 12.1.0 → 13.0.0

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

@@ -1,106 +1,107 @@
-{#- 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.id + "menubar-item" %}
-
-{% set iconHtml %}
-  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
-  treat it as an interactive element - without this it will be
-  'focusable' when using the keyboard to navigate. #}
-  <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-{% endset %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-  <ul data-module="c-menubar" id="{{ params.id }}-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="{{ params.ariaLabel }}" {%- if params.label %} aria-describedby="{{ params.id }}-label"{% endif %}>
-    {% 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.index -%}
-      {%- endif -%}
-      {% set subId = "sub-" + id %}
-    <li class="relative" role="none">
-      {% if item.sub %}
-      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
-        {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
-        {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
-        {# Indentation is intentional to output HTML nicely #}
-        {{- iconHtml | safe | trim if iconHtml -}}
-      </a>
-      {% endif %}
-      {% if item.href and not item.sub %}
-      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {{ item.html | filterquotes | safe if item.html else item.text }}
-      </a>
-      {% endif %}
-      {% if item.sub.items %}
-      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {% for subitem in item.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 = "sub-" + id + "-" + loop.index -%}
-              {%- endif %}
-        {% if subitem.role == 'none' %}
-        <li role="none" id="{{ subId }}" data-option="{{ subId }}">
-          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
-        </li>
-        {% elseif subitem.role == 'group' %}
-        <li role="none">
-          <ul role="group" id="{{ subId }}" data-option="{{ subId }}" {%- if subitem.ariaLabel %} aria-label="{{ subitem.ariaLabel }}"{% endif %}>
-            {% for subsubitem in subitem.items %}
-              {% if subsubitem %}
-                {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-                {%- if subsubitem.id -%}
-                  {%- set subsubId = subsubitem.id -%}
-                  {%- else -%}
-                    {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
-                {%- endif %}
-            <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
-              {{ subsubitem.html | filterquotes | safe if subsubitem.html else subsubitem.text }}
-            </li>
-              {% endif %}
-           {% endfor %}
-          </ul>
-        </li>
-        {% elseif subitem.role == 'menuitem' %}
-        <li role="menuitem" id="{{ subId }}" data-option="{{ subId }}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
-          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
-        </li>
-        {% elseif subitem.role == 'menuitemcheckbox' %}
-        <li role="menuitemcheckbox" aria-checked="{% if subitem.checked %}{{ subitem.checked }}{% else %}false{% endif %}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subId }}" data-option="{{ subId }}">
-          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
-        </li>
-        {% elseif subitem.role == 'separator' %}
-        <li role="separator" id="{{ subId }}" class="my-sm border-b border-neutral-base">
-        </li>
-        {% endif %}
-        {% endif %}
-        {% endfor %}
-      </ul>
-      {% endif %}
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-{% endset -%}
-
-<!-- menubar -->
-<div id="{{ params.id }}" class="c-menubar {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {% if params.label  %}
-  <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
-    {% if params.label.html %}
-    {{ params.label.html | filterquotes | safe}}
-    {% else %}
-    <p>{{ params.label.text }}</p>
-    {% endif %}
-  </div>
-  {% endif %}
-  {{ innerHtml | trim | safe }}
-</div>
+{#- 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.id + "menubar-item" %}
+
+{% set iconHtml %}
+  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
+  treat it as an interactive element - without this it will be
+  'focusable' when using the keyboard to navigate. #}
+  <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+{% endset %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  <ul data-module="c-menubar" id="{{ params.id }}-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="{{ params.ariaLabel }}" {%- if params.label %} aria-describedby="{{ params.id }}-label"{% endif %}>
+    {% 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.index -%}
+      {%- endif -%}
+      {% set subId = "sub-" + id %}
+    <li class="relative" role="none">
+      {% if item.sub %}
+      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
+        {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
+        {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <span class="inline-flex self-center align-middle">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        <span class="c-menubar__msg">Con ítems seleccionados</span>
+        {# Indentation is intentional to output HTML nicely #}
+        {{- iconHtml | safe | trim if iconHtml -}}
+      </a>
+      {% endif %}
+      {% if item.href and not item.sub %}
+      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {{ item.html | filterquotes | safe if item.html else item.text }}
+      </a>
+      {% endif %}
+      {% if item.sub.items %}
+      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% for subitem in item.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 = "sub-" + id + "-" + loop.index -%}
+              {%- endif %}
+        {% if subitem.role == 'none' %}
+        <li role="none" id="{{ subId }}" data-option="{{ subId }}">
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
+        </li>
+        {% elseif subitem.role == 'group' %}
+        <li role="none">
+          <ul role="group" id="{{ subId }}" data-option="{{ subId }}" {%- if subitem.ariaLabel %} aria-label="{{ subitem.ariaLabel }}"{% endif %}>
+            {% for subsubitem in subitem.items %}
+              {% if subsubitem %}
+                {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+                {%- if subsubitem.id -%}
+                  {%- set subsubId = subsubitem.id -%}
+                  {%- else -%}
+                    {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
+                {%- endif %}
+            <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
+              {{ subsubitem.html | filterquotes | safe if subsubitem.html else subsubitem.text }}
+            </li>
+              {% endif %}
+           {% endfor %}
+          </ul>
+        </li>
+        {% elseif subitem.role == 'menuitem' %}
+        <li role="menuitem" id="{{ subId }}" data-option="{{ subId }}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
+        </li>
+        {% elseif subitem.role == 'menuitemcheckbox' %}
+        <li role="menuitemcheckbox" aria-checked="{% if subitem.checked %}{{ subitem.checked }}{% else %}false{% endif %}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subId }}" data-option="{{ subId }}">
+          {{ subitem.html | filterquotes | safe if subitem.html else subitem.text }}
+        </li>
+        {% elseif subitem.role == 'separator' %}
+        <li role="separator" id="{{ subId }}" class="my-sm border-b border-neutral-base">
+        </li>
+        {% endif %}
+        {% endif %}
+        {% endfor %}
+      </ul>
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- menubar -->
+<div id="{{ params.id }}" class="c-menubar {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% if params.label  %}
+  <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
+    {% if params.label.html %}
+    {{ params.label.html | filterquotes | safe}}
+    {% else %}
+    <p>{{ params.label.text }}</p>
+    {% endif %}
+  </div>
+  {% endif %}
+  {{ innerHtml | trim | safe }}
+</div>
 <!-- /menubar -->

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

@@ -1,140 +1,140 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: menubar unique id.
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each item if no id is specified on each item.
-- name: ariaLabel
-  type: text
-  required: true
-  description: aria-label for menubar. Should be a description of the menubar.
-- name: label
-  type: object
-  required: true
-  description: Label text or HTML by specifying value for either text or html keys.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the element that acts as label.
-- name: items
-  type: array
-  required: true
-  description: Array of items objects.
-  params:
-  - name: href
-    type: string
-    required: false
-    description: Item link.
-  - name: target
-    type: string
-    required: false
-    description: The target where the item should link to.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each 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 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: ariaLabel
-    type: text
-    required: true
-    description: aria-label for parent items. Should be similar as item text or item html text content.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If disabled, the item will be disabled
-  - name: active
-    type: boolean
-    required: false
-    description: If active, the item will be with primary color
-  - name: sub
-    type: boolean
-    required: false
-    description: If true, content provided will be revealed when the item is expanded.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the sub container.
-    - name: items
-      type: array
-      required: false
-      description: Provide subitems for the sub reveal.
-      - name: role
-        type: string
-        required: false
-        description: Defaults to `none`. Allowed values are `none`, `group`, `menuitem`, `menuitemcheckbox` and `separator`. Use the `group` role to group menuitems, menuitemcheckbox or menuitemradio sub-subitems.
-      - name: ariaLabel
-        type: text
-        required: false
-        description: aria-label for parent role `group` items. Should be descriptive of group.
-      - name: text
-        type: string
-        required: true
-        description: Text to use within each item.
-      - name: html
-        type: string
-        required: true
-        description: Only can be used in menuitems with role=`none`. If `text` is set, this is not required. HTML to use within each item label. If `html` is provided, the `text` argument will be ignored.
-      - name: checked
-        type: boolean
-        required: false
-        description: If true, not grouped `menuitemcheckbox` will be checked.
-      - name: items
-        type: array
-        required: false
-        description: Optional array for `role=menuitemradio` sub-subitems, that should be nested in a `role=group` subitem.
-        - name: role
-          type: string
-          required: false
-          description: Defaults to `none`. Allowed values are `none`, `menuitem`, `menuitemcheckbox` and `menuitemradio`.
-        - name: text
-          type: string
-          required: true
-          description: Text to use within each item label.
-        - name: checked
-          type: boolean
-          required: false
-          description: If true, `menuitemradio` will be checked.
-  - 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: classes
-  type: string
-  required: false
-  description: Classes to add to the menubar container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the menubar 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
-
+params:
+- name: id
+  type: string
+  required: true
+  description: menubar unique id.
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: ariaLabel
+  type: text
+  required: true
+  description: aria-label for menubar. Should be a description of the menubar.
+- name: label
+  type: object
+  required: true
+  description: Label text or HTML by specifying value for either text or html keys.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the element that acts as label.
+- name: items
+  type: array
+  required: true
+  description: Array of items objects.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: Item link.
+  - name: target
+    type: string
+    required: false
+    description: The target where the item should link to.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each 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 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: ariaLabel
+    type: text
+    required: true
+    description: aria-label for parent items. Should be similar as item text or item html text content.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If disabled, the item will be disabled
+  - name: active
+    type: boolean
+    required: false
+    description: If active, the item will be with primary color
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the sub container.
+    - name: items
+      type: array
+      required: false
+      description: Provide subitems for the sub reveal.
+      - name: role
+        type: string
+        required: false
+        description: Defaults to `none`. Allowed values are `none`, `group`, `menuitem`, `menuitemcheckbox` and `separator`. Use the `group` role to group menuitems, menuitemcheckbox or menuitemradio sub-subitems.
+      - name: ariaLabel
+        type: text
+        required: false
+        description: aria-label for parent role `group` items. Should be descriptive of group.
+      - name: text
+        type: string
+        required: true
+        description: Text to use within each item.
+      - name: html
+        type: string
+        required: true
+        description: Only can be used in menuitems with role=`none`. If `text` is set, this is not required. HTML to use within each item label. If `html` is provided, the `text` argument will be ignored.
+      - name: checked
+        type: boolean
+        required: false
+        description: If true, not grouped `menuitemcheckbox` will be checked.
+      - name: items
+        type: array
+        required: false
+        description: Optional array for `role=menuitemradio` sub-subitems, that should be nested in a `role=group` subitem.
+        - name: role
+          type: string
+          required: false
+          description: Defaults to `none`. Allowed values are `none`, `menuitem`, `menuitemcheckbox` and `menuitemradio`.
+        - name: text
+          type: string
+          required: true
+          description: Text to use within each item label.
+        - name: checked
+          type: boolean
+          required: false
+          description: If true, `menuitemradio` will be checked.
+  - 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: classes
+  type: string
+  required: false
+  description: Classes to add to the menubar container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the menubar 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