desy-html 10.2.2 → 11.0.1

package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk

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

package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css

@@ -1,161 +1,161 @@
-/* ==========================================================================
-   _styles.menu-horizontal.css
-   ========================================================================== */
-
-@layer components {
-  .c-menu-horizontal--links {
-    .c-menu-horizontal__link {
-      @apply text-primary-base;
-
-      &[disabled],
-      &[disabled]:hover,
-      &[disabled]:focus {
-        @apply opacity-50;
-        @apply text-black;
-        @apply cursor-not-allowed;
-      }
-    }
-  }
-
-  .c-menu-horizontal--navigation-bar {
-    @apply border-l-0;
-    @apply border-b;
-    @apply border-b-neutral-dark;
-
-    .c-menu-horizontal__link {
-      @apply border-none;
-      @apply no-underline;
-      @apply hover:bg-neutral-lighter;
-
-      &.c-menu-horizontal__active {
-        @apply hover:no-underline;
-        @apply font-bold;
-      }
-
-      &:hover:not(disabled) {
-        @apply bg-neutral-light;
-      }
-
-      &[disabled],
-      &[disabled]:hover,
-      &[disabled]:focus {
-        @apply bg-white;
-        @apply opacity-50;
-        @apply cursor-not-allowed;
-      }
-    }
-
-    .c-menu-horizontal__list {
-      @apply flex;
-      @apply flex-wrap;
-      @apply relative;
-      @apply w-full;
-    }
-
-    .c-menu-horizontal__active {
-      @apply hover:no-underline;
-      @apply relative;
-
-      &::after {
-        content: "";
-        @apply block;
-        @apply absolute;
-        @apply left-0;
-        @apply right-0;
-        @apply top-auto;
-        @apply bottom-0;
-        @apply w-auto;
-        @apply h-xs;
-        @apply bg-neutral-dark;
-      }
-    }
-  }
-
-  .c-menu-horizontal--tabs {
-    @apply lg:border-b;
-    @apply lg:border-neutral-dark;
-
-    .c-menu-horizontal__list {
-      @apply lg:relative;
-      @apply lg:w-full;
-      @apply lg:flex;
-      @apply lg:flex-nowrap;
-      @apply lg:snap-x;
-      @apply lg:overflow-x-auto;
-      @apply lg:-mb-0.5;
-    }
-
-    .c-menu-horizontal__active {
-      @apply lg:bg-white;
-      @apply lg:border-neutral-base;
-      @apply lg:border-b-0;
-      @apply lg:rounded-t;
-      @apply no-underline;
-
-      strong {
-        @apply font-normal;
-      }
-    }
-  }
-
-  .c-menu-horizontal--tabs-mobile {
-    @apply w-full;
-    @apply border-b;
-    @apply border-neutral-dark;
-
-    .c-menu-horizontal__list {
-      @apply relative;
-      @apply w-full;
-      @apply flex;
-      @apply flex-nowrap;
-      @apply snap-x;
-      @apply overflow-x-auto;
-      @apply -mb-0.5;
-    }
-
-    .c-menu-horizontal__active {
-      @apply px-base;
-      @apply py-base;
-      @apply bg-white;
-      @apply border-neutral-base;
-      @apply border-b-0;
-      @apply rounded-t;
-      @apply no-underline;
-
-      strong {
-        @apply font-normal;
-      }
-    }
-
-    .c-menu-horizontal__link {
-      @apply px-base;
-      @apply py-base;
-    }
-  }
-
-  .c-menu-horizontal__link {
-    &:focus > span,
-    &:focus > strong {
-      @apply bg-warning-base;
-      @apply shadow-outline-focus;
-      @apply text-black;
-      @apply outline-none;
-    }
-
-    &.c-menu-horizontal__active {
-      @apply no-underline;
-      @apply hover:underline;
-    }
-  }
-
-  .c-menu-horizontal--scroll {
-    .c-menu-horizontal__list {
-      @apply relative w-full flex flex-nowrap snap-x overflow-x-auto;
-
-      & > li {
-        @apply snap-start;
-      }
-    }
-  }
-}
-
+/* ==========================================================================
+   _styles.menu-horizontal.css
+   ========================================================================== */
+
+@layer components {
+  .c-menu-horizontal--links {
+    .c-menu-horizontal__link {
+      @apply text-primary-base;
+
+      &[disabled],
+      &[disabled]:hover,
+      &[disabled]:focus {
+        @apply opacity-50;
+        @apply text-black;
+        @apply cursor-not-allowed;
+      }
+    }
+  }
+
+  .c-menu-horizontal--navigation-bar {
+    @apply border-l-0;
+    @apply border-b;
+    @apply border-b-neutral-dark;
+
+    .c-menu-horizontal__link {
+      @apply border-none;
+      @apply no-underline;
+      @apply hover:bg-neutral-lighter;
+
+      &.c-menu-horizontal__active {
+        @apply hover:no-underline;
+        @apply font-bold;
+      }
+
+      &:hover:not(disabled) {
+        @apply bg-neutral-light;
+      }
+
+      &[disabled],
+      &[disabled]:hover,
+      &[disabled]:focus {
+        @apply bg-white;
+        @apply opacity-50;
+        @apply cursor-not-allowed;
+      }
+    }
+
+    .c-menu-horizontal__list {
+      @apply flex;
+      @apply flex-wrap;
+      @apply relative;
+      @apply w-full;
+    }
+
+    .c-menu-horizontal__active {
+      @apply hover:no-underline;
+      @apply relative;
+
+      &::after {
+        content: "";
+        @apply block;
+        @apply absolute;
+        @apply left-0;
+        @apply right-0;
+        @apply top-auto;
+        @apply bottom-0;
+        @apply w-auto;
+        @apply h-xs;
+        @apply bg-neutral-dark;
+      }
+    }
+  }
+
+  .c-menu-horizontal--tabs {
+    @apply lg:border-b;
+    @apply lg:border-neutral-dark;
+
+    .c-menu-horizontal__list {
+      @apply lg:relative;
+      @apply lg:w-full;
+      @apply lg:flex;
+      @apply lg:flex-nowrap;
+      @apply lg:snap-x;
+      @apply lg:overflow-x-auto;
+      @apply lg:-mb-0.5;
+    }
+
+    .c-menu-horizontal__active {
+      @apply lg:bg-white;
+      @apply lg:border-neutral-base;
+      @apply lg:border-b-0;
+      @apply lg:rounded-t;
+      @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
+    }
+  }
+
+  .c-menu-horizontal--tabs-mobile {
+    @apply w-full;
+    @apply border-b;
+    @apply border-neutral-dark;
+
+    .c-menu-horizontal__list {
+      @apply relative;
+      @apply w-full;
+      @apply flex;
+      @apply flex-nowrap;
+      @apply snap-x;
+      @apply overflow-x-auto;
+      @apply -mb-0.5;
+    }
+
+    .c-menu-horizontal__active {
+      @apply px-base;
+      @apply py-base;
+      @apply bg-white;
+      @apply border-neutral-base;
+      @apply border-b-0;
+      @apply rounded-t;
+      @apply no-underline;
+
+      strong {
+        @apply font-normal;
+      }
+    }
+
+    .c-menu-horizontal__link {
+      @apply px-base;
+      @apply py-base;
+    }
+  }
+
+  .c-menu-horizontal__link {
+    &:focus > span,
+    &:focus > strong {
+      @apply bg-warning-base;
+      @apply shadow-outline-focus;
+      @apply text-black;
+      @apply outline-none;
+    }
+
+    &.c-menu-horizontal__active {
+      @apply no-underline;
+      @apply hover:underline;
+    }
+  }
+
+  .c-menu-horizontal--scroll {
+    .c-menu-horizontal__list {
+      @apply relative w-full flex flex-nowrap snap-x overflow-x-auto;
+
+      & > li {
+        @apply snap-start;
+      }
+    }
+  }
+}
+

