desy-html 7.1.2 → 7.3.0

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 -->

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

@@ -3,92 +3,92 @@
 {% from "components/button/_macro.button.njk" import componentButton %}
 
 {% set defaultContent %}
-  <h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
-  <div class="prose max-w-none">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
+<h3 class="c-h3"><a href="#" class="c-link">Título card</a></h3>
+<div class="prose max-w-none">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
 {% endset %}
 
 {% set linksContent %}
-  <h2 class="c-h1">Tus datos médicos e información personal</h2>
-  <ul class="text-lg">
-    <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
-    <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
-  </ul>
+<h2 class="c-h1">Tus datos médicos e información personal</h2>
+<ul class="text-lg">
+  <li class="mb-base"><a href="#" class="c-link">Cambiar tus datos de contacto</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Dónde y cómo solicitar tu PIN Salud</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Cómo solicitar un cambio de centro de salud</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Historia Clínica e informes médicos</a></li>
+  <li class="mb-base"><a href="#" class="c-link">Derechos de protección de datos</a></li>
+</ul>
 {% endset %}
 
 {% set verButton %}
-  {{ componentButton({
-    "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
-    "classes": "c-button--transparent",
-    "href": "#",
-    "attributes": {
-      "id": "boton-card-1",
-      "aria-labelledby": "boton-card-1 titulo-card-1"
-    }
-  })  }}
+{{ componentButton({
+  "html": "Más <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+  "classes": "c-button--transparent",
+  "href": "#",
+  "attributes": {
+    "id": "boton-card-1",
+    "aria-labelledby": "boton-card-1 titulo-card-1"
+  }
+})  }}
 {% endset %}
 
 {% set verDetalleButton %}
-  {{ componentButton({
-    "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
-    "classes": "c-button--transparent",
-    "href": "#",
-    "attributes": {
-      "id": "boton-card-1",
-      "aria-labelledby": "boton-card-1 titulo-card-1"
-    }
-  })  }}
+{{ componentButton({
+  "html": "Ver detalle <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z\" fill=\"currentColor\"></path></svg>",
+  "classes": "c-button--transparent",
+  "href": "#",
+  "attributes": {
+    "id": "boton-card-1",
+    "aria-labelledby": "boton-card-1 titulo-card-1"
+  }
+})  }}
 {% endset %}
 
 {% set withIconContent %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
-  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verButton | safe }}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-6 h-6 lg:w-9 lg:h-9 mt-base mb-lg" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>
+<h3 id="titulo-card-1" class="c-h3">Título card</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verButton | safe }}
 {% endset %}
 
 {% set withButton %}
-  <h3 id="titulo-card-1" class="c-h3">Título card</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verButton | safe }}
+<h3 id="titulo-card-1" class="c-h3">Título card</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verButton | safe }}
 {% endset %}
 
 {% set areaPersonalContent %}
-  <h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
-  <p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
-  <ul class="flex flex-wrap gap-base">
-    <li>
-      {{ componentButton({
-        "text": "Acceder a Tu área personal",
-        "classes": "c-button--primary"
-      })  }}
-    </li>
-    <li>
-      {{ componentButton({
-        "text": "Descargar la app"
-      })  }}
-    </li>
-  </ul>
+<h2 class="c-h1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="inline-block align-middle lg:w-9 lg:h-9 mr-base" aria-hidden="true" focusable="false"><g transform="scale(2)"><path d="M21.71 5.71 16.29.29a1 1 0 0 0-.7-.29H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7ZM20 21.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5h10.25a.25.25 0 0 1 .25.25V5a2 2 0 0 0 2 2h2.75a.25.25 0 0 1 .25.25Z" fill="currentColor"></path><rect x="6.5" y="10.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="14" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="6.5" y="17.5" width="3" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="10.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="14" width="6.5" height="2" rx=".5" fill="currentColor"></rect><rect x="11" y="17.5" width="6.5" height="2" rx=".5" fill="currentColor"></rect></g></svg>Tu área personal</h2>
+<p class="c-paragraph-base mb-lg">En tu área personal puedes pedir cita con tu médico/a, consultar tu historia clínica y encontrar una selección de contenidos y servicios de salud para ti. Accede de forma segura desde cualquier lugar y en cualquier momento, desde tu móvil u ordenador.</p>
+<ul class="flex flex-wrap gap-base">
+  <li>
+    {{ componentButton({
+      "text": "Acceder a Tu área personal",
+      "classes": "c-button--primary"
+    })  }}
+  </li>
+  <li>
+    {{ componentButton({
+      "text": "Descargar la app"
+    })  }}
+  </li>
+</ul>
 {% endset %}
 
 {% set postContent %}
-  <p class="c-paragraph-sm mb-base">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
-    <strong>18 octubre 2022</strong>
-  </p>
-  <h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
-  <div class="prose max-w-none mb-base">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
-  </div>
-  {{ verDetalleButton | safe }}
+<p class="c-paragraph-sm mb-base">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle w-6 h-6 mr-xs"><g><path d="M7.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,10.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,14.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M7.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M12.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M17.5,18.5h-1a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Z" fill="currentColor"></path><path d="M21.5,3H18.75a.25.25,0,0,1-.25-.25V1a1,1,0,0,0-2,0V5.75a.75.75,0,0,1-1.5,0V3.5a.5.5,0,0,0-.5-.5H8.25A.25.25,0,0,1,8,2.75V1A1,1,0,0,0,6,1V5.75a.75.75,0,0,1-1.5,0V3.5A.5.5,0,0,0,4,3H2.5a2,2,0,0,0-2,2V22a2,2,0,0,0,2,2h19a2,2,0,0,0,2-2V5A2,2,0,0,0,21.5,3Zm0,18.5a.5.5,0,0,1-.5.5H3a.5.5,0,0,1-.5-.5V9.5A.5.5,0,0,1,3,9H21a.5.5,0,0,1,.5.5Z" fill="currentColor"></path></g></svg>
+  <strong>18 octubre 2022</strong>
+</p>
+<h3 id="titulo-card-1" class="c-h3">Título de noticia</h3>
+<div class="prose max-w-none mb-base">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{{ verDetalleButton | safe }}
 {% endset %}
 
 
