desy-html 7.1.2 → 7.2.0

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

@@ -13,94 +13,94 @@
 {% set innerHtml %}
   <ul data-module="c-menubar" id="{{ params.id }}-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="{{ params.ariaLabel }}" {%- if params.label %} aria-describedby="{{ params.id }}-label"{% endif %}>
     {% for item in params.items %}
-      {% if item %}
-        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-        {%- if item.id -%}
-          {%- set id = item.id -%}
-        {%- else -%}
-          {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-          {%- if loop.first -%}
-            {%- set id = idPrefix %}
-          {% else %}
-            {%- set id = idPrefix + "-" + loop.index -%}
-          {%- endif -%}
+    {% if item %}
+      {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+      {%- if item.id -%}
+        {%- set id = item.id -%}
+      {%- else -%}
+        {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+        {%- if loop.first -%}
+          {%- set id = idPrefix %}
+        {% else %}
+          {%- set id = idPrefix + "-" + loop.index -%}
         {%- endif -%}
-        {% set subId = "sub-" + id %}
-        <li class="relative" role="none">
-          {% if item.sub %}
-            <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
-              {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
-              {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
-              {# Indentation is intentional to output HTML nicely #}
-              {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
-            </a>
-          {% endif %}
-          {% if item.href and not item.sub %}
-            <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              {{ item.html | safe if item.html else item.text }}
-            </a>
-          {% endif %}
-          {% if item.sub.items %}
-            <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              {% for subitem in item.sub.items %}
-                {% if subitem %}
-                  {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-                  {%- if subitem.id -%}
-                    {%- set subId = subitem.id -%}
-                    {%- else -%}
-                      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-                      {%- if loop.first -%}
-                        {%- set subId = "sub-" + id %}
+      {%- endif -%}
+      {% set subId = "sub-" + id %}
+    <li class="relative" role="none">
+      {% if item.sub %}
+      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
+        {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
+        {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | safe if item.html else item.text }}</span>
+        {# Indentation is intentional to output HTML nicely #}
+        {{- iconHtml | safe | trim if iconHtml -}}
+      </a>
+      {% endif %}
+      {% if item.href and not item.sub %}
+      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {{ item.html | safe if item.html else item.text }}
+      </a>
+      {% endif %}
+      {% if item.sub.items %}
+      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        {% for subitem in item.sub.items %}
+          {% if subitem %}
+            {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+            {%- if subitem.id -%}
+              {%- set subId = subitem.id -%}
+              {%- else -%}
+                {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+                {%- if loop.first -%}
+                  {%- set subId = "sub-" + id %}
+                {% else %}
+                  {%- set subId = "sub-" + id + "-" + loop.index -%}
+                {%- endif -%}
+              {%- endif %}
+        {% if subitem.role == 'none' %}
+        <li role="none" id="{{ subId }}" data-option="{{ subId }}">
+          {{ subitem.html | safe if subitem.html else subitem.text }}
+        </li>
+        {% elseif subitem.role == 'group' %}
+        <li role="none">
+          <ul role="group" id="{{ subId }}" data-option="{{ subId }}" {%- if subitem.ariaLabel %} aria-label="{{ subitem.ariaLabel }}"{% endif %}>
+            {% for subsubitem in subitem.items %}
+              {% if subsubitem %}
+                {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+                {%- if subsubitem.id -%}
+                  {%- set subsubId = subsubitem.id -%}
+                  {%- else -%}
+                    {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+                    {%- if loop.first -%}
+                      {%- set subsubId = "sub-" + subId %}
                       {% else %}
-                        {%- set subId = "sub-" + id + "-" + loop.index -%}
-                      {%- endif -%}
-                    {%- endif %}
-                    {% if subitem.role == 'none' %}
-                      <li role="none" id="{{ subId }}" data-option="{{ subId }}">
-                        {{ subitem.html | safe if subitem.html else subitem.text }}
-                      </li>
-                      {% elseif subitem.role == 'group' %}
-                        <li role="none">
-                          <ul role="group" id="{{ subId }}" data-option="{{ subId }}" {%- if subitem.ariaLabel %} aria-label="{{ subitem.ariaLabel }}"{% endif %}>
-                            {% for subsubitem in subitem.items %}
-                              {% if subsubitem %}
-                                {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-                                {%- if subsubitem.id -%}
-                                  {%- set subsubId = subsubitem.id -%}
-                                  {%- else -%}
-                                    {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-                                    {%- if loop.first -%}
-                                      {%- set subsubId = "sub-" + subId %}
-                                      {% else %}
-                                        {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
-                                    {%- endif -%}
-                                {%- endif %}
-                                <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
-                                  {{ subsubitem.html | safe if subsubitem.html else subsubitem.text }}
-                                </li>
-                              {% endif %}
-                           {% endfor %}
-                          </ul>
-                        </li>
-                      {% elseif subitem.role == 'menuitem' %}
-                        <li role="menuitem" id="{{ subId }}" data-option="{{ subId }}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
-                          {{ subitem.html | safe if subitem.html else subitem.text }}
-                        </li>
-                      {% elseif subitem.role == 'menuitemcheckbox' %}
-                        <li role="menuitemcheckbox" aria-checked="{% if subitem.checked %}{{ subitem.checked }}{% else %}false{% endif %}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subId }}" data-option="{{ subId }}">
-                          {{ subitem.html | safe if subitem.html else subitem.text }}
-                        </li>
-                      {% elseif subitem.role == 'separator' %}
-                        <li role="separator" id="{{ subId }}" class="my-sm border-b border-neutral-base">
-                        </li>
-                    {% endif %}
-                {% endif %}
-              {% endfor %}
-            </ul>
-          {% endif %}
+                        {%- set subsubId = "sub-" + subId + "-" + loop.index -%}
+                    {%- endif -%}
+                {%- endif %}
+            <li {%- if subsubitem.role %} role="{{ subsubitem.role}}"{% endif %}{% if subsubitem.role == 'menuitemcheckbox' or subsubitem.role == 'menuitemradio' %} aria-checked="{% if subsubitem.checked %}{{ subsubitem.checked }}{% else %}false{% endif %}"{% endif %} class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subsubId }}" data-option="{{ subsubId }}">
+              {{ subsubitem.html | safe if subsubitem.html else subsubitem.text }}
+            </li>
+              {% endif %}
+           {% endfor %}
+          </ul>
+        </li>
+        {% elseif subitem.role == 'menuitem' %}
+        <li role="menuitem" id="{{ subId }}" data-option="{{ subId }}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none" >
+          {{ subitem.html | safe if subitem.html else subitem.text }}
         </li>
+        {% elseif subitem.role == 'menuitemcheckbox' %}
+        <li role="menuitemcheckbox" aria-checked="{% if subitem.checked %}{{ subitem.checked }}{% else %}false{% endif %}" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="{{ subId }}" data-option="{{ subId }}">
+          {{ subitem.html | safe if subitem.html else subitem.text }}
+        </li>
+        {% elseif subitem.role == 'separator' %}
+        <li role="separator" id="{{ subId }}" class="my-sm border-b border-neutral-base">
+        </li>
+        {% endif %}
+        {% endif %}
+        {% endfor %}
+      </ul>
       {% endif %}
+    </li>
+    {% endif %}
     {% endfor %}
   </ul>
 {% endset -%}
@@ -108,13 +108,13 @@
 <!-- menubar -->
 <div id="{{ params.id }}" class="c-menubar {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if params.label  %}
-    <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
-      {% if params.label.html %}
-        {{ params.label.html | safe}}
-      {% else %}
-        <p>{{ params.label.text }}</p>
-      {% endif %}
-    </div>
+  <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
+    {% if params.label.html %}
+    {{ params.label.html | safe}}
+    {% else %}
+    <p>{{ params.label.text }}</p>
+    {% endif %}
+  </div>
   {% endif %}
   {{ innerHtml | trim | safe }}
 </div>

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

@@ -23,97 +23,107 @@
     {% 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 %}
+  {% 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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <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>
+  <div class="p-base">
+    {{ myCaller }}
+  </div>
     {% endif %}
   {% elseif params.caller %}
-    <div class="p-base">
-      {{ params.caller | safe }}
-    </div>
+  <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">
+    <ul class="flex flex-wrap gap-sm">
           {% for item in params.itemsPrimary %}
-            <li>
+      <li>
               {% if item.isButtonLoader %}
-                {{ componentButtonLoader(item) }}
+        {{ componentButtonLoader(item) | indent(8) }}
               {% else %}
-                {{ componentButton(item) }}
+        {{ componentButton(item) | indent(8) }}
               {% endif %}
-            </li>
+      </li>
           {% endfor %}
-        </ul>
+    </ul>
       {% else %}
-        <div class="mt-sm">
+    <div class="mt-sm">
           {% if params.itemsPrimary[0].isButtonLoader %}
-            {{ componentButtonLoader(params.itemsPrimary[0]) }}
+      {{ componentButtonLoader(params.itemsPrimary[0]) | indent(6) }}
           {% else %}
-            {{ componentButton(params.itemsPrimary[0]) }}
+      {{ componentButton(params.itemsPrimary[0]) | indent(6) }}
           {% endif %}
-        </div>
+    </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) }}
-              {% else %}
-                {{ componentButton(item) }}
-              {% endif %}
-            </li>
-          {% endfor %}
-        </ul>
-      {% else %}
-        <div class="mt-sm">
-          {% if params.itemsSecondary[0].isButtonLoader %}
-            {{ componentButtonLoader(params.itemsSecondary[0]) }}
+    <ul class="flex flex-wrap gap-sm">
+      {% for item in params.itemsSecondary %}
+      <li>
+          {% if item.isButtonLoader %}
+        {{ componentButtonLoader(item) | indent(8) }}
           {% else %}
-            {{ componentButton(params.itemsSecondary[0]) }}
+        {{ componentButton(item) | indent(8) }}
           {% endif %}
-        </div>
+      </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">
-        <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>
+  <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">
+      <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/nav/_template.nav.njk

@@ -23,24 +23,24 @@
   {% endif %}
   {% endif %}
   {% set commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-  <li>
+<li>
   {% if item.active %}
-    <span class="flex items-center px-base py-sm font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {% if params.isMenu %} aria-current="true" {% else %} aria-current="page" {% endif %} {{- commonItemAttributes | safe }}>
-      <strong>{{ item.html | safe if item.html else item.text }}</strong>
-    </span>
+  <span class="flex items-center px-base py-sm font-semibold {%- if item.classes %} {{ item.classes }}{% endif -%}" {% if params.isMenu %} aria-current="true" {% else %} aria-current="page" {% endif %} {{- commonItemAttributes | safe }}>
+    <strong>{{ item.html | safe if item.html else item.text }}</strong>
+  </span>
   {% else %}
-    <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {{- commonItemAttributes | safe }}>
+  <a href="{{ item.href }}" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if item.classes %} {{ item.classes }}{% endif -%} {%- if item.disabled %} pointer-events-none{% endif -%}" {%- if item.disabled %} aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {{- commonItemAttributes | safe }}>
       {{ item.html | safe if item.html else item.text }}
       {% if item.disabled %}
-        <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+      <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
       {% endif %}
-    </a>
+  </a>
   {% endif %}
-  </li>
+</li>
   {% if item.divider %}
-  <li class="my-sm border-b border-neutral-base" aria-hidden="true">
-    <div class="sr-only">Separador</div>
-  </li>
+<li class="my-sm border-b border-neutral-base" aria-hidden="true">
+  <div class="sr-only">Separador</div>
+</li>
   {% endif %}
   {% endif %}
   {% endfor %}
@@ -49,12 +49,12 @@
 <!-- nav -->
 {% if params.hasNav == false %}
 <ul {{- commonAttributes | safe }}>
-  {{ innerHtml | trim | safe }}
+  {{ innerHtml | safe | indent(2) }}
 </ul>
 {% else %}
 <nav {{- commonAttributes | safe }}>
   <ul>
-    {{ innerHtml | trim | safe }}
+    {{ innerHtml | safe | indent(4) }}
   </ul>
 </nav>
 {% endif %}

package/src/templates/components/notification/_examples.notification.njk

@@ -137,15 +137,6 @@
       "id": "headinglevel"
     }
   },
-  {
-    "name": "default with html",
-    "data": {
-      "title":{
-        "html": "Las <a href=\" # \" class=\" c-link \">entidades beneficiarias</a> deberán tener: su sede y actividad principal en Aragón."
-      },
-      "id": "default-with-html"
-    }
-  },
   {
     "name": "with mixed params",
     "data": {

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

@@ -16,52 +16,62 @@
   {% endif %}
   <div class="lg:flex flex-1 self-center">
     <div class="lg:flex-1 lg:self-center">
-      {% set titleAttributes %}
-         id="{{ params.id }}-title"  class="font-bold pr-base focus:outline-none focus:underline {%- if params.title.classes %} {{ params.title.classes }}{% 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 %}
-        <p {{ titleAttributes | safe }}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
-      {% endif %}
-      {% if params.description %}
-        <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %}>
-            {{ params.description.html | safe if params.description.html else params.description.text }}
-        </p>
-      {% endif %}
-      {% if params.items %}
-        <ul>
-          {% for item in params.items %}
-            <li>
-            {% if item.href %}
-              <a href="{{ item.href }}" class="c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
-            {% else %}
-              {{ item.html | safe if item.html else item.text }}
-            {% endif %}
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-      {% if params.content %}
-        <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
-            {{ params.content.html | safe if params.content.html else params.content.text }}
-        </p>
-      {% endif %}
+    {% set titleAttributes %}id="{{ params.id }}-title"  class="font-bold pr-base focus:outline-none focus:underline {%- if params.title.classes %} {{ params.title.classes }}{% 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 %}
+      <p {{ titleAttributes | safe }}>
+        {{ params.title.html | safe if params.title.html else params.title.text }}
+      </p>
+    {% endif %}
+    {% if params.description %}
+      <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %}>
+        {{ params.description.html | safe if params.description.html else params.description.text }}
+      </p>
+    {% endif %}
+    {% if params.items %}
+      <ul>
+        {% for item in params.items %}
+        <li>
+        {% if item.href %}
+          <a href="{{ item.href }}" class="c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+        {% else %}
+          {{ item.html | safe if item.html else item.text }}
+        {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    {% if params.content %}
+      <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
+        {{ params.content.html | safe if params.content.html else params.content.text }}
+      </p>
+    {% endif %}
     </div>
     {% if params.isDismissible %}
-      <div class="absolute top-0 right-0 p-sm">
-        <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
-          <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" 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>
+    <div class="absolute top-0 right-0 p-sm">
+      <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+        <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" 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>
 </div>