desy-html 10.2.2 → 11.0.2

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

@@ -1,375 +1,375 @@
-{% set exampleComponent = "breadcrumbs" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "items": [
-        {
-          "text": "Sección",
-          "href": "/section"
-        },
-        {
-          "text": "Sub-sección",
-          "href": "/section/sub-section"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con 1 sólo nivel",
-    "data": {
-      "items": [
-        {
-          "text": "Sección",
-          "href": "/section"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con múltiples niveles",
-    "data": {
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Sección",
-          "href": "/section"
-        },
-        {
-          "text": "Sub-sección",
-          "href": "/section/sub-section"
-        },
-        {
-          "text": "Sub Sub-sección",
-          "href": "/section/sub-section/sub-sub-section"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con cadenas muy largas",
-    "description": "Por defecto, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
-    "data": {
-      "items": [
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "/"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Último item más largo y con truncado en cadenas largas",
-    "description": 'Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.',
-    "data": {
-      "classes": "c-breadcrumbs--truncated",
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
-          "href": "/"
-        }
-      ]
-    }
-  },
-  {
-    "name": "Item a mitad sin href",
-    "data": {
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Section"
-        },
-        {
-          "text": "Sub-sección",
-          "href": "/section/sub-section"
-        },
-        {
-          "text": "Sub Sub-sección",
-          "href": "/section/sub-section/sub-sub-section"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con la última miga de pan como página actual con href",
-    "data": {
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "href": "/tramites/tema/vivienda"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con la última miga de pan como página actual sin href",
-    "data": {
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda"
-        }
-      ]
-    }
-  },
-  {
-    "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": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "href": "/tramites/tema/vivienda"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con inline en móvil",
-    "description": 'Usa <code>"inlineOnMobile":true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
-    "data": {
-      "inlineOnMobile": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo",
-          "href": "/"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con inline en desktop",
-    "description": 'Usa <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.',
-    "data": {
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
-          "href": "/"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con inline en mobile y en desktop",
-    "description": 'Usa <code>"inlineOnMobile":true</code> y <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
-    "data": {
-      "inlineOnMobile": true,
-      "inlineOnDesktop": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites",
-          "href": "/"
-        },
-        {
-          "text": "Categorías de trámites",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales y energía",
-          "href": "/"
-        },
-        {
-          "text": "Actividades industriales",
-          "href": "/"
-        },
-        {
-          "text": "Instalaciones industriales",
-          "href": "/"
-        },
-        {
-          "text": "Ayudas ligadas al autoconsumo",
-          "href": "/"
-        },
-        {
-          "text": "Programa 1 Instalaciones de autoconsumo",
-          "href": "/"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con botón atrás",
-    "data": {
-    "hasBackButton": true,
-      "items": [
-        {
-          "text": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda"
-        }
-      ]
-    }
-  },
-  {
-    "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": "Inicio",
-          "href": "/"
-        },
-        {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema"
-        },
-        {
-          "text": "Vivienda",
-          "href": "/tramites/tema/vivienda"
-        },
-        {
-          "text": "Urbanismo",
-          "href": "/tramites/tema/vivienda/urbanismo"
-        }
-      ]
-    }
-  },
-  {
-    "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": "#"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "#"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "#"
-        },
-        {
-          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
-          "href": "#"
-        }
-      ]
-    }
-  }
+{% set exampleComponent = "breadcrumbs" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "items": [
+        {
+          "text": "Sección",
+          "href": "/section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con 1 sólo nivel",
+    "data": {
+      "items": [
+        {
+          "text": "Sección",
+          "href": "/section"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con múltiples niveles",
+    "data": {
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Sección",
+          "href": "/section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        },
+        {
+          "text": "Sub Sub-sección",
+          "href": "/section/sub-section/sub-sub-section"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con cadenas muy largas",
+    "description": "Por defecto, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
+    "data": {
+      "items": [
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "/"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "/"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "/"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Último item más largo y con truncado en cadenas largas",
+    "description": 'Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.',
+    "data": {
+      "classes": "c-breadcrumbs--truncated",
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "Item a mitad sin href",
+    "data": {
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Section"
+        },
+        {
+          "text": "Sub-sección",
+          "href": "/section/sub-section"
+        },
+        {
+          "text": "Sub Sub-sección",
+          "href": "/section/sub-section/sub-sub-section"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con la última miga de pan como página actual con href",
+    "data": {
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con la última miga de pan como página actual sin href",
+    "data": {
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda"
+        }
+      ]
+    }
+  },
+  {
+    "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": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con inline en móvil",
+    "description": 'Usa <code>"inlineOnMobile":true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
+    "data": {
+      "inlineOnMobile": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con inline en desktop",
+    "description": 'Usa <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.',
+    "data": {
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con inline en mobile y en desktop",
+    "description": 'Usa <code>"inlineOnMobile":true</code> y <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con botón atrás",
+    "data": {
+    "hasBackButton": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda"
+        }
+      ]
+    }
+  },
+  {
+    "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": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema"
+        },
+        {
+          "text": "Vivienda",
+          "href": "/tramites/tema/vivienda"
+        },
+        {
+          "text": "Urbanismo",
+          "href": "/tramites/tema/vivienda/urbanismo"
+        }
+      ]
+    }
+  },
+  {
+    "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": "#"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "#"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "#"
+        },
+        {
+          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat non augue id hendrerit. Cras at iaculis sem, eu posuere tortor",
+          "href": "#"
+        }
+      ]
+    }
+  }
 ] %}