desy-html 10.2.2 → 11.0.2

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

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

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

@@ -1,169 +1,169 @@
-{% from "../skip-link/_macro.skip-link.njk" import componentSkipLink %}
-{% from "../header-mini/_macro.header-mini.njk" import componentHeaderMini %}
-{% from "../header/_macro.header.header__navigation.njk" import componentHeaderNavigation %}
-{% from "../header/_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
-{% from "../nav/_macro.nav.njk" import componentNav %}
-{% from "../header/_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
-{% from "../header/_macro.header.header__offcanvas.njk" import componentOffcanvas %}
-
-<!-- header-advanced -->
-<header {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
-    <nav aria-labelledby="{% if params.skipLink.attributes.id %}{{ params.skipLink.attributes.id }}{% else %}skip-link{% endif %}">
-      {{ componentSkipLink({
-        classes: params.skipLink.classes if params.skipLink.classes,
-        attributes: params.skipLink.attributes if params.skipLink.attributes else { "id": "skip-link" },
-        html: params.skipLink.html if params.skipLink.html,
-        text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
-        href: params.skipLink.href if params.skipLink.href else "#content"
-      }) | indent(6)  }}
-    </nav>
-    {% if params.headerMini %}
-    {{ componentHeaderMini(params.headerMini) | indent(4)  }}
-    {% else %}
-    {{ componentHeaderMini({}) | indent(4)  }}
-    {% endif %}
-    {% if params.super %}
-      {% if 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">
-        <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
-          {% if params.super.logo %}
-            <a href="{{ params.super.logo.href | default('/') }}" class="{% if params.super.logo.classes %}{{ params.super.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
-              <img src="{{ params.super.logo.url}}" alt="{{ params.super.logo.alt}}">
-            </a>
-          {% endif %}
-          {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
-        </div>
-      </div>
-    </div>
-      {% endif %}
-    {% endif %}
-    {% if params.noTitle != true %}
-    <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if params.titleContainer.backgroundColor %} style="background-color: {{ params.titleContainer.backgroundColor }};"{% endif %}>
-      <div class="container mx-auto px-base">
-        <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
-          {% if params.logo %}
-          <a href="{{ params.logo.href | default('/') }}" class="{% if params.logo.classes %}{{ params.logo.classes }}{% else-%} focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
-            <img src="{{ params.logo.url}}" alt="{{ params.logo.alt}}">
-          </a>
-          <div class="hidden lg:block mx-lg border-l border-current"></div>
-          {% endif %}
-          <div class="flex lg:flex-1">
-            <div>
-              {% set headingAttributes %}class="{% if params.title.classes %}{{ params.title.classes }}{% else %} text-2xl lg:text-3xl font-bold{% endif %}"{% endset %}
-              {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>{% endset %}
-              {% if params.headingLevel == "1" %}
-              <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
-              {% elseif params.headingLevel == "2" %}
-              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-              {% elseif params.headingLevel == "3" %}
-              <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
-              {% elseif params.headingLevel == "4" %}
-              <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
-              {% elseif params.headingLevel == "5" %}
-              <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
-              {% else %}
-              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-              {% endif %}
-              {% if params.subtitle %}
-              <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | safe if params.subtitle.html else params.subtitle.text }}</p>
-              {% endif %}
-            </div>
-            {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
-          </div>
-        </div>
-      </div>
-    </div>
-    {% endif %}
-    <div class="bg-neutral-lighter border-b border-neutral-base">
-      <div class="container mx-auto px-base">
-        <div class="flex items-center justify-between min-h-14">
-          <div class="flex flex-wrap items-center">
-            {% if params.navigation.items %}
-            <div class="-ml-base">
-              {{ componentHeaderNavigation({
-                classes: params.navigation.classes,
-                idPrefix: "header-nav-item",
-                items: params.navigation.items,
-                attributes: {
-                  "aria-label": "Menú principal"
-                }
-              }) | trim | indent(14) }}
-            </div>
-            {% endif %}
-          </div>
-          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
-          {% if params.dropdown.items or params.dropdown.contentHtml %}
-          {% call componentHeaderDropdown({
-            "text": params.dropdown.text,
-            "html": params.dropdown.html,
-            "hiddenText": params.dropdown.hiddenText,
-            "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
-            "classesTooltip": params.dropdown.classesTooltip,
-            "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
-            "attributes": params.dropdown.attributes
-          }) %}
-            {% if params.dropdown.contentHtml %}
-            {{ params.dropdown.contentHtml | safe }}
-            {% else %}
-            {{ componentNav({
-              isMenu: true,
-              idPrefix: "header-dropdown-nav-item",
-              items: params.dropdown.items,
-              classes: "w-max max-w-64",
-              attributes: {
-                "id": "id-dropdown-nav",
-                "aria-label": "Menú de usuario"
-              }
-            }) }}
-            {% endif %}
-          {% endcall %}
-          {% endif %}
-          {% if params.offcanvas %}
-          {{ componentHeaderOffcanvasButton({
-            text: params.offcanvas.text,
-            classes: params.offcanvas.classes
-          }) | indent(10) }}
-          {% endif %}
-        </div>
-      </div>
-      {% if params.offcanvas %}
-      {% set offcanvasContent %}
-        {% call componentOffcanvas({
-          text: params.offcanvas.textClose,
-          labelledId: params.offcanvas.labelledId
-        }) %}
-          {% if caller %}
-          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-          {% elseif params.caller %}
-          {{ params.caller | safe }}
-          {% endif %}
-        {% endcall %}
-      {% endset %}
-      {{ offcanvasContent | safe }}
-      {% endif %}
-    </div>
-    {% if params.sub %}
-      {% if 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">
-        <div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
-          {% if params.sub.logo %}
-          <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
-            <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">
-          </a>
-          {% endif %}
-          {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
-        </div>
-      </div>
-    </div>
-      {% endif %}
-    {% endif %}
-  </div>
-</header>
+{% from "../skip-link/_macro.skip-link.njk" import componentSkipLink %}
+{% from "../header-mini/_macro.header-mini.njk" import componentHeaderMini %}
+{% from "../header/_macro.header.header__navigation.njk" import componentHeaderNavigation %}
+{% from "../header/_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
+{% from "../nav/_macro.nav.njk" import componentNav %}
+{% from "../header/_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}
+{% from "../header/_macro.header.header__offcanvas.njk" import componentOffcanvas %}
+
+<!-- header-advanced -->
+<header {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div  {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
+    <nav aria-labelledby="{% if params.skipLink.attributes.id %}{{ params.skipLink.attributes.id }}{% else %}skip-link{% endif %}">
+      {{ componentSkipLink({
+        classes: params.skipLink.classes if params.skipLink.classes,
+        attributes: params.skipLink.attributes if params.skipLink.attributes else { "id": "skip-link" },
+        html: params.skipLink.html if params.skipLink.html,
+        text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
+        href: params.skipLink.href if params.skipLink.href else "#content"
+      }) | indent(6)  }}
+    </nav>
+    {% if params.headerMini %}
+    {{ componentHeaderMini(params.headerMini) | indent(4)  }}
+    {% else %}
+    {{ componentHeaderMini({}) | indent(4)  }}
+    {% endif %}
+    {% if params.super %}
+      {% if 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">
+        <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
+          {% if params.super.logo %}
+            <a href="{{ params.super.logo.href | default('/') }}" class="{% if params.super.logo.classes %}{{ params.super.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
+              <img src="{{ params.super.logo.url}}" alt="{{ params.super.logo.alt}}">
+            </a>
+          {% endif %}
+          {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
+        </div>
+      </div>
+    </div>
+      {% endif %}
+    {% endif %}
+    {% if params.noTitle != true %}
+    <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if params.titleContainer.backgroundColor %} style="background-color: {{ params.titleContainer.backgroundColor }};"{% endif %}>
+      <div class="container mx-auto px-base">
+        <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
+          {% if params.logo %}
+          <a href="{{ params.logo.href | default('/') }}" class="{% if params.logo.classes %}{{ params.logo.classes }}{% else-%} focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
+            <img src="{{ params.logo.url}}" alt="{{ params.logo.alt}}">
+          </a>
+          <div class="hidden lg:block mx-lg border-l border-current"></div>
+          {% endif %}
+          <div class="flex lg:flex-1">
+            <div>
+              {% set headingAttributes %}class="{% if params.title.classes %}{{ params.title.classes }}{% else %} text-2xl lg:text-3xl font-bold{% endif %}"{% endset %}
+              {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>{% endset %}
+              {% if params.headingLevel == "1" %}
+              <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
+              {% elseif params.headingLevel == "2" %}
+              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+              {% elseif params.headingLevel == "3" %}
+              <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
+              {% elseif params.headingLevel == "4" %}
+              <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
+              {% elseif params.headingLevel == "5" %}
+              <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
+              {% else %}
+              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+              {% endif %}
+              {% if params.subtitle %}
+              <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | safe if params.subtitle.html else params.subtitle.text }}</p>
+              {% endif %}
+            </div>
+            {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    <div class="bg-neutral-lighter border-b border-neutral-base">
+      <div class="container mx-auto px-base">
+        <div class="flex items-center justify-between min-h-14">
+          <div class="flex flex-wrap items-center">
+            {% if params.navigation.items %}
+            <div class="-ml-base">
+              {{ componentHeaderNavigation({
+                classes: params.navigation.classes,
+                idPrefix: "header-nav-item",
+                items: params.navigation.items,
+                attributes: {
+                  "aria-label": "Menú principal"
+                }
+              }) | trim | indent(14) }}
+            </div>
+            {% endif %}
+          </div>
+          {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
+          {% if params.dropdown.items or params.dropdown.contentHtml %}
+          {% call componentHeaderDropdown({
+            "text": params.dropdown.text,
+            "html": params.dropdown.html,
+            "hiddenText": params.dropdown.hiddenText,
+            "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
+            "classesTooltip": params.dropdown.classesTooltip,
+            "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
+            "attributes": params.dropdown.attributes
+          }) %}
+            {% if params.dropdown.contentHtml %}
+            {{ params.dropdown.contentHtml | safe }}
+            {% else %}
+            {{ componentNav({
+              isMenu: true,
+              idPrefix: "header-dropdown-nav-item",
+              items: params.dropdown.items,
+              classes: "w-max max-w-64",
+              attributes: {
+                "id": "id-dropdown-nav",
+                "aria-label": "Menú de usuario"
+              }
+            }) }}
+            {% endif %}
+          {% endcall %}
+          {% endif %}
+          {% if params.offcanvas %}
+          {{ componentHeaderOffcanvasButton({
+            text: params.offcanvas.text,
+            classes: params.offcanvas.classes
+          }) | indent(10) }}
+          {% endif %}
+        </div>
+      </div>
+      {% if params.offcanvas %}
+      {% set offcanvasContent %}
+        {% call componentOffcanvas({
+          text: params.offcanvas.textClose,
+          labelledId: params.offcanvas.labelledId
+        }) %}
+          {% if caller %}
+          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+          {% elseif params.caller %}
+          {{ params.caller | safe }}
+          {% endif %}
+        {% endcall %}
+      {% endset %}
+      {{ offcanvasContent | safe }}
+      {% endif %}
+    </div>
+    {% if params.sub %}
+      {% if 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">
+        <div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
+          {% if params.sub.logo %}
+          <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
+            <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">
+          </a>
+          {% endif %}
+          {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
+        </div>
+      </div>
+    </div>
+      {% endif %}
+    {% endif %}
+  </div>
+</header>
 <!-- /header-advanced -->