desy-html 12.1.0 → 13.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,78 +1,78 @@
-/* ==========================================================================
-   _styles.tabs.css
-   ========================================================================== */
-
-@layer components {
-  .c-tabs:not(.c-tabs--reset) .c-tabs__heading {
-    @apply lg:sr-only mb-sm text-sm;
-  }
-
-  .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 lg:px-base lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent lg:snap-start;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__link--is-active {
-    @apply lg:bg-white lg:border-neutral-base lg:border-b-0 lg:rounded-t no-underline;
-  }
-
-  .c-tabs:not(.c-tabs--reset) .c-tabs__panel {
-    @apply p-base mt-base lg:mt-px border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base;
-  }
-
-  .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 bg-white border-neutral-base border-b-0 rounded-t no-underline;
-    }
-
-    .c-tabs__panel {
-      @apply mt-px;
-    }
-
-    .c-tabs__panel-heading {
-      @apply sr-only;
-    }
-  }
-
-  .c-tabs--list {
-    .c-tabs__heading {
-      @apply lg:sr-only mb-sm text-sm;
-    }
-
-    .c-tabs__link {
-      @apply relative lg:px-base focus:outline-none;
-
-      & > 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 lg:sr-only mb-sm text-sm;
+  }
+
+  .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 lg:px-base lg:py-base border text-black hover:text-primary-base underline truncate focus:outline-none border-transparent lg:snap-start;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__link--is-active {
+    @apply lg:bg-white lg:border-neutral-base lg:border-b-0 lg:rounded-t no-underline;
+  }
+
+  .c-tabs:not(.c-tabs--reset) .c-tabs__panel {
+    @apply p-base mt-base lg:mt-px border border-neutral-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base;
+  }
+
+  .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 bg-white border-neutral-base border-b-0 rounded-t no-underline;
+    }
+
+    .c-tabs__panel {
+      @apply mt-px;
+    }
+
+    .c-tabs__panel-heading {
+      @apply sr-only;
+    }
+  }
+
+  .c-tabs--list {
+    .c-tabs__heading {
+      @apply lg:sr-only mb-sm text-sm;
+    }
+
+    .c-tabs__link {
+      @apply relative lg:px-base focus:outline-none;
+
+      & > 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-none">
-        {{ 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-none">
+        {{ 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.