desy-html 8.10.2 → 8.12.0

package/docs/index.html

@@ -38,6 +38,21 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.12.0</h3>
+  <ul class="text-sm">
+    <li>Added new logos and parameters in Footer.</li>
+    <li>Added global function to open/close Tree items.</li>
+    <li>Added global funcion to Notification to close it.</li>
+    <li>Accesibility fixes.</li>
+    <li>Improvements in docs.</li>
+  </ul>
+  <h3>v.8.11.0</h3>
+  <ul class="text-sm">
+    <li>Added global funcion to Accordion and Accordion history to open/close all items.</li>
+    <li>Added global function to check/uncheck Toggle.</li>
+    <li>Bug fixes.</li>
+    <li>Improvements in docs.</li>
+  </ul>
   <h3>v.8.10.2</h3>
   <ul class="text-sm">
     <li>Updated Tailwind CSS form and typography plugins.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.10.2",
+  "version": "8.12.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/css/styles.css

@@ -23,6 +23,7 @@
 @import "../templates/components/collapsible/_styles.collapsible.css";
 @import "../templates/components/dialog/_styles.dialog.css";
 @import "../templates/components/dropdown/_styles.dropdown.css";
+@import "../templates/components/footer/_styles.footer.css";
 @import "../templates/components/header/_styles.header.css";
 @import "../templates/components/input/_styles.input.css";
 @import "../templates/components/listbox/_styles.listbox.css";
@@ -37,6 +38,7 @@
 @import "../templates/components/skip-link/_styles.skip-link.css";
 @import "../templates/components/table-advanced/_styles.table-advanced.css";
 @import "../templates/components/tabs/_styles.tabs.css";
+@import "../templates/components/toggle/_styles.toggle.css";
 @import "../templates/components/tree/_styles.tree.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";

package/src/js/aria/accordion.js

@@ -24,39 +24,7 @@ export function accordion(aria) {
       var target = event.target;
 
       if(target.classList.contains('c-accordion__toggle-all')) {
-        const getAllElementsShow = target.parentElement.parentElement.querySelectorAll('.c-accordion__show')
-        const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
-        const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
-        const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
-        if(target.textContent.includes('Mostrar todo')) {
-          getAllElementsShow.forEach(element => {
-            element.classList.add('hidden')
-          })
-          getAllElementsHide.forEach(element => {
-            element.classList.remove('hidden')
-          })
-          getAllPanels.forEach(element => {
-            element.removeAttribute('hidden')
-          })
-          getAllTriggers.forEach(element => {
-            element.setAttribute('aria-expanded', 'true');
-          })
-          target.textContent = 'Ocultar todo'
-        } else {
-          getAllElementsShow.forEach(element => {
-            element.classList.remove('hidden')
-          })
-          getAllElementsHide.forEach(element => {
-            element.classList.add('hidden')
-          })
-          getAllPanels.forEach(element => {
-            element.setAttribute('hidden', "")
-          })
-          getAllTriggers.forEach(element => {
-            element.setAttribute('aria-expanded', 'false');
-          })
-          target.textContent = 'Mostrar todo'
-        }
+        toggleAllAccordion(target)
       }
 
       if (target.classList.contains('c-accordion__trigger')) {
@@ -109,6 +77,10 @@ export function accordion(aria) {
 
         event.preventDefault();
       }
+
+      if(accordion.querySelector('.c-accordion__toggle-all') && !target.classList.contains('c-accordion__toggle-all')) {
+        checkIfAllPanelAreOpenOrClosed()
+      }
     });
 
     // Bind keyboard behaviors on the main accordion container
@@ -182,6 +154,55 @@ export function accordion(aria) {
       }
     }
 
