desy-html 7.3.1 → 8.0.0

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

@@ -1,56 +1,56 @@
 {% set exampleComponent = "breadcrumbs" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
       "items": [
         {
-          "text": "Section",
+          "text": "Sección",
           "href": "/section"
         },
         {
-          "text": "Sub-section",
+          "text": "Sub-sección",
           "href": "/section/sub-section"
         }
       ]
     }
   },
   {
-    "name": "with one level",
+    "name": "con 1 sólo nivel",
     "data": {
       "items": [
         {
-          "text": "Section",
+          "text": "Sección",
           "href": "/section"
         }
       ]
     }
   },
   {
-    "name": "with multiple levels",
+    "name": "con múltiples niveles",
     "data": {
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Section",
+          "text": "Sección",
           "href": "/section"
         },
         {
-          "text": "Sub-section",
+          "text": "Sub-sección",
           "href": "/section/sub-section"
         },
         {
-          "text": "Sub Sub-section",
+          "text": "Sub Sub-sección",
           "href": "/section/sub-section/sub-sub-section"
         }
       ]
     }
   },
   {
-    "name": "with very large strings",
+    "name": "con cadenas muy largas",
     "data": {
       "items": [
         {
@@ -73,151 +73,151 @@
     }
   },
   {
-    "name": "middle item without href",
+    "name": "Item a mitad sin href",
     "data": {
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
           "text": "Section"
         },
         {
-          "text": "Sub-section",
+          "text": "Sub-sección",
           "href": "/section/sub-section"
         },
         {
-          "text": "Sub Sub-section",
+          "text": "Sub Sub-sección",
           "href": "/section/sub-section/sub-sub-section"
         }
       ]
     }
   },
   {
-    "name": "with last breadcrumb as current page with href",
+    "name": "con la última miga de pan como página actual con href",
     "data": {
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Passports, travel and living abroad",
-          "href": "/browse/abroad"
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
         },
         {
-          "text": "Travel abroad",
-          "href": "/browse/travel/abroad"
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
         }
       ]
     }
   },
   {
-    "name": "with last breadcrumb as current page without href",
+    "name": "con la última miga de pan como página actual sin href",
     "data": {
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Passports, travel and living abroad",
-          "href": "/browse/abroad"
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
         },
         {
-          "text": "Travel abroad"
+          "text": "Vivienda"
         }
       ]
     }
   },
   {
-    "name": "with collapse on mobile",
-    "description": "See in small widths to collapse middle items.",
+    "name": "con colapsar en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
     "data": {
       "collapseOnMobile": true,
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Education, training and skills",
-          "href": "/education"
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
         },
         {
-          "text": "Special educational needs and disability",
-          "href": "/education/special-educational-needs-and-disability"
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
         }
       ]
     }
   },
   {
-    "name": "with backbutton",
+    "name": "con botón atrás",
     "data": {
     "hasBackButton": true,
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Passports, travel and living abroad",
-          "href": "/browse/abroad"
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
         },
         {
-          "text": "Travel abroad"
+          "text": "Vivienda"
         }
       ]
     }
   },
   {
-    "name": "with backbutton and collapse on mobile",
-    "description": "See in small widths to collapse middle items.",
+    "name": "con botón atrás y colapsar en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se colapsan los items intermedios y sólo se muestran el primero y último.",
     "data": {
       "collapseOnMobile": true,
       "hasBackButton": true,
       "items": [
         {
-          "text": "Home",
+          "text": "Inicio",
           "href": "/"
         },
         {
-          "text": "Education, training and skills",
-          "href": "/education"
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
         },
         {
-          "text": "Special educational needs and disability",
-          "href": "/education/special-educational-needs-and-disability"
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
         },
         {
-          "text": "Travel abroad",
-          "href": "/browse/abroad"
+          "text": "Urbanismo",
+          "href": "/tramites/tema/vivienda/urbanismo"
         }
       ]
     }
   },
   {
-    "name": "with backbutton and truncated modifier class",
+    "name": "con botón atrás y la clase modificadora para truncar texto",
     "data": {
       "hasBackButton": true,
       "classes": "c-breadcrumbs--truncated",
       "items": [
         {
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
+          "href": "#"
         },
         {
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
+          "href": "#"
         },
         {
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
+          "href": "#"
         },
         {
           "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
+          "href": "#"
         }
       ]
     }

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

@@ -1,64 +1,64 @@
 {% set exampleComponent = "button" %}
 {% set examples =  [
   {
-    "name": "default",
+    "name": "por defecto",
     "data": {
-      "text": "Default"
+      "text": "Por defecto"
     }
   },
   {
-    "name": "default with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "por defecto con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "ds-active"
     }
   },
   {
-    "name": "default with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "por defecto con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
-      "text": "Hovered",
+      "text": "Hover",
       "classes": "ds-hover"
     }
   },
   {
-    "name": "default with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "por defecto con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
-      "text": "Focussed",
+      "text": "Focus",
       "classes": "ds-focus"
     }
   },
   {
-    "name": "default disabled",
+    "name": "por defecto deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true
     }
   },
   {
-    "name": "primary",
+    "name": "primario",
     "data": {
-      "text": "Primary",
+      "text": "Primario",
       "classes": "c-button--primary"
     }
   },
   {
-    "name": "primary with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "primario con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button--primary ds-active"
     }
   },
   {
-    "name": "primary with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "primario con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -66,8 +66,8 @@
     }
   },
   {
-    "name": "primary with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "primario con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -75,32 +75,32 @@
     }
   },
   {
-    "name": "primary disabled",
+    "name": "primario deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--primary"
     }
   },
   {
-    "name": "alert",
+    "name": "alerta",
     "data": {
-      "text": "Alert",
+      "text": "Alerta",
       "classes": "c-button--alert"
     }
   },
   {
-    "name": "alert with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "alerta con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button--alert ds-active"
     }
   },
   {
-    "name": "alert with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "alerta con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -108,8 +108,8 @@
     }
   },
   {
-    "name": "alert with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "alerta con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -117,32 +117,32 @@
     }
   },
   {
-    "name": "alert disabled",
+    "name": "alerta deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--alert"
     }
   },
   {
-    "name": "transparent",
+    "name": "transparente",
     "data": {
-      "text": "Transparent",
+      "text": "Transparente",
       "classes": "c-button--transparent"
     }
   },
   {
-    "name": "transparent with active state",
-    "description": "Simulate triggering the :active CSS pseudo-class",
+    "name": "transparente con estado activo",
+    "description": 'Simula activar la pseudoclase de CSS <code>:active</code>',
     "data": {
       "name": "active",
-      "text": "Active",
+      "text": "Activo",
       "classes": "c-button--transparent ds-active"
     }
   },
   {
-    "name": "transparent with hover state",
-    "description": "Simulate triggering the :hover CSS pseudo-class",
+    "name": "transparente con estado hover",
+    "description": 'Simula activar la pseudoclase de CSS <code>:hover</code>',
     "data": {
       "name": "hover",
       "text": "Hover",
@@ -150,8 +150,8 @@
     }
   },
   {
-    "name": "transparent with focus state",
-    "description": "Simulate triggering the :focus CSS pseudo-class",
+    "name": "transparente con estado focus",
+    "description": 'Simula activar la pseudoclase de CSS <code>:focus</code>',
     "data": {
       "name": "focus",
       "text": "Focus",
@@ -159,67 +159,67 @@
     }
   },
   {
-    "name": "transparent disabled",
+    "name": "transparente deshabilitado",
     "data": {
-      "text": "Disabled",
+      "text": "Deshabilitado",
       "disabled": true,
       "classes": "c-button--transparent"
     }
   },
   {
-    "name": "small",
+    "name": "peque",
     "data": {
-      "text": "Small",
+      "text": "Peque",
       "classes": "c-button--sm"
     }
   },
   {
-    "name": "small has selection",
+    "name": "peque tiene selección",
     "data": {
-      "text": "Small has selection",
+      "text": "Peque tiene selección",
       "classes": "c-button--sm c-button--has-selection"
     }
   },
   {
-    "name": "link",
+    "name": "enlace",
     "data": {
-      "text": "Link button",
+      "text": "Botón enlace",
       "href": "/"
     }
   },
   {
-    "name": "link with target blank",
+    "name": "botón enlace con target blank",
     "data": {
-      "text": "Link button with target",
+      "text": "Botón enlace con target",
       "href": "http://www.google.com",
       "target": "_blank"
     }
   },
   {
-    "name": "link disabled",
+    "name": "enlace deshabilitado",
     "data": {
-      "text": "Disabled link button",
+      "text": "Botón enlace deshabilitado",
       "href": "/",
       "disabled": true
     }
   },
   {
-    "name": "button with right icon",
+    "name": "botón con icono a la derecha",
     "data": {
-      "html": 'Button with icon<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
+      "html": 'Botón con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/"
     }
   },
   {
-    "name": "button with left icon",
+    "name": "botón con icono a la izquierda",
     "data": {
-      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>Button with icon',
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>Botón con icono',
       "href": "/"
     }
   },
   {
-    "name": "backbutton",
-    "description": "Transparent with left icon",
+    "name": "botón atrás",
+    "description": "Transparente con icono a la izquierda",
     "data": {
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"></path></svg>Volver',
       "classes": "c-button--transparent",
@@ -227,8 +227,8 @@
     }
   },
   {
-    "name": "forwardbutton",
-    "description": "Transparent with right icon",
+    "name": "botón adelante",
+    "description": "Transparente con icono a la derecha",
     "data": {
       "html": 'Ver más<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"></path></svg>',
       "classes": "c-button--transparent",
@@ -236,7 +236,7 @@
     }
   },
   {
-    "name": "button with only icon",
+    "name": "botón sólo con icono",
     "data": {
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center my-1" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/",
@@ -244,7 +244,7 @@
     }
   },
   {
-    "name": "button small with only icon",
+    "name": "button peque sólo con icono",
     "data": {
       "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"  class="self-center my-1" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
       "href": "/",
@@ -256,21 +256,21 @@
     "data": {
       "element": "input",
       "name": "send-form",
-      "text": "Submit"
+      "text": "Enviar"
     }
   },
   {
-    "name": "input disabled",
+    "name": "input deshabilitado",
     "data": {
       "element": "input",
-      "text": "Submit",
+      "text": "Enviar",
       "disabled": true
     }
   },
   {
-    "name": "prevent double click",
+    "name": "prevenir doble click",
     "data": {
-      "text": "Submit",
+      "text": "Enviar",
       "preventDoubleClick": true
     }
   }