desy-html 8.4.1 → 8.6.0

package/docs/_macro.example-render.njk

@@ -301,7 +301,7 @@ import componentTree %}
           }
         })  %}
             {{ componentTabs({
-              "tablistAriaLabel": "Tab example",
+              "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
               "idPrefix": "tab-" + loop.index,
               "classes": "c-tabs--scroll",
               "items": [

package/docs/_macro.show-code-from-file.njk

@@ -35,7 +35,7 @@ import componentTabs %}
     }
   })  %}
       {{ componentTabs({
-        "tablistAriaLabel": "Tab example",
+        "tablistAriaLabel": "Ejemplo de código de: " + filePath,
         "idPrefix": "tab-" + filePath | replace("/", "-") | replace("_", "") | replace(".", "-"),
         "classes": "c-tabs--scroll",
         "items": [

package/docs/_macro.show-html-from-file.njk

@@ -25,7 +25,7 @@ import componentTabs %}
     }
   })  %}
       {{ componentTabs({
-        "tablistAriaLabel": "Tab example",
+        "tablistAriaLabel": "Ejemplo de código de: " + filePath,
         "idPrefix": "tab-" + filePath | replace("/", "-") | replace("_", "") | replace(".", "-"),
         "classes": "c-tabs--scroll",
         "items": [

package/docs/ds/_ds.macro.code-snippet.njk

@@ -15,7 +15,7 @@
     }
   })  %}
     {{ componentTabs({
-      "tablistAriaLabel": "Tab example",
+      "tablistAriaLabel": "Ejemplo de código de: " + params,
       "idPrefix": "tab-" + params,
       "classes": "c-tabs--scroll",
       "items": [

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

@@ -47,7 +47,7 @@
       <h1 class="c-h0">Encabezado 0 (h1)</h1>
     </div>
     <div class="lg:flex-1">
-      <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>40px</code> - margin-bottom: <code>.mb-xl</code> - <code>2.5</code> - <code>40px</code></p>
+      <p class="text-neutral-dark text-sm"><code>.c-h0</code> - <code>bold</code> - <code>black</code> - font-size: <code>2.5rem</code> - <code>40px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>50px</code> - margin-bottom: <code>.mb-8</code> - <code>2rem</code> - <code>32px</code></p>
     </div>
   </div>
   <div class="flex flex-wrap items-center mb-8">
@@ -55,7 +55,7 @@
       <h1 class="c-h1">Encabezado 1 (h1)</h1>
     </div>
     <div class="lg:flex-1">
-      <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75</code> - <code>28px</code></p>
+      <p class="text-neutral-dark text-sm"><code>.c-h1</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-3xl</code> - <code>1.875rem</code> - <code>30px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>37.5px</code> - margin-bottom: <code>.mb-lg</code> - <code>1.75rem</code> - <code>28px</code></p>
     </div>
   </div>
   <div class="flex flex-wrap items-center mb-8">
@@ -63,7 +63,7 @@
       <h2 class="c-h2">Encabezado 2 (h2)</h2>
     </div>
     <div class="lg:flex-1">
-      <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
+      <p class="text-neutral-dark text-sm"><code>.c-h2</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-2xl</code> - <code>1.5rem</code> - <code>24px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>30px</code> - margin-bottom: <code>.mb-base</code> - <code>1</code> - <code>16px</code></p>
     </div>
   </div>
   <div class="flex flex-wrap items-center mb-8">
@@ -71,7 +71,7 @@
       <h3 class="c-h3">Encabezado 3 (h3)</h3>
     </div>
     <div class="lg:flex-1">
-      <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>20px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5</code> - <code>8px</code></p>
+      <p class="text-neutral-dark text-sm"><code>.c-h3</code> - <code>bold</code> - <code>black</code> - font-size: <code>.text-lg</code> - <code>1.125rem</code> - <code>18px</code> - line-height: <code>.leading-tight</code> - <code>1.25</code> - <code>22.5px</code> - margin-bottom: <code>.mb-sm</code> - <code>0.5rem</code> - <code>8px</code></p>
     </div>
   </div>
   <div class="flex flex-wrap items-center mb-8">
@@ -132,13 +132,13 @@
       <p class="c-paragraph-sm">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
     </div>
     <div class="col-span-2 lg:col-span-2 mb-lg">
-      <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.625rem</code> - <code>10px</code></p>
+      <p class="text-neutral-dark text-sm">Párrafo pequeño. <br><code>.c-paragraph-sm</code><br><code>normal</code> - <code>black</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
     </div>
     <div class="col-span-2 lg:col-span-2">
       <p class="c-paragraph-sm text-neutral-dark">Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. </p>
     </div>
     <div class="col-span-2 lg:col-span-2 mb-lg">
-      <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.625rem</code> - <code>10px</code></p>
+      <p class="text-neutral-dark text-sm">Párrafo pequeño secundario. <br><code>.c-paragraph-sm.text-neutral-dark</code><br><code>normal</code> - <code>neutral-dark</code><br>font-size: <code>.text-sm</code> - <code>.875rem</code> - <code>14px</code> <br>line-height: <code>1.25rem</code> - <code>20px</code> <br> margin-bottom: <code>.mb-sm</code> - <code>.5rem</code> - <code>8px</code></p>
     </div>
     <div class="col-span-2 lg:col-span-2">
       <ul class="c-ul">

package/docs/index.html

@@ -38,6 +38,19 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.6.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select items and subitems in Menu navigation.</li>
+    <li>Bug fixes.</li>
+    <li>Improvements in docs.</li>
+  </ul>
+  <h3>v.8.5.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select an item in Tabs.</li>
+    <li>Added new param in Breadcrumbs to show the items inline on mobile.</li>
+    <li>Docs fixed bad units in text styles.</li>
+    <li>Improvements in docs.</li>
+  </ul>
   <h3>v.8.4.1</h3>
   <ul class="text-sm">
     <li>Active items are font-bold now in all components.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.4.1",
+  "version": "8.6.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/MenuNavigation.js

@@ -0,0 +1,115 @@
+export function MenuNavigation(aria) {
+  (function () {
+    aria.MenuNavigation = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.MenuNavigation.prototype.init = function () {
+      const menuItems = this.domNode.querySelectorAll('a');
+      const getItemsFromMenu = Array.from(menuItems);
+
+      if(getItemsFromMenu.some(item => item.classList.contains('c-menu-navigation__button--has-selection'))) {
+        getItemsFromMenu.forEach((button) => {
+          if(button.classList.contains('c-menu-navigation__button--has-selection')) {
+            this.activateElement(button.id);
+          }
+        })
+      }
+
+      if(this.domNode.querySelectorAll('.c-menu-navigation__sub--list')) {
+        const subItems = this.domNode.querySelectorAll('.c-menu-navigation__sub--list li a');
+        [...subItems].forEach((element) => {
+          if(element.getAttribute("aria-current") === "true"){
+            const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
+            getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
+            getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
+            element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
+          }
+        })
+      }
+    };
+
+    aria.MenuNavigation.prototype.activateElement = function (elementActive) {
+      const getAllLiElements = this.domNode.querySelectorAll('li');
+      [...getAllLiElements].forEach((element) => {
+        const getElement = element.querySelector('a');
+        if (getElement.id === elementActive) {
+          this.wrapActiveElement(getElement);
+        } else {
+          this.deactivateElement(getElement);
+        }
+      });
+    };
+
+    aria.MenuNavigation.prototype.activateSubElement = function (menuId, elementActive) {
+      const getAllLinks = this.domNode.querySelectorAll(`#${menuId} ul li li a`);
+      [...getAllLinks].forEach((link) => {
+        if(link.id === elementActive) {
+          link.setAttribute('aria-current', 'true');
+          link.innerHTML = `<strong class="font-bold">${link.textContent}</strong>`;
+        } else {
+          const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
+          getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
+          getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+          link.setAttribute('aria-current', 'false');
+          link.innerHTML = `${link.textContent}`;
+        }
+      });
+      [...getAllLinks].forEach((link) => {
+        if(link.getAttribute("aria-current") === "true"){
+          const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
+          getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
+          getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
+        }
+      });
+    };
+
+    aria.MenuNavigation.prototype.wrapActiveElement = function (elementActive) {
+      elementActive.setAttribute('aria-current', 'true');
+      elementActive.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
+      elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+    };
+
+    aria.MenuNavigation.prototype.deactivateElement = function (elementDeactivated) {
+      elementDeactivated.setAttribute('aria-current', 'false');
+      elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
+      elementDeactivated.innerHTML = elementDeactivated.textContent;
+    };
+
+    window.activateItemMenuNavigation = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          const menuInstance = new aria.MenuNavigation(menu);
+          menuInstance.activateElement(activeItemId);
+          return [menu, activeItem];
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+
+    window.activateSubItemMenuNavigation = function (menuId, activeSubItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeSubItem = document.querySelector(`#${menuId} #${activeSubItemId}`);
+        if (activeSubItem) {
+          const menuInstance = new aria.MenuNavigation(menu);
+          menuInstance.activateSubElement(menuId, activeSubItemId);
+          return [menu, activeSubItem];
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+  }());
+}

package/src/js/aria/tabs.js

@@ -80,8 +80,9 @@ export function tabs(aria) {
 
     // When a tab is clicked, activateTab is fired to activate it
     function clickEventListener (event) {
-      var tab = event.target;
-      activateTab(tab, false);
+      if(!event.target.matches('.c-tabs__link--is-active, .c-tabs__link--is-active strong')) {
+        activateTab(event.target, false);
+      }
     };
 
     // Handle keydown on tabs
@@ -279,12 +280,48 @@ export function tabs(aria) {
     function addActiveClass(element) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
-      element.firstElementChild.classList.add("text-black");
+      element.setAttribute('role', 'tab');
+      element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
-      element.firstElementChild.classList.remove("text-black");
+      element.removeAttribute('role');
+      element.innerHTML = element.textContent;
     }
+
+    window.activateItemTabs = function (menuId, tabItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItemTab = document.querySelector(`#${menuId} #${tabItemId}`);
+        const activeItemPanel = document.querySelector(`[aria-labelledby="${tabItemId}"]`);
+        if (activeItemTab) {
+          document.querySelectorAll('.c-tabs__link').forEach((tab) => {
+            tab.classList.remove("c-tabs__link--is-active");
+            tab.innerHTML = tab.textContent;
+          })
+
+          activeItemTab.classList.add("c-tabs__link--is-active");
+          activeItemTab.setAttribute('role', 'tab');
+          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.textContent}</strong>`;
+
+          document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
+            panel.setAttribute('hidden', 'hidden')
+          })
+
+          activeItemPanel.removeAttribute('hidden');
+
+          return [menu, activeItemTab, activeItemPanel];
+
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
   }
+
 }

package/src/js/desy-html.js

@@ -18,6 +18,7 @@ import { notification } from './aria/notification.js';
 import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
 import { MenuVertical } from './aria/MenuVertical.js';
+import { MenuNavigation } from './aria/MenuNavigation.js';
 import { HeaderNavigation } from './aria/HeaderNavigation.js';
 import { Nav } from './aria/Nav.js';
 
@@ -374,6 +375,15 @@ export function MenuVerticalComponent(aria) {
   });
 }
 
+export function MenuNavigationComponent(aria) {
+  MenuNavigation(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
+  [...modules].forEach((module) => {
+    const menuNavigation = new aria.MenuNavigation(module);
+    menuNavigation.init();
+  });
+}
+
 export function HeaderNavigationComponent(aria) {
   HeaderNavigation(aria);
   const modules = document.querySelectorAll('[data-module="c-header-navigation"]');

package/src/js/index.js

@@ -21,6 +21,7 @@ import {
   radioButtonComponent,
   checkBoxComponent,
   MenuVerticalComponent,
+  MenuNavigationComponent,
   HeaderNavigationComponent,
   NavComponent
 } from './desy-html.js';
@@ -44,6 +45,7 @@ notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
 MenuVerticalComponent(aria);
+MenuNavigationComponent(aria);
 HeaderNavigationComponent(aria);
 NavComponent(aria);
 

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

@@ -152,6 +152,39 @@
       ]
     }
   },
+  {
+    "name": "con inline en móvil",
+    "description": "Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe.",
+    "data": {
+      "inlineOnMobile": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/tramites/"
+        },
+        {
+          "text": "Trámites por tema",
+          "href": "/tramites/tema/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/tramites/tema/actividades-industriales-y-energia/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/tramites/tema/actividades-industriales/"
+        },
+        {
+          "text": "Comunicaciones de servicios",
+          "href": "/tramites/tema/actividades-industriales/comunicaciones-de-servicios/"
+        }
+      ]
+    }
+  },
   {
     "name": "con botón atrás",
     "data": {

package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css

@@ -41,6 +41,16 @@
   }
 
 
+  .c-breadcrumbs--inline-on-mobile {
+    li {
+      @apply inline;
+      @apply lg:inline-flex;
+      @apply leading-loose;
+      @apply lg:leading-tight;
+    }
+  }
+
+
   .c-breadcrumbs__backbutton {
     @apply mr-sm;
 

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

@@ -9,6 +9,10 @@
   {% set classNames = classNames + " c-breadcrumbs--collapse-on-mobile" %}
 {% endif -%}
 
+{% if params.inlineOnMobile %}
+  {% set classNames = classNames + " c-breadcrumbs--inline-on-mobile" %}
+{% endif -%}
+
 {# This verbose statement is for Purgecss to match the classnames needed. Purgecss needs explicit entire classnames appear in code, a string concatenation will fail. Eg. lg:grid-cols-max-content-{{ params.items.length if not params.hasBackButton else (params.items.length + 1)}} doesn't compile lg:grid-cols-max-content-1,2,3...  #}
 
 {% set gridClass %}

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

@@ -27,6 +27,10 @@ params:
   type: boolean
   required: false
   description: When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+- name: inlineOnMobile
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
 - name: hasBackButton
   type: boolean
   required: false

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

@@ -87,7 +87,7 @@
       "meta": {
         "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
       },
-      "urlFeder": "https://www.aragon.es/-/fondo-europeo-de-desarrollo-regional-feder",
+      "urlFeder": "https://www.aragon.es/-/fondos-europeos-aragon",
       "classes": "lg:mt-48"
     }
   },

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -106,6 +106,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation("mi-menu", "with-active-item-example-3")</code> para desactivar el item actual y activar el tercer item de este ejemplo.',
     "data": {
       "idPrefix": "with-active-item-example",
       "items": [
@@ -124,7 +125,91 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu navigation"
+        "aria-label": "Menu navigation",
+        "id": "mi-menu"
+      }
+    }
+  },
+  {
+    "name": "con sub-item activo",
+    "description": 'Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation("mi-sub-menu", "sub-active-sub-item-example-2-2")</code> para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.',
+    "data": {
+      "idPrefix": "with-active-sub-item-example",
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "active-sub-item-example-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "active-sub-item-example-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "active-sub-item-example-3",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "active-sub-item-example-item-2"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu navigation",
+        "id": "mi-sub-menu"
       }
     }
   },
@@ -598,65 +683,6 @@
       }
     }
   },
-  {
-    "name": "con un item hijo activo",
-    "data": {
-      "idPrefix": "nav-item-with-children-active",
-      "items": [
-        {
-          "text": "Item 1",
-          "id": "nav-item-item-1-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-1-a"
-            }
-          }
-        },
-        {
-          "text": "Item 2",
-          "id": "nav-item-item-2-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-2-a"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu navigation"
-      }
-    }
-  },
   {
     "name": "con deshabilitado o sin href en un padre e hijo",
     "data": {
@@ -717,7 +743,7 @@
   },
   {
     "name": "con estilos de cabecera",
-    "description": 'Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header.',
+    "description": 'Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation("mi-menu-header", "sub-header-custom-nav-item-1-1")</code> para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.',
     "data": {
       "idPrefix": "header-custom-nav",
       "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
@@ -823,7 +849,8 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu navigation"
+        "aria-label": "Menu navigation",
+        "id": "mi-menu-header"
       }
     }
   },
@@ -1076,4 +1103,4 @@
       }
     }
   }
-] %}
+] %}

package/src/templates/components/menu-navigation/_styles.menu-navigation.css

@@ -78,6 +78,10 @@
       @apply cursor-not-allowed;
       @apply pointer-events-none;
     }
+
+    &[aria-expanded="true"] + .c-menu-navigation__sub {
+      @apply z-40;
+    }
   }
 
 

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -14,7 +14,7 @@
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
-  <ul data-module="c-menu-navigation" class="flex flex-wrap gap-base">
+  <ul class="flex flex-wrap gap-base c-menu-navigation__list">
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -38,7 +38,7 @@
       {% endif %}
       {% if item.sub.items %}
       <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-        <ul id="{{ id }}-sub-list" class="{% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -49,28 +49,12 @@
             {%- endif %}
             {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
           <li>
-            {% if subitem.href %}
-            {% if subitem.active %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
-              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-            </span>
-            {% else %}
-            <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
+            <a aria-current="{%- if subitem.active %}true{% else %}false{% endif -%}" {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
               {{ subitem.html | safe if subitem.html else subitem.text }}
               {% if subitem.disabled %}
               <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
               {% endif %}
             </a>
-            {% endif %}
-            {% else %}
-            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              {% if subitem.active %}
-              <strong class="font-bold">{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-              {% else %}
-              {{ subitem.html | safe if subitem.html else subitem.text }}
-              {% endif %}
-            </span>
-            {% endif %}
           </li>
           {% if subitem.divider %}
           <li class="my-sm border-b border-neutral-base">
@@ -98,8 +82,8 @@
 {% endset -%}
 
 <!-- menu-navigation -->
-<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+<nav data-module="c-menu-navigation" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {{ innerHtml | trim | safe }}
 </nav>
-<!-- /menu-navigation -->
+<!-- /menu-navigation -->

package/src/templates/components/menu-navigation/params.menu-navigation.yaml

@@ -76,3 +76,7 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the nav container.
+- name: active
+  type: boolean
+  required: false
+  description: If true, item will be active.

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

@@ -30,7 +30,10 @@
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-default"
+      }
     }
   },
   {
@@ -138,6 +141,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade <code>active: true</code> a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global <code>activateItemTabs(elementMenu, idItemSeleccionado)</code> para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemTabs("tabs-active", "tab-example-active-3")</code> para desactivar la tab actual y activar la tercera tab de este ejemplo.',
     "data": {
       "tablistAriaLabel": "Ejemplo de tab",
       "idPrefix": "tab-example-active",
@@ -167,7 +171,10 @@
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-active"
+      }
     }
   },
   {

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

@@ -1450,6 +1450,100 @@
       ]
     }
   },
+  {
+    "name": "con searchbar y scroll en el contenedor de árbol",
+    "description": 'Puedes usar las clases de CSS: <code>max-h-64</code> o <code>max-h-40</code> junto a <code>overflow-y-auto</code>, para poner barras de scroll al árbol en caso de que su altura sea muy grande o bien cuando la altura crezca debido a que los items sean expandidos por el usuario.',
+    "data": {
+      "name": "with-searchbar-scroll",
+      "classes": "mt-base max-h-64 overflow-y-auto",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "searchbar": {
+        "id": "with-searchbar-scroll-searchbar",
+        "label": {
+          "text": "Buscar"
+        },
+        "placeholder": "Buscar organismo"
+      },
+      "items": [
+        {
+          "text": "Item 1",
+          "id": "with-searchbar-scroll-item-1",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-1"
+            }
+          }
+        },
+        {
+          "text": "Item 2",
+          "id": "with-searchbar-scroll-item-2",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-2"
+            }
+          }
+        },
+        {
+          "text": "Item 3",
+          "id": "with-searchbar-scroll-item-3",
+          "expanded": true,
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem 1",
+                "value": "subitem-1"
+              },
+              {
+                "text": "Subitem 2",
+                "value": "subitem-2"
+              },
+              {
+                "text": "Subitem 3",
+                "value": "subitem-3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-searchbar-scroll-item-3"
+            }
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "peque",
     "description": "Con clases aplicadas.",