desy-html 7.1.1 → 7.2.0

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

@@ -25,33 +25,32 @@
 <!-- accordion-history -->
 <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>
+  <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 %}
-  {% endif %}
-  {% if params.showControl %}
-    <button
-    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">
+    {% if params.showControl %}
+    <button 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">
       Mostrar todo
     </button>
-  {% endif %}
+    {% endif %}
   </div>
   <div class="pl-lg">
-    {% for item in params.items %}
+    {%- for item in params.items %}
       {% if item %}
       {%- if item.id -%}
         {%- set id = item.id -%}
@@ -62,128 +61,140 @@
         {%- else -%}
           {%- set id = idPrefix + "-" + loop.index0 -%}
         {%- endif -%}
-      {%- endif -%}
+      {%- endif %}
 
-      <div class="relative -my-px px-xs py-sm border-t border-b border-neutral-base">
+    <div class="relative -my-px px-xs py-sm border-t border-b border-neutral-base">
         {% set insideContent %}
-          <button
-          id="{{ id }}-title"
-          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 }}
-            {% if item.status == 'current' %}
-              <span class="sr-only">(Estado: actual) </span>
-            {% elseif item.status == 'pending' %}
-              <span class="sr-only">(Estado: pendiente) </span>
-            {% elseif item.status == 'muted' %}
-              <span class="sr-only">(Estado: pasado) </span>
-            {% elseif item.status == 'currentmuted' %}
-              <span class="sr-only">(Estado: actual) </span>
-            {% else %}
-              <span class="sr-only">(Estado: pasado) </span>
-            {% endif %}
-            <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>
+
+        <button
+        id="{{ id }}-title"
+        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 %}
-          <h3>{{ insideContent | safe }}</h3>
+          aria-expanded = "false"
         {% endif %}
-        <p class="sr-only" aria-hidden="true">Haz click en el botón anterior para mostrar u ocultar</p>
-        {% if not loop.first %}
+        {% if item.disabled %} disabled{% endif %}
+        >
+          {{ item.headerHtml | safe if item.headerHtml else item.headerText }}
           {% if item.status == 'current' %}
-            <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
+          <span class="sr-only">(Estado: actual) </span>
           {% elseif item.status == 'pending' %}
-            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-light"></div>
+          <span class="sr-only">(Estado: pendiente) </span>
           {% elseif item.status == 'muted' %}
-            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
-           {% elseif item.status == 'currentmuted' %}
-            <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
-          {% else %}
-            <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
-          {% endif %}
-        {% endif %}
-        {% if not loop.last %}
-          {% if item.status == 'current' %}
-            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
-          {% elseif item.status == 'pending' %}
-            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
-          {% elseif item.status == 'muted' %}
-            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base"></div>
+          <span class="sr-only">(Estado: pasado) </span>
           {% elseif item.status == 'currentmuted' %}
-            <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
+          <span class="sr-only">(Estado: actual) </span>
           {% else %}
-            <div class="absolute top-6 bottom-0 -left-5 border-2 border-primary-base"></div>
+          <span class="sr-only">(Estado: pasado) </span>
           {% endif %}
+          <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>
+      {% if not loop.first %}
+        {% if item.status == 'current' %}
+      <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
+        {% elseif item.status == 'pending' %}
+      <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-light"></div>
+        {% elseif item.status == 'muted' %}
+      <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
+         {% elseif item.status == 'currentmuted' %}
+      <div class="absolute -top-px -left-5 h-6 border-2 border-neutral-base"></div>
+        {% else %}
+      <div class="absolute -top-px -left-5 h-6 border-2 border-primary-base"></div>
         {% endif %}
+      {% endif %}
+      {% if not loop.last %}
         {% if item.status == 'current' %}
-          <div class="absolute top-5 -left-6 w-3 h-3 bg-white ring-2 ring-primary-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+      <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
         {% elseif item.status == 'pending' %}
-          <div class="absolute top-5 -left-6 w-3 h-3 bg-white border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pendiente</p></div>
+      <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
         {% elseif item.status == 'muted' %}
-          <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
+      <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-base"></div>
         {% elseif item.status == 'currentmuted' %}
