desy-html 7.3.1 → 7.4.0

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "searchbar" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "searchbar-1",
       "label": {
@@ -11,7 +11,7 @@
     }
   },
   {
-    "name": "with placeholder",
+    "name": "con placeholder",
     "data": {
       "id": "searchbar-2",
       "label": {
@@ -21,7 +21,7 @@
     }
   },
   {
-    "name": "disabled",
+    "name": "deshabilitado",
     "data": {
       "id": "searchbar-3",
       "label": {
@@ -31,20 +31,20 @@
     }
   },
   {
-    "name": "error message",
+    "name": "Con mensaje de error",
     "data": {
       "id": "searchbar-4",
       "label": {
         "text": "Buscar"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error: Esto es un mensaje de error",
         "classes": "mt-xs"
       }
     }
   },
   {
-    "name": "with label visible",
+    "name": "Con label visible",
     "data": {
       "id": "searchbar-label-visible",
       "label": {
@@ -54,7 +54,7 @@
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "id": "searchbar-5",
       "label": {
@@ -65,8 +65,8 @@
     }
   },
   {
-    "name": "custom button",
-    "description": "Add button params to substitute lens icon button with a button next to input.",
+    "name": "Botón personalizado",
+    "description": "Añade parámetros del componente Botón para sustituir el icono de la lupa con un botón junto al input.",
     "data": {
       "id": "searchbar-6",
       "label": {
@@ -81,8 +81,8 @@
     }
   },
   {
-    "name": "custom button default small",
-    "description": "Add button params to substitute lens icon button with a button next to input.",
+    "name": "Botón personalizado pequeño",
+    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
     "data": {
       "id": "searchbar-7",
       "label": {

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

@@ -1,53 +1,53 @@
 {% set exampleComponent = "select" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "select-1",
       "name": "select-1",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "disabled",
+    "name": "deshabilitado",
     "data": {
       "id": "select-2",
       "name": "select-2",
       "disabled": true,
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
@@ -55,12 +55,12 @@
   },
   {
     "name": "placeholder",
-    "description": "Use a combination of disabled, selected and hidden for the first option that acts as a visual placeholder",
+    "description": 'Usa una combinación de los parámetros <code>"disabled": true</code>, <code>"selected": true</code> y <code>"hidden": true</code> para la primera opción y  actúará como si fuera un placeholder visual.',
     "data": {
       "id": "select-placeholder",
       "name": "select-placeholder",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
@@ -72,35 +72,35 @@
         },
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2"
+          "text": "Opción 2"
         },
         {
           "value": 3,
-          "text": "Option 3"
+          "text": "Opción 3"
         }
       ]
     }
   },
   {
-    "name": "With optgroup",
+    "name": "con optgroup",
     "data": {
       "id": "select-optgroup",
       "name": "select-optgroup",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2"
+          "text": "Opción 2"
         },
         {
           "optgroup": {
@@ -108,27 +108,27 @@
             "items": [
               {
                 "value": 1,
-                "text": "Optgroup suboption A1"
+                "text": "Optgroup subopción A1"
               },
               {
                 "value": 2,
-                "text": "Optgroup suboption A2",
+                "text": "Optgroup subopción A2",
                 "selected": true
               },
               {
                 "value": 3,
-                "text": "Optgroup suboption A3"
+                "text": "Optgroup subopción A3"
               }
             ]
           }
         },
         {
           "value": 3,
-          "text": "Option 3"
+          "text": "Opción 3"
         },
         {
           "value": 4,
-          "text": "Option 4"
+          "text": "Opción 4"
         },
         {
           "optgroup": {
@@ -136,199 +136,199 @@
             "items": [
               {
                 "value": 1,
-                "text": "Optgroup suboption B1"
+                "text": "Optgroup subopción B1"
               },
               {
                 "value": 2,
-                "text": "Optgroup suboption B2"
+                "text": "Optgroup subopción B2"
               },
               {
                 "value": 3,
-                "text": "Optgroup suboption B3"
+                "text": "Optgroup subopción B3"
               }
             ]
           }
         },
         {
           "value": 5,
-          "text": "Option 5"
+          "text": "Opción 5"
         },
         {
           "value": 6,
-          "text": "Option 6"
+          "text": "Opción 6"
         }
       ]
     }
   },
   {
-    "name": "with hint text and error message",
+    "name": "con pista y mensaje de error",
     "data": {
       "id": "select-3",
       "name": "select-3",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2"
+          "text": "Opción 2"
         },
         {
           "value": 3,
-          "text": "Option 3"
+          "text": "Opción 3"
         }
       ]
     }
   },
   {
-    "name": "with label as page heading",
+    "name": "con label como encabezado",
     "data": {
       "id": "select-4",
       "name": "select-4",
       "label": {
-        "text": "Label text goes here",
+        "text": "Esto es un label",
         "isPageHeading": true
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "with full width override",
+    "name": "con anchura completa",
     "data": {
       "id": "select-5",
       "name": "select-5",
       "classes": "w-full",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "with optional form-group classes",
-    "description": "Inline label + flexible select and error message",
+    "name": "con clases de form-group opcionales",
+    "description": "Label en línea + Select flexible y mensaje de error",
     "data": {
       "id": "select-6",
       "name": "select-6",
       "classes": "lg:flex-1",
       "label": {
-        "text": "Inline label:",
+        "text": "Label en línea:",
         "classes": "lg:py-sm lg:mt-sm"
       },
       "formGroup": {
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error: Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "transparent",
+    "name": "transparente",
     "data": {
       "id": "select-7",
       "name": "select-7",
       "classes": "c-select--transparent",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "id": "select-8",
       "name": "select-8",
       "classes": "c-select--sm",
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "items": [
         {
           "value": 1,
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "value": 2,
-          "text": "Option 2",
+          "text": "Opción 2",
           "selected": true
         },
         {
           "value": 3,
-          "text": "Option 3",
+          "text": "Opción 3",
           "disabled": true
         }
       ]

package/src/templates/components/skip-link/_examples.skip-link.njk

@@ -1,16 +1,16 @@
 {% set exampleComponent = "skip-link" %}
 {% set examples =  [
   {
-    "name": "default",
-    "description": "To view the skip link component tab to this example, or click inside this example and press tab.",
+    "name": "por defecto",
+    "description": "Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.",
     "data": {
       "text": "Saltar al contenido principal",
       "href": "#content"
     }
   },
   {
-    "name": "with focus",
-    "description": "Simulate triggering the :focus CSS pseudo-class.",
+    "name": "con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "classes": "ds-focus",
       "text": "Saltar al contenido principal",

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

@@ -4,48 +4,48 @@
     "name": "default"
   },
   {
-    "name": "With screenreader text",
-    "description": "Use a custom screenreaders text instead of default one",
+    "name": "con texto para lector de pantalla",
+    "description": "Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.",
     "data": {
       "text": "Espere por favor",
       "classes": "text-neutral-base"
     }
   },
   {
-    "name": "Size xs",
-    "description": "Use the text size classes to size the spinner",
+    "name": "Tamaño xs",
+    "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
     "data": {
       "classes": "text-xs"
     }
   },
   {
-    "name": "Size lg",
+    "name": "Tamaño lg",
     "data": {
       "classes": "text-lg"
     }
   },
   {
-    "name": "Size 6xl",
+    "name": "Tamaño 6xl",
     "data": {
       "classes": "text-6xl"
     }
   },
   {
-    "name": "Neutral color base",
-    "description": "Use the text color classes to colorize the spinner",
+    "name": "color neutral color base",
+    "description": "Usa las clases de color de texto para dar color al Spinner.",
     "data": {
       "classes": "text-neutral-base"
     }
   },
   {
-    "name": "Primary color",
+    "name": "color primario",
     "data": {
       "classes": "text-primary-base"
     }
   },
   {
-    "name": "Set width and height container with classes",
-    "description": "Use the size classes to change container dimensions.",
+    "name": "Establecida la anchura y altura del contenedor con clases",
+    "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
     "data": {
       "classes": "border border-neutral-light w-60 h-60"
     }

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "status" %}
 {% set examples =  [
   {
-    "name": "success",
+    "name": "éxito",
     "data": {
       "text": "Completo",
       "icon": {
@@ -10,7 +10,7 @@
     }
   },
   {
-    "name": "alert",
+    "name": "alerta",
     "data": {
       "text": "Incompleto",
       "icon": {
@@ -20,7 +20,7 @@
     }
   },
   {
-    "name": "loading",
+    "name": "cargando",
     "data": {
       "text": "Subiendo (20%)",
       "icon": {
@@ -39,7 +39,7 @@
     }
   },
   {
-    "name": "Custom icon",
+    "name": "Icono personalizado",
     "data": {
       "text": "Atención",
       "icon": {