desy-html 16.0.3 → 17.0.0

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

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

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

@@ -1,132 +1,132 @@
-/* ==========================================================================
-   _styles.tabs.css
-   ========================================================================== */
-
-@layer components {
-  .c-tabs:not(.c-tabs--reset) .c-tabs__heading {
-    @apply mb-sm
-           text-sm
-           lg:sr-only;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__tabs {
-    @apply lg:relative
-           lg:w-full
-           lg:flex
-           lg:snap-x
-           lg:overflow-x-auto
-           lg:-mb-0.5;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__link {
-    @apply relative
-           flex-none
-           flex
-           items-center
-           py-sm
-           border
-           text-black
-           underline
-           truncate
-           hover:text-primary-base
-           focus:outline-hidden
-           border-transparent
-           lg:px-base
-           lg:py-base
-           lg:snap-start;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__link--is-active {
-    @apply no-underline
-           lg:bg-white
-           lg:border-neutral-base
-           lg:border-b-0
-           lg:rounded-t;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__panel {
-    @apply p-base
-           mt-base
-           border
-           border-neutral-base
-           focus:outline-hidden
-           focus:border-black
-           focus:shadow-outline-focus-input
-           focus:ring-4
-           focus:ring-warning-base
-           lg:mt-px;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__panel-heading {
-    @apply lg:sr-only;
-  }
-
-  .c-tabs--scroll:not(.c-tabs--reset) {
-    .c-tabs__heading {
-      @apply sr-only;
-    }
-
-    .c-tabs__tabs {
-      @apply relative
-             w-full
-             flex
-             snap-x
-             overflow-x-auto
-             -mb-0.5;
-    }
-
-    .c-tabs__link {
-      @apply snap-start
-             px-lg
-             py-base
-             border;
-    }
-
-    .c-tabs__link--is-active {
-      @apply no-underline
-             bg-white
-             border-neutral-base
-             border-b-0
-             rounded-t;
-    }
-
-    .c-tabs__panel {
-      @apply mt-px;
-    }
-
-    .c-tabs__panel-heading {
-      @apply sr-only;
-    }
-  }
-
-  .c-tabs--list {
-    .c-tabs__heading {
-      @apply mb-sm
-             text-sm
-             lg:sr-only;
-    }
-
-    .c-tabs__link {
-      @apply relative
-             focus:outline-hidden
-             lg:px-base;
-
-      & > span,
-      & > strong {
-        @apply flex
-               items-center
-               flex-1
-               py-sm
-               lg:py-base;
-
-        & > span {
-          @apply w-full;
-        }
-      }
-    }
-
-    .c-tabs__panel-heading {
-      @apply sr-only;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.tabs.css
+   ========================================================================== */
+
+@layer components {
+  .c-tabs:not(.c-tabs--reset) .c-tabs__heading {
+    @apply mb-sm
+           text-sm
+           lg:sr-only;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__tabs {
+    @apply lg:relative
+           lg:w-full
+           lg:flex
+           lg:snap-x
+           lg:overflow-x-auto
+           lg:-mb-0.5;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__link {
+    @apply relative
+           flex-none
+           flex
+           items-center
+           py-sm
+           border
+           text-black
+           underline
+           truncate
+           hover:text-primary-base
+           focus:outline-hidden
+           border-transparent
+           lg:px-base
+           lg:py-base
+           lg:snap-start;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__link--is-active {
+    @apply no-underline
+           lg:bg-white
+           lg:border-neutral-base
+           lg:border-b-0
+           lg:rounded-t;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__panel {
+    @apply p-base
+           mt-base
+           border
+           border-neutral-base
+           focus:outline-hidden
+           focus:border-black
+           focus:shadow-outline-focus-input
+           focus:ring-4
+           focus:ring-warning-base
+           lg:mt-px;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__panel-heading {
+    @apply lg:sr-only;
+  }
+
+  .c-tabs--scroll:not(.c-tabs--reset) {
+    .c-tabs__heading {
+      @apply sr-only;
+    }
+
+    .c-tabs__tabs {
+      @apply relative
+             w-full
+             flex
+             snap-x
+             overflow-x-auto
+             -mb-0.5;
+    }
+
+    .c-tabs__link {
+      @apply snap-start
+             px-lg
+             py-base
+             border;
+    }
+
+    .c-tabs__link--is-active {
+      @apply no-underline
+             bg-white
+             border-neutral-base
+             border-b-0
+             rounded-t;
+    }
+
+    .c-tabs__panel {
+      @apply mt-px;
+    }
+
+    .c-tabs__panel-heading {
+      @apply sr-only;
+    }
+  }
+
+  .c-tabs--list {
+    .c-tabs__heading {
+      @apply mb-sm
+             text-sm
+             lg:sr-only;
+    }
+
+    .c-tabs__link {
+      @apply relative
+             focus:outline-hidden
+             lg:px-base;
+
+      & > span,
+      & > strong {
+        @apply flex
+               items-center
+               flex-1
+               py-sm
+               lg:py-base;
+
+        & > span {
+          @apply w-full;
+        }
+      }
+    }
+
+    .c-tabs__panel-heading {
+      @apply sr-only;
+    }
+  }
+}

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

@@ -1,71 +1,71 @@
-{#- 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 -%}
-
-<!-- tabs -->
-<div {%- if params.id %} id="{{params.id}}"{% endif %} class="c-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="c-tabs">
-  <div class="c-tabs__heading">
-    {% if params.headingLevel == "1" %}
-    <h1>{{ params.title | default ("Contenido") }}</h1>
-    {% elseif params.headingLevel == "2" %}
-    <h2>{{ params.title | default ("Contenido") }}</h2>
-    {% elseif params.headingLevel == "3" %}
-    <h3>{{ params.title | default ("Contenido") }}</h3>
-    {% elseif params.headingLevel == "4" %}
-    <h4>{{ params.title | default ("Contenido") }}</h4>
-    {% elseif params.headingLevel == "5" %}
-    <h5>{{ params.title | default ("Contenido") }}</h5>
-    {% else %}
-    <h2>{{ params.title | default ("Contenido") }}</h2>
-    {% endif %}
-  </div>
-  {% if(params.items | length) %}
-  <div class="c-tabs__tabs {%- if params.tablistClasses %} {{ params.tablistClasses }}{% endif %}" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
-    {% for item in params.items %}
-      {% if item %}
-        {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-        {% set tabPanelId = "tab-" + id %}
-    <button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
-      role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
-      {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-hidden">
-        {{ item.html | trim | safe if item.html else item.text }}
-      </span>
-    </button>
-      {% endif %}
-    {% endfor %}
-  </div>
-  {% endif %}
-  {% for item in params.items %}
-    {% if item %}
-      {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      {% set tabPanelId = "tab-" + id %}
-  <div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
-    {%- if loop.index > 1 %} hidden=""{% endif %}
-    {% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-    <div class="c-tabs__panel-heading">
-        {% if params.headingLevel == "1" %}
-      <h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h2>
-        {% elseif params.headingLevel == "2" %}
-      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
-        {% elseif params.headingLevel == "3" %}
-      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h4>
-        {% elseif params.headingLevel == "4" %}
-      <h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h5>
-        {% elseif params.headingLevel == "5" %}
-      <h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h6>
-        {% else %}
-      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
-        {% endif %}
-    </div>
-  {% if item.panel.html %}
-    {{ item.panel.html | filterquotes | safe }}
-  {% else %}
-    <p>{{ item.panel.text }}</p>
-  {% endif %}
-  </div>
-    {% endif %}
-  {% endfor %}
-</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 -%}
+
+<!-- tabs -->
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="c-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="c-tabs">
+  <div class="c-tabs__heading">
+    {% if params.headingLevel == "1" %}
+    <h1>{{ params.title | default ("Contenido") }}</h1>
+    {% elseif params.headingLevel == "2" %}
+    <h2>{{ params.title | default ("Contenido") }}</h2>
+    {% elseif params.headingLevel == "3" %}
+    <h3>{{ params.title | default ("Contenido") }}</h3>
+    {% elseif params.headingLevel == "4" %}
+    <h4>{{ params.title | default ("Contenido") }}</h4>
+    {% elseif params.headingLevel == "5" %}
+    <h5>{{ params.title | default ("Contenido") }}</h5>
+    {% else %}
+    <h2>{{ params.title | default ("Contenido") }}</h2>
+    {% endif %}
+  </div>
+  {% if(params.items | length) %}
+  <div class="c-tabs__tabs {%- if params.tablistClasses %} {{ params.tablistClasses }}{% endif %}" role="tablist" aria-label="{{ params.tablistAriaLabel }}">
+    {% for item in params.items %}
+      {% if item %}
+        {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+        {% set tabPanelId = "tab-" + id %}
+    <button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
+      role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
+      {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
+      {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-hidden">
+        {{ item.html | trim | safe if item.html else item.text }}
+      </span>
+    </button>
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% endif %}
+  {% for item in params.items %}
+    {% if item %}
+      {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+      {% set tabPanelId = "tab-" + id %}
+  <div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
+    {%- if loop.index > 1 %} hidden=""{% endif %}
+    {% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <div class="c-tabs__panel-heading">
+        {% if params.headingLevel == "1" %}
+      <h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h2>
+        {% elseif params.headingLevel == "2" %}
+      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
+        {% elseif params.headingLevel == "3" %}
+      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h4>
+        {% elseif params.headingLevel == "4" %}
+      <h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h5>
+        {% elseif params.headingLevel == "5" %}
+      <h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h6>
+        {% else %}
+      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | filterquotes | safe if item.html else item.text }}</h3>
+        {% endif %}
+    </div>
+  {% if item.panel.html %}
+    {{ item.panel.html | filterquotes | safe }}
+  {% else %}
+    <p>{{ item.panel.text }}</p>
+  {% endif %}
+  </div>
+    {% endif %}
+  {% endfor %}
+</div>
 <!-- /tabs -->

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

@@ -1,83 +1,83 @@
-params:
-- name: id
-  type: string
-  required: false
-  description: This is used for the main component and to compose id attribute for each item.
-- name: idPrefix
-  type: string
-  required: false
-  description: String to prefix id for each tab item if no id is specified on each item
-- name: title
-  type: string
-  required: true
-  description: Title for the tabs table of contents
-- name: headingLevel
-  type: number
-  required: false
-  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
-- name: tablistClasses
-  type: string
-  required: false
-  description: Classes to add to the role=tablist element
-- name: tablistAriaLabel
-  type: string
-  required: true
-  description: aria-label for the role=tablist element
-- name: items
-  type: array
-  required: true
-  description: Array of tab items.
-  params:
-  - name: id
-    type: string
-    required: true
-    description: Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within each tab 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 the each tab label. If `html` is provided, the `text` argument will be ignored.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, nav item will be disabled.
-  - name: active
-    type: boolean
-    required: false
-    description: If true, tab item will be selected at start.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the tab.
-  - name: panel
-    description: Content for the panel
-    type: object
-    required: true
-    params:
-      - name: text
-        type: string
-        required: true
-        description: If `html` is set, this is not required. Text to use within each tab panel. 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 the each tab panel. If `html` is provided, the `text` argument will be ignored.
-      - name: classes
-        type: string
-        required: false
-        description: Classes to add to the tab panel.
-      - name: attributes
-        type: object
-        required: false
-        description: HTML attributes (for example data attributes) to add to the tab panel.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the tabs component.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the tabs component.
+params:
+- name: id
+  type: string
+  required: false
+  description: This is used for the main component and to compose id attribute for each item.
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each tab item if no id is specified on each item
+- name: title
+  type: string
+  required: true
+  description: Title for the tabs table of contents
+- name: headingLevel
+  type: number
+  required: false
+  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
+- name: tablistClasses
+  type: string
+  required: false
+  description: Classes to add to the role=tablist element
+- name: tablistAriaLabel
+  type: string
+  required: true
+  description: aria-label for the role=tablist element
+- name: items
+  type: array
+  required: true
+  description: Array of tab items.
+  params:
+  - name: id
+    type: string
+    required: true
+    description: Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each tab 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 the each tab label. If `html` is provided, the `text` argument will be ignored.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav item will be disabled.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, tab item will be selected at start.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the tab.
+  - name: panel
+    description: Content for the panel
+    type: object
+    required: true
+    params:
+      - name: text
+        type: string
+        required: true
+        description: If `html` is set, this is not required. Text to use within each tab panel. 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 the each tab panel. If `html` is provided, the `text` argument will be ignored.
+      - name: classes
+        type: string
+        required: false
+        description: Classes to add to the tab panel.
+      - name: attributes
+        type: object
+        required: false
+        description: HTML attributes (for example data attributes) to add to the tab panel.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the tabs component.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the tabs component.