desy-html 10.2.0 → 10.2.2

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

@@ -1,386 +1,386 @@
-{% set exampleComponent = "accordion" %}
-{% set examples =  [
-  {
-    "name": "Por defecto",
-    "description": 'Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.',
-    "data": {
-      "idPrefix": "accordion-example",
-      "headingLevel": 3,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Permite múltiples",
-    "description": 'Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.',
-    "data": {
-      "idPrefix": "allowmultiple-example",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Permite cerrar",
-    "description": 'Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.',
-    "data": {
-      "idPrefix": "allowtoggle-example",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
-    "data": {
-      "idPrefix": "with-one-item-opened-example",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "open": true
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ],
-      "attributes": {
-        "id": "accordion"
-      }
-    }
-  },
-  {
-    "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
-    "data": {
-      "idPrefix": "with-2-items-opened-example",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "open": true
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "open": true
-        }
-      ],
-      "attributes": {
-        "id": "accordion-multiple"
-      }
-    }
-  },
-  {
-    "name": "Deshabilitados con allowToggle y allowMultiple",
-    "description": 'Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>"disabled": true</code>.',
-    "data": {
-      "idPrefix": "accordion-disabled",
-      "headingLevel": 3,
-      "allowToggle": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón no deshabilitado",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón deshabilitado",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "disabled": true
-        },
-        {
-          "headerText": "Item de acordeón deshabilitado y abierto",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "disabled": true,
-          "open": true
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado",
-    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. 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": {
-      "idPrefix": "heading-example",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado de nivel 4",
-    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.',
-    "data": {
-      "idPrefix": "accordion-heading-level-example",
-      "headingLevel": 4,
-      "heading": {
-        "text": "Este encabezado con <h4>"
-      },
-      "items": [
-        {
-          "headerText": "Este Item 1 con <h5>",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Este Item 2 con <h5>",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Este Item 3 con <h5>",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con encabezado y controles de Mostrar todo",
-    "description": 'Usa el parámetro <code>"showControl": true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.',
-    "data": {
-      "idPrefix": "heading-and-show-controls-example",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "showControl": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "open": true
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Mostrar todo u ocultar todo con JavaScript",
-    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-button-js", true)</code> para mostrar todos los items expandidos.',
-    "data": {
-      "idPrefix": "show-all-accordion-example-js",
-      "id": "show-all-accordion-button-js",
-      "headingLevel": 3,
-      "heading": {
-        "text": "Encabezado de acordeón"
-      },
-      "showControl": true,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "open": true
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con controles personalizados para mostrar/ocultar",
-    "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',
-    "data": {
-      "idPrefix": "accordion-show-hide",
-      "headingLevel": 3,
-      "allowMultiple": true,
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "show": {
-            "text": "Expandir detalles"
-          },
-          "hide": {
-            "text": "Contraer"
-          }
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "show": {
-            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
-          },
-          "hide": {
-            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
-          }
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "show": {
-            "text": ""
-          },
-          "hide": {
-            "text": ""
-          }
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con HTML en las cabeceras de los items",
-    "description": 'Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.',
-    "data": {
-      "idPrefix": "accordion-example-pointer-events-none",
-      "headingLevel": 3,
-      "items": [
-        {
-          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con clases de CSS aplicadas",
-    "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
-    "data": {
-      "idPrefix": "classes-example",
-      "headingLevel": 3,
-      "classes": "px-lg pt-base border-t border-b border-neutral-base",
-      "heading": {
-        "text": "Accordion example",
-        "classes": "c-h2 mb-lg uppercase"
-      },
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-white rounded-lg h-40"></div></div>',
-          "classes": "p-sm bg-primary-light",
-          "open": true
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
-        }
-      ]
-    }
-  },
-  {
-    "name": "Con atributos aplicados",
-    "description": 'Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.',
-    "data": {
-      "idPrefix": "attributes-example",
-      "headingLevel": 3,
-      "attributes": {
-        "id": "accordion-test"
-      },
-      "items": [
-        {
-          "headerText": "Item de acordeón 1",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "attributes": {
-            "data-attr": "accordion-item-test-a"
-          }
-        },
-        {
-          "headerText": "Item de acordeón 2",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "attributes": {
-            "data-attr": "accordion-item-test-b"
-          }
-        },
-        {
-          "headerText": "Item de acordeón 3",
-          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
-          "attributes": {
-            "data-attr": "accordion-item-test-c"
-          }
-        }
-      ]
-    }
-  }
-] %}
+{% set exampleComponent = "accordion" %}
+{% set examples =  [
+  {
+    "name": "Por defecto",
+    "description": 'Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.',
+    "data": {
+      "idPrefix": "accordion-example",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Permite múltiples",
+    "description": 'Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.',
+    "data": {
+      "idPrefix": "allowmultiple-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Permite cerrar",
+    "description": 'Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.',
+    "data": {
+      "idPrefix": "allowtoggle-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con un item abierto",
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
+    "data": {
+      "idPrefix": "with-one-item-opened-example",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ],
+      "attributes": {
+        "id": "accordion"
+      }
+    }
+  },
+  {
+    "name": "Con 2 items abiertos",
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
+    "data": {
+      "idPrefix": "with-2-items-opened-example",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        }
+      ],
+      "attributes": {
+        "id": "accordion-multiple"
+      }
+    }
+  },
+  {
+    "name": "Deshabilitados con allowToggle y allowMultiple",
+    "description": 'Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>"disabled": true</code>.',
+    "data": {
+      "idPrefix": "accordion-disabled",
+      "headingLevel": 3,
+      "allowToggle": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón no deshabilitado",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón deshabilitado",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "disabled": true
+        },
+        {
+          "headerText": "Item de acordeón deshabilitado y abierto",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "disabled": true,
+          "open": true
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado",
+    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. 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": {
+      "idPrefix": "heading-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado de nivel 4",
+    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.',
+    "data": {
+      "idPrefix": "accordion-heading-level-example",
+      "headingLevel": 4,
+      "heading": {
+        "text": "Este encabezado con <h4>"
+      },
+      "items": [
+        {
+          "headerText": "Este Item 1 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Este Item 2 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Este Item 3 con <h5>",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con encabezado y controles de Mostrar todo",
+    "description": 'Usa el parámetro <code>"showControl": true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.',
+    "data": {
+      "idPrefix": "heading-and-show-controls-example",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-button-js", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "idPrefix": "show-all-accordion-example-js",
+      "id": "show-all-accordion-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con controles personalizados para mostrar/ocultar",
+    "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',
+    "data": {
+      "idPrefix": "accordion-show-hide",
+      "headingLevel": 3,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "show": {
+            "text": "Expandir detalles"
+          },
+          "hide": {
+            "text": "Contraer"
+          }
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "show": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          },
+          "hide": {
+            "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
+          }
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "show": {
+            "text": ""
+          },
+          "hide": {
+            "text": ""
+          }
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con HTML en las cabeceras de los items",
+    "description": 'Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.',
+    "data": {
+      "idPrefix": "accordion-example-pointer-events-none",
+      "headingLevel": 3,
+      "items": [
+        {
+          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con clases de CSS aplicadas",
+    "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
+    "data": {
+      "idPrefix": "classes-example",
+      "headingLevel": 3,
+      "classes": "px-lg pt-base border-t border-b border-neutral-base",
+      "heading": {
+        "text": "Accordion example",
+        "classes": "c-h2 mb-lg uppercase"
+      },
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-white rounded-lg h-40"></div></div>',
+          "classes": "p-sm bg-primary-light",
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
+  {
+    "name": "Con atributos aplicados",
+    "description": 'Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.',
+    "data": {
+      "idPrefix": "attributes-example",
+      "headingLevel": 3,
+      "attributes": {
+        "id": "accordion-test"
+      },
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "attributes": {
+            "data-attr": "accordion-item-test-a"
+          }
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "attributes": {
+            "data-attr": "accordion-item-test-b"
+          }
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "attributes": {
+            "data-attr": "accordion-item-test-c"
+          }
+        }
+      ]
+    }
+  }
+] %}