-          <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base ring-2 ring-neutral-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+      <div class="absolute top-6 bottom-0 -left-5 border-2 border-neutral-light"></div>
         {% else %}
-          <div class="absolute top-5 -left-6 w-3 h-3 bg-primary-base border-2 border-primary-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
-        {% endif %}
-        <div
-        {% if not item.open %}
-          hidden = ""
-        {% endif %}
-        {%- if id %}
-          id="{{ id }}"
+      <div class="absolute top-6 bottom-0 -left-5 border-2 border-primary-base"></div>
         {% endif %}
+      {% endif %}
+      {% if item.status == 'current' %}
+      <div class="absolute top-5 -left-6 w-3 h-3 bg-white ring-2 ring-primary-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+      {% elseif item.status == 'pending' %}
+      <div class="absolute top-5 -left-6 w-3 h-3 bg-white border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pendiente</p></div>
+      {% elseif item.status == 'muted' %}
+      <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base border-2 border-neutral-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
+      {% elseif item.status == 'currentmuted' %}
+      <div class="absolute top-5 -left-6 w-3 h-3 bg-neutral-base ring-2 ring-neutral-base rounded-full" role="img"><p class="sr-only">Estado: actual</p></div>
+      {% else %}
+      <div class="absolute top-5 -left-6 w-3 h-3 bg-primary-base border-2 border-primary-base rounded-full" role="img"><p class="sr-only">Estado: pasado</p></div>
+      {% endif %}
+      <div
+      {% if not item.open %}
+        hidden=""
+      {% endif %}
+      {%- if id %}
+        id="{{ id }}"
+      {% endif %}
         class="c-accordion__panel relative {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {% if not loop.last %}
-            {% if item.status == 'current' %}
-              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
-            {% elseif item.status == 'pending' %}
-              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
-            {% elseif item.status == 'muted' %}
-              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base"></div>
-            {% elseif item.status == 'currentmuted' %}
-              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
-            {% else %}
-              <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-primary-base"></div>
-            {% endif %}
+        {% if not loop.last %}
+          {% if item.status == 'current' %}
+        <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+          {% elseif item.status == 'pending' %}
+        <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+          {% elseif item.status == 'muted' %}
+        <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-base"></div>
+          {% elseif item.status == 'currentmuted' %}
+        <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-neutral-light"></div>
+          {% else %}
+        <div class="absolute top-4 bottom-0 -left-6 -my-sm border-2 border-primary-base"></div>
           {% endif %}
-          {{ item.html | safe if item.html else item.text }}
-        </div>
+        {% endif %}
+        {{ item.html | safe if item.html else item.text }}
       </div>
+    </div>
       {% endif %}
     {% endfor %}
   </div>

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

@@ -2,15 +2,15 @@
 
 <!-- alert -->
 <div>
-  {{ componentButton(params.button)  }}
+  {{ componentButton(params.button) | indent(2)  }}
   <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   </div>
   <div class="hidden" id="{{ 'template-' + params.id }}">
