desy-html 8.9.0 → 8.10.0

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

@@ -136,64 +136,6 @@
     <p>
       Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
     </p>
-    <table>
-      <thead>
-        <tr>
-          <th>Nombre</th>
-          <th>Tamaño</th>
-          <th>Pixels</th>
-          <th>Ejemplo de clases</th>
-          <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>xs</td>
-          <td>20rem</td>
-          <td>320px</td>
-          <td><code>w-xs</code></td>
-          <td class="hidden sm:table-cell">
-            <div class="inline-block w-xs h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
-          </td>
-        </tr>
-        <tr>
-          <td>sm</td>
-          <td>24rem</td>
-          <td>384px</td>
-          <td><code>w-sm</code></td>
-          <td class="hidden sm:table-cell">
-            <div class="inline-block w-sm h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
-          </td>
-        </tr>
-        <tr>
-          <td>md</td>
-          <td>28rem</td>
-          <td>448px</td>
-          <td><code>w-md</code></td>
-          <td class="hidden sm:table-cell">
-            <div class="inline-block w-md h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
-          </td>
-        </tr>
-        <tr>
-          <td>lg</td>
-          <td>32rem</td>
-          <td>512px</td>
-          <td><code>w-lg</code></td>
-          <td class="hidden sm:table-cell">
-            <div class="inline-block w-lg h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
-          </td>
-        </tr>
-        <tr>
-          <td>xl</td>
-          <td>36rem</td>
-          <td>576px</td>
-          <td><code>w-xl</code></td>
-          <td class="hidden sm:table-cell">
-            <div class="inline-block w-xl h-4 bg-primary-base text-transparent overflow-hidden"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span></div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
     <div class="max-w-full overflow-x-auto">
       <table>
         <thead>

package/docs/index.html

@@ -38,6 +38,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.10.0</h3>
+  <ul class="text-sm">
+    <li>Updated to Tailwind CSS v3.3.5</li>
+    <li>Fixed bugs in Checkboxes and Radio conditionals.</li>
+    <li>Added global function to select items in Listbox.</li>
+    <li>Added global function to open/close Collapsible and Dialog.</li>
+    <li>Accesibility improvements.</li>
+    <li>Improvements in Docs.</li>
+  </ul>
   <h3>v.8.9.0</h3>
   <ul class="text-sm">
     <li>Added global function to select items and refactor Menu navigation to fix keyboard navigation.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.9.0",
+  "version": "8.10.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)",
@@ -41,7 +41,7 @@
     "postcss": "^8.2.15",
     "postcss-cli": "^10.0.0",
     "postcss-import": "^15.0.0",
-    "tailwindcss": "~3.2.1"
+    "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
     "browser-sync": "^2.26.13",

package/src/css/component.text.css

@@ -73,6 +73,14 @@
     }
   }
 
