desy-html 10.2.2 → 11.0.1

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

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

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

@@ -1,131 +1,131 @@
-{% set idPrefix = params.idPrefix %}
-{% set conditionalValue = false %}
-{% for item in params.items %}
-  {% if item %}
-    {%- if item.id -%}
-      {%- set id = item.id -%}
-    {%- else -%}
-      {%- set id = idPrefix + "-" + loop.index -%}
-    {%- endif -%}
-    {%- if item.open -%}
-      {%- set conditionalValue = id -%}
-    {%- endif -%}
-  {% endif %}
-{% endfor %}
-
-{#- This solution must be redone well because it has bugs:
-    1. If there are multiple opened items at init, it will only open the last one. It should open all of them marked as open.
-    2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
--#}
-<!-- accordion -->
-<div class="c-accordion {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
-  <div class="flex justify-between">
-    {% if params.heading.html or params.heading.text %}
-      {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
-      {% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
-      {% if params.headingLevel == "1" %}
-    <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
-        {% elseif params.headingLevel == "2" %}
-    <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-        {% elseif params.headingLevel == "3" %}
-    <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
-        {% elseif params.headingLevel == "4" %}
-    <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
-        {% elseif params.headingLevel == "5" %}
-    <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
-        {% else %}
-    <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-      {% endif %}
-    {% endif %}
-    {% if params.showControl %}
-    <button id="{{ params.id }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
-      Mostrar todo
-    </button>
-    {% endif %}
-  </div>
-  <div>
-    {%- for item in params.items %}
-      {% if item %}
-        {%- if item.id -%}
-          {%- set id = item.id -%}
-        {%- else -%}
-          {%- set id = idPrefix + "-" + loop.index -%}
-        {%- endif %}
-
-    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
-        {% set insideContent %}
-
-        <button
-        id="{{ id }}-title"
-        type="button"
-        class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
-        aria-controls="{{ id }}"
-        {% if item.open %}
-        aria-expanded = "true"
-        {% else %}
-        aria-expanded = "false"
-        {% endif %}
-        {% if item.disabled %} disabled{% endif %}
-        >
-          {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
-          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
-            <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
-              {% if item.show %}
-                {{ item.show.html | safe if item.show.html else item.show.text }}
-              {% else %}
-                Mostrar
-              {% endif %}
-            </span>
-            <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
-              {% if item.hide %}
-                {{ item.hide.html | safe if item.hide.html else item.hide.text }}
-              {% else %}
-                Ocultar
-              {% endif %}
-            </span>
-          </span>
-        </button>
-      {% endset %}
-      {% if params.headingLevel == "1" %}
-      <h2>
-        {{ insideContent | safe }}
-      </h2>
-          {% elseif params.headingLevel == "2" %}
-      <h3>
-        {{ insideContent | safe }}
-      </h3>
-          {% elseif params.headingLevel == "3" %}
-      <h4>
-        {{ insideContent | safe }}
-      </h4>
-          {% elseif params.headingLevel == "4" %}
-      <h5>
-        {{ insideContent | safe }}
-      </h5>
-          {% elseif params.headingLevel == "5" %}
-      <h6>
-        {{ insideContent | safe }}
-      </h6>
-          {% else %}
-      <h3>
-        {{ insideContent | safe }}
-      </h3>
-      {% endif %}
-      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
-      <div
-      {% if not item.open %}
-        hidden = ""
-      {% endif %}
-      {%- if id %}
-        id="{{ id }}"
-      {% endif %}
-        class="c-accordion__panel {%- if item.classes %} {{ item.classes }}{% endif %}"
-      {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ item.html | safe if item.html else item.text }}
-      </div>
-    </div>
-      {% endif %}
-    {% endfor %}
-  </div>
-</div>
-<!-- /accordion -->
+{% set idPrefix = params.idPrefix %}
+{% set conditionalValue = false %}
+{% for item in params.items %}
+  {% if item %}
+    {%- if item.id -%}
+      {%- set id = item.id -%}
+    {%- else -%}
+      {%- set id = idPrefix + "-" + loop.index -%}
+    {%- endif -%}
+    {%- if item.open -%}
+      {%- set conditionalValue = id -%}
+    {%- endif -%}
+  {% endif %}
+{% endfor %}
+
+{#- This solution must be redone well because it has bugs:
+    1. If there are multiple opened items at init, it will only open the last one. It should open all of them marked as open.
+    2. If there are one item opened at init and allowToggle=true, the button text ('Mostrar/Ocultar') only shows 'Ocultar' without changing to 'Mostrar'. It should change to 'Mostrar' when closed.
+-#}
+<!-- accordion -->
+<div class="c-accordion {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {%- if params.allowToggle == true %} data-allow-toggle{% endif %} {%- if params.allowMultiple == true %} data-allow-multiple{% endif %}>
+  <div class="flex justify-between">
+    {% if params.heading.html or params.heading.text %}
+      {% set headingAttributes %}class="{% if params.heading.classes %}{{ params.heading.classes }}{% else %}c-h2 mb-base{% endif %}"{% endset %}
+      {% set headingContent %}{{ params.heading.html | safe if params.heading.html else params.heading.text }}{% endset %}
+      {% if params.headingLevel == "1" %}
+    <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
+        {% elseif params.headingLevel == "2" %}
+    <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+        {% elseif params.headingLevel == "3" %}
+    <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
+        {% elseif params.headingLevel == "4" %}
+    <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
+        {% elseif params.headingLevel == "5" %}
+    <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
+        {% else %}
+    <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+      {% endif %}
+    {% endif %}
+    {% if params.showControl %}
+    <button id="{{ params.id }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
+      Mostrar todo
+    </button>
+    {% endif %}
+  </div>
+  <div>
+    {%- for item in params.items %}
+      {% if item %}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {%- set id = idPrefix + "-" + loop.index -%}
+        {%- endif %}
+
+    <div class="-my-px px-xs py-sm border-t border-b border-neutral-base">
+        {% set insideContent %}
+
+        <button
+        id="{{ id }}-title"
+        type="button"
+        class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
+        aria-controls="{{ id }}"
+        {% if item.open %}
+        aria-expanded = "true"
+        {% else %}
+        aria-expanded = "false"
+        {% endif %}
+        {% if item.disabled %} disabled{% endif %}
+        >
+          {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
+          <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  {%- if item.disabled %} hidden{% endif %}" aria-hidden="true">
+            <span class="c-accordion__show {%- if item.open %} hidden{%else%}{%endif%} {%- if item.show.classes %} {{ item.show.classes }}{%endif%}">
+              {% if item.show %}
+                {{ item.show.html | safe if item.show.html else item.show.text }}
+              {% else %}
+                Mostrar
+              {% endif %}
+            </span>
+            <span class="c-accordion__hide {%- if item.open %}{%else%} hidden{%endif%} {%- if item.hide.classes %} {{ item.hide.classes }}{%endif%}">
+              {% if item.hide %}
+                {{ item.hide.html | safe if item.hide.html else item.hide.text }}
+              {% else %}
+                Ocultar
+              {% endif %}
+            </span>
+          </span>
+        </button>
+      {% endset %}
+      {% if params.headingLevel == "1" %}
+      <h2>
+        {{ insideContent | safe }}
+      </h2>
+          {% elseif params.headingLevel == "2" %}
+      <h3>
+        {{ insideContent | safe }}
+      </h3>
+          {% elseif params.headingLevel == "3" %}
+      <h4>
+        {{ insideContent | safe }}
+      </h4>
+          {% elseif params.headingLevel == "4" %}
+      <h5>
+        {{ insideContent | safe }}
+      </h5>
+          {% elseif params.headingLevel == "5" %}
+      <h6>
+        {{ insideContent | safe }}
+      </h6>
+          {% else %}
+      <h3>
+        {{ insideContent | safe }}
+      </h3>
+      {% endif %}
+      <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
+      <div
+      {% if not item.open %}
+        hidden = ""
+      {% endif %}
+      {%- if id %}
+        id="{{ id }}"
+      {% endif %}
+        class="c-accordion__panel {%- if item.classes %} {{ item.classes }}{% endif %}"
+      {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ item.html | safe if item.html else item.text }}
+      </div>
+    </div>
+      {% endif %}
+    {% endfor %}
+  </div>
+</div>
+<!-- /accordion -->

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

@@ -1,125 +1,125 @@
-params:
-- name: idPrefix
-  type: string
-  required: true
-  description: String to prefix id for each accordion item if no id is specified on each item.
-- 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: allowToggle
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
-- name: allowMultiple
-  type: boolean
-  required: false
-  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
-- name: heading
-  type: object
-  required: false
-  description: Options for the heading
-  params:
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the heading.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.
-- name: showControl
-  type: boolean
-  required: false
-  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
-- name: items
-  type: array
-  required: true
-  description: Array of accordion items objects.
-  params:
-  - name: headerText
-    type: string
-    required: true
-    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: headerHtml
-    type: string
-    required: true
-    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. 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 disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
-  - name: id
-    type: string
-    required: false
-    description: Id to add to the item. Not required, but recommended to improve the accessibility.
-  - name: open
-    type: boolean
-    required: false
-    description: If true, accordion item will be expanded.
-  - name: disabled
-    type: boolean
-    required: false
-    description: If true, accordion item will be disabled and will not show the show/hide control.
-  - name: show
-    type: object
-    required: false
-    description: Options to customize the show info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in show info. 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 show info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the show info.
-  - name: hide
-    type: object
-    required: false
-    description: Options to customize the hide info
-    params:
-    - name: text
-      type: string
-      required: true
-      description: If `html` is set, this is not required. Text to use in hide info. 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 hide info. If `html` is provided, the `text` argument will be ignored.
-    - name: classes
-      type: string
-      required: false
-      description: Classes to add to the hide info.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the accordion item element.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the accordion item.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the accordion container.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+params:
+- name: idPrefix
+  type: string
+  required: true
+  description: String to prefix id for each accordion item if no id is specified on each item.
+- 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: allowToggle
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for each toggle to both open and close its section. Makes it possible for all sections to be closed. Assumes only one section may be open.
+- name: allowMultiple
+  type: boolean
+  required: false
+  description: Defaults to `false`. Allow for multiple accordion sections to be expanded at the same time. Assumes data-allow-toggle otherwise the toggle on open sections would be disabled.
+- name: heading
+  type: object
+  required: false
+  description: Options for the heading
+  params:
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the heading. 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 heading. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the heading.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.
+- name: showControl
+  type: boolean
+  required: false
+  description: Defaults to `false`. If `true` a Show/Hide all button is displayed on top
+- name: items
+  type: array
+  required: true
+  description: Array of accordion items objects.
+  params:
+  - name: headerText
+    type: string
+    required: true
+    description: If `summmaryHtml` is set, this is not required. Text to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: headerHtml
+    type: string
+    required: true
+    description: If `summmaryText` is set, this is not required. HTML to use within the header element (the visible part of the accordion item element). If `headerHtml` is provided, the `headerText` argument will be ignored.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the disclosed part of the accordion item element. 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 disclosed part of the accordion item element. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
+  - name: open
+    type: boolean
+    required: false
+    description: If true, accordion item will be expanded.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, accordion item will be disabled and will not show the show/hide control.
+  - name: show
+    type: object
+    required: false
+    description: Options to customize the show info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in show info. 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 show info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the show info.
+  - name: hide
+    type: object
+    required: false
+    description: Options to customize the hide info
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use in hide info. 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 hide info. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the hide info.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the accordion item element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the accordion item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the accordion container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the accordion container.