@@ -99,7 +99,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": defaultContent
+      "caller": defaultContent | indent(4)
     }
   },
   {
@@ -107,7 +107,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": withIconContent
+      "caller": withIconContent | indent(4)
     }
   },
   {
@@ -115,7 +115,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton
+      "caller": withButton | indent(4)
     }
   },
   {
@@ -123,7 +123,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -140,7 +140,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "sub": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -158,7 +158,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -185,7 +185,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton,
+      "caller": withButton | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -211,14 +211,14 @@
     "data": {
       "classes": "lg:w-1/2",
       "containerClasses": "py-lg border-t-8 border-neutral-dark",
-      "caller": linksContent
+      "caller": linksContent | indent(4)
     }
   },
   {
     "name": "home block with buttons",
     "data": {
       "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": areaPersonalContent,
+      "caller": areaPersonalContent | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
@@ -245,7 +245,7 @@
     "data": {
       "classes": "lg:w-3/4",
       "containerClasses": "p-lg bg-neutral-lighter",
-      "caller": postContent,
+      "caller": postContent | indent(4),
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -271,7 +271,7 @@
     "data": {
       "classes": "lg:w-1/4",
       "containerClasses": "p-base bg-neutral-lighter",
-      "caller": withIconContent
+      "caller": withIconContent | indent(4)
     }
   }
 ] %}

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

@@ -2,33 +2,33 @@
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
     {% if params.super %}
-      <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.super.html | safe if params.super.html}}
-      </div>
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.super.html | safe if params.super.html}}
+    </div>
     {% endif %}
     <div class="flex">
       {% if params.left %}
-        <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {{ params.left.html | safe if params.left.html}}
-        </div>
+      <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.left.html | safe if params.left.html}}
+      </div>
       {% endif %}
       <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
         {% if caller %}
-        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+        {{ caller() | indent(4) }} {#- if statement allows usage of `call` to be optional -#}
         {% elseif params.caller %}
-        {{ params.caller | safe }}
+        {{ params.caller | safe | indent(4) }}
         {% endif %}
       </div>
       {% if params.right %}
-        <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          {{ params.right.html | safe if params.right.html}}
-        </div>
+      <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.right.html | safe if params.right.html}}
+      </div>
       {% endif %}
     </div>
     {% if params.sub %}
-      <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.sub.html | safe if params.sub.html}}
-      </div>
+    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      {{ params.sub.html | safe if params.sub.html}}
+    </div>
     {% endif %}
   </div>
 </div>

package/src/templates/components/character-count/_template.character-count.njk

@@ -2,10 +2,7 @@
 {% from "../hint/_macro.hint.njk" import componentHint %}
 
 <!-- character-count -->
-<div
-{%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
-{%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
-{%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
+<div {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %} {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %} {%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>
   {{ componentTextarea({
     id: params.id,
     name: params.name,
@@ -29,7 +26,7 @@
     disabled: params.disabled,
     errorMessage: params.errorMessage,
     attributes: params.attributes
-  }) }}
+  }) | indent(2) }}
   {{ componentHint({
     text: 'Puedes escribir hasta ' + (params.maxlength or params.maxwords) + (' palabras' if params.maxwords else ' caracteres'),
     id: params.id + '-info',
@@ -37,6 +34,6 @@
     attributes: {
       'aria-live': 'polite'
     }
-  }) }}
+  }) | indent(2) }}
 </div>
 <!-- /character-count -->

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

@@ -1,3 +1,42 @@
+{% from "components/input/_macro.input.njk" import componentInput %}
+
+{% set telefonoContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono"
+    },
+    "id": "telefono-a",
+    "name": "telefono-name"
+  })  }}
+{% endset %}
+
+{% set mobileContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "mobile-a",
+    "name": "mobile-name"
+  })  }}
+{% endset %}
+
+{% set mobileErrorContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "input-with-error-message-a",
+    "name": "test-name",
+    "errorMessage": {
+      "text": "Error: Este campo no puede estar vacío"
+    }
+  })  }}
+{% endset %}
+
+
+
+
+
 {% set exampleComponent = "checkboxes" %}
 {% set examples =  [{
     "name": "default",
@@ -125,7 +164,7 @@
           "text": "Verify with Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
@@ -461,21 +500,21 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
           "value": "phone",
           "text": "Phone",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]
@@ -496,7 +535,7 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
@@ -504,14 +543,14 @@
           "text": "Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": telefonoContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]
@@ -535,7 +574,7 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": mobileContent
           }
         },
         {
@@ -543,14 +582,14 @@
           "text": "Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold  text-alert-base \">Error: Problem with input</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+            "html": mobileErrorContent
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent
           }
         }
       ]