desy-html 6.4.1 → 6.6.0

package/docs/ds/_ds.example.links-list.njk

@@ -0,0 +1,171 @@
+{% from "components/links-list/_macro.links-list.njk" import componentLinksList %}
+
+<div class="grid lg:grid-cols-3 gap-xl mb-lg">
+  <div>
+    {{ componentLinksList({
+      "idPrefix": "default",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentLinksList({
+      "idPrefix": "with-icon",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentLinksList({
+      "idPrefix": "with-containerclasses",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "containerClasses": "px-base border border-neutral-base my-sm",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "containerClasses": "my-base px-base border border-neutral-base rounded",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "containerClasses": "px-base border border-neutral-base my-sm",
+          "icon": {
+            "html": '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>'
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-2 gap-xl mb-lg">
+  <div>
+    {{ componentLinksList({
+      "idPrefix": "with-classes-applied",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": '<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>\n  </div>\n'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": '<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>\n  </div>\n'
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": '<div class=\"flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" height=\"1em\" width=\"1em\" class=\"inline-block align-middle\"><path d=\"M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z\" fill=\"currentColor\"></path></svg>\n  </div>\n'
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentLinksList({
+      "idPrefix": "mixed-example",
+      "items": [
+        {
+          "href": "#",
+          "html": "<strong>Deudas</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class=\"c-paragraph-base mb-0\">Tienes <span class=\"text-alert-base\">deudas fuera de plazo</span></p>"
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Historial de pagos</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Certificado de corriente de pago</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class=\"c-paragraph-base mb-0\">Tienes <strong>1 certificado disponible</strong>.</p>"
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Valoraciones de inmuebles</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class=\"c-paragraph-base mb-0\">Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu destacado"
+      }
+    })  }}
+  </div>
+</div>

package/docs/ds/_ds.example.pills.njk

@@ -11,7 +11,7 @@
   </div>
   <div>
     {{ componentPill({
-      "html": "Icono dcha <svg viewBox=\"0 0 140 140\" class=\" self-center ml-2 \" aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" 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\"></svg>"
+      "html": "Icono dcha <svg viewBox=\"0 0 140 140\" class=\" self-center ml-2 \" aria-hidden=\"true\" width=\" .75em \" height=\" .75em \"><path fill=\"currentColor\" 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\"/></svg>"
     })  }}
   </div>
   <div>

package/docs/ds/_ds.example.textos.njk

@@ -1,6 +1,8 @@
+<h1 class="c-h0">Título 0</h1>
 <h1 class="c-h1">Título 1</h1>
 <h2 class="c-h2">Título 2</h2>
-<h2 class="c-h3">Título 3</h2>
+<h3 class="c-h3">Título 3</h3>
+<h4 class="c-h4">Título 4</h4>
 <p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
 <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
 <p class="c-paragraph-lg">Párrafo destacados</p>

package/docs/ds/_ds.section.informacion.njk

@@ -0,0 +1,13 @@
+{% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
+{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
+
+<div class="container mx-auto">
+  {{ DSSectionTitle({
+    title: "Información"
+  }) }}
+  <div class="pb-xl"></div>
+    {{ DSSubsectionTitle({
+      title: "Cards"
+    }) }}
+  {% include "ds/_ds.example.card.njk" %}
+</div>

package/docs/ds/_ds.section.navigation.njk

@@ -40,6 +40,10 @@
     title: "Menu vertical"
   }) }}
   {% include "ds/_ds.example.menu-vertical.njk" %}
+   {{ DSSubsectionTitle({
+    title: "Links list"
+  }) }}
+  {% include "ds/_ds.example.links-list.njk" %}
   <div class="pb-lg"></div>
   {{ DSSubsectionTitle({
     title: "Paginación"

package/docs/ds/_ds.section.textos.njk

@@ -11,7 +11,7 @@
   {{ DSSubsectionTitle({
     title: "Fuentes"
   }) }}
-  <p>La tipografía principal es <a class="c-link" href="https://fonts.google.com/specimen/Open+Sans?sidebar.open&selection.family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700">Open Sans</a> en sus pesos Bold, Semibold y Regular.</p>
+  <p>La tipografía principal es <a class="c-link" href="https://fonts.google.com/specimen/Open+Sans?sidebar.open&selection.family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700">Open Sans</a> en sus pesos Bold, Semibold y Regular. Utilizar en la medida de lo posible, el código que ofrece Google Fonts para integrarlo.</p>
   <div class="pb-lg"></div>
   {{ DSSubsectionTitle({
     title: "Estilos de base"
@@ -42,46 +42,70 @@
   </div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
-    title: "Títulos"
+    title: "Encabezados"
   }) }}
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
-      <h1 class="c-h1">Título 1 (h1)</h1>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="lg:w-1/3 lg:mr-8">
+      <h1 class="c-h0">Encabezado 0 (h1)</h1>
     </div>
-    <div>
+    <div class="lg:flex-1">
+      <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>40px</code> - margin-bottom: <code>.mb-xl</code> - <code>2.5</code> - <code>40px</code></p>
+    </div>
+  </div>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="lg:w-1/3 lg:mr-8">
+      <h1 class="c-h1">Encabezado 1 (h1)</h1>
+    </div>
+    <div class="lg:flex-1">
       <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75</code> - <code>28px</code></p>
     </div>
   </div>
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
-      <h2 class="c-h2">Título 2 (h2)</h2>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="lg:w-1/3 lg:mr-8">
+      <h2 class="c-h2">Encabezado 2 (h2)</h2>
     </div>
-    <div>
+    <div class="lg:flex-1">
       <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
     </div>
   </div>
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
-      <h3 class="c-h3">Título 3 (h3)</h3>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="lg:w-1/3 lg:mr-8">
+      <h3 class="c-h3">Encabezado 3 (h3)</h3>
     </div>
-    <div>
+    <div class="lg:flex-1">
       <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
     </div>
   </div>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="lg:w-1/3 lg:mr-8">
+      <h3 class="c-h4">Encabezado 4 (h4)</h3>
+    </div>
+    <div class="lg:flex-1">
+      <p class="text-neutral-dark text-sm"><code>.c-h4</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-base</code> - <code>1rem</code> - <code>16px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
+    </div>
+  </div>
   {{ DSSubsectionTitle({
     title: "Enlaces"
   }) }}
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
-      <p>Esto es un <a href="#" class="c-link">link</a> en un texto.</p>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="w-1/3 mr-8">
+      <p>Esto es un <a href="#" class="c-link">enlace</a> en un texto.</p>
     </div>
     <div>
       <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code></p>
     </div>
   </div>
-  <div class="flex items-center mb-8">
-    <div class="w-1/6 mr-8">
-      <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error.</p>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="w-1/3 mr-8">
+      <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
+    </div>
+    <div>
+      <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
+    </div>
+  </div>
+  <div class="flex flex-wrap items-center mb-8">
+    <div class="w-1/3 mr-8">
+      <p>Esto es un <a href="#" class="c-link c-link--alert">enlace</a> en una notificación de error.</p>
     </div>
     <div>
       <p class="text-neutral-dark text-sm"><code>.c-link.c-link--alert</code> - <code>normal</code> - <code>underline</code> - <code>alert-base</code> - hover: <code>alert-dark</code></p>

package/docs/examples-card.html

@@ -0,0 +1,5 @@
+{% set title = "Card. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/card/_examples.card.njk" as exampleData %}
+{% endblock %}

package/docs/examples-links-list.html

@@ -0,0 +1,5 @@
+{% set title = "Links list. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/links-list/_examples.links-list.njk" as exampleData %}
+{% endblock %}

package/docs/index.html

@@ -14,9 +14,9 @@
   <h2>¿Cómo comenzar?</h2>
   <ul>
     <li>Ejecuta primero <code>npm install</code></li>
-    <li>Utiliza <code>npm run dev</code> para generar el CSS de <code>src/styles.css</code> a <code>/dist/styles.css</code>, este proceso escucha cambios en los archivos njk, css y html, y recarga browser-sync.</li>
-    <li>Usa <code>npm run prod</code> para generar el CSS, purgarlo (excluir las clases CSS que no se usan) y minificarlo.</li>
-    <li>Dependencias: Node.js v12.18.3, Tailwind CSS, AutoPrefixer, PurgeCSS y CSSnano configurado en PostCSS</li>
+    <li>Ejecuta <code>npm run dev</code> para escuchar cambios en los archivos njk, css y html, para renderizarlos y recargar el servidor local con browser-sync.</li>
+    <li>Usa <code>npm run prod</code> para generar el CSS y minificarlo.</li>
+    <li>Dependencias: Node.js v12.18.3, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: <a href="package.json">Ver package.json</a></li>
   </ul>
 
   <h2>¿Cómo comienzo un proyecto que usa los componentes de desy-html?</h2>
@@ -38,6 +38,20 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.6.6.0</h3>
+  <ul class="text-sm">
+    <li>Removed Backstop.js visual regression testing library to make the library lighter. We will use it only in test branch.</li>
+    <li>Added Card component.</li>
+    <li>Added Links list component.</li>
+    <li>Added a bigger c-h0 heading style. A smaller c-h4 style and prose improvements.</li>
+    <li>Docs improvements.</li>
+    <li>Bug fixes.</li>
+  </ul>
+  <h3>v.6.5.0</h3>
+  <ul class="text-sm">
+    <li>Added Backstop.js visual regression testing library.</li>
+    <li>Improved documentation.</li>
+  </ul>
   <h3>v.6.4.1</h3>
   <ul class="text-sm">
     <li>Fixed notification close.</li>

package/gulpfile.js

@@ -30,8 +30,9 @@ const DESTINATION_STYLESHEET = './dist/css/';
 function bs(cb) {
   browserSync.init({
     server: {
-      baseDir: './dist/'
-    }
+      baseDir: './dist/',
+    },
+    notify: false
   });
 
   cb();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.4.1",
+  "version": "6.6.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",
@@ -25,8 +25,11 @@
   },
   "main": "src/js/index.js",
   "scripts": {
-    "dev": "gulp",
-    "prod": "NODE_ENV=production gulp prod"
+    "dev": "gulp --no-notify",
+    "prod": "NODE_ENV=production gulp prod",
+    "backstop-test:approve": "backstop approve --config=test/backstop_config/backstop.config.js",
+    "backstop-test:reference": "backstop reference --config=test/backstop_config/backstop.config.js",
+    "backstop-test:test": "backstop test --config=test/backstop_config/backstop.config.js"
   },
   "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.0",

package/src/css/component.text.css

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-h0 {
+    @apply mb-8;
+    font-size: 2.5rem;
+    @apply font-bold;
+    @apply leading-tight;
+  }
+
   .c-h1 {
     @apply mb-lg;
     @apply text-3xl;
@@ -24,6 +31,13 @@
     @apply leading-tight;
   }
 
+  .c-h4 {
+    @apply mb-sm;
+    @apply text-base;
+    @apply font-bold;
+    @apply leading-tight;
+  }
+
   .c-link {
     @apply text-primary-base;
     @apply underline;

package/src/js/aria/tabs.js

@@ -176,7 +176,9 @@ export function tabs(aria) {
 
     // Activates any given tab panel
     function activateTab (tab, setFocus) {
-      setFocus = setFocus || true;
+      if(setFocus === undefined){
+        setFocus = true
+      }
       // Deactivate all other tabs
       deactivateTabs();
 

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

@@ -26,10 +26,7 @@
   <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
     {{ componentSpinner({
       text: params.loader.text if params.loader.text else 'Acción en curso',
-      classes: params.loader.classes,
-      attributes: {
-        "x-ref": "spinnerText"
-      }
+      classes: params.loader.classes
     })  }}
   </span>
 {% endset %}
@@ -37,7 +34,7 @@
 {# Set success icon html #}
 {% set iconSuccess %}
   <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
-    <span x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
+    <span class="sr-only" role="alert" aria-live="assertive">
     </span>
     <span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path></svg></span>
   </span>
@@ -45,16 +42,7 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} x-data="{ state: '{{ params.state if params.state else null }}' }"
-                            x-init="() => {
-                              if (state == 'is-loading'){
-                                $refs.spinnerText.querySelector('[role=alert]').innerText = '{{ params.loader.text if params.loader.text else "Acción en curso"}}';
-                              } else if (state == 'is-success'){
-                                $refs.successText.innerText = '{{ params.success.text if params.success.text else "Acción realizada con éxito"}}';
-                              }
-                            }"
-                            class="{{ classNames }}"
-                            data-module="c-button-loader"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="c-button-loader"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}