+    function toggleAllAccordion(target, show = null) {
+      const getAllElementsShow = target.parentElement.parentElement.querySelectorAll('.c-accordion__show')
+      const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
+      const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
+      const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
+      if(target.textContent.includes('Mostrar todo') || show === true) {
+        getAllElementsShow.forEach(element => {
+          element.classList.add('hidden')
+        })
+        getAllElementsHide.forEach(element => {
+          element.classList.remove('hidden')
+        })
+        getAllPanels.forEach(element => {
+          element.removeAttribute('hidden')
+        })
+        getAllTriggers.forEach(element => {
+          element.setAttribute('aria-expanded', 'true');
+        })
+        target.textContent = 'Ocultar todo'
+      } else {
+        getAllElementsShow.forEach(element => {
+          element.classList.remove('hidden')
+        })
+        getAllElementsHide.forEach(element => {
+          element.classList.add('hidden')
+        })
+        getAllPanels.forEach(element => {
+          element.setAttribute('hidden', "")
+        })
+        getAllTriggers.forEach(element => {
+          element.setAttribute('aria-expanded', 'false');
+        })
+        target.textContent = 'Mostrar todo'
+      }
+    }
+
+    function checkIfAllPanelAreOpenOrClosed() {
+      const getAccordionTrigger = accordion.querySelectorAll('.c-accordion__trigger');
+      let arrayAccordionTrigger = [...getAccordionTrigger].map(element => element.getAttribute('aria-expanded'));
+
+      if(arrayAccordionTrigger.every(element => element === 'true')) {
+        accordion.querySelector('.c-accordion__toggle-all').textContent = 'Ocultar todo';
+      }
+
+      if(arrayAccordionTrigger.every(element => element === 'false')) {
+        accordion.querySelector('.c-accordion__toggle-all').textContent = 'Mostrar todo';
+      }
+    }
+
     window.activateItemAccordion = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
       if (menu) {
@@ -194,7 +215,18 @@ export function accordion(aria) {
           return null;
         }
       } else {
-        console.log('There is no menu with this id in the document.');
+        console.log('There is no accordion with this id in the document.');
+        return null;
+      }
+    };
+
+    window.activateAllAccordion = function (element, show) {
+      const button = document.getElementById(element);
+      if (button) {
+        toggleAllAccordion(button, show);
+        return [button, show]
+      } else {
+        console.log('There is no element with this id in the menu.');
         return null;
       }
     };

package/src/js/aria/notification.js

