desy-html 5.3.0 → 6.2.0

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

@@ -1,5 +1,116 @@
 {% from "components/nav/_macro.nav.njk" import componentNav %}
 {% from "components/details/_macro.details.njk" import componentDetails %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
+
+{% set navigationCustom %}
+  {{ componentMenuNavigation({
+    "idPrefix": "header-custom-nav",
+    "classes": "c-menu-navigation--last-right hidden lg:block w-full bg-neutral-lighter ",
+    "items": [
+      {
+        "text": "Custom Item 1",
+        "id": "header-custom-nav-item-1",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-1"
+          }
+        }
+      },
+      {
+        "text": "Custom Active Item 2",
+        "id": "header-custom-nav-item-2",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "active": true,
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2",
+              "active": true
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-2"
+          }
+        }
+      },
+      {
+        "text": "Custom Item 3",
+        "id": "header-custom-nav-item-3",
+        "classes": "c-menu-navigation__button--header -mr-base",
+        "sub": {
+          "items": [
+            {
+              "href": "#",
+              "text": "Subitem 1"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 2"
+            },
+            {
+              "href": "#",
+              "text": "Subitem 3"
+            }
+          ],
+          "attributes": {
+            "aria-labelledby": "header-custom-nav-item-3"
+          }
+        }
+      },
+      {
+          "text": "Item 4 right",
+          "id": "header-custom-nav-item-4",
+          "classes": "c-menu-navigation__button--header",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "header-custom-nav-item-4"
+            }
+          }
+        }
+    ],
+    "attributes": {
+      "aria-label": "Navegación principal"
+    }
+  })  }}
+{% endset %}
 
 {% set exampleOffcanvas %}
   <nav class="w-full p-2" aria-label="Menú móvil">
@@ -116,6 +227,28 @@
       }
     }
   },
