desy-html 7.3.1 → 7.4.0

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

@@ -199,7 +199,7 @@
 {% set exampleComponent = "header" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos.",
     "data": {
       "homepageUrl": "/",
@@ -233,8 +233,8 @@
     }
   },
   {
-    "name": "with custom navigation",
-    "description": "Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada",
+    "name": "con navegación personalizada",
+    "description": 'Tras nuestro menú de navegación tenemos <code>customNavigationHtml</code> una zona anidable para poder añadir una navegación personalizada.',
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -247,8 +247,8 @@
     }
   },
   {
-    "name": "with custom navigation right",
-    "description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
+    "name": "con navegación personalizada a la derecha",
+    "description": "En el <code>customNavigationHtml</code> podemos añadir elementos posicionados a la derecha.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -261,7 +261,7 @@
     }
   },
   {
-    "name": "with custom skipLink",
+    "name": "con enlace de skipLink personalizado",
     "description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
     "data": {
       "skipLink":{
@@ -303,8 +303,8 @@
     }
   },
   {
-    "name": "Expanded logo",
-    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
+    "name": "logo expandido",
+    "description": 'Con el parámetro <code>"expandedLogo": true</code> se muestra el logo del Gobierno de Aragón en formato expandido. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.',
     "data": {
       "homepageUrl": "/",
       "expandedLogo": true
@@ -312,7 +312,7 @@
   },
   {
     "name": "con offcanvas",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -331,7 +331,7 @@
   },
   {
     "name": "con offcanvas y mobileTitle",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -398,7 +398,7 @@
   },
   {
     "name": "con dropdown",
-    "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
+    "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional, normalmante relativa a la cuenta de usuario, como: Perfil y Cerrar sesión. Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
@@ -421,7 +421,7 @@
   },
   {
     "name": "con dropdown personalizado",
-    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
+    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con HTML en el dropdown.",
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {

package/src/templates/components/header-mini/_examples.header-mini.njk

@@ -8,21 +8,21 @@
 
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "description": "This is the mini header.",
     "data": {
     }
   },
   {
-    "name": "Without container class",
-    "description": "hasContainer = false",
+    "name": "Sin clase contenedora",
+    "description": 'Usa el parámetro <code>"hasContainer": false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.',
     "data": {
       "hasContainer": false
     }
   },
   {
-    "name": "With custom content after the logo",
-    "description": "Use customNavigationHtml to nest custom content after the logo.",
+    "name": "con contenido personalizado tras el logotipo.",
+    "description": 'Usa el parámetro <code>customNavigationHtml</code> para añadir contenido tras el logotipo. En este ejemplo se ha colocado un logotipo de la UE a la derecha.',
     "data": {
       "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | trim | safe +'</div>'
     }

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

@@ -1,15 +1,15 @@
 {% set exampleComponent = "hint" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "It’s on your DNI, the last letter. For example, ‘A’."
+      "text": "Esto es una pista o hint."
     }
   },
   {
-    "name": "with html",
+    "name": "con HTML",
     "data": {
-      "html": "It’s on your DNI, <strong class=\" font-bold \">the last letter</strong>. For example, ‘A’."
+      "html": 'Esto es una <strong>pista</strong> o <em>hint</em>.'
     }
   }
 ] %}

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

@@ -1,20 +1,20 @@
 {% set exampleComponent = "input" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "id": "input-example-a",
       "name": "test-name"
     }
   },
   {
-    "name": "disabled",
+    "name": "deshabilitado",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "id": "input-example-b",
       "name": "test-name",
@@ -22,60 +22,60 @@
     }
   },
   {
-    "name": "with hint text",
+    "name": "con pista",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-with-hint-text",
       "name": "test-name"
     }
   },
   {
-    "name": "with error message",
+    "name": "con mensaje de error",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-with-error-message-a",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       }
     }
   },
   {
-    "name": "with error message with custom errorId",
+    "name": "con mensaje de error con id personalizado",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-with-error-message-b",
       "name": "test-name",
       "errorId": "custom-error-id",
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       }
     }
   },
   {
-    "name": "with width full class",
-    "description": "See spacing in tailwind.config.js for a complete list of available widths",
+    "name": "con clase de anchura completa",
+    "description": "Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-width-full",
       "name": "test-width-full",
@@ -83,14 +83,14 @@
     }
   },
   {
-    "name": "with width 1/2 class",
-    "description": "See spacing in tailwind.config.js for a complete list of available widths",
+    "name": "con clase de anchura 1/2",
+    "description": "Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-width-half",
       "name": "test-width-half",
@@ -98,14 +98,14 @@
     }
   },
   {
-    "name": "with width-32 class",
-    "description": "See spacing in tailwind.config.js for a complete list of available widths",
+    "name": "con clase width-32",
+    "description": "Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-width-32",
       "name": "test-width-32",
@@ -113,10 +113,10 @@
     }
   },
   {
-    "name": "with label as page heading",
+    "name": "con label como encabezado",
     "data": {
       "label": {
-        "text": "Label text goes here",
+        "text": "Esto es un label",
         "isPageHeading": true
       },
       "id": "input-with-page-heading",
@@ -124,23 +124,23 @@
     }
   },
   {
-    "name": "with optional form-group classes",
+    "name": "con clases de form-group opcionales",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "id": "input-example-c",
       "name": "test-name",
       "formGroup": {
-        "classes": "extra-class"
+        "classes": "p-base bg-primary-light"
       }
     }
   },
   {
-    "name": "with autocomplete attribute",
+    "name": "con valores de autocompletado",
     "data": {
       "label": {
-        "text": "Postcode"
+        "text": "Código postal"
       },
       "id": "input-with-autocomplete-attribute",
       "name": "postcode",
@@ -151,7 +151,7 @@
     "name": "with pattern attribute",
     "data": {
       "label": {
-        "text": "Numbers only"
+        "text": "Solo números"
       },
       "id": "input-with-pattern-attribute",
       "name": "numbers-only",
@@ -160,11 +160,11 @@
     }
   },
   {
-    "name": "with required attribute",
-    "description": "The form must start with a paragraph: * Todos los campos marcados con asterisco son obligatorios.",
+    "name": "campo obligatorio",
+    "description": 'El formulario debe comenzar con un párrafo que ponga: <em>* Todos los campos marcados con asterisco son obligatorios.</em>',
     "data": {
       "label": {
-        "text": "Required field *"
+        "text": "Campo obligatorio *"
       },
       "id": "input-with-required-attribute",
       "name": "input-with-required-attribute",
@@ -174,10 +174,10 @@
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "label": {
-        "text": "Input small"
+        "text": "Input peque"
       },
       "id": "classes-applied-a",
       "name": "classes-applied-a",
@@ -185,30 +185,31 @@
     }
   },
   {
-    "name": "with custom classes applied",
-    "description": "Inline label + flexible input and error message",
+    "name": "Con clases de css aplicadas",
+    "description": 'Label en linea + Input flexible y mensaje de error',
     "data": {
       "formGroup": {
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "label": {
-        "text": "Inline label:",
+        "text": "Label en línea:",
         "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"
     }
   },
   {
-    "name": "custom type",
+    "name": "Tipo personalizado",
+    "description": 'Si no se espacifica, el tipo por defecto es <code>text</code>. Este Input tiene un <code>type="number"</code>',
     "data": {
       "label": {
-        "text": "Custom type number"
+        "text": "Input de tipo número"
       },
       "id": "custom-type",
       "name": "custom-type",
@@ -216,32 +217,32 @@
     }
   },
   {
-    "name": "value",
+    "name": "valor",
     "data": {
       "label": {
-        "text": "Value"
+        "text": "Esto es un label"
       },
       "id": "value",
-      "name": "value",
-      "value": "This is a value"
+      "name": "valor",
+      "value": "Esto es un valor"
     }
   },
   {
     "name": "placeholder",
     "data": {
       "label": {
-        "text": "Value"
+        "text": "Esto es un label"
       },
       "id": "placeholder",
       "name": "placeholder",
-      "placeholder": "This is a placeholder"
+      "placeholder": "Esto es un placeholder"
     }
   },
   {
-    "name": "with describedBy",
+    "name": "con describedBy",
     "data": {
       "label": {
-        "text": "With describedBy"
+        "text": "Con describedBy"
       },
       "id": "with-describedby-a",
       "name": "with-describedby-a",
@@ -249,13 +250,13 @@
     }
   },
   {
-    "name": "hint with describedBy",
+    "name": "Pista con describedBy",
     "data": {
       "label": {
-        "text": "Hint with describedBy"
+        "text": "Pista con describedBy"
       },
       "hint": {
-        "text": "This is a hint"
+        "text": "Esto es una pista."
       },
       "id": "with-describedby-b",
       "name": "with-describedby-b",
@@ -263,38 +264,39 @@
     }
   },
   {
-    "name": "error with describedBy",
+    "name": "error con describedBy",
     "data": {
       "label": {
-        "text": "Error with describedBy"
+        "text": "Error con describedBy"
       },
       "id": "with-describedby-c",
       "name": "with-describedby-c",
       "describedBy": "input-example-a",
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       }
     }
   },
   {
-    "name": "with error, hint and describedBy",
+    "name": "con error, pista y describedBy",
     "data": {
       "label": {
-        "text": "Label text goes here"
+        "text": "Esto es un label"
       },
       "hint": {
-        "text": "Hint text goes here"
+        "text": "Esto es una pista."
       },
       "id": "input-with-both",
       "name": "test-name",
       "describedBy": "input-example-a",
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error: esto es un mensaje de error"
       }
     }
   },
   {
     "name": "inputmode",
+    "description": 'Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode="email"</code>',
     "data": {
       "label": {
         "text": "Inputmode"

package/src/templates/components/input-group/_examples.input-group.njk

@@ -1,7 +1,7 @@
 {% set exampleComponent = "input-group" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "doc-identidad-1",
       "namePrefix": "doc-identidad",
@@ -45,7 +45,7 @@
     }
   },
   {
-    "name": "with hint",
+    "name": "con pista",
     "data": {
       "id": "doc-identidad-2",
       "namePrefix": "doc-identidad",
@@ -92,7 +92,7 @@
     }
   },
   {
-    "name": "with divider",
+    "name": "con divisor",
     "data": {
       "id": "with-divider",
       "namePrefix": "with-divider",
@@ -136,7 +136,7 @@
     }
   },
   {
-    "name": "with errors",
+    "name": "con errores",
     "data": {
       "id": "datos-errors",
       "fieldset": {
@@ -205,7 +205,7 @@
     }
   },
   {
-    "name": "with error on name",
+    "name": "con error en el nombre",
     "data": {
       "id": "datos-error-nombre-a",
       "fieldset": {
@@ -269,7 +269,7 @@
     }
   },
   {
-    "name": "with error on surname",
+    "name": "con error en los apellidos",
     "data": {
       "id": "datos-error-nombre-b",
       "fieldset": {
@@ -333,7 +333,7 @@
     }
   },
   {
-    "name": "with optional form-group classes and more classes applied",
+    "name": "Con clases de form-group opcionales y más clases",
     "data": {
       "id": "doc-identidad-classes",
       "namePrefix": "doc-identidad-classes",
@@ -344,16 +344,16 @@
         }
       },
       "formGroup": {
-        "classes": "bg-warning-light"
+        "classes": "p-base bg-primary-light"
       },
-      "classes": "grid grid-cols-2 gap-base",
+      "classes": "grid grid-cols-2 gap-lg",
       "items": [
         {
           "name": "tipo-doc",
           "formGroup": {
-            "classes": "border mb-0"
+            "classes": "lg:border-r lg:border-neutral-base mb-0"
           },
-          "classes": "w-full lg:w-40 border-success-base",
+          "classes": "w-full lg:w-40",
           "label": {
             "text": "Tipo",
             "classes": "text-sm"
@@ -373,10 +373,7 @@
         },
         {
           "name": "num-doc",
-          "formGroup": {
-            "classes": "border"
-          },
-          "classes": "w-full lg:w-64 border-alert-base",
+          "classes": "w-full lg:w-64",
           "label": {
             "text": "Número",
             "classes": "text-sm"
@@ -387,7 +384,8 @@
     }
   },
   {
-    "name": "with autocomplete",
+    "name": "con autocompletado",
+    "description": 'Usa el parámetro <code>autocomplete</code>',
     "data": {
       "id": "datos-autocomplete",
       "fieldset": {
@@ -442,7 +440,7 @@
     }
   },
   {
-    "name": "with input attributes",
+    "name": "con atributos de input",
     "data": {
       "id": "datos-attributes",
       "fieldset": {