desy-html 12.0.0 → 12.1.0

package/docs/_include.template-header.njk

@@ -1,388 +1,382 @@
-{% from "components/header/_macro.header.njk" import componentHeader %}
-
-{% call componentHeader({
-  homepageUrl: "index.html",
-  mobileTitle: {
-    "text": "desy-html"
-  },
-  classes: "relative z-40",
-  expandedLogo: true,
-  navigation: {
-    classes: "hidden lg:block",
-    items: [
-    {
-      text: "Inicio",
-      href: "index.html",
-      id: "page-inicio"
-    },
-    {
-      text: "Estilos",
-      href: "estilos.html",
-      id: "page-estilos"
-    },
-    {
-      text: "Catálogo",
-      href: "catalogo.html",
-      id: "page-catalogo"
-    },
-    {
-      text: "Componentes",
-      href: "componentes.html",
-      id: "page-componentes"
-    },
-    {
-      text: "Plantillas",
-      href: "plantillas.html",
-      id: "page-plantillas"
-    }],
-    attributes: {
-      "aria-label": "Navegación principal"
-    }
-  },
-  offcanvas: {
-    text: "Menú",
-    textClose: "Cerrar menú",
-    labelledId: "offcanvas-title"
-  }
-}) %}
-<ul>
-  <li>
-    <h3 id="offcanvas-title" class="p-base text-base font-bold">Páginas</h3>
-      {% from "components/nav/_macro.nav.njk" import componentNav %}
-      {{ componentNav({
-        idPrefix: "navegacion-principal-offcanvas",
-        items: [
-        {
-          text: "Inicio",
-          href: "index.html",
-          id: "mobile-page-inicio"
-        },
-        {
-          text: "Estilos",
-          href: "estilos.html",
-          id: "mobile-page-estilos"
-        },
-        {
-          text: "Catálogo",
-          href: "catalogo.html",
-          id: "mobile-page-catalogo"
-        },
-        {
-          text: "Componentes",
-          href: "componentes.html",
-          id: "mobile-page-componentes"
-        },
-        {
-          text: "Plantillas",
-          href: "plantillas.html",
-          id: "mobile-page-plantillas"
-        }],
-        attributes: {
-          "id": "navegacion-principal-offcanvas",
-          "aria-label": "Navegación principal"
-        }
-      }) }}
-  </li>
-  <li>
-    <h3 class="p-base pt-xl text-base font-bold">Todos los componentes</h3>
-    {{ componentNav({
-      idPrefix: "navegacion-ejemplos-offcanvas",
-      items: [
-      {
-        href: "examples-accordion.html",
-        text: "Accordion",
-        id: "page-examples-accordion"
-      },
-      {
-        href: "examples-accordion-history.html",
-        text: "Accordion history",
-        id: "page-examples-accordion-history"
-      },
-      {
-        href: "examples-alert.html",
-        text: "Alert",
-        id: "page-examples-alert"
-      },
-      {
-        href: "examples-breadcrumbs.html",
-        text: "Breadcrumbs",
-        id: "page-examples-breadcrumbs"
-      },
-      {
-        href: "examples-button.html",
-        text: "Button",
-        id: "page-examples-button"
-      },
-      {
-        href: "examples-button-loader.html",
-        text: "Button loader",
-        id: "page-examples-button-loader"
-      },
-      {
-        href: "examples-card.html",
-        text: "Card",
-        id: "page-examples-card"
-      },
-      {
-        href: "examples-character-count.html",
-        text: "Character count",
-        id: "page-examples-character-count"
-      },
-      {
-        href: "examples-checkboxes.html",
-        text: "Checkboxes",
-        id: "page-examples-checkboxes"
-      },
-      {
-        href: "examples-collapsible.html",
-        text: "Collapsible",
-        id: "page-examples-collapsible"
-      },
-      {
-        href: "examples-dialog.html",
-        text: "Dialog",
-        id: "page-examples-dialog"
-      },
-      {
-        href: "examples-date-input.html",
-        text: "Date input",
-        id: "page-examples-date-input"
-      },
-      {
-        href: "examples-datepicker.html",
-        text: "Datepicker",
-        id: "page-examples-datepicker"
-      },
-      {
-        href: "examples-description-list.html",
-        text: "Description list",
-        id: "page-examples-description-list"
-      },
-      {
-        href: "examples-details.html",
-        text: "Details",
-        id: "page-examples-details"
-      },
-      {
-        href: "examples-dropdown.html",
-        text: "Dropdown",
-        id: "page-examples-dropdown"
-      },
-      {
-        href: "examples-error-message.html",
-        text: "Error message",
-        id: "page-examples-error-message"
-      },
-      {
-        href: "examples-error-summary.html",
-        text: "Error summary",
-        id: "page-examples-error-summary"
-      },
-      {
-        href: "examples-fieldset.html",
-        text: "Fieldset",
-        id: "page-examples-fieldset"
-      },
-      {
-        href: "examples-file-upload.html",
-        text: "File upload",
-        id: "page-examples-file-upload"
-      },
-      {
-        href: "examples-footer.html",
-        text: "Footer",
-        id: "page-examples-footer"
-      },
-      {
-        href: "examples-header.html",
-        text: "Header",
-        id: "page-examples-header"
-      },
-      {
-        href: "examples-header-mini.html",
-        text: "Header mini",
-        id: "page-examples-header-mini"
-      },
-      {
-        href: "examples-header-advanced.html",
-        text: "Header advanced",
-        id: "page-examples-header-advanced"
-      },
-      {
-        href: "examples-hint.html",
-        text: "Hint",
-        id: "page-examples-hint"
-      },
-      {
-        href: "examples-input.html",
-        text: "Input",
-        id: "page-examples-input"
-      },
-      {
-        href: "examples-input-group.html",
-        text: "Input group",
-        id: "page-examples-input-group"
-      },
-      {
-        href: "examples-item.html",
-        text: "Item",
-        id: "page-examples-item"
-      },
-      {
-        href: "examples-label.html",
-        text: "Label",
-        id: "page-examples-label"
-      },
-      {
-        href: "examples-links-list.html",
-        text: "Links list",
-        id: "page-examples-links-list"
-      },
-      {
-        href: "examples-listbox.html",
-        text: "Listbox",
-        id: "page-examples-listbox"
-      },
-      {
-        href: "examples-media-object.html",
-        text: "Media object",
-        id: "page-examples-media-object"
-      },
-      {
-        href: "examples-menu-horizontal.html",
-        text: "Menu horizontal",
-        id: "page-examples-menu-horizontal"
-      },
-      {
-        href: "examples-menu-navigation.html",
-        text: "Menu navigation",
-        id: "page-examples-menu-navigation"
-      },
-      {
-        href: "examples-menu-vertical.html",
-        text: "Menu vertical",
-        id: "page-examples-menu-vertical"
-      },
-      {
-        href: "examples-menubar.html",
-        text: "Menubar",
-        id: "page-examples-menubar"
-      },
-      {
-        href: "examples-modal.html",
-        text: "Modal",
-        id: "page-examples-modal"
-      },
-      {
-        href: "examples-nav.html",
-        text: "Nav",
-        id: "page-examples-nav"
-      },
-      {
-        href: "examples-notification.html",
-        text: "Notification",
-        id: "page-examples-notification"
-      },
-      {
-        href: "examples-pagination.html",
-        text: "Pagination",
-        id: "page-examples-pagination"
-      },
-      {
-        href: "examples-pill.html",
-        text: "Pill",
-        id: "page-examples-pill"
-      },
-      {
-        href: "examples-radios.html",
-        text: "Radios",
-        id: "page-examples-radios"
-      },
-      {
-        href: "examples-searchbar.html",
-        text: "Searchbar",
-        id: "page-examples-searchbar"
-      },
-      {
-        href: "examples-select.html",
-        text: "Select",
-        id: "page-examples-select"
-      },
-      {
-        href: "examples-skip-link.html",
-        text: "Skip link",
-        id: "page-examples-skip-link"
-      },
-      {
-        href: "examples-spinner.html",
-        text: "Spinner",
-        id: "page-examples-spinner"
-      },
-      {
-        href: "examples-status.html",
-        text: "Status",
-        id: "page-examples-status"
-      },
-      {
-        href: "examples-status-item.html",
-        text: "Status item",
-        id: "page-examples-status-item"
-      },
-      {
-        href: "examples-table.html",
-        text: "Table",
-        id: "page-examples-table"
-      },
-      {
-        href: "examples-table-advanced.html",
-        text: "Table advanced",
-        id: "page-examples-table-advanced"
-      },
-      {
-        href: "examples-tabs.html",
-        text: "Tabs",
-        id: "page-examples-tabs"
-      },
-      {
-        href: "examples-textarea.html",
-        text: "Textarea",
-        id: "page-examples-textarea"
-      },
-      {
-        href: "examples-toggle.html",
-        text: "Toggle",
-        id: "page-examples-toggle"
-      },
-      {
-        href: "examples-tooltip.html",
-        text: "Tooltip",
-        id: "page-examples-tooltip"
-      },
-      {
-        href: "examples-tree.html",
-        text: "Tree",
-        id: "page-examples-tree"
-      }],
-      attributes: {
-        "id": "navegacion-ejemplos-offcanvas",
-        "aria-label": "Navegación ejemplos"
-      }
-    }) }}
-  </li>
-</ul>
-{% endcall %}
-{% if activePage != undefined or activeComponent != undefined %}
-  <script>
-    window.addEventListener("load", function(event) {
-      {% if activePage %}
-      activateItemHeaderNavigation("header-nav-item", "{{ activePage }}");
-        {% if activeComponent == undefined %}
-          activateItemNav("navegacion-principal-offcanvas", "mobile-{{ activePage }}");
-        {% endif %}
-      {% endif %}
-      {% if activeComponent %}
-        activateItemNav("navegacion-ejemplos-offcanvas", "page-examples-{{ activeComponent | filterslugify }}");
-      {% endif %}
-    });
-  </script>
+{% from "components/header/_macro.header.njk" import componentHeader %}
+
+{% call componentHeader({
+  homepageUrl: "index.html",
+  mobileTitle: {
+    "text": "desy-html"
+  },
+  classes: "relative z-40",
+  expandedLogo: true,
+  navigation: {
+    classes: "hidden lg:block",
+    items: [
+    {
+      text: "Inicio",
+      href: "index.html",
+      id: "page-inicio"
+    },
+    {
+      text: "Estilos",
+      href: "estilos.html",
+      id: "page-estilos"
+    },
+    {
+      text: "Catálogo",
+      href: "catalogo.html",
+      id: "page-catalogo"
+    },
+    {
+      text: "Componentes",
+      href: "componentes.html",
+      id: "page-componentes"
+    },
+    {
+      text: "Plantillas",
+      href: "plantillas.html",
+      id: "page-plantillas"
+    }],
+    attributes: {
+      "aria-label": "Navegación principal"
+    }
+  },
+  offcanvas: {
+    text: "Menú",
+    textClose: "Cerrar menú",
+    labelledId: "offcanvas-title"
+  }
+}) %}
+<h2 id="offcanvas-title" class="p-base text-base font-bold">Páginas</h2>
+{% from "components/nav/_macro.nav.njk" import componentNav %}
+{{ componentNav({
+  idPrefix: "navegacion-principal-offcanvas",
+  items: [
+  {
+    text: "Inicio",
+    href: "index.html",
+    id: "mobile-page-inicio"
+  },
+  {
+    text: "Estilos",
+    href: "estilos.html",
+    id: "mobile-page-estilos"
+  },
+  {
+    text: "Catálogo",
+    href: "catalogo.html",
+    id: "mobile-page-catalogo"
+  },
+  {
+    text: "Componentes",
+    href: "componentes.html",
+    id: "mobile-page-componentes"
+  },
+  {
+    text: "Plantillas",
+    href: "plantillas.html",
+    id: "mobile-page-plantillas"
+  }],
+  attributes: {
+    "id": "navegacion-principal-offcanvas",
+    "aria-label": "Navegación principal"
+  }
+}) }}
+<h2 class="p-base pt-xl text-base font-bold">Todos los componentes</h2>
+{{ componentNav({
+  idPrefix: "navegacion-ejemplos-offcanvas",
+  items: [
+  {
+    href: "examples-accordion.html",
+    text: "Accordion",
+    id: "page-examples-accordion"
+  },
+  {
+    href: "examples-accordion-history.html",
+    text: "Accordion history",
+    id: "page-examples-accordion-history"
+  },
+  {
+    href: "examples-alert.html",
+    text: "Alert",
+    id: "page-examples-alert"
+  },
+  {
+    href: "examples-breadcrumbs.html",
+    text: "Breadcrumbs",
+    id: "page-examples-breadcrumbs"
+  },
+  {
+    href: "examples-button.html",
+    text: "Button",
+    id: "page-examples-button"
+  },
+  {
+    href: "examples-button-loader.html",
+    text: "Button loader",
+    id: "page-examples-button-loader"
+  },
+  {
+    href: "examples-card.html",
+    text: "Card",
+    id: "page-examples-card"
+  },
+  {
+    href: "examples-character-count.html",
+    text: "Character count",
+    id: "page-examples-character-count"
+  },
+  {
+    href: "examples-checkboxes.html",
+    text: "Checkboxes",
+    id: "page-examples-checkboxes"
+  },
+  {
+    href: "examples-collapsible.html",
+    text: "Collapsible",
+    id: "page-examples-collapsible"
+  },
+  {
+    href: "examples-dialog.html",
+    text: "Dialog",
+    id: "page-examples-dialog"
+  },
+  {
+    href: "examples-date-input.html",
+    text: "Date input",
+    id: "page-examples-date-input"
+  },
+  {
+    href: "examples-datepicker.html",
+    text: "Datepicker",
+    id: "page-examples-datepicker"
+  },
+  {
+    href: "examples-description-list.html",
+    text: "Description list",
+    id: "page-examples-description-list"
+  },
+  {
+    href: "examples-details.html",
+    text: "Details",
+    id: "page-examples-details"
+  },
+  {
+    href: "examples-dropdown.html",
+    text: "Dropdown",
+    id: "page-examples-dropdown"
+  },
+  {
+    href: "examples-error-message.html",
+    text: "Error message",
+    id: "page-examples-error-message"
+  },
+  {
+    href: "examples-error-summary.html",
+    text: "Error summary",
+    id: "page-examples-error-summary"
+  },
+  {
+    href: "examples-fieldset.html",
+    text: "Fieldset",
+    id: "page-examples-fieldset"
+  },
+  {
+    href: "examples-file-upload.html",
+    text: "File upload",
+    id: "page-examples-file-upload"
+  },
+  {
+    href: "examples-footer.html",
+    text: "Footer",
+    id: "page-examples-footer"
+  },
+  {
+    href: "examples-header.html",
+    text: "Header",
+    id: "page-examples-header"
+  },
+  {
+    href: "examples-header-mini.html",
+    text: "Header mini",
+    id: "page-examples-header-mini"
+  },
+  {
+    href: "examples-header-advanced.html",
+    text: "Header advanced",
+    id: "page-examples-header-advanced"
+  },
+  {
+    href: "examples-hint.html",
+    text: "Hint",
+    id: "page-examples-hint"
+  },
+  {
+    href: "examples-input.html",
+    text: "Input",
+    id: "page-examples-input"
+  },
+  {
+    href: "examples-input-group.html",
+    text: "Input group",
+    id: "page-examples-input-group"
+  },
+  {
+    href: "examples-item.html",
+    text: "Item",
+    id: "page-examples-item"
+  },
+  {
+    href: "examples-label.html",
+    text: "Label",
+    id: "page-examples-label"
+  },
+  {
+    href: "examples-links-list.html",
+    text: "Links list",
+    id: "page-examples-links-list"
+  },
+  {
+    href: "examples-listbox.html",
+    text: "Listbox",
+    id: "page-examples-listbox"
+  },
+  {
+    href: "examples-media-object.html",
+    text: "Media object",
+    id: "page-examples-media-object"
+  },
+  {
+    href: "examples-menu-horizontal.html",
+    text: "Menu horizontal",
+    id: "page-examples-menu-horizontal"
+  },
+  {
+    href: "examples-menu-navigation.html",
+    text: "Menu navigation",
+    id: "page-examples-menu-navigation"
+  },
+  {
+    href: "examples-menu-vertical.html",
+    text: "Menu vertical",
+    id: "page-examples-menu-vertical"
+  },
+  {
+    href: "examples-menubar.html",
+    text: "Menubar",
+    id: "page-examples-menubar"
+  },
+  {
+    href: "examples-modal.html",
+    text: "Modal",
+    id: "page-examples-modal"
+  },
+  {
+    href: "examples-nav.html",
+    text: "Nav",
+    id: "page-examples-nav"
+  },
+  {
+    href: "examples-notification.html",
+    text: "Notification",
+    id: "page-examples-notification"
+  },
+  {
+    href: "examples-pagination.html",
+    text: "Pagination",
+    id: "page-examples-pagination"
+  },
+  {
+    href: "examples-pill.html",
+    text: "Pill",
+    id: "page-examples-pill"
+  },
+  {
+    href: "examples-radios.html",
+    text: "Radios",
+    id: "page-examples-radios"
+  },
+  {
+    href: "examples-searchbar.html",
+    text: "Searchbar",
+    id: "page-examples-searchbar"
+  },
+  {
+    href: "examples-select.html",
+    text: "Select",
+    id: "page-examples-select"
+  },
+  {
+    href: "examples-skip-link.html",
+    text: "Skip link",
+    id: "page-examples-skip-link"
+  },
+  {
+    href: "examples-spinner.html",
+    text: "Spinner",
+    id: "page-examples-spinner"
+  },
+  {
+    href: "examples-status.html",
+    text: "Status",
+    id: "page-examples-status"
+  },
+  {
+    href: "examples-status-item.html",
+    text: "Status item",
+    id: "page-examples-status-item"
+  },
+  {
+    href: "examples-table.html",
+    text: "Table",
+    id: "page-examples-table"
+  },
+  {
+    href: "examples-table-advanced.html",
+    text: "Table advanced",
+    id: "page-examples-table-advanced"
+  },
+  {
+    href: "examples-tabs.html",
+    text: "Tabs",
+    id: "page-examples-tabs"
+  },
+  {
+    href: "examples-textarea.html",
+    text: "Textarea",
+    id: "page-examples-textarea"
+  },
+  {
+    href: "examples-toggle.html",
+    text: "Toggle",
+    id: "page-examples-toggle"
+  },
+  {
+    href: "examples-tooltip.html",
+    text: "Tooltip",
+    id: "page-examples-tooltip"
+  },
+  {
+    href: "examples-tree.html",
+    text: "Tree",
+    id: "page-examples-tree"
+  }],
+  attributes: {
+    "id": "navegacion-ejemplos-offcanvas",
+    "aria-label": "Navegación ejemplos"
+  }
+}) }}
+{% endcall %}
+{% if activePage != undefined or activeComponent != undefined %}
+  <script>
+    window.addEventListener("load", function(event) {
+      {% if activePage %}
+      activateItemHeaderNavigation("header-nav-item", "{{ activePage }}");
+        {% if activeComponent == undefined %}
+          activateItemNav("navegacion-principal-offcanvas", "mobile-{{ activePage }}");
+        {% endif %}
+      {% endif %}
+      {% if activeComponent %}
+        activateItemNav("navegacion-ejemplos-offcanvas", "page-examples-{{ activeComponent | filterslugify }}");
+      {% endif %}
+    });
+  </script>
 {% endif %}