desy-html 6.5.0 → 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

@@ -36,25 +36,17 @@
   <h2>Descarga el código fuente</h2>
   <p>El código de este proyecto está publicado en un repositorio público de Bitbucket. Puedes hacer un fork o descargarlo desde aqui: <a href="https://bitbucket.org/sdaragon/desy-html">https://bitbucket.org/sdaragon/desy-html/</a></p>
 
-  <h2>Test visuales con BackstopJS</h2>
-
-  <p>Para testear el estado visual de cada uno de los componentes usamos la librería <a href="https://garris.github.io/BackstopJS/">BackstopJS</a>, que genera unas capturas bitmap iniciales del estado de cada uno de los componentes llamadas referencias y que son la base sobre la que comparar en los tests. Estas capturas bitmap de referencias se hacen con las páginas de componentes que hay publicadas en la rama master en su sitio web: <a href="https://desy.aragon.es/desy-html">https://desy.aragon.es/desy-html</a></p>
-
-  <p>Cuando hacemos cambios en nuestra rama y antes de crear una nueva pull request debemos lanzar el test así: <code>npm run backstop-test:test</code>, esto creara unas capturas de nuestros cambios locales. Estas se comparan con las de referencia y si hay algún cambio visual nos lo indica en un reporte visual, al finalizar los test. Este reporte se abre automaticamente en el navegador y nos permite visualizar los cambios que hay entre la base y nuestros cambios.</p>
-
-  <p>Instrucciones:</p>
-  <ul>
-    <li>Ejecutar el servidor local con: <code>npm run prod</code> y dejarlo activo mientras hacemos los tests.</li>
-    <li>Testear cambios con: <code>npm run backstop-test:test</code>. Compara lo renderizado en nuestro local con las referencias aprobadas previamente. Al finalizar abre en el navegador un reporte visual.</li>
-    <li>Si los cambios no son correctos, corregir.</li>
-    <li>Si los cambios son correctos, aprobarlos con: <code>npm run backstop-test:approve</code>. Esto guarda las capturas de los cambios aprobados como nuevas referencias.</li>
-    <li>Commitear cambios y hacer el pull request.</li>
-  </ul>
-
-  <p>Si queremos generar las referencias de nuevo desde lo que está en master publicado en <a href="https://desy.aragon.es/desy-html">https://desy.aragon.es/desy-html</a> debemos ejecutar: <code>npm run backstop-test:reference</code>. Este script apenas lo vamos a usar ya que las referencias ya estarán creadas. Úsalo sólo si no tienes las certeza de que las referencias no sean correctas. </p>
-
   <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.5.0",
+  "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)",
@@ -36,7 +36,6 @@
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.2",
     "autoprefixer": "^10.0.2",
-    "backstopjs": "^6.1.1",
     "hex-rgb": "^4.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.15",

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