-    {% if caller %}
-    {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-    {% elseif params.caller %}
-    {{ params.caller | safe }}
-    {% endif %}
+  {% if caller %}
+  {{ caller() | indent(6) }} {#- if statement allows usage of `call` to be optional -#}
+  {% elseif params.caller %}
+  {{ params.caller | safe | indent(6) }}
+  {% endif %}
   </div>
 </div>
 <!-- /alert -->

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

@@ -14,38 +14,23 @@
 {% set gridClass %}
   {% if not params.hasBackButton %}
     {% if params.items.length == 1 %}
-      lg:grid-cols-max-content-1
-    {% elseif params.items.length == 2 %}
-      lg:grid-cols-max-content-2
-    {% elseif params.items.length == 3 %}
-      lg:grid-cols-max-content-3
-    {% elseif params.items.length == 4 %}
-      lg:grid-cols-max-content-4
-    {% elseif params.items.length == 5 %}
-      lg:grid-cols-max-content-5
-    {% elseif params.items.length == 6 %}
-      lg:grid-cols-max-content-6
-    {% elseif params.items.length == 7 %}
-      lg:grid-cols-max-content-7
-    {% elseif params.items.length == 8 %}
-      lg:grid-cols-max-content-8
-    {% endif %}
+lg:grid-cols-max-content-1{% elseif params.items.length == 2 %}
+lg:grid-cols-max-content-2{% elseif params.items.length == 3 %}
+lg:grid-cols-max-content-3{% elseif params.items.length == 4 %}
+lg:grid-cols-max-content-4{% elseif params.items.length == 5 %}
+lg:grid-cols-max-content-5{% elseif params.items.length == 6 %}
+lg:grid-cols-max-content-6{% elseif params.items.length == 7 %}
+lg:grid-cols-max-content-7{% elseif params.items.length == 8 %}
+lg:grid-cols-max-content-8{% endif %}
   {% else %}
     {% if params.items.length == 1 %}
-      lg:grid-cols-max-content-2
-    {% elseif params.items.length == 2 %}
-      lg:grid-cols-max-content-3
-    {% elseif params.items.length == 3 %}
-      lg:grid-cols-max-content-4
-    {% elseif params.items.length == 4 %}
-      lg:grid-cols-max-content-5
-    {% elseif params.items.length == 5 %}
-      lg:grid-cols-max-content-6
-    {% elseif params.items.length == 6 %}
-      lg:grid-cols-max-content-7
-    {% elseif params.items.length == 7 %}
-      lg:grid-cols-max-content-8
-    {% endif %}
+lg:grid-cols-max-content-2{% elseif params.items.length == 2 %}
+lg:grid-cols-max-content-3{% elseif params.items.length == 3 %}
+lg:grid-cols-max-content-4{% elseif params.items.length == 4 %}
+lg:grid-cols-max-content-5{% elseif params.items.length == 5 %}
+lg:grid-cols-max-content-6{% elseif params.items.length == 6 %}
+lg:grid-cols-max-content-7{% elseif params.items.length == 7 %}
+lg:grid-cols-max-content-8{% endif %}
   {% endif %}
 {% endset %}
 

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

@@ -31,16 +31,20 @@
 
 <!-- button -->
 {%- if element == 'a' %}
+
 <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 </a>
 
 {%- elseif element == 'button' %}
+
 <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
   {{ params.html | safe if params.html else params.text }}
 </button>
 
 {%- elseif element == 'input' %}
+
 <input value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
 {%- endif %}
+
 <!-- /button -->

package/src/templates/components/button-loader/_template.button-loader.njk

@@ -27,7 +27,7 @@
     {{ componentSpinner({
       text: params.loader.text if params.loader.text else 'Acción en curso',
       classes: params.loader.classes
-    })  }}
+    }) | indent(4) }}
   </span>
 {% endset %}
 
@@ -52,30 +52,34 @@
 
 <!-- button-loader -->
 {%- if element == 'a' %}
+
 <a href="{{ params.href if params.href else '#' }}" role="button" draggable="false" {% if params.target %} target="{{ params.target }}"{% endif %}{{- commonAttributes | safe }}>
-  {{ iconLoader | safe }}
-  {{ iconSuccess | safe }}
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
   <span class="c-button-loader__content inline-flex align-baseline">
     {{ params.html | safe if params.html else params.text }}
   </span>
 </a>
 
 {%- elseif element == 'button' %}
+
 <button {%- if params.value %} value="{{ params.value }}"{% endif %}{%- if params.type %} type="{{ params.type }}"{% endif %} {{- buttonAttributes | safe }} {{- commonAttributes | safe }}>
-  {{ iconLoader | safe }}
-  {{ iconSuccess | safe }}
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
   <span class="c-button-loader__content inline-flex align-baseline">
     {{ params.html | safe if params.html else params.text }}
   </span>
 </button>
 
 {%- elseif element == 'input' %}
+
 <div {{- commonAttributes | safe }}>
   <span class="c-button-loader__content inline-flex align-baseline">
     <input {{- buttonAttributes | safe }} value="{{ params.text }}" type="{{ params.type if params.type else 'submit' }}" class="bg-transparent font-semibold">
   </span>
-  {{ iconLoader | safe }}
-  {{ iconSuccess | safe }}
+{{ iconLoader | safe }}
+{{ iconSuccess | safe }}
 </div>
 {%- endif %}
+
 <!-- /button-loader -->