desy-html 12.1.0 → 13.0.0

package/docs/ds/_ds.example.item.njk

@@ -1,177 +1,177 @@
-{% from "components/item/_macro.item.njk" import componentItem %}
-
-<div class="grid lg:grid-cols-2 gap-xl mb-lg">
-  <div>
-    {{ componentItem({
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      }
-    })  }}
-  </div>
-  <div>
-    {{ componentItem({
-      "title": {
-        "html": "Registro de alta de la asociación"
-      },
-      "description": {
-        "html": "Documento acreditativo de registro de alta de la <a href=\" # \" class=\" c-link \">asociación</a>"
-      }
-    })  }}
-  </div>
-  <div>
-    {{ componentItem({
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "items": [
-        {
-          "text": "Desde modelo"
-        },
-        {
-          "text": "Obligatorio previo a resolución"
-        },
-        {
-          "text": "Condicionado"
-        }
-      ]
-    })  }}
-  </div>
-  <div>
-    {{ componentItem({
-      "title": {
-        "text": "Registro de alta de la asociación"
-      },
-      "content": {
-        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
-        "classes": "text-neutral-dark"
-      }
-    })  }}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Registro de alta de la asociación"
-      }
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% from "components/item/_macro.item.njk" import componentItem %}
-    {{ componentItem({
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "isDraggable": true
-    })  }}
-  </div>
-</div>
-<div class="grid lg:grid-cols-1 gap-xl mb-lg">
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "isLocked": true
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Resolución de años anteriores"
-      },
-      "content": {
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      }
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA"
-      },
-      "content": {
-        "html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
-      },
-      "icon": {
-        "type": "link"
-      }
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Datos de la empresa"
-      },
-      "items": [
-        {
-          "text": "12 campos"
-        },
-        {
-          "text": "Con dependencia"
-        },
-        {
-          "text": "Tabla de datos"
-        }
-      ],
-      "icon": {
-        "type": "clipboard"
-      }
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Resolución de años anteriores"
-      },
-      "content": {
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      },
-      "isDraggable": true
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
-  <div>
-    {% call componentItem({
-      "title": {
-        "text": "Registro de alta de la asociación",
-        "classes": "font-bold"
-      },
-      "description": {
-        "text": "Documento acreditativo de registro de alta de la asociación"
-      },
-      "items": [
-        {
-          "text": "Desde modelo"
-        },
-        {
-          "text": "Obligatorio previo a resolución"
-        },
-        {
-          "text": "Condicionado"
-        }
-      ],
-      "content": {
-        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
-        "classes": "text-neutral-dark"
-      }
-    })  %}
-        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
-    {% endcall %}
-  </div>
+{% from "components/item/_macro.item.njk" import componentItem %}
+
+<div class="grid lg:grid-cols-2 gap-xl mb-lg">
+  <div>
+    {{ componentItem({
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentItem({
+      "title": {
+        "html": "Registro de alta de la asociación"
+      },
+      "description": {
+        "html": "Documento acreditativo de registro de alta de la <a href=\" # \" class=\" c-link \">asociación</a>"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentItem({
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "items": [
+        {
+          "text": "Desde modelo"
+        },
+        {
+          "text": "Obligatorio previo a resolución"
+        },
+        {
+          "text": "Condicionado"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentItem({
+      "title": {
+        "text": "Registro de alta de la asociación"
+      },
+      "content": {
+        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
+        "classes": "text-neutral-dark"
+      }
+    })  }}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Registro de alta de la asociación"
+      }
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% from "components/item/_macro.item.njk" import componentItem %}
+    {{ componentItem({
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "isDraggable": true
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "isLocked": true
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Resolución de años anteriores"
+      },
+      "content": {
+        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      }
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA"
+      },
+      "content": {
+        "html": "<a class=\" c-link break-all \" href=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+      },
+      "icon": {
+        "type": "link"
+      }
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Datos de la empresa"
+      },
+      "items": [
+        {
+          "text": "12 campos"
+        },
+        {
+          "text": "Con dependencia"
+        },
+        {
+          "text": "Tabla de datos"
+        }
+      ],
+      "icon": {
+        "type": "clipboard"
+      }
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Resolución de años anteriores"
+      },
+      "content": {
+        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      },
+      "isDraggable": true
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentItem({
+      "title": {
+        "text": "Registro de alta de la asociación",
+        "classes": "font-bold"
+      },
+      "description": {
+        "text": "Documento acreditativo de registro de alta de la asociación"
+      },
+      "items": [
+        {
+          "text": "Desde modelo"
+        },
+        {
+          "text": "Obligatorio previo a resolución"
+        },
+        {
+          "text": "Condicionado"
+        }
+      ],
+      "content": {
+        "html": "Modelo: <a class=\" c-link break-all \" href=\" # \">Modelo de fianza (PDF, 20Kb)</a> ",
+        "classes": "text-neutral-dark"
+      }
+    })  %}
+        <button class=" c-button c-button--sm c-button--transparent ">Eliminar</button> <button class=" c-button c-button--sm c-button--transparent ">Editar</button>
+    {% endcall %}
+  </div>
 </div>

package/docs/ds/_ds.example.layout-escritorio.njk

@@ -1,39 +1,39 @@
-<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
-  <!-- copiar a a partir de aqui -->
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
-    <div class="col-span-2 lg:col-span-4">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-2">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-2">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-3">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-3">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
-    </div>
-  </div>
-  <!-- copiar hasta aqui -->
+<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
+  <!-- copiar a a partir de aqui -->
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
+    <div class="col-span-2 lg:col-span-4">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-2">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-2">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-3">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-3">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
+    </div>
+  </div>
+  <!-- copiar hasta aqui -->
 </div>

package/docs/ds/_ds.example.layout-movil.njk

@@ -1,15 +1,15 @@
-<div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
-  <!-- copiar a a partir de aqui -->
-  <div class="grid grid-cols-2 gap-lg col-span-1">
-    <div class="col-span-2">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
-    </div>
-    <div class="col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
-    </div>
-    <div class="col-span-1">
-      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
-    </div>
-  </div>
-  <!-- copiar hasta aqui -->
+<div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
+  <!-- copiar a a partir de aqui -->
+  <div class="grid grid-cols-2 gap-lg col-span-1">
+    <div class="col-span-2">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
+    </div>
+    <div class="col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
+    </div>
+    <div class="col-span-1">
+      <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
+    </div>
+  </div>
+  <!-- copiar hasta aqui -->
 </div>

package/docs/ds/_ds.example.layout-sidebar.njk

@@ -1,12 +1,12 @@
-<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
-<!-- copiar a a partir de aqui -->
-  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
-    <div class="col-span-2 lg:col-span-3">
-      Zona de contenido (75% en escritorio, 100% en móvil)
-    </div>
-    <div class="col-span-2 lg:col-span-1">
-      Barra lateral (25% en escritorio, 100% en móvil)
-    </div>
-  </div>
-  <!-- copiar hasta aqui -->
+<div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
+<!-- copiar a a partir de aqui -->
+  <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
+    <div class="col-span-2 lg:col-span-3">
+      Zona de contenido (75% en escritorio, 100% en móvil)
+    </div>
+    <div class="col-span-2 lg:col-span-1">
+      Barra lateral (25% en escritorio, 100% en móvil)
+    </div>
+  </div>
+  <!-- copiar hasta aqui -->
 </div>