desy-html 10.2.2 → 11.0.1

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

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

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

@@ -1,92 +1,92 @@
-{#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
-
-{% set innerHtml %}
-  <ul class="text-base">
-    {% 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="my-base break-inside-avoid-column">
-      {% if item.href %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {% if item.active %}
-        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | safe if item.html else item.text }}
-        {% endif %}
-      </a>
-      {% else %}
-      <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        {% if item.active %}
-        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
-        {% else %}
-        {{ item.html | safe if item.html else item.text }}
-        {% endif %}
-      </span>
-      {% endif %}
-      {% if item.sub.items %}
-      <ul {%- if item.sub.classes %} class="{{ item.sub.classes }}"{% endif %} {%- 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 %}
-        <li class="m-base origin-top-left text-sm">
-            {% if subitem.href %}
-          <a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-            {% if subitem.active %}
-            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-            {% else %}
-            {{ subitem.html | safe if subitem.html else subitem.text }}
-            {% endif %}
-          </a>
-            {% else %}
-          <span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-            {% if subitem.active %}
-            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-            {% else %}
-            {{ subitem.html | safe if subitem.html else subitem.text }}
-            {% endif %}
-          </span>
-            {% endif %}
-        </li>
-            {% if subitem.divider %}
-        <li class="my-sm border-b border-neutral-base" aria-hidden="true">
-          <div class="sr-only">Separador</div>
-        </li>
-            {% endif %}
-        {% endif %}
-      {% endfor %}
-      </ul>
-      {% elseif item.sub.html %}
-        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" id="{{ subId }}">
-          {{ item.sub.html | safe }}
-        </div>
-      {% endif %}
-    </li>
-    {% if item.divider %}
-    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
-      <div class="sr-only">Separador</div>
-    </li>
-    {% endif %}
-    {% endif %}
-    {% endfor %}
-  </ul>
-{% endset -%}
-
-<!-- menu-vertical -->
-<nav data-module="c-menu-vertical" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} {%- if params.active %} {% endif %}>
-  {{ innerHtml | trim | safe }}
-</nav>
-<!-- /menu-vertical -->
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "nav-item" %}
+
+{% set innerHtml %}
+  <ul class="text-base">
+    {% 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="my-base break-inside-avoid-column">
+      {% if item.href %}
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% if item.active %}
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | safe if item.html else item.text }}
+        {% endif %}
+      </a>
+      {% else %}
+      <span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% if item.active %}
+        <strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong>
+        {% else %}
+        {{ item.html | safe if item.html else item.text }}
+        {% endif %}
+      </span>
+      {% endif %}
+      {% if item.sub.items %}
+      <ul {%- if item.sub.classes %} class="{{ item.sub.classes }}"{% endif %} {%- 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 %}
+        <li class="m-base origin-top-left text-sm">
+            {% if subitem.href %}
+          <a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {% if subitem.active %}
+            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            {% else %}
+            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {% endif %}
+          </a>
+            {% else %}
+          <span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {% if subitem.active %}
+            <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            {% else %}
+            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {% endif %}
+          </span>
+            {% endif %}
+        </li>
+            {% if subitem.divider %}
+        <li class="my-sm border-b border-neutral-base" aria-hidden="true">
+          <div class="sr-only">Separador</div>
+        </li>
+            {% endif %}
+        {% endif %}
+      {% endfor %}
+      </ul>
+      {% elseif item.sub.html %}
+        <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" id="{{ subId }}">
+          {{ item.sub.html | safe }}
+        </div>
+      {% endif %}
+    </li>
+    {% if item.divider %}
+    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
+      <div class="sr-only">Separador</div>
+    </li>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- menu-vertical -->
+<nav data-module="c-menu-vertical" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} {%- if params.active %} {% endif %}>
+  {{ innerHtml | trim | safe }}
+</nav>
+<!-- /menu-vertical -->

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

@@ -1,77 +1,77 @@
-params:
-- name: hasUnderline
-  type: boolean
-  required: false
-  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each item if no id is specified on each item.
-- name: items
-  type: array
-  required: true
-  description: Array of nav 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 nav 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 nav 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: divider
-    required: false
-    description: If true, a divider border will be shown after the item.
-  - name: sub
-    type: boolean
-    required: false
-    description: If true, content provided will be revealed when the item is expanded.
-  - name: sub.html
-    type: string
-    required: false
-    description: Provide content for the sub reveal.
-  - name: sub.classes
-    type: string
-    required: false
-    description: Classes to add to the sub container.
-  - name: sub.items
-    type: array
-    required: false
-    description: Provide subitems for the sub reveal.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, nav 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 container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the nav container.
-- name: active
-  type: boolean
-  required: false
-  description: If true, item will be active.
+params:
+- name: hasUnderline
+  type: boolean
+  required: false
+  description: If `true`, all items will be underlined except the disabled ones or the ones that have no href.
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: items
+  type: array
+  required: true
+  description: Array of nav 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 nav 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 nav 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: divider
+    required: false
+    description: If true, a divider border will be shown after the item.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+  - name: sub.html
+    type: string
+    required: false
+    description: Provide content for the sub reveal.
+  - name: sub.classes
+    type: string
+    required: false
+    description: Classes to add to the sub container.
+  - name: sub.items
+    type: array
+    required: false
+    description: Provide subitems for the sub reveal.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav 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 container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the nav container.
+- name: active
+  type: boolean
+  required: false
+  description: If true, item will be active.