@@ -1,32 +1,56 @@
-export function notification() {
+export function Notification(aria) {
 
-  class Notification {
+  aria.notificationInit = function (domNode) {
+    this.rootEl = domNode;
+    /*No todas las notificaciones tienen botón de cerrar
+    así que comprobamos que el componente contiene el botón.*/
+    if(this.rootEl.querySelector('.c-notification-button__close')) {
+      window.addEventListener('click', this.closeNotification.bind(this));
+    }
+  };
 
-    constructor(domNode) {
-      this.rootEl = domNode;
-      /*No todas las notificaciones tienen botón de cerrar
-      así que comprobamos que el componente contiene el botón.*/
-      if(this.rootEl.querySelector('.c-notification-button__close')) {
-        window.addEventListener('click', this.closeNotification.bind(this));
-      }
+  aria.closeNotification = function (event) {
+    const { target } = event;
+    const elementNotification = target ? target : event
+    if(target) {
+      aria.closeNotificationEvent(elementNotification)
     }
 
-    closeNotification(event) {
-      const { target } = event;
-      if(target.classList.contains('c-notification-button__close')) {
-        //Replicamos la transición de alpine con tailwind al cerrar.
-        target.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
-        //Añadimos display: none para que el componente "desaparezca del DOM"
-        setTimeout(() =>{
-          target.parentElement.parentElement.parentElement.classList.add('hidden');
-        }, 300)
-      }
+    if(!target) {
+      aria.closeNotificationWindow(elementNotification)
     }
+  }
 
+  aria.closeNotificationEvent = function (element) {
+    if(element.classList.contains('c-notification-button__close')) {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      element.parentElement.parentElement.parentElement.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        element.parentElement.parentElement.parentElement.classList.add('hidden');
+      }, 300)
+    }
   }
 
-  const notifications = document.querySelectorAll('[data-module="c-notification"]');
-  notifications.forEach((notificationElement) => {
-    new Notification(notificationElement);
-  });
+  aria.closeNotificationWindow = function (element) {
+    if(element.querySelector('.c-notification-button__close')) {
+      //Replicamos la transición de alpine con tailwind al cerrar.
+      element.classList.add('transition-opacity', 'duration-150', 'ease-in-out', 'opacity-0');
+      //Añadimos display: none para que el componente "desaparezca del DOM"
+      setTimeout(() =>{
+        element.classList.add('hidden');
+      }, 300)
+    }
+  }
+
+  window.closeItemNotification = function (element) {
+    const notification = document.getElementById(element);
+    if (notification) {
+      aria.closeNotification(notification)
+      return [notification];
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
 }

package/src/js/aria/toggle.js

@@ -1,46 +1,61 @@
 export function Toggle(aria) {
 
-  class Toggle {
-    constructor(domNode) {
-      this.rootEl = domNode;
-      this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
-      this.buttonEl.addEventListener('click', this.toggle.bind(this));
-      if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
-        this.buttonEl.click()
-      }
+  aria.toggleInit = function (domNode) {
+    this.rootEl = domNode;
+    this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
+    this.buttonEl.addEventListener('click', this.toggle.bind(this));
+    if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
+      this.buttonEl.click()
     }
+  };
 
-    toggle(event) {
-      const { target } = event
-      this.buttonEl.classList.toggle('c-toggle--is-opened')
-      target.querySelector('.c-button--is-not-pressed').classList.toggle('hidden')
-      target.querySelector('.c-button--is-pressed').classList.toggle('hidden')
+  aria.toggle = function (event) {
+    const { target } = event
+    target.classList.toggle('c-toggle--is-opened')
 
-      this.ariaAttribute(target)
+    this.ariaAttribute(target)
+  }
+
+  aria.ariaAttribute = function (target) {
+    if(target.getAttribute('aria-checked')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-checked', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-pressed')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-pressed', toggleIsOpened);
+    }
+
+    if(target.getAttribute('aria-expanded')) {
+      const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
+      target.setAttribute('aria-expanded', toggleIsOpened);
     }
+  }
 
-    ariaAttribute(target) {
-      if(target.getAttribute('aria-checked')) {
-        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-        this.buttonEl.setAttribute('aria-checked', toggleIsOpened);
-      }
-
-      if(target.getAttribute('aria-pressed')) {
-        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-        this.buttonEl.setAttribute('aria-pressed', toggleIsOpened);
-      }
-
-      if(target.getAttribute('aria-expanded')) {
-        const toggleIsOpened = target.classList.contains('c-toggle--is-opened') ? true : false
-        this.buttonEl.setAttribute('aria-expanded', toggleIsOpened);
-      }
+  function handleToggle(element, toggle) {
+    if(toggle){
+      element.classList.add('c-toggle--is-opened')
+    } else {
+      element.classList.remove('c-toggle--is-opened')
     }
 
+    aria.ariaAttribute(element)
   }
 
+  window.activateItemToggle = function (element, toggle) {
+    const toggleElement = document.getElementById(element);
+    if (toggleElement) {
+      handleToggle(toggleElement, toggle)
+      return [toggleElement, toggle];
+    } else {
+      console.log('There is no toggle with this id in the document.');
+      return null;
+    }
+  };
+
   const toggles = document.querySelectorAll('[data-module="c-toggle"]');
   toggles.forEach((toggleElement) => {
-    new Toggle(toggleElement);
+    aria.toggleInit(toggleElement);
   });
-
 }

package/src/js/aria/tree.js

@@ -168,8 +168,7 @@ export function Tree(aria) {
 
     if (currentItem.isExpanded()) {
       groupTreeitem = currentItem;
-    }
-    else {
+    } else {
       groupTreeitem = currentItem.groupTreeitem;
     }
 
@@ -242,4 +241,4 @@ export function Tree(aria) {
   };
 
   return aria;
-}
+}

package/src/js/aria/treeitem.js

@@ -261,4 +261,58 @@ export function Treeitem(aria) {
   aria.Treeitem.prototype.handleMouseOut = function (event) {
     event.currentTarget.classList.remove('c-tree__item--hover');
   };
+
+  window.activateItemsTree = function (elementId, itemsIds, open = null) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      arrayOrSingleElement(elementId, itemsIds, open);
+      return [elementId, itemsIds, open];
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
+
+  function arrayOrSingleElement(elementId, itemsIds, open) {
+    if(typeof itemsIds === 'object' && open !== null) {
+      itemsIds.forEach((item) => {
+        const selectItem = document.querySelector(`#${elementId} #${item}`)
+        activateElement(selectItem, open)
+      })
+    }
+
+    if(typeof itemsIds !== 'object' && open !== null) {
+      const selectItem = document.querySelector(`#${elementId} #${itemsIds}`)
+      activateElement(selectItem, open)
+    }
+
+    if(typeof itemsIds === 'object' && open === null) {
+      itemsIds.forEach((item) => {
+        const selectItem = document.querySelector(`#${elementId} #${item[0]}`)
+        activateElement(selectItem, item[1])
+      })
+    }
+  }
+
+  function activateElement(item, open) {
+    if(open === true) {
+      item.setAttribute('aria-expanded', 'true');
+      recursiveParent(item)
+    } else {
+      item.setAttribute('aria-expanded', 'false');
+    }
+  }
+
+  function recursiveParent(item) {
+    if(item.parentNode.tagName === "UL" && typeof item.parentNode.id === "string" && item.parentNode.id.length === 0) {
+      recursiveParent(item.parentNode)
+    } else if(item.parentNode.tagName === "LI" && item.parentNode.getAttribute('aria-expanded') === "true") {
+      recursiveParent(item.parentNode)
+    } else if(item.parentNode.getAttribute('aria-expanded') === "false") {
+      item.parentNode.setAttribute('aria-expanded', 'true');
+      if(item.parentNode.parentNode.parentNode.getAttribute('aria-expanded') === "false") {
+        recursiveParent(item.parentNode)
+      }
+    }
+  }
 }

package/src/js/desy-html.js

@@ -13,7 +13,7 @@ import { Treeitem } from './aria/treeitem.js';
 import { Tree } from './aria/tree.js';
 import { Toggle } from './aria/toggle.js';
 import { Collapsible } from './aria/collapsible.js';
-import { notification } from './aria/notification.js';
+import { Notification } from './aria/notification.js';
 import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
 import { MenuVertical } from './aria/MenuVertical.js';
@@ -22,7 +22,6 @@ import { MenuHorizontal } from './aria/MenuHorizontal.js';
 import { MenuNavigation } from './aria/MenuNavigation.js';
 import { Nav } from './aria/Nav.js';
 
-
 export function accordionComponent(aria) {
   accordion(aria);
 }
@@ -376,7 +375,11 @@ export function treeComponent(aria) {
 }
 
 export function notificationComponent(aria) {
-  notification(aria);
+  Notification(aria);
+  const modules = document.querySelectorAll('[data-module="c-notification"]');
+  [...modules].forEach((module) => {
+    aria.notificationInit(module);
+  });
 }
 
 export function radioButtonComponent(aria) {

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

@@ -228,6 +228,35 @@
       ]
     }
   },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-button-js", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "idPrefix": "show-all-accordion-example-js",
+      "id": "show-all-accordion-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
   {
     "name": "Con controles personalizados para mostrar/ocultar",
     "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',

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

@@ -38,7 +38,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
+    <button id="{{ params.id }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}

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

@@ -32,6 +32,10 @@ params:
     type: string
     required: false
     description: Classes to add to the heading.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the button to show or hide all elements. Not required, but recommended to improve the accessibility.
 - name: showControl
   type: boolean
   required: false
@@ -118,4 +122,4 @@ params:
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+  description: HTML attributes (for example data attributes) to add to the accordion container.

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -264,6 +264,35 @@
       ]
     }
   },
