desy-html 10.2.2 → 11.0.1

package/src/templates/components/links-list/_macro.links-list.njk

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

package/src/templates/components/links-list/_template.links-list.njk

@@ -1,119 +1,119 @@
-{#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else "links-list-item" %}
-
-{% set arrow %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
-{% endset %}
-
-{% set chevron %}
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
-{% endset %}
-
-
-{% set innerHtml %}
-  <ul class="{% if params.listClasses %}{{ params.listClasses }}{% else %}divide-y divide-neutral-base{% 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="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}relative px-base{% endif %}">
-      {% if item.href %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
-        <div class="flex gap-base justify-between items-center flex-1">
-          {% if item.icon %}
-          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
-            {% if item.icon.html %}
-            {{ item.icon.html | safe }}
-            {% endif %}
-          </div>
-          {% endif %}
-          <div class="flex-1">
-            {% 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 %}
-          </div>
-        </div>
-        {% if item.iconRight %}
-          {% if item.iconRight.type != 'none' %}
-            {% if item.iconRight.type == 'arrow' %}
-              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
-                {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
-                {% else %}
-                  {{ arrow | safe | trim }}
-                {% endif %}
-              </div>
-            {% elseif item.iconRight.type == 'chevron' %}
-              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
-                {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
-                {% else %}
-                  {{ chevron | safe | trim }}
-                {% endif %}
-              </div>
-            {% else %}
-              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
-                {% if item.iconRight.html %}
-                  {{ item.iconRight.html | safe }}
-                {% endif %}
-              </div>
-            {% endif %}
-          {% endif %}
-        {% else %}
-          <div class="self-center h-full">
-            {{ arrow | safe | trim }}
-          </div>
-        {% endif %}
-      </a>
-      {% else %}
-      <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
-        <div class="flex gap-base justify-between items-center flex-1">
-          {% if item.icon %}
-          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
-            {% if item.icon.html %}
-            {{ item.icon.html | safe }}
-            {% endif %}
-          </div>
-          {% endif %}
-          <div class="flex-1">
-            {% 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 %}
-          </div>
-        </div>
-      </div>
-      {% endif %}
-      {% if item.sub.html %}
-      <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
-        {{ item.sub.html | safe }}
-      </div>
-      {% endif %}
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-{% endset -%}
-
-<!-- links-list -->
-{% if params.hasNav == false %}
-<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {{ innerHtml | trim | safe }}
-</div>
-{% else %}
-<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-  {{ innerHtml | trim | safe }}
-</nav>
-{% endif %}
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else "links-list-item" %}
+
+{% set arrow %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>
+{% endset %}
+
+{% set chevron %}
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
+{% endset %}
+
+
+{% set innerHtml %}
+  <ul class="{% if params.listClasses %}{{ params.listClasses }}{% else %}divide-y divide-neutral-base{% 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="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}relative px-base{% endif %}">
+      {% if item.href %}
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
+        <div class="flex gap-base justify-between items-center flex-1">
+          {% if item.icon %}
+          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+            {% if item.icon.html %}
+            {{ item.icon.html | safe }}
+            {% endif %}
+          </div>
+          {% endif %}
+          <div class="flex-1">
+            {% 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 %}
+          </div>
+        </div>
+        {% if item.iconRight %}
+          {% if item.iconRight.type != 'none' %}
+            {% if item.iconRight.type == 'arrow' %}
+              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.iconRight.html %}
+                  {{ item.iconRight.html | safe }}
+                {% else %}
+                  {{ arrow | safe | trim }}
+                {% endif %}
+              </div>
+            {% elseif item.iconRight.type == 'chevron' %}
+              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.iconRight.html %}
+                  {{ item.iconRight.html | safe }}
+                {% else %}
+                  {{ chevron | safe | trim }}
+                {% endif %}
+              </div>
+            {% else %}
+              <div class="{% if item.iconRight.containerClasses %}{{ item.iconRight.containerClasses }}{% else %}self-center h-full{% endif %}">
+                {% if item.iconRight.html %}
+                  {{ item.iconRight.html | safe }}
+                {% endif %}
+              </div>
+            {% endif %}
+          {% endif %}
+        {% else %}
+          <div class="self-center h-full">
+            {{ arrow | safe | trim }}
+          </div>
+        {% endif %}
+      </a>
+      {% else %}
+      <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% 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 -%}>
+        <div class="flex gap-base justify-between items-center flex-1">
+          {% if item.icon %}
+          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+            {% if item.icon.html %}
+            {{ item.icon.html | safe }}
+            {% endif %}
+          </div>
+          {% endif %}
+          <div class="flex-1">
+            {% 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 %}
+          </div>
+        </div>
+      </div>
+      {% endif %}
+      {% if item.sub.html %}
+      <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
+        {{ item.sub.html | safe }}
+      </div>
+      {% endif %}
+    </li>
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- links-list -->
+{% if params.hasNav == false %}
+<div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</div>
+{% else %}
+<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</nav>
+{% endif %}
 <!-- /links-list -->

package/src/templates/components/links-list/params.links-list.yaml

@@ -1,102 +1,102 @@
-params:
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each item if no id is specified on each item.
-- name: hasNav
-  type: boolean
-  required: false
-  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
-- 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: disabled
-    type: boolean
-    required: false
-    description: If true, nav will be disabled.
-  - name: sub
-    type: boolean
-    required: false
-    description: If true, content provided will be revealed when the item is expanded.
-    - name: html
-      type: string
-      required: true
-      description: Provide content for the sub.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the sub container.
-  - name: iconRight
-    type: object
-    required: false
-    description: This is the optional icon at right. If this is not set, the icon at right will be a default right arrow.
-    - name: html
-      type: string
-      required: false
-      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
-    - name: type
-      type: string
-      required: false
-      description: Predefined icon types are `arrow`, `chevron`, `none`.
-    - name: containerClasses
-      type: string
-      required: false
-      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
-  - name: icon
-    type: object
-    required: false
-    description: This is the optional icon at left
-    - name: html
-      type: string
-      required: true
-      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
-    - name: containerClasses
-      type: string
-      required: false
-      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
-  - name: containerClasses
-    type: string
-    required: false
-    description: Classes to add to the parent `<li>` of the item.
-  - 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: listClasses
-  type: string
-  required: false
-  description: Classes to add to the `<ul>` that holds the items.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the nav container.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: hasNav
+  type: boolean
+  required: false
+  description: Defaults to `true`. If `false`, there will be no nav assuming the component will be wrapped with a custom nav with it's own aria-label.
+- 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: disabled
+    type: boolean
+    required: false
+    description: If true, nav will be disabled.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+    - name: html
+      type: string
+      required: true
+      description: Provide content for the sub.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the sub container.
+  - name: iconRight
+    type: object
+    required: false
+    description: This is the optional icon at right. If this is not set, the icon at right will be a default right arrow.
+    - name: html
+      type: string
+      required: false
+      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+    - name: type
+      type: string
+      required: false
+      description: Predefined icon types are `arrow`, `chevron`, `none`.
+    - name: containerClasses
+      type: string
+      required: false
+      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
+  - name: icon
+    type: object
+    required: false
+    description: This is the optional icon at left
+    - name: html
+      type: string
+      required: true
+      description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+    - name: containerClasses
+      type: string
+      required: false
+      description: Classes applied to the parent div of icon. Useful to vertical align the icon.
+  - name: containerClasses
+    type: string
+    required: false
+    description: Classes to add to the parent `<li>` of the item.
+  - 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: listClasses
+  type: string
+  required: false
+  description: Classes to add to the `<ul>` that holds the items.
+- 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.