desy-html 12.1.0 → 13.0.0

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

@@ -1,305 +1,305 @@
-{% set exampleComponent = "header-mini" %}
-
-
-{% set examples =  [
-  {
-    "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": "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
-    }
-  }
-] %}
-
-
-
-
-{% 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 megamenu",
-    "description": "Usando los parámetros <code>customNavigationHtml</code> y <code>sub</code>, podemos construir un megamenú.",
-    "data": {
-      "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
-    }
-  }
+{% set exampleComponent = "header-mini" %}
+
+
+{% set examples =  [
+  {
+    "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": "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
+    }
+  }
+] %}
+
+
+
+
+{% 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="presentation"><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 megamenu",
+    "description": "Usando los parámetros <code>customNavigationHtml</code> y <code>sub</code>, podemos construir un megamenú.",
+    "data": {
+      "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
+    }
+  }
 ] %}

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

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