desy-html 10.1.0 → 10.2.0

package/config/tailwind.config.js

@@ -23,8 +23,8 @@ export const theme = {
         md: '768px',
         lg: '1024px',
         xl: '1280px',
-        // 2xl: '1680px',
-        // 3xl: '1920px',
+        // 2xl: '1536px',
+        // 3xl: '1900px',
     },
     extend: {
         colors: {

package/docs/ds/_ds.section.layout.njk

@@ -25,8 +25,8 @@
   </ul>
   <p class="c-paragraph-base">Puedes añadir breakpoints extra para aprovechar más la anchura del viewport. Esto es útil para aplicaciones web basadas en tablas donde se necesite más anchura para que quepan más columnas en las tablas. Basta con añadir al archivo tailwind.config.js de tu proyecto alguna de estas líneas de código:</p>
   <ul class="c-ul">
-    <li><code>2xl: '1680px',</code></li>
-    <li><code>3xl: '1920px',</code></li>
+    <li><code>2xl: '1536px',</code></li>
+    <li><code>3xl: '1900px',</code></li>
   </ul>
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}

package/docs/index.html

@@ -38,6 +38,19 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.10.2.0</h3>
+  <ul class="text-sm">
+    <li>Menu horizontal improvements and modifiers.</li>
+    <li>Links list improvements and icon customizations.</li>
+    <li>Added new params to style collapsible elements.</li>
+    <li>Table now is stacked in mobile.</li>
+    <li>Improvements in additional breakpoints.</li>
+    <li>Footer columns fixes.</li>
+  </ul>
+  <h3>v.10.1.1</h3>
+  <ul class="text-sm">
+    <li>Fixed columns in Footer navigation items.</li>
+  </ul>
   <h3>v.10.1.0</h3>
   <ul class="text-sm">
     <li>Added new param in Footer to improve columns.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

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

@@ -126,6 +126,14 @@
       "caller": withIconContent("1").val | indent(4)
     }
   },
+  {
+    "name": "sin bordes ni padding y con todo el card clicable",
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "relative",
+      "caller": fullContent | indent(4)
+    }
+  },
   {
     "name": "barra lateral simple",
     "data": {

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

@@ -54,5 +54,24 @@
       cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
     }
+  },
+  {
+    "name": "con clases aplicadas",
+    "description": "Puedes añadir clases a todos los elementos para cambiar su apariencia",
+    "data": {
+      "id": "collapsible-default",
+      "headerText": "Cabecera del collapsible",
+      "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.",
+      "classes": "p-base bg-primary-light flex flex-wrap gap-base",
+      "buttonClasses": "c-button self-start",
+      "showClasses": "!hidden",
+      "hideClasses": "!hidden",
+      "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
+    }
   }
 ] %}

package/src/templates/components/collapsible/_template.collapsible.njk

@@ -1,10 +1,10 @@
 <!-- collapsible -->
 <div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="false" {% else %} data-expanded="true" {% endif %} data-module="c-collapsible">
-  <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
-    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
-    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
+  <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="{%- if params.buttonClasses %} {{ params.buttonClasses }}{% else -%} group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{% endif %}" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
+    <span class="c-collapsible__show {% if params.showClasses %} {{ params.showClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="false">Mostrar</span>
+    <span class="c-collapsible__hide {% if params.hideClasses %} {{ params.hideClasses }}{% else -%} absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none{% endif %}" aria-hidden="true">Ocultar</span>
   </button>
-  <div aria-hidden="true" class="c-collapsible__content py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
+  <div aria-hidden="true" class="c-collapsible__content {% if params.contentClasses %} {{ params.contentClasses }}{% else -%} py-sm{% endif %}" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
     {{ params.html | safe }}
     {% else %}

package/src/templates/components/collapsible/params.collapsible.yaml

@@ -23,6 +23,22 @@ params:
   type: boolean
   required: false
   description: If true, collapsible element will be expanded.
+- name: buttonClasses
+  type: string
+  required: false
+  description: Classes to add to the button element.
+- name: showClasses
+  type: string
+  required: false
+  description: Classes to add to the show element.
+- name: hideClasses
+  type: string
+  required: false
+  description: Classes to add to the hide element.
+- name: contentClasses
+  type: string
+  required: false
+  description: Classes to add to the content element.
 - name: classes
   type: string
   required: false

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

