desy-html 7.3.0 → 7.4.0

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

@@ -1,7 +1,7 @@
 {% set exampleComponent = "item" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
@@ -9,7 +9,7 @@
     }
   },
   {
-    "name": "default with html",
+    "name": "por defecto con HTML",
     "data": {
       "title":{
         "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=\" font-bold \">principal en Aragón.</strong>"
@@ -17,8 +17,8 @@
     }
   },
   {
-    "name": "with headingLevel",
-    "description": "headingLevel is 4",
+    "name": "Con encabezado",
+    "description": 'Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado <code>&lt;h4&gt;</code>.',
     "data": {
       "headingLevel": 4,
       "title": {
@@ -27,7 +27,7 @@
     }
   },
   {
-    "name": "with description",
+    "name": "con descripción",
     "data": {
       "title":{
         "html": "Registro de alta de la asociación"
@@ -38,7 +38,7 @@
     }
   },
   {
-    "name": "with items",
+    "name": "con items",
     "data": {
       "title":{
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
@@ -57,7 +57,7 @@
     }
   },
   {
-    "name": "with content",
+    "name": "con contenido",
     "data": {
       "title":{
         "text": "Registro de alta de la asociación"
@@ -69,7 +69,8 @@
     }
   },
   {
-    "name": "with actions",
+    "name": "con acciones",
+    "description": 'Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.',
     "data": {
       "title":{
         "text": "Registro de alta de la asociación",
@@ -81,8 +82,8 @@
     }
   },
   {
-    "name": "draggable",
-    "description": "isDraggable: true",
+    "name": "arrastrable",
+    "description": 'Usa el parámetro <code>"isDraggable": true</code> para mostrar un icono de arrastrar.',
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
@@ -91,8 +92,8 @@
     }
   },
   {
-    "name": "locked",
-    "description": "isLocked: true",
+    "name": "bloqueado",
+    "description": 'Usa el parámetro <code>"isLocked": true</code> para mostrar un icono de bloqueado.',
     "data": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón",
@@ -105,7 +106,7 @@
     }
   },
   {
-    "name": "with icon type document",
+    "name": "con icono tipo: documento",
     "data": {
       "title": {
         "text": "Resolución de años anteriores",
@@ -123,7 +124,7 @@
     }
   },
   {
-    "name": "with icon type link",
+    "name": "con icono tipo: enlace",
     "data": {
       "title": {
         "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
@@ -141,7 +142,7 @@
     }
   },
   {
-    "name": "with icon type clipboard",
+    "name": "con icono tipo: portapapeles",
     "data": {
       "title": {
         "text": "Datos de la empresa",
@@ -167,7 +168,7 @@
     }
   },
   {
-    "name": "with custom icon",
+    "name": "con icono personalizado",
     "data": {
       "title": {
         "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
@@ -185,8 +186,8 @@
     }
   },
   {
-    "name": "with icon type document vertical aligned on top",
-    "description": "icon.containerClasses = self-start h-full mr-base",
+    "name": "con icono tipo: documento, alineado verticalmente arriba",
+    "description": 'Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.',
     "data": {
       "title": {
         "text": "Resolución de años anteriores",
@@ -210,7 +211,7 @@
     }
   },
   {
-    "name": "draggable and with icon type document",
+    "name": "arrastrable con icono tipo: documento",
     "data": {
       "title": {
         "text": "Resolución de años anteriores",
@@ -229,7 +230,7 @@
     }
   },
   {
-    "name": "with classes, description, items, content and actions",
+    "name": "con clases, descripción, items, contenido y acciones",
     "data": {
       "title":{
         "text": "Registro de alta de la asociación",

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

@@ -1,30 +1,32 @@
 {% set exampleComponent = "label" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "Label text goes here"
+      "text": "Esto es un label"
     }
   },
   {
-    "name": "with classes applied",
+    "name": "con clases de css aplicadas",
     "data": {
-      "classes": "inline-block bg-warning-light",
-      "text": "Label text goes here"
+      "classes": "inline-block p-base bg-primary-light",
+      "text": "Esto es un label"
     }
   },
   {
-    "name": "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>. Si no se establece un <code>"headingLevel"</code>, el label no estará rodeado de un encabezado.',
     "data": {
-      "text": "Label text goes here",
+      "text": "Esto es un label",
       "classes": "c-h1",
       "isPageHeading": true
     }
   },
   {
-    "name": "as page heading with headingLevel 3",
+    "name": "con label como encabezado con h3",
+    "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": {
-      "text": "Label text goes here",
+      "text": "Esto es un label",
       "classes": "c-h3",
       "isPageHeading": true,
       "headingLevel": "3"

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

@@ -10,7 +10,7 @@
 
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "idPrefix": "default",
       "items": [
@@ -33,7 +33,7 @@
     }
   },
   {
-    "name": "with icon",
+    "name": "con icono",
     "data": {
       "idPrefix": "with-icon",
       "items": [
@@ -65,7 +65,7 @@
     }
   },
   {
-    "name": "with classes applied",
+    "name": "con clases de css aplicadas",
     "data": {
       "idPrefix": "with-classes-applied",
       "items": [
@@ -100,7 +100,7 @@
     }
   },
   {
-    "name": "with containerClasses applied",
+    "name": "con containerClasses aplicado",
     "data": {
       "idPrefix": "with-containerclasses",
       "items": [
@@ -135,7 +135,7 @@
     }
   },
   {
-    "name": "with disabled item",
+    "name": "con item deshabilitado",
     "data": {
       "idPrefix": "with-disabled-item",
       "items": [
@@ -159,7 +159,7 @@
     }
   },
   {
-    "name": "without href",
+    "name": "sin href",
     "data": {
       "idPrefix": "without-href",
       "items": [
@@ -181,7 +181,7 @@
     }
   },
   {
-    "name": "with active item",
+    "name": "con item activo",
     "data": {
       "idPrefix": "with-active-item",
       "items": [
@@ -205,7 +205,7 @@
     }
   },
   {
-    "name": "with target in links",
+    "name": "con target en los enlaces",
     "data": {
       "idPrefix": "with-target-in-links",
       "items": [
@@ -240,7 +240,7 @@
     }
   },
   {
-    "name": "with very long option text",
+    "name": "con un texto de item muy largo",
     "data": {
       "idPrefix": "with-very-long-option-text",
       "items": [
@@ -263,7 +263,7 @@
     }
   },
   {
-    "name": "with descriptive content",
+    "name": "con contenido descriptivo en cada item",
     "data": {
       "idPrefix": "descriptive-example",
       "items": [
@@ -295,30 +295,30 @@
     }
   },
   {
-    "name": "with idPrefix",
-    "description": "See code to display the idPrefix applied",
+    "name": "con idPrefix",
+    "description": "Muestra el código para ver el idPrefix aplicado.",
     "data": {
       "idPrefix": "site-menu-item",
       "items": [
         {
           "href": "#",
-          "text": "Option 1"
+          "text": "Opción 1"
         },
         {
           "href": "#",
-          "text": "Option 2"
+          "text": "Opción 2"
         },
         {
           "href": "#",
-          "text": "Option 3"
+          "text": "Opción 3"
         },
         {
           "href": "#",
-          "text": "Option 4"
+          "text": "Opción 4"
         },
         {
           "href": "#",
-          "text": "Option 5"
+          "text": "Opción 5"
         }
       ],
       "attributes": {
@@ -327,33 +327,33 @@
     }
   },
   {
-    "name": "with individual ids",
-    "description": "See code to display the ids applied",
+    "name": "con ids individuales",
+    "description": "Muestra el código para ver los ids aplicados.",
     "data": {
       "items": [
         {
           "href": "#",
-          "text": "Option 1",
+          "text": "Opción 1",
           "id": "option-A"
         },
         {
           "href": "#",
-          "text": "Option 2",
+          "text": "Opción 2",
           "id": "option-B"
         },
         {
           "href": "#",
-          "text": "Option 3",
+          "text": "Opción 3",
           "id": "option-C"
         },
         {
           "href": "#",
-          "text": "Option 4",
+          "text": "Opción 4",
           "id": "option-D"
         },
         {
           "href": "#",
-          "text": "Option 5",
+          "text": "Opción 5",
           "id": "option-E"
         }
       ],
@@ -363,8 +363,8 @@
     }
   },
   {
-    "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": {
       "attributes": {
         "id": "nav-id-example"
@@ -372,7 +372,7 @@
       "items": [
         {
           "href": "#",
-          "text": "Option 1",
+          "text": "Opción 1",
           "attributes": {
             "data-attribute-1": "value-A",
             "data-attribute-2": "value-B",
@@ -381,7 +381,7 @@
         },
         {
           "href": "#",
-          "text": "Option 2",
+          "text": "Opción 2",
           "attributes": {
             "data-attribute-1": "value-A",
             "data-attribute-2": "value-B",
@@ -390,7 +390,7 @@
         },
         {
           "href": "#",
-          "text": "Option 3",
+          "text": "Opción 3",
           "attributes": {
             "data-attribute-1": "value-A",
             "data-attribute-2": "value-B",
@@ -407,7 +407,7 @@
         },
         {
           "href": "#",
-          "text": "Option 4",
+          "text": "Opción 4",
           "attributes": {
             "data-attribute-1": "value-A",
             "data-attribute-2": "value-B",
@@ -416,7 +416,7 @@
         },
         {
           "href": "#",
-          "text": "Option 5",
+          "text": "Opción 5",
           "attributes": {
             "data-attribute-1": "value-A",
             "data-attribute-2": "value-B",
@@ -430,8 +430,8 @@
     }
   },
   {
-    "name": "hasNav false",
-    "description": "Use this to not wrap the component in a nav tag, assuming the component will be wrapped with a custom nav with it's own aria-label if it's needed.",
+    "name": "Sin nav",
+    "description": 'Usa el parámetro <code>"hasNav": false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.',
     "data": {
       "idPrefix": "hasnav-false",
       "hasNav": false,
@@ -455,7 +455,7 @@
     }
   },
   {
-    "name": "mixed example",
+    "name": "ejemplo mixto",
     "data": {
       "idPrefix": "mixed-example",
       "items": [