desy-html 7.3.1 → 8.0.0

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

@@ -1,9 +1,9 @@
 {% set exampleComponent = "tabs" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example",
       "items": [
         {
@@ -34,7 +34,8 @@
     }
   },
   {
-    "name": "with headingLevel 3",
+    "name": "con encabezado",
+    "description": 'Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
     "data": {
       "title": "Título con h3",
       "headingLevel": 3,
@@ -69,9 +70,9 @@
     }
   },
   {
-    "name": "with html in tabs",
+    "name": "con html en tabs",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-html",
       "items": [
         {
@@ -102,9 +103,9 @@
     }
   },
   {
-    "name": "with disabled item",
+    "name": "con item deshabilitado",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-disabled",
       "items": [
         {
@@ -136,9 +137,9 @@
     }
   },
   {
-    "name": "with active item",
+    "name": "con item activo",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-active",
       "items": [
         {
@@ -170,9 +171,9 @@
     }
   },
   {
-    "name": "with many items",
+    "name": "con muchos items",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-many-items",
       "items": [
         {
@@ -251,10 +252,10 @@
     }
   },
   {
-    "name": "with scroll in mobile",
-    "description": "Using .c-tabs--scroll makes the mobile appearance to be the same as desktop. See it in action in small breakpoints.",
+    "name": "con scroll en móvil",
+    "description": 'Usa <code>.c-tabs--scroll</code> para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal.',
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-scroll-mobile",
       "classes": "c-tabs--scroll",
       "items": [
@@ -334,9 +335,9 @@
     }
   },
   {
-    "name": "with html in tabs stacked",
+    "name": "con html en tabs",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-html-stacked",
       "classes": "c-tabs--scroll",
       "items": [
@@ -362,48 +363,48 @@
     }
   },
   {
-    "name": "with classes applied",
-    "description": "Show code to display the classes applied in html",
+    "name": "con clases de css aplicadas",
+    "description": "Mostrar código para ver las clases aplicadas en el HTML.",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-classes",
       "items": [
         {
           "text": "Tab 1",
           "panel": {
             "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
-            "classes": "bg-warning-light"
+            "classes": "bg-primary-light"
           }
         },
         {
           "text": "Tab 2",
           "panel": {
             "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "bg-warning-light"
+            "classes": "bg-primary-light"
           }
         },
         {
           "text": "Tab 3",
           "panel": {
             "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "bg-warning-light"
+            "classes": "bg-primary-light"
           }
         },
         {
           "text": "Tab 4",
           "panel": {
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
-            "classes": "bg-warning-light"
+            "classes": "bg-primary-light"
           }
         }
       ]
     }
   },
   {
-    "name": "with individual ids",
-    "description": "See code to display the ids applied",
+    "name": "con ids individuales",
+    "description": 'Mostrar código para ver los <code>id</code> aplicados',
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "items": [
         {
           "text": "Tab 1",
@@ -437,10 +438,10 @@
     }
   },
   {
-    "name": "complex example",
-    "description": "Example of a real use in an app",
+    "name": "ejemplo complejo",
+    "description": "Ejemplo de uso real en una app.",
     "data": {
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de tab",
       "items": [
         {
           "text": "Cambios",

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

@@ -1,98 +1,99 @@
 {% set exampleComponent = "textarea" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "name": "more-detail-a",
       "id": "more-detail-a",
       "label": {
-        "text": "Can you provide more detail?"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Don’t include personal or financial information, eg your ID number or credit card details."
+        "text": "Esto es una pista o texto descriptivo."
       }
     }
   },
   {
-    "name": "disabled",
+    "name": "deshabilitado",
     "data": {
       "name": "more-detail-b",
       "id": "more-detail-b",
       "disabled": true,
       "label": {
-        "text": "Can you provide more detail?"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Don’t include personal or financial information, eg your ID number or credit card details."
+        "text": "Esto es una pista o texto descriptivo."
       }
     }
   },
   {
-    "name": "with error message",
+    "name": "con mensaje de error",
     "data": {
       "name": "no-ni-reason",
       "id": "no-ni-reason",
       "label": {
-        "text": "Why can’t you provide a ID number?"
+        "text": "Esto es un label"
       },
       "errorMessage": {
-        "text": "Error: You must provide an explanation"
+        "text": "Error: esto es un mensaje de error"
       }
     }
   },
   {
-    "name": "with default value",
+    "name": "con valor por defecto",
     "data": {
       "id": "full-address-a",
       "name": "address-a",
-      "value": "221B Baker Street\nLondon\nNW1 6XE\n",
+      "value": "Calle Rosales 25. 2 izda",
       "label": {
-        "text": "Full address"
+        "text": "Dirección completa"
       }
     }
   },
   {
-    "name": "with custom rows",
+    "name": "con número de filas (rows) personalizada",
     "data": {
       "id": "full-address-b",
       "name": "address-b",
       "label": {
-        "text": "Full address"
+        "text": "Dirección completa"
       },
       "rows": 8
     }
   },
   {
-    "name": "with label as page heading",
+    "name": "con label como encabezado",
+    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
     "data": {
       "id": "textarea-with-page-heading-a",
       "name": "address",
       "label": {
-        "text": "Full address",
+        "text": "Esto es un label dentro de un encabezado <h1>",
         "isPageHeading": true
       }
     }
   },
   {
-    "name": "with optional form-group classes",
+    "name": "con clases de form-group opcionales",
     "data": {
       "id": "textarea-with-page-heading-b",
       "name": "address",
       "label": {
-        "text": "Full address"
+        "text": "Dirección completa"
       },
       "formGroup": {
-        "classes": "extra-class"
+        "classes": "p-base bg-primary-light"
       }
     }
   },
   {
-    "name": "with autocomplete attribute",
+    "name": "con valores de autocompletado",
     "data": {
       "id": "textarea-with-autocomplete-attribute",
       "name": "address",
       "label": {
-        "text": "Full address"
+        "text": "Dirección completa"
       },
       "autocomplete": "street-address"
     }
@@ -103,26 +104,26 @@
       "id": "placeholder",
       "name": "placeholder",
       "label": {
-        "text": "Value"
+        "text": "Valor"
       },
-      "placeholder": "This is a placeholder"
+      "placeholder": "Esto es un placeholder"
     }
   },
   {
-    "name": "with custom classes applied",
-    "description": "Inline label + flexible textarea and error message",
+    "name": "Con clases de css aplicadas",
+    "description": "Label inline + Textarea flexible y Mensaje de error",
     "data": {
       "formGroup": {
         "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
       },
       "label": {
-        "text": "Inline label:",
+        "text": "Label inline:",
         "classes": "lg:py-sm lg:mt-sm"
       },
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error: Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

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

@@ -1,8 +1,8 @@
 {% set exampleComponent = "toggle" %}
 {% set examples =  [
   {
-    "name": "default",
-    "description": "Button like appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-controls to show/hide that outer element.",
+    "name": "por defecto",
+    "description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
     "data": {
       "classes": "c-button",
       "offState": {
@@ -19,8 +19,8 @@
     }
   },
   {
-    "name": "2 icons",
-    "description": "Button like appearance, no change of button text, only changes in icons. It needs an outer element with an id to use it with its aria-controls to show/hide that outer element.",
+    "name": "2 iconos",
+    "description": 'Apariencia de botón, sin cambio en el texto del botón, sólo cambian sus iconos. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-controls</code> para mostrar/ocultar ese elemento externo.',
     "data": {
       "classes": "c-button c-button--sm",
       "offState": {
@@ -37,8 +37,8 @@
     }
   },
   {
-    "name": "Not Expandible",
-    "description": "isExpandible = false. Instead of aria-expanded will use aria-pressed.",
+    "name": "no expandible",
+    "description": 'Usa <code>"isExpandible": false</code>. En lugar de usar <code>aria-expanded</code> usará <code>aria-pressed</code>.',
     "data": {
       "isExpandible": false,
       "classes": "c-button",
@@ -54,7 +54,7 @@
   },
   {
     "name": "Pressed",
-    "description": "pressed = true. If pressed is true the toggle is on.",
+    "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
     "data": {
       "pressed": true,
       "classes": "c-button",
@@ -70,7 +70,7 @@
   },
   {
     "name": "isSwitch",
-    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "description": 'Apariencia de Switch con <code>"isSwitch": true</code>, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-labelledby</code>.',
     "data": {
       "classes": "",
       "isSwitch": true,
@@ -89,7 +89,7 @@
   },
   {
     "name": "isSwitch pressed",
-    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
     "data": {
       "classes": "",
       "pressed": true,
@@ -108,8 +108,7 @@
     }
   },
   {
-    "name": "isSwitch small",
-    "description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
+    "name": "isSwitch peque",
     "data": {
       "classes": "",
       "isSwitch": true,

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "tooltip" %}
 {% set examples =  [
   {
-    "name": "default (only icon)",
+    "name": "por defecto (sólo icono)",
     "data": {
       "id": "example-default",
       "icon": {
@@ -11,7 +11,7 @@
     }
   },
   {
-    "name": "text",
+    "name": "sólo texto",
     "data": {
       "id": "example-text",
       "text": "Sólo texto",
@@ -19,7 +19,7 @@
     }
   },
   {
-    "name": "html",
+    "name": "con html",
     "data": {
       "id": "example-html",
       "html": '<p class="inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 mr-xs text-primary-base" aria-hidden="true" focusable="false"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg><span>Sólo <strong>html</strong> con icono custom a la izquierda</span></p>',
@@ -27,7 +27,7 @@
     }
   },
   {
-    "name": "question",
+    "name": "pregunta",
     "data": {
       "id": "example-question",
       "text": "Pregunta",
@@ -49,7 +49,7 @@
     }
   },
   {
-    "name": "alert",
+    "name": "alerta",
     "data": {
       "id": "example-alert",
       "text": "Alerta",
@@ -61,10 +61,10 @@
     }
   },
   {
-    "name": "Custom icon",
+    "name": "icono personalizado",
     "data": {
       "id": "example-custom-icon",
-      "text": "Custom",
+      "text": "Icono personalizado",
       "icon": {
         "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-neutral-dark" role="img" aria-label="Ayuda"><path d="M140 15a15 15 0 00-15-15H15A15 15 0 000 15v110a15 15 0 0015 15h110a15 15 0 0015-15zM70 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>'
       },
@@ -73,8 +73,8 @@
     }
   },
   {
-    "name": "Complex",
-    "description": "complex : true. Use this param when the tooltip content has long texts or mixed content.",
+    "name": "complejo",
+    "description": 'Usa <code>"complex": true</code> para que el contenido del tooltip tenga textos largos o contenido mixto.',
     "data": {
       "id": "complex-html",
       "icon": {