package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk

@@ -1,36 +1,36 @@
-{#- 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 "menu-item" %}
-
-<!-- menu-horizontal -->
-<nav data-module="c-menu-horizontal" class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
-    {% 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 %}
-    <li>
-    {% if item.active %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <strong class="flex items-center pointer-events-none font-bold">{{ item.html | safe if item.html else item.text }}</strong>
-      </a>
-    {% else %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 -%}>
-        <span class="flex items-center pointer-events-none">
-          {{ item.html | safe if item.html else item.text }}
-        </span>
-      </a>
-    {% endif %}
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</nav>
-<!-- /menu-horizontal -->
+{#- 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 "menu-item" %}
+
+<!-- menu-horizontal -->
+<nav data-module="c-menu-horizontal" class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
+    {% 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 %}
+    <li>
+    {% if item.active %}
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <strong class="flex items-center pointer-events-none font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+      </a>
+    {% else %}
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% 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 -%}>
+        <span class="flex items-center pointer-events-none">
+          {{ item.html | safe if item.html else item.text }}
+        </span>
+      </a>
+    {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</nav>
+<!-- /menu-horizontal -->

package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml

@@ -1,54 +1,54 @@
-params:
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each nav item if no id is specified on each item. If not passed, fall back to using the name option instead.
-- name: items
-  type: array
-  required: true
-  description: Array of nav items objects.
-  params:
-  - name: href
-    type: string
-    required: true
-    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 nav 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 nav item. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Specific id attribute for the nav item. If omitted, then idPrefix option will be applied.
-  - name: active
-    type: boolean
-    required: false
-    description: If true, item will be active.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, nav item 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: classes
-  type: string
-  required: false
-  description: Classes to add to the nav.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each nav item if no id is specified on each item. If not passed, fall back to using the name option instead.
+- name: items
+  type: array
+  required: true
+  description: Array of nav items objects.
+  params:
+  - name: href
+    type: string
+    required: true
+    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 nav 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 nav item. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the nav item. If omitted, then idPrefix option will be applied.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, item will be active.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav item 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: classes
+  type: string
+  required: false
+  description: Classes to add to the nav.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the nav tag.