desy-html 7.3.1 → 7.4.0

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

@@ -1,28 +1,43 @@
 {% set exampleComponent = "collapsible" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "collapsible-example",
-      "headerText": "Help with nationality",
-      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
     }
   },
   {
-    "name": "expanded",
+    "name": "expandido",
     "data": {
       "id": "help-with-nationality",
-      "headerText": "Help with nationality",
-      "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
       "open": true
     }
   },
   {
-    "name": "with html",
+    "name": "con HTML",
     "data": {
       "id": "collapsible-html-example",
-      "headerText": "Help with nationality",
-      "html": '<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>'
+      "headerText": "Cabecera del collapsible",
+      "html": '<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
+      tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
+      cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
     }
   }
 ] %}

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "date-input" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "id": "fechnacim",
       "namePrefix": "fechnacim",
@@ -39,7 +39,7 @@
     }
   },
   {
-    "name": "with errors only",
+    "name": "con errores solo",
     "data": {
       "id": "fechnacim-errors-a",
       "fieldset": {
@@ -79,7 +79,7 @@
     }
   },
   {
-    "name": "with errors and hint",
+    "name": "con errores y pista",
     "data": {
       "id": "fechnacim-errors-b",
       "fieldset": {
@@ -122,7 +122,7 @@
     }
   },
   {
-    "name": "with error on day input",
+    "name": "con error en el input del día",
     "data": {
       "id": "fechnacim-day-error",
       "namePrefix": "fechnacim-day-error",
@@ -164,7 +164,7 @@
     }
   },
   {
-    "name": "with error on month input",
+    "name": "con error en el input del mes",
     "data": {
       "id": "fechnacim-month-error",
       "namePrefix": "fechnacim-month-error",
@@ -206,7 +206,7 @@
     }
   },
   {
-    "name": "with error on year input",
+    "name": "con error en el input del año",
     "data": {
       "id": "fechnacim-year-error",
       "namePrefix": "fechnacim-year-error",
@@ -248,7 +248,7 @@
     }
   },
   {
-    "name": "with default items",
+    "name": "con items por defecto",
     "data": {
       "id": "fechnacim-default-items",
       "namePrefix": "fechnacim-default-items",
@@ -263,7 +263,7 @@
     }
   },
   {
-    "name": "time input",
+    "name": "input de tiempo",
     "data": {
       "id": "time",
       "namePrefix": "time",
@@ -300,7 +300,7 @@
     }
   },
   {
-    "name": "with optional form-group classes",
+    "name": "con clases de form-group opcionales",
     "data": {
       "id": "fechnacim-formgroup-classes",
       "namePrefix": "fechnacim-formgroup-classes",
@@ -313,12 +313,12 @@
         "text": "Por ejemplo, 31 3 1980"
       },
       "formGroup": {
-        "classes": "bg-warning-light"
+        "classes": "p-base bg-primary-light"
       }
     }
   },
   {
-    "name": "with autocomplete values",
+    "name": "con valores de autocompletado",
     "data": {
       "id": "fechnacim-with-autocomplete-attribute",
       "namePrefix": "fechnacim-with-autocomplete",
@@ -359,7 +359,7 @@
     }
   },
   {
-    "name": "with input attributes",
+    "name": "con atributos de input",
     "data": {
       "id": "fechnacim-with-input-attributes",
       "namePrefix": "fechnacim-with-input-attributes",
@@ -400,7 +400,7 @@
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
       "id": "fechnacim-small",
       "namePrefix": "fechnacim-small",
@@ -452,7 +452,7 @@
     }
   },
   {
-    "name": "small time input",
+    "name": "input de tiempo peque",
     "data": {
       "id": "fechnacim-small-time",
       "namePrefix": "fechnacim-small-time",

package/src/templates/components/description-list/_examples.description-list.njk

@@ -1,30 +1,30 @@
 {% set exampleComponent = "description-list" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           }
         }
       ]
     }
   },
   {
-    "name": "large",
+    "name": "grande",
     "data": {
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition",
+            "text": "definición",
             "classes": "text-lg"
           }
         }
@@ -32,15 +32,15 @@
     }
   },
   {
-    "name": "extra large",
+    "name": "extra grande",
     "data": {
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition",
+            "text": "definición",
             "classes": "font-bold text-xl"
           }
         }
@@ -53,28 +53,28 @@
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "mb-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "mb-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "mb-base"
         }
@@ -88,28 +88,28 @@
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "flex-1 pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "flex-1 pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "flex-1 pr-base"
         }