+  {
+    "name": "with custom navigation",
+    "description": "Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
+    }
+  },
+  {
+    "name": "with custom navigation right",
+    "description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
+    "data": {
+      "homepageUrl": "/",
+      "subnav": {
+        "text": "Carpeta del gestor"
+      },
+      "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-black"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
+    }
+  },
   {
     "name": "with custom skipLink",
     "description": "Pasando parámetros customizados al componente Skip Link. Útil para hacer plantillas de página con barra lateral o con un contenido principal localizado en otro sitio diferente al habitual.",
@@ -268,7 +401,7 @@
     "data": {
       "homepageUrl": "/",
       "dropdown": {
-        "html": '<p class="text-right">Marta Pérez <br>(Administración)</p>',
+        "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
         "items": [
           {
           "text": "Perfil",

package/src/templates/components/header/_template.header.header__navigation.njk

@@ -3,7 +3,7 @@
 {% set idPrefix = params.idPrefix if params.idPrefix else "header-nav-item" %}
 
 <nav class="{{ params.classes if params.classes else 'hidden lg:block' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <ul class="ml-sm flex flex-wrap items-baseline uppercase">
+  <ul class="ml-sm flex flex-wrap items-baseline">
   {% for item in params.items %}
   	{% if item %}
     <li>
@@ -19,9 +19,9 @@
     	{% endif %}
     	{% endif %}
       {% if item.active %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-current="page"><strong>{{ item.html | safe if item.html else item.text }}</strong></a>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 font-bold text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page" {%- if item.target %} target="{{ item.target }}"{% endif %}><strong class="font-bold">{{ item.html | safe if item.html else item.text }}</strong></a>
       {% else %}
-      <a href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}>{{ item.html | safe if item.html else item.text }}</a>
+      <a href="{{ item.href }}" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%}" {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%}  {%- if item.target %} target="{{ item.target }}"{% endif %}>{{ item.html | safe if item.html else item.text }}</a>
       {% endif %}
     </li>
     {% endif %}

package/src/templates/components/header/_template.header.header__offcanvasButton.njk

@@ -2,7 +2,7 @@
 	<button id="header-offcanvas-button"
 				onclick="openDialog('header-offcanvas', this)"
         tabindex="0"
-        class="inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:shadow-outline-warning" aria-haspopup="true">
+        class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
 	  <span id="header-offcanvas-button-text" class="inline-block align-middle text-right">{{ params.html | safe if params.html else params.text }}</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" 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"/></g></svg>
 	</button>
 </div>

package/src/templates/components/header/_template.header.header__subnav.njk

@@ -3,7 +3,7 @@
 
           {% if params.items %}
             <div class="hidden lg:flex items-center">
-              <div class="ml-3 py-2 relative border-r border-l border-neutral-base">
+              <div class="py-2 relative border-r border-l border-neutral-base">
                 <p class="sr-only">Aplicación actual: </p>
                 {% call componentDropdown({
                   "text": params.text,
@@ -23,7 +23,7 @@
               </div>
             </div>
           {% else %}
-            <p class="hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white">
+            <p class="hidden lg:inline-block align-middle px-3 py-4 border-r border-l border-neutral-base text-sm text-black">
               <span class="sr-only">Aplicación actual: </span>
               {{ params.html | safe if params.html else params.text }}
             </p>

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

@@ -12,19 +12,17 @@
         href: params.skipLink.href if params.skipLink.href else "#content"
       })  }}
     </nav>
-    <div class="flex h-1 bg-red-700">
-      <div class="flex-auto bg-yellow-300 h-full"></div>
-      <div class="flex-auto bg-red-500 h-full"></div>
-      <div class="flex-auto bg-red-800 h-full"></div>
-    </div>
-    <div class="bg-black" x-data="{ isOn: false }" >
+    <div class="bg-neutral-lighter border-b border-neutral-base" x-data="{ isOn: false }" >
       <div class="container mx-auto px-base">
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
             <div class="flex items-center flex-shrink-0">
-              <a href="{{ params.homepageUrl | default('/') }}" class="text-white focus:outline-none focus:shadow-outline-warning" title="Ir a la página de inicio">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.878 51.894" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/><path data-name="typo" d="M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z" fill-rule="evenodd"/></svg>
-                <svg class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" viewBox="0 0 51.894 51.894" width="32" height="32" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/></svg>
+              <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black" title="Ir a la página de inicio">
+                {% if not params.noLogo %}
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><defs><clipPath id="b-logo-expanded"><path fill="gold" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="gold" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" ><title>Ir a la página de inicio</title><defs><clipPath id="b-logo-mini"><path fill="gold" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="gold" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                {% endif %}
+                {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>
               {% if params.subnav %}
               {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
@@ -66,6 +64,7 @@
             }) | indent(12) }}
             {% endif %}
           </div>
+          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
           {% if params.dropdown.items or params.dropdown.contentHtml %}
           {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
           {% call componentHeaderDropdown({

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

@@ -11,6 +11,14 @@ params:
   type: boolean
   required: false
   description: When true, the logo has the complete logo with text. Use it when showing header to citizen public apps.
+- name: noLogo
+  type: boolean
+  required: false
+  description: When true, there will be no Gobierno de Aragón logo.
+- name: customLogoHtml
+  type: string
+  required: false
+  description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
 - name: subnav
   type: object
   required: false
@@ -57,6 +65,10 @@ params:
       type: string
       required: true
       description: Item link.
+    - name: target
+      type: string
+      required: false
+      description: The target where the item should link to.
     - name: text
       type: string
       required: true
@@ -135,6 +147,10 @@ params:
       type: string
       required: true
       description: Item link.
+    - name: target
+      type: string
+      required: false
+      description: The target where the item should link to.
     - name: text
       type: string
       required: true
@@ -193,6 +209,10 @@ params:
       type: string
       required: false
       description: Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item.
+    - name: target
+      type: string
+      required: false
+      description: The target where the item should link to.
     - name: active
       type: boolean
       required: false
@@ -201,6 +221,10 @@ params:
       type: object
       required: false
       description: HTML attributes (for example data attributes) to add to the navigation item anchor.
+- name: customNavigationHtml
+  type: string
+  required: false
+  description: HTML for the custom navigation area. If provided there will appear an embed area where you can nest custom navigation after the default one.
 - name: offcanvas
   type: object
   required: false