@@ -207,7 +207,7 @@
   },
   {
     "name": "navegación con 3 secciones en columnas iguales",
-    "description": 'Usa el parámetro <code>navigation.columns</code> para añadir columnas de navegación.',
+    "description": 'Usa el parámetro <code>navigation.items</code> para añadir secciones de navegación organizadas en columnas.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -332,8 +332,8 @@
     }
   },
   {
-    "name": "navegación con 3 secciones, una de ellas con 2 columnas",
-    "description": 'Usa el parámetro <code>navigation.columns</code> y <code>navigation.classes</code> para añadir columnas de navegación y controlar la anchura de cada una de ellas.',
+    "name": "navegación con 2 secciones, una de ellas con 3 columnas",
+    "description": 'Usa el parámetro <code>navigation.columns</code> y <code>navigation.classes</code> para añadir columnas y controlar la anchura de cada una de las secciones de la navegación. Puedes añadir hasta 6 columnas en cada sección.',
     "data": {
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
@@ -341,68 +341,85 @@
       "navigation": [
         {
           "title": "Lista de enlaces 1",
-          "columns": 2,
-          "classes": "basis-2/4 -mx-base px-base",
+          "columns": 3,
+          "classes": "basis-3/4 -mx-base px-base",
           "items": [
             {
-              "href": "#1",
+              "href": "#",
               "text": "Navigation item 1"
             },
             {
-              "href": "#2",
+              "href": "#",
               "text": "Navigation item 2"
             },
             {
-              "href": "#3",
+              "href": "#",
               "text": "Navigation item 3"
             },
             {
-              "href": "#4",
+              "href": "#",
               "text": "Navigation item 4"
             },
             {
-              "href": "#5",
+              "href": "#",
               "text": "Navigation item 5"
             },
             {
-              "href": "#6",
+              "href": "#",
               "text": "Navigation item 6"
-            }
-          ]
-        },
-        {
-          "title": "Lista de enlaces 2",
-          "columns": 1,
-          "classes": "basis-1/4 -mx-base px-base",
-          "items": [
+            },
             {
-              "href": "#1",
-              "text": "Navigation item 1"
+              "href": "#",
+              "text": "Navigation item 7"
             },
             {
-              "href": "#2",
-              "text": "Navigation item 2"
+              "href": "#",
+              "text": "Navigation item 8"
             },
             {
-              "href": "#3",
-              "text": "Navigation item 3"
+              "href": "#",
+              "text": "Navigation item 9"
             },
             {
-              "href": "#4",
-              "text": "Navigation item 4"
+              "href": "#",
+              "text": "Navigation item 10"
             },
             {
-              "href": "#5",
-              "text": "Navigation item 5"
+              "href": "#",
+              "text": "Navigation item 11"
             },
             {
-              "href": "#6",
-              "text": "Navigation item 6"
+              "href": "#",
+              "text": "Navigation item 12"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 13"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 14"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 15"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 16"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 17"
+            },
+            {
+              "href": "#",
+              "text": "Navigation item 18"
             }
           ]
         },
         {
-          "title": "Lista de enlaces 3",
+          "title": "Lista de enlaces 2",
           "columns": 1,
           "classes": "basis-1/4 -mx-base px-base",
           "items": [

package/src/templates/components/footer/_template.footer.njk

@@ -9,7 +9,7 @@ text-neutral-dark {{ params.classes if params.classes }}"
         <div class="{%- if nav.classes %} {{ nav.classes }}{% else -%} flex-1{% endif %}">
           <h3 class="c-h4 mb-base text-black">{{ nav.title }}</h3>
           {% if nav.items | length %}
-            <ul class="relative space-y-base {%- if nav.columns > 1 %} columns-{{ nav.columns }} gap-base{% endif %}">
+            <ul class="relative space-y-base {%- if nav.columns == 1 %} lg:columns-1 gap-base{% elseif nav.columns == 2 %} lg:columns-2 gap-base{% elseif nav.columns == 3 %} lg:columns-3 gap-base{% elseif nav.columns == 4 %} lg:columns-4 gap-base{% elseif nav.columns == 5 %} lg:columns-5 gap-base{% elseif nav.columns == 6 %} lg:columns-6 gap-base{% elseif nav.columns == 7 %} lg:columns-7 gap-base{% elseif nav.columns == 8 %} lg:columns-8 gap-base{% endif %}">
               {% for item in nav.items %}
               {% if item.text or item.html %}
               <li class="mb-xs">

package/src/templates/components/footer/params.footer.yaml

@@ -60,7 +60,7 @@ params:
   - name: columns
     type: integer
     required: false
-    description: Amount of columns to display items in navigation section of the footer.
+    description: Amount of columns to display items in navigation section of the footer. Allowed values: from 1 to 8.
   - name: items
     type: array
     required: false

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -25,7 +25,7 @@
     {% endif %}
     {% if params.super %}
       {% if params.super.customHtml %}
-    {{ params.super.customHtml }}
+    {{ params.super.customHtml | safe }}
       {% else %}
     <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}"  {%- if params.super.backgroundFullColor or params.super.backgroundFullUrl %} style="{% if params.super.backgroundFullColor %}background-color: {{ params.super.backgroundFullColor }};{% endif %} {%- if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"{% endif %}>
       <div class="container h-full mx-auto px-base">
@@ -148,7 +148,7 @@
     </div>
     {% if params.sub %}
       {% if params.sub.customHtml %}
-    {{ params.sub.customHtml }}
+    {{ params.sub.customHtml | safe }}
       {% else %}
     <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" {%- if params.sub.backgroundFullColor or params.sub.backgroundFullUrl %} style="{% if params.sub.backgroundFullColor %}background-color: {{ params.sub.backgroundFullColor }};{% endif %} {%- if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"{% endif %}>
       <div class="container h-full mx-auto px-base">

package/src/templates/components/header-advanced/params.header-advanced.yaml

@@ -51,6 +51,10 @@ params:
     type: string
     required: false
     description: If provided, the default super content will be replaced with this.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the super.
 - name: noTitle
   type: boolean
   required: false
@@ -303,6 +307,10 @@ params:
     type: string
     required: false
     description: If provided, the default super content will be replaced with this.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the sub.
 - name: offcanvas
   type: object
   required: false

package/src/templates/components/header-mini/_examples.header-mini.njk

@@ -1,11 +1,6 @@
 {% set exampleComponent = "header-mini" %}
 
 
-{% set logoUE %}
-  <svg xmlns="http://www.w3.org/2000/svg" width="44" height="36" viewBox="0 0 148 121" class="relative top-0.5 inline-block fill-current" aria-label="Unión Europea" role="img"><title>Logo de la Unión Europea</title><defs><clipPath id="a-logo-UE"><path d="M0 0h148v121H0z"/></clipPath></defs><g clip-path="url(#a-logo-UE)"><path d="M11.737 107.263H13.9v5.815a12.063 12.063 0 0 0 .081 1.794 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H20.3v5.638a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.648 1.348 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.065.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM22.606 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm10.745 0v-10.737h2.168V118Zm3.794-5.3a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.388-.967 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.422 4.092 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.779 1.468 5.053 5.053 0 0 1-3.809-1.461 5.545 5.545 0 0 1-1.413-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.139.941 2.721 2.721 0 0 0 2.127-.933 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.82 2.767Zm1.641-5.977 1.011-2.19h2.307l-2.014 2.19ZM49.273 118v-10.737h2.109l4.395 7.17v-7.17h2.014V118h-2.175l-4.329-7v7Zm14.978 0v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm9.991-10.737h2.168v5.815a12.063 12.063 0 0 0 .08 1.795 1.739 1.739 0 0 0 .663 1.058 2.309 2.309 0 0 0 1.432.4 2.185 2.185 0 0 0 1.392-.377 1.49 1.49 0 0 0 .564-.927 12.08 12.08 0 0 0 .1-1.824v-5.94H82.8v5.637a14.491 14.491 0 0 1-.176 2.732 3.024 3.024 0 0 1-.644 1.35 3.275 3.275 0 0 1-1.263.875 5.5 5.5 0 0 1-2.066.326 5.947 5.947 0 0 1-2.333-.355 3.336 3.336 0 0 1-1.256-.923 2.958 2.958 0 0 1-.608-1.19 13.04 13.04 0 0 1-.212-2.725ZM85.1 118v-10.737h4.563a7.81 7.81 0 0 1 2.5.289 2.467 2.467 0 0 1 1.249 1.029 3.093 3.093 0 0 1 .469 1.692 2.866 2.866 0 0 1-.71 2 3.412 3.412 0 0 1-2.124.992 5.058 5.058 0 0 1 1.161.9 12.237 12.237 0 0 1 1.234 1.743L94.75 118h-2.593l-1.568-2.336a15.156 15.156 0 0 0-1.143-1.578 1.664 1.664 0 0 0-.652-.447 3.573 3.573 0 0 0-1.094-.121h-.439V118Zm2.168-6.2h1.6a8.283 8.283 0 0 0 1.948-.132 1.168 1.168 0 0 0 .608-.454 1.4 1.4 0 0 0 .22-.806 1.287 1.287 0 0 0-.289-.875 1.328 1.328 0 0 0-.817-.421q-.264-.037-1.582-.037h-1.692Zm8.218.894a6.829 6.829 0 0 1 .491-2.754 5.053 5.053 0 0 1 1-1.472 4.18 4.18 0 0 1 1.383-.968 5.9 5.9 0 0 1 2.314-.425 5.041 5.041 0 0 1 3.8 1.472 5.642 5.642 0 0 1 1.426 4.099 5.624 5.624 0 0 1-1.414 4.069 5 5 0 0 1-3.786 1.468 5.053 5.053 0 0 1-3.8-1.461 5.545 5.545 0 0 1-1.418-4.022Zm2.234-.073a4.023 4.023 0 0 0 .842 2.765 2.744 2.744 0 0 0 2.138.944 2.721 2.721 0 0 0 2.124-.93 4.1 4.1 0 0 0 .831-2.8 4.037 4.037 0 0 0-.809-2.754 2.738 2.738 0 0 0-2.15-.908 2.757 2.757 0 0 0-2.161.919 4.057 4.057 0 0 0-.819 2.767Zm9.869 5.379v-10.737h3.479a12.616 12.616 0 0 1 2.578.161 2.815 2.815 0 0 1 1.545 1.051 3.333 3.333 0 0 1 .623 2.091 3.5 3.5 0 0 1-.359 1.663 2.944 2.944 0 0 1-.912 1.058 3.142 3.142 0 0 1-1.124.509 12.375 12.375 0 0 1-2.249.154h-1.413V118Zm2.168-8.921v3.047h1.187a5.606 5.606 0 0 0 1.714-.168 1.423 1.423 0 0 0 .677-.527 1.443 1.443 0 0 0 .245-.831 1.387 1.387 0 0 0-.344-.967 1.5 1.5 0 0 0-.872-.476 10.42 10.42 0 0 0-1.56-.073Zm7.837 8.921v-10.737h7.961v1.816h-5.793v2.38h5.391v1.809h-5.391v2.922h6V118Zm19.687 0h-2.358l-.937-2.439h-4.293l-.886 2.439h-2.3l4.182-10.737h2.292Zm-3.991-4.248-1.48-3.984-1.45 3.984ZM2.83 2.741h141.523v94.35H2.83z" fill="#039"/><g fill="#fc0"><path d="m70.576 23.298 2.986-2.179 2.987 2.179-1.136-3.524 3.033-2.179h-3.739l-1.144-3.567-1.144 3.571h-3.737l3.031 2.179ZM55.121 27.45l2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179h-3.739l-1.144-3.571-1.144 3.575h-3.737l3.031 2.179ZM46.8 29.508l-1.144 3.575h-3.737l3.031 2.179-1.136 3.524 2.986-2.179 2.986 2.179-1.136-3.524 3.031-2.179h-3.737ZM42.652 52.039l2.984 2.179-1.134-3.524 3.031-2.179h-3.737l-1.144-3.571-1.144 3.579-3.739-.008 3.033 2.179-1.136 3.524ZM47.945 63.997l-1.144-3.571-1.144 3.575H41.92l3.031 2.179-1.136 3.524 2.986-2.183 2.986 2.183-1.136-3.524 3.031-2.179ZM59.274 75.324l-1.144-3.567-1.142 3.571h-3.739l3.031 2.179-1.135 3.524 2.986-2.179 2.984 2.179-1.134-3.524 3.031-2.179ZM74.709 79.43l-1.144-3.571-1.142 3.575h-3.739l3.031 2.179-1.134 3.524 2.986-2.179 2.985 2.179-1.137-3.524 3.033-2.179ZM90.142 75.324 89 71.757l-1.146 3.571h-3.735l3.029 2.179-1.134 3.524L89 78.852l2.986 2.179-1.138-3.524 3.033-2.179ZM101.475 63.997l-1.146-3.571-1.146 3.575h-3.735l3.033 2.179-1.138 3.524 2.986-2.183 2.986 2.183-1.138-3.524 3.033-2.179ZM109.316 48.471h-3.739l-1.146-3.571-1.142 3.575H99.55l3.033 2.179-1.134 3.524 2.982-2.183 2.986 2.183-1.134-3.524ZM97.343 38.736l2.986-2.179 2.986 2.179-1.138-3.524 3.033-2.175h-3.735l-1.146-3.571-1.146 3.575h-3.735l3.033 2.175ZM89.043 18.179l-1.142 3.575-3.739-.008 3.029 2.183-1.134 3.524 2.99-2.183 2.982 2.183-1.135-3.524 3.033-2.183h-3.743Z"/></g></g></svg>
-{% endset %}
-
-
 {% set examples =  [
   {
     "name": "por defecto",
@@ -19,12 +14,292 @@
     "data": {
       "hasContainer": false
     }
+  }
+] %}
+
+
+
+
+{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
+{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
+
+{% set customNavigation %}
+  <div class="flex flex-1 justify-end items-stretch">
+    <div class="flex justify-center items-center">
+      {{ componentToggle({
+        "id": "megamenu-mini-button-is-open",
+        "classes": "c-button c-button--sm c-button--transparent",
+        "offState": {
+          "classes": "",
+          "html": '<span class="inline-flex">Menu<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
+        },
+        "onState": {
+          "classes": "",
+          "html": '<span class="inline-flex">Menu<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
+        },
+        "attributes": {
+          "aria-controls": "megamenu-mini",
+          "role": "button",
+          "aria-controls": "megamenu-mini",
+          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden')"
+        }
+      }) }}
+    </div>
+  </div>
+{% endset %}
+
+{% set megamenu %}
+  <div id="megamenu-mini" class="hidden">
+    <div class="py-base text-xs lg:text-sm
+    text-neutral-dark ">
+      <div class="container mx-auto px-base ">
+          <nav class="flex flex-col lg:flex-row flex-wrap gap-base" aria-label="Menú principal">
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Temas</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Administración pública y transparencia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Agricultura, ganadería y medio rural
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Ciencia y tecnología
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Comercio y consumo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Cultura, turismo, deportes y ocio
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Educación y formación
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Empleo, empresa y otras entidades
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Impuestos y tasas
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Industria, energía y minería
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Medio ambiente
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Salud
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Seguridad y justicia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Servicios sociales
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Transporte, territorio e infraestructuras
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Vivienda y urbanismo
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Independizarse o mudarse por primera vez
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Buscar o mejorar el empleo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Ser mayor de edad
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Emprender un negocio y trabajo autónomo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Formalizar una relación
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Tener un bebé
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Acompañar en la primera infancia
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Jubilarse
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Cuidar de una persona en situación de dependencia y/o discapacidad
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Final de la vida
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Inicio Sede electrónica - Trámites
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Trámites por tema
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Trámites por tipo
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Servicios de la Sede electrónica
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Información y ayuda
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#7">
+                      Sistema Interno de Información
+                    </a>
+                  </li>
+                </ul>
+            </div>
+            <div class=" flex-1 mb-sm">
+              <h3 class="c-h4 mb-base text-black">Institución</h3>
+                <ul class="relative space-y-base lg:columns-1 gap-base">
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#1">
+                      Gobierno de Aragón
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#2">
+                      Estatuto de Aragón
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#3">
+                      Organismos
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#4">
+                      Municipios
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#5">
+                      Identidad comunicación corporativa
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#6">
+                      Presupuestos
+                    </a>
+                  </li>
+                  <li class="mb-xs">
+                    <a class="c-link font-semibold" href="#">
+                      Cooperación transfronteriza. Acción exterior
+                    </a>
+                  </li>
+                </ul>
+            </div>
+          </nav>
+
+      </div>
+    </div>
+  </div>
+{% endset %}
+
+
+{% set examples2 =  [
+  {
+    "name": "por defecto",
+    "description": "Este es el mini header por defecto. Una barra con logo del Gobierno de Aragón que enlaza al portal de la administración. Deberían usarse en todos los sitios web que tengan subdominio aragon.es.",
+    "data": {
+    }
   },
   {
-    "name": "con contenido personalizado tras el logotipo.",
-    "description": 'Usa el parámetro <code>customNavigationHtml</code> para añadir contenido tras el logotipo. En este ejemplo se ha colocado un logotipo de la UE a la derecha.',
+    "name": "con megamenu",
+    "description": "Usando los parámetros <code>customNavigationHtml</code> y <code>sub</code>, podemos construir un megamenú.",
     "data": {
-      "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | trim | safe +'</div>'
+      "customNavigationHtml": customNavigation | safe,
+      "sub": {
+        "backgroundFullColor": "white",
+        "customNavigationHtml": megamenu | safe
+      }
+    }
+  },
+  {
+    "name": "Sin clase contenedora",
+    "description": 'Usa el parámetro <code>"hasContainer": false</code> para que el componente no tenga container y se expanda ocupando todo el ancho posible, de forma que el logotipo quede a la derecha de la ventana y no con respecto al contenedor centrado.',
+    "data": {
+      "hasContainer": false
     }
   }
 ] %}