+  {
+    "name": "Mostrar todo u ocultar todo con JavaScript",
+    "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-history-button-js", true)</code> para mostrar todos los items expandidos.',
+    "data": {
+      "idPrefix": "show-all-accordion-example-history-js",
+      "id": "show-all-accordion-history-button-js",
+      "headingLevel": 3,
+      "heading": {
+        "text": "Encabezado de acordeón"
+      },
+      "showControl": true,
+      "allowMultiple": true,
+      "items": [
+        {
+          "headerText": "Item de acordeón 1",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        },
+        {
+          "headerText": "Item de acordeón 2",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
+          "open": true
+        },
+        {
+          "headerText": "Item de acordeón 3",
+          "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
+        }
+      ]
+    }
+  },
   {
     "name": "Con controles personalizados para mostrar/ocultar",
     "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',

package/src/templates/components/accordion-history/_template.accordion-history.njk

@@ -39,7 +39,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
+    <button id="{{ params.id }}" class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}

package/src/templates/components/accordion-history/params.accordion-history.yaml

@@ -28,6 +28,10 @@ params:
     type: string
     required: true
     description: If `text` is set, this is not required. HTML to use within the heading. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Id to add to the item. Not required, but recommended to improve the accessibility.
   - name: classes
     type: string
     required: false
@@ -122,4 +126,4 @@ params:
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the accordion container.
+  description: HTML attributes (for example data attributes) to add to the accordion container.