desy-html 10.2.2 → 11.0.1

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

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

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

@@ -1,129 +1,129 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
-
-{% set labelledId = 'label-' + params.id %}
-
-<!-- modal -->
-<div id="{{ params.id }}" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% if params.icon %}
-  <div class="flex justify-center p-base">
-    {% if params.icon.html %}
-    {{ params.icon.html | safe }}
-    {% elseif params.icon.type == 'discard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM5.29,5.29a9.63,9.63,0,0,1,12.23-1,.26.26,0,0,1,0,.4L4.67,17.56a.27.27,0,0,1-.4,0,9.49,9.49,0,0,1,1-12.24ZM18.75,18.76a9.53,9.53,0,0,1-12.23,1,.26.26,0,0,1,0-.4L19.37,6.49a.26.26,0,0,1,.4,0,9.49,9.49,0,0,1-1,12.24Z" fill="currentColor"></path></svg>
-    {% elseif params.icon.type == 'delete' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M19.5,7.5H4.5A.5.5,0,0,0,4,8V22a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V8A.5.5,0,0,0,19.5,7.5Zm-9.25,13a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Zm5,0a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Z" fill="currentColor"></path><path d="M22,4H17.25A.25.25,0,0,1,17,3.75V2.5A2.5,2.5,0,0,0,14.5,0h-5A2.5,2.5,0,0,0,7,2.5V3.75A.25.25,0,0,1,6.75,4H2A1,1,0,0,0,2,6H22a1,1,0,0,0,0-2ZM9,3.75V2.5A.5.5,0,0,1,9.5,2h5a.5.5,0,0,1,.5.5V3.75a.25.25,0,0,1-.25.25H9.25A.25.25,0,0,1,9,3.75Z" fill="currentColor"></path></g></svg>
-    {% elseif params.icon.type == 'publish' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><path d="M23.82,1.12A.5.5,0,0,0,23.31,1l-23,9.5A.5.5,0,0,0,0,11a.51.51,0,0,0,.32.46l6.33,2.45a.52.52,0,0,0,.47-.05l8.4-6a.5.5,0,0,1,.64.77l-7,6.75a.51.51,0,0,0-.15.36V22.5a.49.49,0,0,0,.37.48.49.49,0,0,0,.56-.23l3.17-5.42a.25.25,0,0,1,.33-.1l5.83,3.21a.5.5,0,0,0,.73-.33l4-18.5A.5.5,0,0,0,23.82,1.12Z" fill="currentColor"></path></svg>
-    {% elseif params.icon.type == 'changes' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M12,13a1,1,0,0,0,1-1V8a1,1,0,1,0-2,0v4A1,1,0,0,0,12,13Z" fill="currentColor"></path><circle cx="11.99" cy="15.71" r="1.25" fill="currentColor"></circle><path d="M19.29,5.53a9.72,9.72,0,0,0-9.55-3A10.25,10.25,0,0,0,2.38,9.61a.26.26,0,0,1-.27.18l-1-.13a.47.47,0,0,0-.47.22.47.47,0,0,0,0,.52l2.47,4.35a.51.51,0,0,0,.44.25.52.52,0,0,0,.36-.16l3.47-3.59a.48.48,0,0,0,.12-.51A.5.5,0,0,0,7,10.41l-1.88-.24A.23.23,0,0,1,5,10.05a.22.22,0,0,1,0-.21,7.67,7.67,0,0,1,5.37-4.9,7.23,7.23,0,0,1,7.1,2.25,1.25,1.25,0,1,0,1.87-1.66Z" fill="currentColor"></path><path d="M4.79,16.7a1.24,1.24,0,0,0-.11,1.76,9.72,9.72,0,0,0,9.55,3,10.24,10.24,0,0,0,7.37-7.12.24.24,0,0,1,.27-.17l1.06.12a.5.5,0,0,0,.48-.22.49.49,0,0,0,0-.52l-2.5-4.33A.51.51,0,0,0,20.55,9a.52.52,0,0,0-.43.15l-3.45,3.62a.5.5,0,0,0-.11.51.49.49,0,0,0,.41.33l1.85.22A.25.25,0,0,1,19,14a.22.22,0,0,1,0,.21,7.67,7.67,0,0,1-5.36,4.9,7.26,7.26,0,0,1-7.11-2.25A1.24,1.24,0,0,0,4.79,16.7Z" fill="currentColor"></path></g></svg>
-    {% elseif params.icon.type == 'edit' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M13.94,15a2,2,0,0,1-.67.45L9.73,16.86a2,2,0,0,1-2.6-2.6l1.41-3.53A2.18,2.18,0,0,1,9,10.05l5.88-5.88a.25.25,0,0,0-.17-.43H3.37A3.12,3.12,0,0,0,.25,6.86V20.62a3.12,3.12,0,0,0,3.12,3.12H17.13a3.12,3.12,0,0,0,3.12-3.12V9.29a.25.25,0,0,0-.43-.17Z" fill="currentColor"></path><path d="M18.57,3.3a.51.51,0,0,0-.71,0l-7.81,7.82a.36.36,0,0,0-.11.16L8.52,14.82a.51.51,0,0,0,.11.54.54.54,0,0,0,.54.11l3.54-1.42a.45.45,0,0,0,.17-.11l7.81-7.81a.51.51,0,0,0,.15-.35.53.53,0,0,0-.15-.36Z" fill="currentColor"></path><path d="M23.16,3.65a2,2,0,0,0,0-2.82,2,2,0,0,0-2.83,0L19.28,1.89a.56.56,0,0,0-.15.35.47.47,0,0,0,.15.35L21.4,4.71a.47.47,0,0,0,.35.15.57.57,0,0,0,.35-.15Z" fill="currentColor"></path></g></svg>
-    {% endif %}
-  </div>
-  {% endif %}
-  {% set titleAttributes %}id="{{ labelledId }}" class="{% if params.title.classes %}{{ params.title.classes }}{% else %}c-h2 px-base text-center focus:outline-none focus:underline{% endif %}" tabindex="-1"{% endset %}
-  {% if params.headingLevel == "1" %}
-  <h1 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h1>
-  {% elseif params.headingLevel == "2" %}
-  <h2 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h2>
-  {% elseif params.headingLevel == "3" %}
-  <h3 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h3>
-  {% elseif params.headingLevel == "4" %}
-  <h4 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h4>
-  {% elseif params.headingLevel == "5" %}
-  <h5 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h5>
-  {% else %}
-  <h2 {{ titleAttributes | safe }}>
-    {{ params.title.html | safe if params.title.html else params.title.text }}
-  </h2>
-  {% endif %}
-  {% if params.description.text %}
-  <p class="{% if params.description.classes %}{{ params.description.classes }}{% else %}c-p my-base text-center{% endif %}">
-    {{ params.description.text }}
-  </p>
-  {% elseif params.description.html %}
-  <div class="{% if params.description.classes %}{{ params.description.classes }}{% else %}c-paragraph-base my-base text-center{% endif %}">
-    {{ params.description.html | safe }}
-  </div>
-  {% endif %}
-  {% if caller %}
-    {% set myCaller = caller() %}
-    {% if myCaller | string != '' %}
-  <div class="p-base">
-    {{ myCaller }}
-  </div>
-    {% endif %}
-  {% elseif params.caller %}
-  <div class="p-base">
-    {{ params.caller | safe }}
-  </div>
-  {% endif %}
-  <div class="flex flex-wrap gap-sm w-full {% if params.itemsPrimary and params.itemsSecondary %}justify-between{% else %}justify-center{% endif %}">
-    {% if params.itemsPrimary %}
-      {% if params.itemsPrimary.length > 1 %}
-    <ul class="flex flex-wrap gap-sm">
-          {% for item in params.itemsPrimary %}
-      <li>
-              {% if item.isButtonLoader %}
-        {{ componentButtonLoader(item) | indent(8) }}
-              {% else %}
-        {{ componentButton(item) | indent(8) }}
-              {% endif %}
-      </li>
-          {% endfor %}
-    </ul>
-      {% else %}
-    <div class="mt-sm">
-          {% if params.itemsPrimary[0].isButtonLoader %}
-      {{ componentButtonLoader(params.itemsPrimary[0]) | indent(6) }}
-          {% else %}
-      {{ componentButton(params.itemsPrimary[0]) | indent(6) }}
-          {% endif %}
-    </div>
-      {% endif %}
-    {% endif %}
-    {% if params.itemsSecondary %}
-      {% if params.itemsSecondary.length > 1 %}
-    <ul class="flex flex-wrap gap-sm">
-      {% for item in params.itemsSecondary %}
-      <li>
-          {% if item.isButtonLoader %}
-        {{ componentButtonLoader(item) | indent(8) }}
-          {% else %}
-        {{ componentButton(item) | indent(8) }}
-          {% endif %}
-      </li>
-      {% endfor %}
-    </ul>
-      {% else %}
-    <div class="mt-sm">
-      {% if params.itemsSecondary[0].isButtonLoader %}
-      {{ componentButtonLoader(params.itemsSecondary[0]) | indent(6) }}
-      {% else %}
-      {{ componentButton(params.itemsSecondary[0]) | indent(6) }}
-      {% endif %}
-    </div>
-      {% endif %}
-    {% endif %}
-  </div>
-  {% if params.isDismissible %}
-  <div class="absolute top-0 right-0 p-sm lg:p-base">
-    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
-    </button>
-  </div>
-  {% endif %}
-</div>
-<!-- /modal -->
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
+
+{% set labelledId = 'label-' + params.id %}
+
+<!-- modal -->
+<div id="{{ params.id }}" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.icon %}
+  <div class="flex justify-center p-base">
+    {% if params.icon.html %}
+    {{ params.icon.html | safe }}
+    {% elseif params.icon.type == 'discard' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><path d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0ZM5.29,5.29a9.63,9.63,0,0,1,12.23-1,.26.26,0,0,1,0,.4L4.67,17.56a.27.27,0,0,1-.4,0,9.49,9.49,0,0,1,1-12.24ZM18.75,18.76a9.53,9.53,0,0,1-12.23,1,.26.26,0,0,1,0-.4L19.37,6.49a.26.26,0,0,1,.4,0,9.49,9.49,0,0,1-1,12.24Z" fill="currentColor"></path></svg>
+    {% elseif params.icon.type == 'delete' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M19.5,7.5H4.5A.5.5,0,0,0,4,8V22a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V8A.5.5,0,0,0,19.5,7.5Zm-9.25,13a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Zm5,0a.75.75,0,0,1-1.5,0v-9a.75.75,0,0,1,1.5,0Z" fill="currentColor"></path><path d="M22,4H17.25A.25.25,0,0,1,17,3.75V2.5A2.5,2.5,0,0,0,14.5,0h-5A2.5,2.5,0,0,0,7,2.5V3.75A.25.25,0,0,1,6.75,4H2A1,1,0,0,0,2,6H22a1,1,0,0,0,0-2ZM9,3.75V2.5A.5.5,0,0,1,9.5,2h5a.5.5,0,0,1,.5.5V3.75a.25.25,0,0,1-.25.25H9.25A.25.25,0,0,1,9,3.75Z" fill="currentColor"></path></g></svg>
+    {% elseif params.icon.type == 'publish' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><path d="M23.82,1.12A.5.5,0,0,0,23.31,1l-23,9.5A.5.5,0,0,0,0,11a.51.51,0,0,0,.32.46l6.33,2.45a.52.52,0,0,0,.47-.05l8.4-6a.5.5,0,0,1,.64.77l-7,6.75a.51.51,0,0,0-.15.36V22.5a.49.49,0,0,0,.37.48.49.49,0,0,0,.56-.23l3.17-5.42a.25.25,0,0,1,.33-.1l5.83,3.21a.5.5,0,0,0,.73-.33l4-18.5A.5.5,0,0,0,23.82,1.12Z" fill="currentColor"></path></svg>
+    {% elseif params.icon.type == 'changes' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M12,13a1,1,0,0,0,1-1V8a1,1,0,1,0-2,0v4A1,1,0,0,0,12,13Z" fill="currentColor"></path><circle cx="11.99" cy="15.71" r="1.25" fill="currentColor"></circle><path d="M19.29,5.53a9.72,9.72,0,0,0-9.55-3A10.25,10.25,0,0,0,2.38,9.61a.26.26,0,0,1-.27.18l-1-.13a.47.47,0,0,0-.47.22.47.47,0,0,0,0,.52l2.47,4.35a.51.51,0,0,0,.44.25.52.52,0,0,0,.36-.16l3.47-3.59a.48.48,0,0,0,.12-.51A.5.5,0,0,0,7,10.41l-1.88-.24A.23.23,0,0,1,5,10.05a.22.22,0,0,1,0-.21,7.67,7.67,0,0,1,5.37-4.9,7.23,7.23,0,0,1,7.1,2.25,1.25,1.25,0,1,0,1.87-1.66Z" fill="currentColor"></path><path d="M4.79,16.7a1.24,1.24,0,0,0-.11,1.76,9.72,9.72,0,0,0,9.55,3,10.24,10.24,0,0,0,7.37-7.12.24.24,0,0,1,.27-.17l1.06.12a.5.5,0,0,0,.48-.22.49.49,0,0,0,0-.52l-2.5-4.33A.51.51,0,0,0,20.55,9a.52.52,0,0,0-.43.15l-3.45,3.62a.5.5,0,0,0-.11.51.49.49,0,0,0,.41.33l1.85.22A.25.25,0,0,1,19,14a.22.22,0,0,1,0,.21,7.67,7.67,0,0,1-5.36,4.9,7.26,7.26,0,0,1-7.11-2.25A1.24,1.24,0,0,0,4.79,16.7Z" fill="currentColor"></path></g></svg>
+    {% elseif params.icon.type == 'edit' %}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g><path d="M13.94,15a2,2,0,0,1-.67.45L9.73,16.86a2,2,0,0,1-2.6-2.6l1.41-3.53A2.18,2.18,0,0,1,9,10.05l5.88-5.88a.25.25,0,0,0-.17-.43H3.37A3.12,3.12,0,0,0,.25,6.86V20.62a3.12,3.12,0,0,0,3.12,3.12H17.13a3.12,3.12,0,0,0,3.12-3.12V9.29a.25.25,0,0,0-.43-.17Z" fill="currentColor"></path><path d="M18.57,3.3a.51.51,0,0,0-.71,0l-7.81,7.82a.36.36,0,0,0-.11.16L8.52,14.82a.51.51,0,0,0,.11.54.54.54,0,0,0,.54.11l3.54-1.42a.45.45,0,0,0,.17-.11l7.81-7.81a.51.51,0,0,0,.15-.35.53.53,0,0,0-.15-.36Z" fill="currentColor"></path><path d="M23.16,3.65a2,2,0,0,0,0-2.82,2,2,0,0,0-2.83,0L19.28,1.89a.56.56,0,0,0-.15.35.47.47,0,0,0,.15.35L21.4,4.71a.47.47,0,0,0,.35.15.57.57,0,0,0,.35-.15Z" fill="currentColor"></path></g></svg>
+    {% endif %}
+  </div>
+  {% endif %}
+  {% set titleAttributes %}id="{{ labelledId }}" class="{% if params.title.classes %}{{ params.title.classes }}{% else %}c-h2 px-base text-center focus:outline-none focus:underline{% endif %}" tabindex="-1"{% endset %}
+  {% if params.headingLevel == "1" %}
+  <h1 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h1>
+  {% elseif params.headingLevel == "2" %}
+  <h2 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h2>
+  {% elseif params.headingLevel == "3" %}
+  <h3 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h3>
+  {% elseif params.headingLevel == "4" %}
+  <h4 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h4>
+  {% elseif params.headingLevel == "5" %}
+  <h5 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h5>
+  {% else %}
+  <h2 {{ titleAttributes | safe }}>
+    {{ params.title.html | safe if params.title.html else params.title.text }}
+  </h2>
+  {% endif %}
+  {% if params.description.text %}
+  <p class="{% if params.description.classes %}{{ params.description.classes }}{% else %}c-p my-base text-center{% endif %}">
+    {{ params.description.text }}
+  </p>
+  {% elseif params.description.html %}
+  <div class="{% if params.description.classes %}{{ params.description.classes }}{% else %}c-paragraph-base my-base text-center{% endif %}">
+    {{ params.description.html | safe }}
+  </div>
+  {% endif %}
+  {% if caller %}
+    {% set myCaller = caller() %}
+    {% if myCaller | string != '' %}
+  <div class="p-base">
+    {{ myCaller }}
+  </div>
+    {% endif %}
+  {% elseif params.caller %}
+  <div class="p-base">
+    {{ params.caller | safe }}
+  </div>
+  {% endif %}
+  <div class="flex flex-wrap gap-sm w-full {% if params.itemsPrimary and params.itemsSecondary %}justify-between{% else %}justify-center{% endif %}">
+    {% if params.itemsPrimary %}
+      {% if params.itemsPrimary.length > 1 %}
+    <ul class="flex flex-wrap gap-sm">
+          {% for item in params.itemsPrimary %}
+      <li>
+              {% if item.isButtonLoader %}
+        {{ componentButtonLoader(item) | indent(8) }}
+              {% else %}
+        {{ componentButton(item) | indent(8) }}
+              {% endif %}
+      </li>
+          {% endfor %}
+    </ul>
+      {% else %}
+    <div class="mt-sm">
+          {% if params.itemsPrimary[0].isButtonLoader %}
+      {{ componentButtonLoader(params.itemsPrimary[0]) | indent(6) }}
+          {% else %}
+      {{ componentButton(params.itemsPrimary[0]) | indent(6) }}
+          {% endif %}
+    </div>
+      {% endif %}
+    {% endif %}
+    {% if params.itemsSecondary %}
+      {% if params.itemsSecondary.length > 1 %}
+    <ul class="flex flex-wrap gap-sm">
+      {% for item in params.itemsSecondary %}
+      <li>
+          {% if item.isButtonLoader %}
+        {{ componentButtonLoader(item) | indent(8) }}
+          {% else %}
+        {{ componentButton(item) | indent(8) }}
+          {% endif %}
+      </li>
+      {% endfor %}
+    </ul>
+      {% else %}
+    <div class="mt-sm">
+      {% if params.itemsSecondary[0].isButtonLoader %}
+      {{ componentButtonLoader(params.itemsSecondary[0]) | indent(6) }}
+      {% else %}
+      {{ componentButton(params.itemsSecondary[0]) | indent(6) }}
+      {% endif %}
+    </div>
+      {% endif %}
+    {% endif %}
+  </div>
+  {% if params.isDismissible %}
+  <div class="absolute top-0 right-0 p-sm lg:p-base">
+    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+    </button>
+  </div>
+  {% endif %}
+</div>
+<!-- /modal -->

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

@@ -1,77 +1,77 @@
-params:
-- name: title
-  type: object
-  required: true
-  description: This is the title
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item title.
-- 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: description
-  type: object
-  required: true
-  description: This is the optional description under title
-  - name: text
-    type: string
-    required: true
-    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the item description.
-- name: itemsPrimary
-  type: array
-  required: false
-  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
-- name: itemsSecondary
-  type: array
-  required: false
-  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
-- name: icon
-  type: object
-  required: false
-  description: This is the optional icon at left
-  - 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 `discard`, `delete`, `edit`, `changes` and `publish`
-- name: isDismissible
-  type: boolean
-  required: false
-  description: If `true`, the modal shows a close icon on top right to close it.
-- name: id
-  type: string
-  required: true
-  description: Required id attribute to add to the div container tag.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the div container tag.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the div container tag.
-- name: caller
-  type: nunjucks-block
-  required: false
-  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.
+params:
+- name: title
+  type: object
+  required: true
+  description: This is the title
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item title.
+- 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: description
+  type: object
+  required: true
+  description: This is the optional description under title
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within the title. 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 title. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item description.
+- name: itemsPrimary
+  type: array
+  required: false
+  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
+- name: itemsSecondary
+  type: array
+  required: false
+  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
+- name: icon
+  type: object
+  required: false
+  description: This is the optional icon at left
+  - 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 `discard`, `delete`, `edit`, `changes` and `publish`
+- name: isDismissible
+  type: boolean
+  required: false
+  description: If `true`, the modal shows a close icon on top right to close it.
+- name: id
+  type: string
+  required: true
+  description: Required id attribute to add to the div container tag.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the div container tag.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the div container tag.
+- name: caller
+  type: nunjucks-block
+  required: false
+  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.