desy-html 10.2.2 → 11.0.1

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

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

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

@@ -1,219 +1,219 @@
-/* ==========================================================================
-   _styles.listbox.css
-   ========================================================================== */
-
-@layer components {
-  .c-listbox {
-    @apply inline-flex;
-    @apply items-baseline;
-    @apply px-3;
-    @apply py-2;
-    @apply bg-white;
-    @apply border;
-    @apply border-primary-base;
-    @apply rounded;
-    @apply align-baseline;
-    @apply font-semibold;
-    @apply text-primary-base;
-    @apply transition-all;
-    @apply duration-100;
-    @apply ease-out;
-    @apply whitespace-nowrap;
-    @apply cursor-pointer;
-
-    @apply focus:bg-warning-base;
-    @apply focus:border-warning-base;
-    @apply focus:shadow-outline-black;
-    @apply focus:text-black;
-    @apply focus:outline-none;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-neutral-light;
-      @apply border-primary-base;
-      @apply text-primary-base;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply relative;
-      @apply top-px;
-    }
-
-    &.ds-focus {
-      @apply bg-warning-base;
-      @apply border-warning-base;
-      @apply shadow-outline-black;
-      @apply text-black;
-      @apply outline-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-listbox--disabled,
-    &.c-listbox--disabled:hover,
-    &.c-listbox--disabled:focus {
-      @apply bg-white;
-      @apply opacity-50;
-      @apply cursor-not-allowed;
-    }
-  }
-
-
-  .c-listbox__tooltip {
-    [role="option"] {
-      @apply relative;
-
-      &.focused,
-      &:focus,
-      &.ds-focus {
-        @apply bg-warning-base;
-        @apply border-warning-base;
-        @apply shadow-outline-black;
-        @apply text-black;
-        @apply outline-none;
-      }
-
-      &[aria-selected="true"]{
-        @apply font-bold;
-
-        &::before {
-          @apply bg-center bg-no-repeat bg-cover;
-          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
-          content: '';
-          @apply w-3;
-          @apply h-3;
-          @apply absolute;
-          @apply top-3;
-          @apply left-2;
-        }
-      }
-    }
-  }
-
-
-  .c-listbox--base {
-    @apply px-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-
-  .c-listbox--sm {
-    @apply px-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-
-
-  .c-listbox--primary {
-    @apply bg-primary-base;
-    @apply text-white;
-    @apply shadow-solid-primary-dark;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-dark;
-      @apply border-primary-dark;
-      @apply text-white;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-listbox--disabled,
-    &.c-listbox--disabled:hover,
-    &.c-listbox--disabled:focus {
-      @apply bg-primary-base;
-    }
-  }
-
-
-  .c-listbox--has-selection {
-    @apply bg-primary-light;
-    @apply text-primary-dark;
-    @apply border-primary-base;
-    @apply shadow-none;
-    @apply font-bold;
-
-    &:hover:not(disabled),
-    &:active:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-primary-light;
-      @apply text-black;
-      @apply bg-opacity-50;
-    }
-
-    &:active:not(disabled),
-    &.ds-active:not(disabled) {
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-listbox--disabled,
-    &.c-listbox--disabled:hover,
-    &.c-listbox--disabled:focus {
-      @apply bg-primary-light;
-    }
-  }
-
-
-  .c-listbox--transparent {
-    @apply bg-transparent;
-    @apply border-transparent;
-    @apply shadow-none;
-    @apply underline;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply text-primary-dark;
-      @apply border-neutral-base;
-      @apply shadow-none;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-listbox--disabled,
-    &.c-listbox--disabled:hover,
-    &.c-listbox--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent;
-      @apply no-underline;
-    }
-  }
-
-
-  .c-listbox--header {
-    @apply bg-transparent;
-    @apply border-none;
-    @apply rounded-none;
-    @apply shadow-none;
-    @apply font-normal;
-    @apply text-sm;
-    @apply text-black;
-
-    &:hover:not(disabled),
-    &.ds-hover:not(disabled) {
-      @apply bg-transparent;
-      @apply border-none;
-      @apply shadow-none;
-      @apply text-black;
-      @apply underline;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-listbox--disabled,
-    &.c-listbox--disabled:hover,
-    &.c-listbox--disabled:focus {
-      @apply bg-transparent;
-    }
-  }
+/* ==========================================================================
+   _styles.listbox.css
+   ========================================================================== */
+
+@layer components {
+  .c-listbox {
+    @apply inline-flex;
+    @apply items-baseline;
+    @apply px-3;
+    @apply py-2;
+    @apply bg-white;
+    @apply border;
+    @apply border-primary-base;
+    @apply rounded;
+    @apply align-baseline;
+    @apply font-semibold;
+    @apply text-primary-base;
+    @apply transition-all;
+    @apply duration-100;
+    @apply ease-out;
+    @apply whitespace-nowrap;
+    @apply cursor-pointer;
+
+    @apply focus:bg-warning-base;
+    @apply focus:border-warning-base;
+    @apply focus:shadow-outline-black;
+    @apply focus:text-black;
+    @apply focus:outline-none;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-neutral-light;
+      @apply border-primary-base;
+      @apply text-primary-base;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply relative;
+      @apply top-px;
+    }
+
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply border-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-listbox--disabled,
+    &.c-listbox--disabled:hover,
+    &.c-listbox--disabled:focus {
+      @apply bg-white;
+      @apply opacity-50;
+      @apply cursor-not-allowed;
+    }
+  }
+
+
+  .c-listbox__tooltip {
+    [role="option"] {
+      @apply relative;
+
+      &.focused,
+      &:focus,
+      &.ds-focus {
+        @apply bg-warning-base;
+        @apply border-warning-base;
+        @apply shadow-outline-black;
+        @apply text-black;
+        @apply outline-none;
+      }
+
+      &[aria-selected="true"]{
+        @apply font-bold;
+
+        &::before {
+          @apply bg-center bg-no-repeat bg-cover;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+          content: '';
+          @apply w-3;
+          @apply h-3;
+          @apply absolute;
+          @apply top-3;
+          @apply left-2;
+        }
+      }
+    }
+  }
+
+
+  .c-listbox--base {
+    @apply px-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
+  .c-listbox--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-listbox--primary {
+    @apply bg-primary-base;
+    @apply text-white;
+    @apply shadow-solid-primary-dark;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-dark;
+      @apply border-primary-dark;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-listbox--disabled,
+    &.c-listbox--disabled:hover,
+    &.c-listbox--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+
+  .c-listbox--has-selection {
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply border-primary-base;
+    @apply shadow-none;
+    @apply font-bold;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-light;
+      @apply text-black;
+      @apply bg-opacity-50;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-listbox--disabled,
+    &.c-listbox--disabled:hover,
+    &.c-listbox--disabled:focus {
+      @apply bg-primary-light;
+    }
+  }
+
+
+  .c-listbox--transparent {
+    @apply bg-transparent;
+    @apply border-transparent;
+    @apply shadow-none;
+    @apply underline;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply text-primary-dark;
+      @apply border-neutral-base;
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-listbox--disabled,
+    &.c-listbox--disabled:hover,
+    &.c-listbox--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-listbox--header {
+    @apply bg-transparent;
+    @apply border-none;
+    @apply rounded-none;
+    @apply shadow-none;
+    @apply font-normal;
+    @apply text-sm;
+    @apply text-black;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-transparent;
+      @apply border-none;
+      @apply shadow-none;
+      @apply text-black;
+      @apply underline;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-listbox--disabled,
+    &.c-listbox--disabled:hover,
+    &.c-listbox--disabled:focus {
+      @apply bg-transparent;
+    }
+  }
 }

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

@@ -1,90 +1,90 @@
-{#- If an id 'prefix' is not passed, fall back to using a default one
-   instead -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else params.id + "-listbox-item" %}
-{% set conditionalId = false %}
-{% set conditionalValue = false %}
-{% for item in params.items %}
-  {% if item %}
-    {%- 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 -%}
-    {%- if item.active -%}
-      {%- set conditionalId = id -%}
-      {%- set conditionalValue = item.html if item.html else item.text -%}
-    {%- endif -%}
-  {% endif %}
-{% endfor %}
-
-{% set commonTooltipAttributes %} data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" {%- if params.label  %} aria-labelledby="{{ params.id }}-label"{% endif %}
-{% if params.isMultiselectable %} aria-multiselectable="true"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
-
-{%- set classNames = "c-listbox" -%}
-
-{%- if params.classes %}
-  {% set classNames = classNames + " " + params.classes %}
-{% endif %}
-
-{% 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 %}
-
-
-{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
-
-{#- Capture the HTML so we can optionally nest it in a fieldset -#}
-{% set innerHtml %}
-  {% 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 commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif -%}"  {%- if item.active %} aria-selected="true"{% endif -%} {{- commonItemAttributes | safe }}>
-        {{ item.html | safe if item.html else item.text }}
-      </li>
-  {% endif %}
-  {% endfor %}
-{% endset -%}
-
-<!-- listbox -->
-<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% 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 | safe}}
-    {% else %}
-    <p>{{ params.label.text }}</p>
-    {% endif %}
-  </div>
-  {% endif %}
-  <button {{- commonAttributes | safe }} >
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | safe if params.html else params.text }}{% endif %}</span>
-    {# Indentation is intentional to output HTML nicely #}
-    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
-  </button>
-  <div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-listbox-tooltip" >
-    <ul id="{{ params.id }}" {{- commonTooltipAttributes | safe }} {%- if conditionalId %} aria-activedescendant="{{ conditionalId }}"{% endif %}>
-      {{ innerHtml | safe | trim }}
-    </ul>
-  </div>
-</div>
-<!-- /listbox -->
+{#- If an id 'prefix' is not passed, fall back to using a default one
+   instead -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else params.id + "-listbox-item" %}
+{% set conditionalId = false %}
+{% set conditionalValue = false %}
+{% for item in params.items %}
+  {% if item %}
+    {%- 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 -%}
+    {%- if item.active -%}
+      {%- set conditionalId = id -%}
+      {%- set conditionalValue = item.html if item.html else item.text -%}
+    {%- endif -%}
+  {% endif %}
+{% endfor %}
+
+{% set commonTooltipAttributes %} data-module="c-listbox-list" role="listbox" tabindex="-1" class="text-sm outline-none" {%- if params.label  %} aria-labelledby="{{ params.id }}-label"{% endif %}
+{% if params.isMultiselectable %} aria-multiselectable="true"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}{% endset %}
+
+{%- set classNames = "c-listbox" -%}
+
+{%- if params.classes %}
+  {% set classNames = classNames + " " + params.classes %}
+{% endif %}
+
+{% 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 %}
+
+
+{%- set commonAttributes %} id="{{ params.id }}-button" class="{{ classNames }}" data-module="c-listbox-button" aria-haspopup="listbox" {%- if params.doesChangeButtonText %} data-change="change"{% endif %} aria-labelledby="{% if params.label  %}{{ params.id }}-label {% endif -%} {{ params.id }}-button" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}{% endset %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  {% 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 commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif -%}"  {%- if item.active %} aria-selected="true"{% endif -%} {{- commonItemAttributes | safe }}>
+        {{ item.html | safe if item.html else item.text }}
+      </li>
+  {% endif %}
+  {% endfor %}
+{% endset -%}
+
+<!-- listbox -->
+<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% 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 | safe}}
+    {% else %}
+    <p>{{ params.label.text }}</p>
+    {% endif %}
+  </div>
+  {% endif %}
+  <button {{- commonAttributes | safe }} >
+    <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | safe if params.html else params.text }}{% endif %}</span>
+    {# Indentation is intentional to output HTML nicely #}
+    {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+  </button>
+  <div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-listbox-tooltip" >
+    <ul id="{{ params.id }}" {{- commonTooltipAttributes | safe }} {%- if conditionalId %} aria-activedescendant="{{ conditionalId }}"{% endif %}>
+      {{ innerHtml | safe | trim }}
+    </ul>
+  </div>
+</div>
+<!-- /listbox -->