desy-html 10.2.2 → 11.0.1

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

@@ -1,263 +1,263 @@
-{% set exampleComponent = "item" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      }
-    }
-  },
-  {
-    "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>"
-      }
-    }
-  },
-  {
-    "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": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      }
-    }
-  },
-  {
-    "name": "con descripción",
-    "data": {
-      "title":{
-        "html": "Registro de alta de la asociación"
-      },
-      "description":{
-        "html": "Documento acreditativo de registro de alta de la <strong class=\" font-bold \">asociación</strong>"
-      }
-    }
-  },
-  {
-    "name": "con items",
-    "data": {
-      "title":{
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "items": [
-        {
-          "text": "Desde modelo"
-        },
-        {
-          "text": "Obligatorio previo a resolución"
-        },
-        {
-          "text": "Condicionado"
-        }
-      ]
-    }
-  },
-  {
-    "name": "con contenido",
-    "data": {
-      "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"
-      }
-    }
-  },
-  {
-    "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",
-        "attributes": {
-          "id": "t1"
-        }
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-1a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-1a t1">Eliminar</button></li><li><button id="b-1b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-1b t1">Editar</button></li></ul>'
-    }
-  },
-  {
-    "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"
-      },
-      "isDraggable": 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",
-        "attributes": {
-          "id": "t2"
-        }
-      },
-      "isLocked": true,
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-2a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-2a t2">Eliminar</button></li><li><button id="b-2b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-2b t2">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "con icono tipo: documento",
-    "data": {
-      "title": {
-        "text": "Resolución de años anteriores",
-        "attributes": {
-          "id": "t3"
-        }
-      },
-      "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "con icono tipo: enlace",
-    "data": {
-      "title": {
-        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
-        "attributes": {
-          "id": "t4"
-        }
-      },
-      "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"
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-4a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-4a t4">Eliminar</button></li><li><button id="b-4b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-4b t4">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "con icono tipo: portapapeles",
-    "data": {
-      "title": {
-        "text": "Datos de la empresa",
-        "attributes": {
-          "id": "t5"
-        }
-      },
-      "items": [
-        {
-          "text": "12 campos"
-        },
-        {
-          "text": "Con dependencia"
-        },
-        {
-          "text": "Tabla de datos"
-        }
-      ],
-      "icon": {
-        "type": "clipboard"
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-5a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-5a t5">Eliminar</button></li><li><button id="b-5b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-5b t5">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "con icono personalizado",
-    "data": {
-      "title": {
-        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
-        "attributes": {
-          "id": "t6"
-        }
-      },
-      "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": {
-        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de papelera" focusable="false" role="img"><path d="M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z" fill="currentColor" transform="scale(2)"/></svg>'
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
-    }
-  },
-  {
-    "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",
-        "attributes": {
-          "id": "t3"
-        }
-      },
-      "content":{
-        "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."
-      },
-      "icon": {
-        "type": "document",
-        "containerClasses": "self-start h-full mr-base"
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "arrastrable con icono tipo: documento",
-    "data": {
-      "title": {
-        "text": "Resolución de años anteriores",
-        "attributes": {
-          "id": "t7"
-        }
-      },
-      "content":{
-        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      },
-      "isDraggable": true,
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-7a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-7a t7">Eliminar</button></li><li><button id="b-7b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-7b t7">Editar</button></li></ul>'
-    }
-  },
-  {
-    "name": "con clases, descripción, items, contenido y acciones",
-    "data": {
-      "title":{
-        "text": "Registro de alta de la asociación",
-        "classes": "font-bold",
-        "attributes": {
-          "id": "t8"
-        }
-      },
-      "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"
-      },
-      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-8a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-8a t8">Eliminar</button></li><li><button id="b-8b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-8b t8">Editar</button></li></ul>'
-    }
-  }
+{% set exampleComponent = "item" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      }
+    }
+  },
+  {
+    "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>"
+      }
+    }
+  },
+  {
+    "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": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      }
+    }
+  },
+  {
+    "name": "con descripción",
+    "data": {
+      "title":{
+        "html": "Registro de alta de la asociación"
+      },
+      "description":{
+        "html": "Documento acreditativo de registro de alta de la <strong class=\" font-bold \">asociación</strong>"
+      }
+    }
+  },
+  {
+    "name": "con items",
+    "data": {
+      "title":{
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "items": [
+        {
+          "text": "Desde modelo"
+        },
+        {
+          "text": "Obligatorio previo a resolución"
+        },
+        {
+          "text": "Condicionado"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con contenido",
+    "data": {
+      "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"
+      }
+    }
+  },
+  {
+    "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",
+        "attributes": {
+          "id": "t1"
+        }
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-1a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-1a t1">Eliminar</button></li><li><button id="b-1b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-1b t1">Editar</button></li></ul>'
+    }
+  },
+  {
+    "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"
+      },
+      "isDraggable": 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",
+        "attributes": {
+          "id": "t2"
+        }
+      },
+      "isLocked": true,
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-2a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-2a t2">Eliminar</button></li><li><button id="b-2b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-2b t2">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "con icono tipo: documento",
+    "data": {
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "con icono tipo: enlace",
+    "data": {
+      "title": {
+        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
+        "attributes": {
+          "id": "t4"
+        }
+      },
+      "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"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-4a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-4a t4">Eliminar</button></li><li><button id="b-4b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-4b t4">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "con icono tipo: portapapeles",
+    "data": {
+      "title": {
+        "text": "Datos de la empresa",
+        "attributes": {
+          "id": "t5"
+        }
+      },
+      "items": [
+        {
+          "text": "12 campos"
+        },
+        {
+          "text": "Con dependencia"
+        },
+        {
+          "text": "Tabla de datos"
+        }
+      ],
+      "icon": {
+        "type": "clipboard"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-5a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-5a t5">Eliminar</button></li><li><button id="b-5b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-5b t5">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "con icono personalizado",
+    "data": {
+      "title": {
+        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
+        "attributes": {
+          "id": "t6"
+        }
+      },
+      "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": {
+        "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"  width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de papelera" focusable="false" role="img"><path d="M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z" fill="currentColor" transform="scale(2)"/></svg>'
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-6a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-6a t6">Eliminar</button></li><li><button id="b-6b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-6b t6">Editar</button></li></ul>'
+    }
+  },
+  {
+    "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",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "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."
+      },
+      "icon": {
+        "type": "document",
+        "containerClasses": "self-start h-full mr-base"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-3a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-3a t3">Eliminar</button></li><li><button id="b-3b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-3b t3">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "arrastrable con icono tipo: documento",
+    "data": {
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t7"
+        }
+      },
+      "content":{
+        "html": "<a class=\" c-link break-all \" href=\" # \">Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      },
+      "isDraggable": true,
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-7a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-7a t7">Eliminar</button></li><li><button id="b-7b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-7b t7">Editar</button></li></ul>'
+    }
+  },
+  {
+    "name": "con clases, descripción, items, contenido y acciones",
+    "data": {
+      "title":{
+        "text": "Registro de alta de la asociación",
+        "classes": "font-bold",
+        "attributes": {
+          "id": "t8"
+        }
+      },
+      "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"
+      },
+      "caller": '<ul class="flex flex-wrap gap-sm"><li><button id="b-8a" class=" c-button c-button--sm c-button--transparent " aria-labelledby="b-8a t8">Eliminar</button></li><li><button id="b-8b" class="c-button c-button--sm c-button--transparent" aria-labelledby="b-8b t8">Editar</button></li></ul>'
+    }
+  }
 ] %}

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

@@ -1,3 +1,3 @@
-{% macro componentItem(params) %}
-{% include "./_template.item.njk" %}
-{% endmacro %}
+{% macro componentItem(params) %}
+{% include "./_template.item.njk" %}
+{% endmacro %}