@@ -117,61 +117,61 @@
     }
   },
   {
-    "name": "horizontal with 2 rows",
+    "name": "horizontal con 2 filas",
     "data": {
       "classes": "flex flex-wrap w-full",
       "items": [
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         },
         {
           "term": {
-            "text": "term"
+            "text": "término"
           },
           "definition": {
-            "text": "definition"
+            "text": "definición"
           },
           "classes": "w-1/3 mb-base pr-base"
         }
@@ -179,7 +179,7 @@
     }
   },
   {
-    "name": "grouped",
+    "name": "agrupado",
     "data": {
       "classes": "w-full py-sm border-t border-b border-neutral-base",
       "items": [
@@ -242,7 +242,7 @@
     }
   },
   {
-    "name": "with table like appaerance",
+    "name": "con apariencia de tabla",
     "data": {
       "classes": "w-full",
       "items": [
@@ -316,7 +316,7 @@
     }
   },
   {
-    "name": "with table like appaerance and numbers",
+    "name": "con apariencia de tabla y números",
     "data": {
       "classes": "w-full",
       "items": [
@@ -390,15 +390,16 @@
     }
   },
   {
-    "name": "with html and classes",
+    "name": "con HTML y clases",
     "data": {
       "items": [
         {
           "term": {
-            "html": "Expedientes abiertos ↓"
+            "html": "Expedientes abiertos ↓",
+            "classes": "mb-sm"
           },
           "definition": {
-            "html": '<span class="font-bold text-4xl">45</span> <svg class="inline-block align-baseline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1.6rem" height="1.6rem"><path d="M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z"/></svg><a href="/" class="c-link block font-normal text-sm">Ver todos</a>'
+            "html": '<span class="font-bold text-4xl">45</span> <svg class="inline-block align-baseline ml-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1.6rem" height="1.6rem"><path d="M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z"/></svg><a href="/" class="c-link block mt-sm font-normal text-sm">Ver todos</a>'
           }
         }
       ],
@@ -406,19 +407,19 @@
     }
   },
   {
-    "name": "with attributes",
-    "description": "See code to display the attributes applied",
+    "name": "con atributos",
+    "description": "Muestra el código para ver cómo se aplican los atributos",
     "data": {
       "items": [
         {
           "term": {
-            "text": "term",
+            "text": "término",
             "attributes": {
               "id": "term"
             }
           },
           "definition": {
-            "text": "definition",
+            "text": "definición",
             "attributes": {
               "id": "definition"
             }

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

@@ -1,44 +1,45 @@
 {% set exampleComponent = "details" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "summary": {
-        "html": "Help with nationality"
+        "html": "Más información"
       },
-      "caller": "<p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>"
     }
   },
   {
-    "name": "expanded",
+    "name": "expandido",
+    "description": 'Usa el parámetro <code>"open": true</code> para mostrar inicialmente abierto un item.',
     "data": {
-      "id": "help-with-nationality",
+      "id": "mas-informacion",
       "summary": {
-        "text": "Help with nationality"
+        "text": "Más información"
       },
-      "caller": "<p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>",
+      "caller": "<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>",
       "open": true
     }
   },
   {
-    "name": "with html",
+    "name": "con HTML",
     "data": {
       "summary": {
-        "html": "Help with <strong>nationality</strong>"
+        "html": 'Más información <em>actualizada</em>'
       },
-      "caller": "<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
+      "caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
     }
   },
   {
-    "name": "with classes",
+    "name": "con clases",
     "data": {
       "summary": {
-        "html": "Help with <strong>nationality</strong>",
-        "classes": "c-link c-link--alert"
+        "html": 'Más información <em>actualizada</em>',
+        "classes": "hover:underline"
       },
-      "classes": "border p-base",
-      "containerClasses": "p-base bg-alert-light border-alert-base rounded text-alert-base",
-      "caller": "<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
+      "classes": "p-base bg-primary-light text-primary-base",
+      "containerClasses": "p-base",
+      "caller": "<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
     }
   }
 ] %}

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

@@ -53,11 +53,11 @@
 {% set exampleComponent = "dialog" %}
 {% set examples =  [
   {
-    "name": "modal dialog",
-    "description": "role=dialog, aria-modal=true",
+    "name": "Modal lanzado con un Dialog",
+    "description": 'Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>"role":"dialog"</code> y <code>"aria-modal": true</code>',
     "data": {
       "button": {
-        "text": "Open modal",
+        "text": "Abrir modal",
         "attributes": {
           "onclick": "openDialog('default', this, 'label-default-example')"
         }
@@ -73,11 +73,10 @@
     }
   },
   {
-    "name": "modal dialog with secondary actions",
-    "description": "role=dialog, aria-modal=true",
+    "name": "Modal lanzado con un Dialog con acciones secundarias",
     "data": {
       "button": {
-        "text": "Open modal with secondary actions",
+        "text": "Abrir modal con acciones secundarias",
         "attributes": {
           "onclick": "openDialog('secondary', this, 'label-secondary-action-example')"
         }