+  .c-link--full {
+    &::after {
+      content:"";
+      @apply absolute;
+      @apply inset-0;
+    }
+  }
+
   .c-paragraph-lg {
     @apply mb-lg;
     @apply text-lg;

package/src/css/styles.css

@@ -20,6 +20,7 @@
 @import "../templates/components/button/_styles.button.css";
 @import "../templates/components/button-loader/_styles.button-loader.css";
 @import "../templates/components/checkboxes/_styles.checkboxes.css";
+@import "../templates/components/collapsible/_styles.collapsible.css";
 @import "../templates/components/dialog/_styles.dialog.css";
 @import "../templates/components/dropdown/_styles.dropdown.css";
 @import "../templates/components/header/_styles.header.css";

package/src/js/aria/HeaderNavigation.js

@@ -25,7 +25,7 @@ export function HeaderNavigation(aria) {
     };
 
     aria.HeaderNavigation.prototype.wrapActiveElement = function (elementActive) {
-      elementActive.setAttribute('aria-current', 'true');
+      elementActive.setAttribute('aria-current', 'page');
       elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
     };
 

package/src/js/aria/MenuNavigation.js

@@ -31,7 +31,7 @@ export function MenuNavigation(aria) {
     if(this.rootNode.querySelectorAll('.c-menu-navigation__sub--list')) {
       const subItems = this.rootNode.querySelectorAll('.c-menu-navigation__sub--list li a');
       [...subItems].forEach((element) => {
-        if(element.getAttribute("aria-current") === "true"){
+        if(element.getAttribute("aria-current") === "page"){
           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>`;
@@ -90,18 +90,18 @@ export function MenuNavigation(aria) {
     const getAllLinks = this.rootNode.querySelectorAll(`#${menuId} ul li li a`);
     [...getAllLinks].forEach((link) => {
       if(link.id === elementActive) {
-        link.setAttribute('aria-current', 'true');
+        link.setAttribute('aria-current', 'page');
         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.removeAttribute('aria-current');
         link.innerHTML = `${link.textContent}`;
       }
     });
     [...getAllLinks].forEach((link) => {
-      if(link.getAttribute("aria-current") === "true"){
+      if(link.getAttribute("aria-current") === "page"){
         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>`;
@@ -110,13 +110,13 @@ export function MenuNavigation(aria) {
   };
 
   aria.MenuNavigation.prototype.wrapActiveElement = function (elementActive) {
-    elementActive.setAttribute('aria-current', 'true');
+    elementActive.setAttribute('aria-current', 'page');
     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.removeAttribute('aria-current');
     elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
     elementDeactivated.innerHTML = elementDeactivated.textContent;
   };

package/src/js/aria/checkBoxes.js

@@ -5,6 +5,7 @@ export function CheckBox(aria) {
       this.rootEl = domNode;
       this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
         item.addEventListener('click', this.toggleConditional.bind(this))
+        this.toggleConditionalInit(item)
       })
 
       this.rootEl.querySelectorAll('.c-checkboxes__indeterminate-active').forEach(item => {
@@ -12,20 +13,25 @@ export function CheckBox(aria) {
       })
     }
 
+    toggleConditionalInit(item) {
+      const getInput = item.querySelector('input');
+      if(getInput.checked) {
+        item.classList.remove('c-checkboxes__conditional-hidden');
+        item.classList.add('c-checkboxes__conditional-active');
+      } else {
+        item.classList.add('c-checkboxes__conditional-hidden');
+        item.classList.remove('c-checkboxes__conditional-active');
+      }
+    }
+
     toggleConditional(event) {
       const { target: { nodeName, checked, type }, target } = event
-      if(nodeName === 'INPUT' && type === 'checkbox') {
-        this.rootEl.querySelectorAll('.c-checkboxes__conditional').forEach(item => {
-          if(item.contains(target) && checked){
-            item.classList.remove('c-checkboxes__conditional-hidden')
-            item.classList.add('c-checkboxes__conditional-active')
-          }
-
-          if(item.contains(target) && !checked){
-            item.classList.remove('c-checkboxes__conditional-active')
-            item.classList.add('c-checkboxes__conditional-hidden')
-          }
-        })
+      if(nodeName === 'INPUT' && type === 'checkbox' && checked) {
+        target.parentElement.parentElement.parentElement.classList.remove('c-checkboxes__conditional-hidden');
+        target.parentElement.parentElement.parentElement.classList.add('c-checkboxes__conditional-active');
+      } else if (nodeName === 'INPUT' && type === 'checkbox' && !checked) {
+        target.parentElement.parentElement.parentElement.classList.add('c-checkboxes__conditional-hidden');
+        target.parentElement.parentElement.parentElement.classList.remove('c-checkboxes__conditional-active');
       }
     }
 

package/src/js/aria/collapsible.js

@@ -1,42 +1,44 @@
 export function Collapsible(aria) {
-
-  class Collapsible {
-    constructor(domNode) {
-      this.rootEl = domNode;
-      this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
-      this.buttonEl.addEventListener('click', this.toggle.bind(this));
-      if(domNode.dataset.expanded){
-        this.buttonEl.click()
-      }
+  aria.collapsibleInit = function (domNode) {
+    this.rootEl = domNode;
+    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
+    this.buttonEl.addEventListener('click', handleToggle.bind(this));
+    if(this.rootEl.dataset.expanded){
+      this.buttonEl.click()
     }
+  };
 
-    toggle(event) {
-      const { target } = event
-      const elementCollapsibleShow = target.querySelector('.c-collapsible__show')
-      const elementCollapsibleHide = target.querySelector('.c-collapsible__hide')
-      const elementCollapsibleContent = target.nextElementSibling
-
-      elementCollapsibleShow.classList.toggle('hidden')
-      elementCollapsibleHide.classList.toggle('hidden')
-      elementCollapsibleContent.classList.toggle('hidden')
+  function handleToggle(element, isOpen = null) {
+    const elementTarget = element.type === 'click' ? element.target : element;
+    const elementParent = elementTarget.parentNode;
+    const button = element.type === 'click' ? this.buttonEl : element;
+    const elementCollapsibleShow = elementTarget.querySelector('.c-collapsible__show')
+    const elementCollapsibleHide = elementTarget.querySelector('.c-collapsible__hide')
+    const elementCollapsibleContent = elementTarget.nextElementSibling
 
-      if(elementCollapsibleShow.classList.contains('hidden')) {
-        this.buttonEl.setAttribute('aria-expanded', 'true')
-        elementCollapsibleShow.setAttribute('aria-hidden', 'false')
-        elementCollapsibleHide.setAttribute('aria-hidden', 'true')
-        elementCollapsibleContent.setAttribute('aria-hidden', 'false')
-      } else {
-        this.buttonEl.setAttribute('aria-expanded', 'false')
-        elementCollapsibleShow.setAttribute('aria-hidden', 'true')
-        elementCollapsibleHide.setAttribute('aria-hidden', 'false')
-        elementCollapsibleContent.setAttribute('aria-hidden', 'true')
-      }
+    if(element.type === 'click' && elementParent.getAttribute('data-expanded') === 'false' || isOpen) {
+      elementParent.setAttribute('data-expanded', 'true')
+      button.setAttribute('aria-expanded', 'true')
+      elementCollapsibleShow.setAttribute('aria-hidden', 'false')
+      elementCollapsibleHide.setAttribute('aria-hidden', 'true')
+      elementCollapsibleContent.setAttribute('aria-hidden', 'false')
+    } else if (element.type === 'click' && !elementParent.getAttribute('data-expanded') === 'true' || !isOpen) {
+      elementParent.setAttribute('data-expanded', 'false')
+      button.setAttribute('aria-expanded', 'false')
+      elementCollapsibleShow.setAttribute('aria-hidden', 'true')
+      elementCollapsibleHide.setAttribute('aria-hidden', 'false')
+      elementCollapsibleContent.setAttribute('aria-hidden', 'true')
     }
   }
 
-  const collapsible = document.querySelectorAll('[data-module="c-collapsible"]');
-  collapsible.forEach((collapsibleElement) => {
-    new Collapsible(collapsibleElement);
-  });
-
+  window.activateItemCollapsible = function (element, isOpen) {
+    const collapsible = document.getElementById(element);
+    if (collapsible) {
+      handleToggle(collapsible, isOpen)
+      return [collapsible, isOpen];
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
 }

package/src/js/aria/dialog.js

@@ -313,6 +313,7 @@ export function dialog(aria) {
 
     window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
       var dialog = new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
+      return [dialogId, focusAfterClosed, focusFirst]
     };
 
     window.closeDialog = function (closeButton) {

package/src/js/aria/listbox.js

@@ -602,6 +602,18 @@ export function listbox(aria) {
     }
   };
 
+  window.toggleMenuListbox = function (menuId, open) {
+    const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+    getListBoxButton.click();
+    if(open) {
+      getListBoxButton._tippy.popper._tippy.show();
+    } else {
+      getListBoxButton._tippy.popper._tippy.hide();
+    }
+
+    return [ menuId ]
+  }
+
   window.activateItemListBox = function (menuId, activeItemId) {
     const menu = document.getElementById(menuId);
     if (menu) {
@@ -610,7 +622,17 @@ export function listbox(aria) {
       const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
       if (activeItem) {
         activateElement(menuId, activeItemId);
-        return [menu, activeItem]
+        if(typeof activeItemId === 'object') {
+          const activeItems = [];
+          activeItemId.forEach((item) => {
+            const selectItem = document.querySelector(`#${menuId} #${item}`)
+            activeItems.push(selectItem);
+          })
+          return [menu, activeItems]
+        } else {
+          return [menu, [ activeItem ]]
+        }
+
       } else {
         console.log('There is no element with this id in the menu.');
         return null;

package/src/js/aria/radioButton.js

@@ -3,16 +3,32 @@ export function RadioButton(aria) {
   class RadioButton {
     constructor(domNode) {
       this.rootEl = domNode;
-      this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
+      this.rootEl.querySelectorAll('.c-radios__conditional-active input[type="radio"], .c-radios__conditional-hidden input[type="radio"]').forEach(item => {
         item.addEventListener('click', this.toggleConditional.bind(this))
       })
     }
 
     toggleConditional(event) {
       const { target: { nodeName, type }, target } = event
+      const targetParent = target.parentElement.parentElement.parentElement.parentElement;
+      const getChildrens = targetParent.querySelectorAll('.c-radios__conditional');
+
+      if(targetParent && targetParent.classList.contains('c-radios__conditional-active')) {
+        return;
+      }
+
+      if(getChildrens.length > 0) {
+        getChildrens.forEach(item => {
+          if(item.querySelector('input[type="radio"]').checked) {
+            item.classList.remove('c-radios__conditional-hidden')
+            item.classList.add('c-radios__conditional-active')
+          }
+        })
+      }
+
       if(type === 'radio' && nodeName === 'INPUT') {
         this.rootEl.querySelectorAll('.c-radios__conditional').forEach(item => {
-          if(item.contains(target)){
+          if(item.querySelector('input[type="radio"]').checked){
             item.classList.remove('c-radios__conditional-hidden')
             item.classList.add('c-radios__conditional-active')
           } else {

package/src/js/desy-html.js

@@ -37,6 +37,11 @@ export function toggleComponent(aria) {
 
 export function collapsibleComponent(aria) {
   Collapsible(aria);
+
+  const collapsibles = document.querySelectorAll('[data-module="c-collapsible"]');
+  [...collapsibles].forEach((collapsible) => {
+    aria.collapsibleInit(collapsible);
+  });
 }
 
 export function dialogComponent(aria) {

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

@@ -51,6 +51,7 @@
   },
   {
     "name": "con cadenas muy largas",
+    "description": "Por defecto, si los items no caben enteros, se truncan y ocupan el espacio de forma equitativa.",
     "data": {
       "items": [
         {
@@ -72,6 +73,31 @@
       ]
     }
   },
+  {
+    "name": "Último item más largo y con truncado en cadenas largas",
+    "description": 'Usa la clase <code>.c-breadcrumbs--truncated</code> para hacer que los items se trunquen solo si tienen mucha anchura (mayor que <code>20rem</code>), como el penúltimo item de este ejemplo. Y que el último item ocupe el espacio restante, truncándose si es necesario, al final, si no le queda espacio suficiente.',
+    "data": {
+      "classes": "c-breadcrumbs--truncated",
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
+          "href": "/"
+        }
+      ]
+    }
+  },
   {
     "name": "Item a mitad sin href",
     "data": {
@@ -154,7 +180,7 @@
   },
   {
     "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.",
+    "description": 'Usa <code>"inlineOnMobile":true</code> para hacer que los elementos se pongan en linea en móvil en lugar de truncarse. Mirar en anchuras pequeñas para ver cómo se genera un salto de línea si el texto no cabe. Si se quiere también en desktop, usar el parámetro <code>inlineOnDesktop</code>. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
     "data": {
       "inlineOnMobile": true,
       "items": [
@@ -164,23 +190,114 @@
         },
         {
           "text": "Trámites",
-          "href": "/tramites/"
+          "href": "/"
         },
         {
-          "text": "Trámites por tema",
-          "href": "/tramites/tema/"
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con inline en desktop",
+    "description": 'Usa <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en escritorio y anchuras superiores, en lugar de truncarse. Se genera un salto de línea si el texto no cabe en escritorio, no en mobile. Si se quiere también en mobile, usar el parámetro <code>inlineOnMobile</code>.',
+    "data": {
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
         },
         {
           "text": "Actividades industriales y energía",
-          "href": "/tramites/tema/actividades-industriales-y-energia/"
+          "href": "/"
         },
         {
           "text": "Actividades industriales",
-          "href": "/tramites/tema/actividades-industriales/"
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo, almacenamiento y sistemas térmicos con fuentes de energía renovable renovables",
+          "href": "/"
         },
         {
-          "text": "Comunicaciones de servicios",
-          "href": "/tramites/tema/actividades-industriales/comunicaciones-de-servicios/"
+          "text": "Programa 1 Instalaciones de autoconsumo renovable en el sector servicios con o sin almacenamiento",
+          "href": "/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con inline en mobile y en desktop",
+    "description": 'Usa <code>"inlineOnMobile":true</code> y <code>"inlineOnDesktop":true</code> para hacer que los elementos se pongan en linea en todas las anchuras. Se genera un salto de línea si el texto no cabe en escritorio y en mobile. Ten cuidado con las cadenas largas en mobile: podrían desbordar el viewport, producir scroll horizontal y no cumplir accesibilidad.',
+    "data": {
+      "inlineOnMobile": true,
+      "inlineOnDesktop": true,
+      "items": [
+        {
+          "text": "Inicio",
+          "href": "/"
+        },
+        {
+          "text": "Trámites",
+          "href": "/"
+        },
+        {
+          "text": "Categorías de trámites",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales y energía",
+          "href": "/"
+        },
+        {
+          "text": "Actividades industriales",
+          "href": "/"
+        },
+        {
+          "text": "Instalaciones industriales",
+          "href": "/"
+        },
+        {
+          "text": "Ayudas ligadas al autoconsumo",
+          "href": "/"
+        },
+        {
+          "text": "Programa 1 Instalaciones de autoconsumo",
+          "href": "/"
         }
       ]
     }

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

@@ -15,7 +15,7 @@
 
   .c-breadcrumbs--truncated {
     li:not(.c-breadcrumbs__backbutton) {
-      @apply lg:max-w-40;
+      @apply lg:max-w-xs;
 
       &:last-child {
         @apply max-w-full;
@@ -51,6 +51,14 @@
   }
 
 
+  .c-breadcrumbs--inline-on-desktop {
+    li {
+      @apply lg:inline;
+      @apply lg:leading-loose;
+    }
+  }
+
+
   .c-breadcrumbs__backbutton {
     @apply mr-sm;
 

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

@@ -13,6 +13,10 @@
   {% set classNames = classNames + " c-breadcrumbs--inline-on-mobile" %}
 {% endif -%}
 
+{% if params.inlineOnDesktop %}
+  {% set classNames = classNames + " c-breadcrumbs--inline-on-desktop" %}
+{% 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 %}
@@ -40,7 +44,7 @@ lg:grid-cols-max-content-8{% endif %}
 
 <!-- breadcrumbs -->
 <nav class="{{classNames}}" aria-label="Estás en: "{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <ol class="lg:grid {{ gridClass }} w-full items-baseline text-sm">
+  <ol class="{% if not params.inlineOnDesktop %}lg:grid {{ gridClass }}{% endif %} w-full items-baseline text-sm">
   {% if params.hasBackButton %}
     <li class="c-breadcrumbs__backbutton flex items-baseline font-bold text-primary-base">
       <a href="javascript:history.back()" class="px-sm border-r border-neutral-base focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"><span class="sr-only">Volver a la página anterior</span><span aria-hidden="true" title="Volver a la página anterior">&larr;</span></a>

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

@@ -31,6 +31,10 @@ params:
   type: boolean
   required: false
   description: When true, the breadcrumbs will linebreak if there is needed only on tablet breakpoint and below.
+- name: inlineOnDesktop
+  type: boolean
+  required: false
+  description: When true, the breadcrumbs will linebreak if there is needed only on desktop breakpoint and above.
 - name: hasBackButton
   type: boolean
   required: false

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

@@ -9,6 +9,13 @@
 </div>
 {% endset %}
 
+{% set fullContent %}
+<h3 class="c-h3"><a href="#" class="c-link c-link--full">Título card</a></h3>
+<div class="prose max-w-none">
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit suscipit mollitia non deleniti illum iure pariatur vel eligendi praesentium in. Velit amet distinctio minima libero dolorem tempora non aliquid? Corporis.</p>
+</div>
+{% endset %}
+
 {% set linksContent %}
 <h2 class="c-h1">Tus datos médicos e información personal</h2>
 <ul class="text-lg">
@@ -102,6 +109,15 @@
       "caller": defaultContent | indent(4)
     }
   },
+  {
+    "name": "todo el card clicable",
+    "description": 'Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.',
+    "data": {
+      "classes": "lg:w-1/3",
+      "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light",
+      "caller": fullContent | indent(4)
+    }
+  },
   {
     "name": "con icono",
     "data": {

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

@@ -1,3 +1,4 @@
+{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
 {% from "components/input/_macro.input.njk" import componentInput %}
 
 {% macro telefonoContent(id='id') %}
@@ -33,6 +34,44 @@
   })  }}
 {% endmacro %}
 
+{% macro grandchildContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "grandchild-" + id,
+    "name": "grandchild-" + id,
+    "items": [
+      {
+        "name": "oficina-principal",
+        "id": "oficina-principal-id",
+        "value": "oficina-principal",
+        "text": "Oficina principal"
+      },
+      {
+        "name": "oficina-secundaria",
+        "id": "oficina-secundaria-id",
+        "value": "oficina-secundaria",
+        "text": "Oficina secundaria"
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+{% macro nestedContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "with-conditional-items-checked-nested-" + id,
+    "name": "with-conditional-items-checked-nested-" + id,
+    "items": [
+      {
+        "value": "oficinas-de-registro",
+        "text": "Oficinas de registro",
+        "checked": true,
+        "conditional": {
+          "html": grandchildContent(id).val
+        }
+      }
+    ]
+  }) }}
+{% endmacro %}
+
 
 
 {% set exampleComponent = "checkboxes" %}
@@ -519,6 +558,29 @@
       ]
     }
   },
+  {
+    "name": "con items condicionales anidados",
+    "data": {
+      "idPrefix": "with-conditional-nested-items",
+      "name": "with-conditional-nested-items",
+      "idPrefix": "how-contacted-nested",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "presencial",
+          "text": "Presencial",
+          "checked": true,
+          "conditional": {
+            "html": nestedContent('1').val
+          }
+        }
+      ]
+    }
+  },
   {
     "name": "con item condicional seleccionado",
     "data": {

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

@@ -3,7 +3,7 @@
   {
     "name": "por defecto",
     "data": {
-      "id": "collapsible-example",
+      "id": "collapsible-default",
       "headerText": "Cabecera del collapsible",
       "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -15,8 +15,9 @@
   },
   {
     "name": "expandido",
+    "description": 'Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.',
     "data": {
-      "id": "help-with-nationality",
+      "id": "collapsible-initially-expanded",
       "headerText": "Cabecera del collapsible",
       "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -27,10 +28,24 @@
       "open": true
     }
   },
+  {
+    "name": "expandido con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>,  para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible("collapsible-expanded-title", true)</code> para mostrar el item actual abierto.',
+    "data": {
+      "id": "collapsible-expanded",
+      "headerText": "Cabecera del collapsible",
+      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+    }
+  },
   {
     "name": "con HTML",
     "data": {
-      "id": "collapsible-html-example",
+      "id": "collapsible-html",
       "headerText": "Cabecera del collapsible",
       "html": '<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
       tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -40,4 +55,4 @@
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
     }
   }
-] %}
+] %}

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

@@ -0,0 +1,33 @@
+/* ==========================================================================
+   _styles.collapsible.css
+   ========================================================================== */
+
+@layer components {
+  .c-collapsible[data-expanded="true"] {
+    .c-collapsible__show {
+      @apply hidden;
+    }
+
+    .c-collapsible__hide {
+      @apply block;
+    }
+
+    .c-collapsible__content{
+      @apply block;
+    }
+  }
+
+  .c-collapsible[data-expanded="false"] {
+    .c-collapsible__show {
+      @apply block;
+    }
+
+    .c-collapsible__hide {
+      @apply hidden;
+    }
+
+    .c-collapsible__content{
+      @apply hidden;
+    }
+  }
+}

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

@@ -1,10 +1,10 @@
 <!-- collapsible -->
-<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="true" {% endif %} data-module="c-collapsible">
+<div class="{%- if params.classes %} {{ params.classes }}{% else -%} -my-px py-sm border-t border-b border-neutral-base{% endif %} c-collapsible" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {% if params.open %} data-expanded="false" {% else %} data-expanded="true" {% endif %} data-module="c-collapsible">
   <button aria-expanded="false" {%- if params.id %} id="{{params.id}}-title"{% endif %} class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" {%- if params.id %} aria-controls="{{params.id}}"{% endif %}>{{ params.headerHtml | safe if params.headerHtml else params.headerText }}
-    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
-    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none  hidden" aria-hidden="true">Ocultar</span>
+    <span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="false">Mostrar</span>
+    <span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none" aria-hidden="true">Ocultar</span>
   </button>
-  <div aria-hidden="true" class="c-collapsible__content hidden py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
+  <div aria-hidden="true" class="c-collapsible__content py-sm" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
     {{ params.html | safe }}
     {% else %}
@@ -14,4 +14,4 @@
     {% endif %}
   </div>
 </div>
-<!-- /collapsible -->
+<!-- /collapsible -->

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

@@ -49,6 +49,27 @@
   })  }}
 {% endset %}
 
+{% set javascriptExample %}
+  {{ componentModal({
+    "id": "javascript-action-example",
+    "title": {
+      "text": "Servicio publicado"
+    },
+    "description": {
+      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+    },
+    "itemsSecondary": [
+      {
+        "html": 'Cerrar',
+        "attributes": {
+          "onclick": "closeDialog(this)"
+        }
+      }
+    ],
+    "isDismissible": true
+  })  }}
+{% endset %}
+
 
 {% set exampleComponent = "dialog" %}
 {% set examples =  [
@@ -59,7 +80,8 @@
       "button": {
         "text": "Abrir modal",
         "attributes": {
-          "onclick": "openDialog('default', this, 'label-default-example')"
+          "onclick": "openDialog('default', this, 'label-default-example')",
+          "id": "button-label-default-example"
         }
       },
       "id": "default",
@@ -78,7 +100,8 @@
       "button": {
         "text": "Abrir modal con acciones secundarias",
         "attributes": {
-          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')"
+          "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
+          "id": "button-label-secondary-action-example"
         }
       },
       "id": "secondary",
@@ -90,5 +113,26 @@
       },
       "caller": secondaryExample
     }
+  },
+  {
+    "name": "Modal lanzado con un Dialog con JavaScript",
+    "description": 'También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>,  para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog("modal-javascript", "button-javascript-action-example", "label-javascript-action-example")</code> para mostrar la modal.',
+    "data": {
+      "button": {
+        "text": "Abrir modal con JavaScript",
+        "attributes": {
+          "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
+          "id": "button-javascript-action-example"
+        }
+      },
+      "id": "modal-javascript",
+      "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
+      "attributes": {
+        "role": "dialog",
+        "aria-labelledby": "javascript-action-example",
+        "aria-modal": true
+      },
+      "caller": javascriptExample
+    }
   }
-] %}
+] %}

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

@@ -1,7 +1,7 @@
 <!-- header__offcanvas -->
 <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
   <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
-    <div class="h-full overflow-auto relative h-screen bg-white z-10">
+    <div class="h-full overflow-auto relative bg-white z-10">
       <div class="text-right p-sm">
         <button
           onclick="closeDialog(this)"

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

@@ -122,8 +122,7 @@
       {% if params.offcanvas %}
       {% set offcanvasContent %}
         {% call componentOffcanvas({
-          text: params.offcanvas.textClose,
-          labelledId: params.offcanvas.labelledId
+          text: params.offcanvas.textClose
         }) %}
           {% if caller %}
           {{ caller() }} {#- if statement allows usage of `call` to be optional -#}

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

@@ -13,7 +13,7 @@ params:
   description: This is an area over the title
   - name: logo
     type: object
-    required: true
+    required: false
     description: options for the logo element
     - name: url
       type: string
@@ -57,7 +57,7 @@ params:
   description: If `true` the title area will be hidden.
 - name: titleContainer
   type: object
-  required: true
+  required: false
   description: params for the container that holds the logo, title and subtitle.
   - name: backgroundColor
     type: string
@@ -265,7 +265,7 @@ params:
   description: This is an area over the title
   - name: logo
     type: object
-    required: true
+    required: false
     description: options for the logo element
     - name: url
       type: string

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

@@ -9,7 +9,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
-    "description": "This is the mini header.",
+    "description": "Este es el mini header por defecto. Una barra con logo del Gobierno de Aragón que enlaza al portal de la administración. Deberían usarse en todos los sitios web que tengan subdominio aragon.es.",
     "data": {
     }
   },

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

@@ -18,8 +18,8 @@ params:
 - name: classes
   type: string
   required: false
-  description: Classes to add to the skip link.
+  description: Classes to add to the header-mini.
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the skip link.
+  description: HTML attributes (for example data attributes) to add to the header-mini.

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

@@ -615,5 +615,42 @@
           }
         ]
       }
+    },
+    {
+      "name": "Menú abierto o cerrado con Javascript",
+      "description": 'Podemos abrir o cerrar un menú usando con javascript la función global <code>toggleMenuListbox(elementMenu, open)</code> para abrir o cerrar un menú, usando su id. El parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos <code>true</code> abrirá el menú, y si le pasamos <code>false</code> cerrará el menú. Ej: Abre la consola del navegador y escribe <code>toggleMenuListbox("listbox-javascript", true)</code> para abrir el menú de este ejemplo.',
+      "data": {
+        "id": "with-active-item",
+        "text": "con item activo",
+        "label": {
+          "text": "Esto es un label"
+        },
+        "items": [
+          {
+            "href": "#",
+            "text": "Opción 1"
+          },
+          {
+            "href": "#",
+            "text": "Opción 2"
+          },
+          {
+            "href": "#",
+            "text": "Opción 3"
+          },
+          {
+            "href": "#",
+            "text": "Opción 4"
+          },
+          {
+            "href": "#",
+            "text": "Opción 5",
+            "active": true
+          }
+        ],
+        "attributes": {
+          "id": "listbox-javascript"
+        }
+      }
     }
 ] %}

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

@@ -49,7 +49,7 @@
             {%- 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>
-            <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 }}>
+            <a {%- if subitem.active %} aria-current="page"{% 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>

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

@@ -1,4 +1,5 @@
 {% from "components/input/_macro.input.njk" import componentInput %}
+{% from "components/radios/_macro.radios.njk" import componentRadios %}
 
 {% macro telefonoContent(id='id') %}
   {{ componentInput({
@@ -33,6 +34,52 @@
   })  }}
 {% endmacro %}
 
+{% macro grandchildContent(id='id') %}
+  {{ componentRadios({
+    "idPrefix": "grandchild-" + id,
+    "name": "grandchild-" + id,
+    "items": [
+      {
+        "name": "oficina-principal-" + id,
+        "id": "oficina-principal-id-" + id,
+        "value": "oficina-principal-" + id,
+        "checked": true,
+        "html": "Oficina principal"
+      },
+      {
+        "name": "oficina-secundaria-" + id,
+        "id": "oficina-secundaria-id-" + id,
+        "value": "oficina-secundaria-" + id,
+        "html": "Oficina secundaria"
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+{% macro nestedContent(id='id') %}
+  {{ componentRadios({
+    "idPrefix": "with-conditional-items-checked-nested-" + id,
+    "name": "with-conditional-items-checked-nested-" + id,
+    "items": [
+      {
+        "value": "oficinas-de-registro",
+        "text": "Oficinas de registro",
+        "checked": true,
+        "conditional": {
+          "html": grandchildContent('oficinas-de-registro-' + id).val
+        }
+      },
+      {
+        "value": "oficinas-locales",
+        "text": "Oficinas locales",
+        "conditional": {
+          "html": grandchildContent('oficinas-locales-' + id).val
+        }
+      }
+    ]
+  }) }}
+{% endmacro %}
+
 {% set exampleComponent = "radios" %}
 {% set examples =  [
   {
@@ -415,10 +462,33 @@
         },
         {
           "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
+          "text": "Sin conditional"
+        }
+      ]
+    }
+  },
+  {
+    "name": "con items condicionales anidados",
+    "data": {
+      "idPrefix": "with-conditional-nested-items",
+      "name": "with-conditional-nested-items",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "presencial",
+          "text": "Presencial",
+          "checked": true,
           "conditional": {
-            "html": mobileContent('2').val
+            "html": nestedContent('1').val
           }
+        },
+        {
+          "value": "telefono",
+          "text": "Por teléfono"
         }
       ]
     }