desy-html 13.0.1 → 14.0.0

package/src/js/desy-html.js

@@ -1,27 +1,27 @@
-import { utils, formatDateToDDMMYYYY, convertToISOFormat } from './aria/utils.js';
 import { accordion } from './aria/accordion.js';
+import { alert } from './aria/alert.js';
+import { CheckBox } from './aria/checkBoxes.js';
+import { Collapsible } from './aria/collapsible.js';
 import { dataGrid } from './aria/dataGrid.js';
 import { dialog } from './aria/dialog.js';
-import { tabs } from './aria/tabs.js';
-import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
-import { PopupMenuAction } from './aria/PopupMenuAction.js';
-import { MenubarItemAction } from './aria/MenubarItemAction.js';
-import { MenubarAction } from './aria/MenubarAction.js';
-import { listbox } from './aria/listbox.js';
 import { LinksList } from './aria/linksList.js';
-import { alert } from './aria/alert.js';
-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 { RadioButton } from './aria/radioButton.js';
-import { CheckBox } from './aria/checkBoxes.js';
-import { MenuVertical } from './aria/MenuVertical.js';
+import { listbox } from './aria/listbox.js';
+import { MenubarAction } from './aria/MenubarAction.js';
+import { MenubarItemAction } from './aria/MenubarItemAction.js';
 import { MenuHorizontal } from './aria/MenuHorizontal.js';
 import { MenuNavigation } from './aria/MenuNavigation.js';
+import { MenuVertical } from './aria/MenuVertical.js';
 import { Nav } from './aria/Nav.js';
-
+import { Notification } from './aria/notification.js';
+import { PopupMenuAction } from './aria/PopupMenuAction.js';
+import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
+import { RadioButton } from './aria/radioButton.js';
+import { tabs } from './aria/tabs.js';
+import { Toggle } from './aria/toggle.js';
+import { Tree } from './aria/tree.js';
+import { TreeGrid } from './aria/treegrid.js';
+import { Treeitem } from './aria/treeitem.js';
+import { convertToISOFormat, formatDateToDDMMYYYY, utils } from './aria/utils.js';
 export function accordionComponent(aria) {
   accordion(aria);
 }
@@ -54,14 +54,14 @@ export function dropdownComponent(aria) {
     const moduleValue = modules[item].getAttribute('data-module');
 
 
-    if (moduleValue == 'c-dropdown'){
+    if (moduleValue == 'c-dropdown') {
       const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
       const roleCustom = buttonDropdown.getAttribute('data-role');
       const ariaLabel = buttonDropdown.getAttribute('data-aria-label');
       const ariaModal = buttonDropdown.getAttribute('data-aria-modal');
       const ariaHasPopup = buttonDropdown.getAttribute('data-aria-haspopup');
-      if(buttonDropdown && tooltip) {
+      if (buttonDropdown && tooltip) {
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
           name: 'hideOnPopperBlur',
@@ -73,7 +73,7 @@ export function dropdownComponent(aria) {
                   if (
                     instance.props.hideOnPopperBlur &&
                     event.relatedTarget &&
-                    !instance.popper.contains(event.relatedTarget)  &&
+                    !instance.popper.contains(event.relatedTarget) &&
                     event.relatedTarget !== instance.reference
                   ) {
                     instance.hide();
@@ -87,7 +87,7 @@ export function dropdownComponent(aria) {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
           defaultValue: true,
-          fn({hide}) {
+          fn({ hide }) {
             function onKeyDown(event) {
               if (event.keyCode === 27) {
                 hide();
@@ -117,22 +117,22 @@ export function dropdownComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEsc,hideOnPopperBlur],
+          plugins: [hideOnEsc, hideOnPopperBlur],
           role: roleCustom ? roleCustom : false,
           aria: {
             content: 'auto'
           },
           onCreate(instance) {
-            if(ariaHasPopup){
+            if (ariaHasPopup) {
               instance.reference.setAttribute('aria-haspopup', ariaHasPopup);
             }
           },
           onShown(instance) {
             aria.Utils.focusFirstDescendant(tooltip);
-            if(ariaLabel){
+            if (ariaLabel) {
               instance.popper.firstElementChild.setAttribute('aria-label', ariaLabel);
             }
-            if(ariaModal){
+            if (ariaModal) {
               instance.popper.firstElementChild.setAttribute('aria-modal', ariaModal);
             }
           }
@@ -244,7 +244,7 @@ export function listboxComponent(aria) {
             }
           });
 
-          listbox.setHandleFocusChange(function(evt) {
+          listbox.setHandleFocusChange(function (evt) {
             if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change') == 'change')) {
               buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
             }
@@ -390,7 +390,7 @@ export function treeComponent(aria) {
       }
 
       if (moduleValue == 'c-tree__item') {
-        modules[item].addEventListener('click', function(event) {
+        modules[item].addEventListener('click', function (event) {
           event.stopPropagation();
         });
       }
@@ -485,7 +485,7 @@ export function DatepickerComponent(aria) {
           }
 
           if (datepickerSelect != undefined) {
-            datepickerSelect.addEventListener('change', function() {
+            datepickerSelect.addEventListener('change', function () {
               const selectedValue = this.value;
               datepickerCalendar.min = selectedValue + "-01-01";
               datepickerCalendar.max = selectedValue + "-12-31";
@@ -498,7 +498,7 @@ export function DatepickerComponent(aria) {
           const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit');
 
           if (datepickerCancel != undefined) {
-            datepickerCancel.onclick = function() {
+            datepickerCancel.onclick = function () {
               // Restore values according to original format
               if (storedInitialFormat === 'iso') {
                 datepickerCalendar.value = storedInitialValue;
@@ -514,7 +514,7 @@ export function DatepickerComponent(aria) {
           }
 
           if (datepickerSubmit != undefined) {
-            datepickerSubmit.onclick = function() {
+            datepickerSubmit.onclick = function () {
               // On submit, clear stored value for next opening
               storedInitialValue = '';
               storedInitialFormat = '';
@@ -552,7 +552,7 @@ export function DatepickerComponent(aria) {
       const datepickerSelect = module.querySelector(':is(select)');
       const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
       if (datepickerSelect != undefined) {
-        datepickerSelect.addEventListener('change', function() {
+        datepickerSelect.addEventListener('change', function () {
           const selectedValue = this.value;
           datepickerCalendar.min = selectedValue + "-01-01";
           datepickerCalendar.max = selectedValue + "-12-31";
@@ -561,4 +561,10 @@ export function DatepickerComponent(aria) {
       }
     }
   });
+}
+
+export function TreegridComponent(aria) {
+  const doAllowRowFocus = true;
+  const doStartRowFocus = true;
+  document.querySelectorAll('[data-module="c-treegrid"]').forEach((treegridEl) => TreeGrid(treegridEl, doAllowRowFocus, doStartRowFocus));
 }

package/src/js/index.js

@@ -6,25 +6,26 @@
 import {
   accordionComponent,
   alertComponent,
+  checkBoxComponent,
   collapsibleComponent,
+  DatepickerComponent,
   dialogComponent,
   dropdownComponent,
-  listboxComponent,
   linksListComponent,
+  listboxComponent,
   menubarComponent,
+  MenuHorizontalComponent,
+  MenuNavigationComponent,
+  MenuVerticalComponent,
+  NavComponent,
+  notificationComponent,
+  radioButtonComponent,
   tableAdvancedComponent,
   tabsComponent,
-  tooltipComponent,
   toggleComponent,
+  tooltipComponent,
   treeComponent,
-  notificationComponent,
-  radioButtonComponent,
-  checkBoxComponent,
-  MenuVerticalComponent,
-  MenuHorizontalComponent,
-  MenuNavigationComponent,
-  NavComponent,
-  DatepickerComponent
+  TreegridComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -50,6 +51,7 @@ MenuHorizontalComponent(aria);
 MenuNavigationComponent(aria);
 NavComponent(aria);
 DatepickerComponent(aria);
+TreegridComponent(aria);
 
 //Using the browser API to copy code to the clipboard
 const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');

package/src/templates/components/character-count/_examples.character-count.njk

@@ -63,6 +63,7 @@
   },
   {
     "name": "con valor por defecto excediendo el límite",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "exceeding-characters",
       "name": "exceeding",
@@ -72,7 +73,7 @@
         "text": "Dirección completa"
       },
       "errorMessage": {
-        "text": "Error: Por favor, no exceder el límite máximo"
+        "text": "Por favor, no exceder el límite máximo. Error en el campo."
       }
     }
   },
@@ -88,19 +89,6 @@
       "rows": 8
     }
   },
-  {
-    "name": "con label como encabezado",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
-    "data": {
-      "id": "textarea-with-page-heading",
-      "name": "address",
-      "maxlength": 250,
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
   {
     "name": "con contador de palabras",
     "data": {
@@ -139,7 +127,7 @@
       "name": "classes-applied-b",
       "maxlength": 250,
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

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

@@ -1,37 +1,65 @@
 {% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
+{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
 {% from "components/input/_macro.input.njk" import componentInput %}
 
 {% macro telefonoContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono"
-    },
-    "id": "telefono-" + id,
-    "name": "telefono-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono fijo?",
+      "classes": "mb-sm sr-only"
+    }
+  }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono fijo"
+        },
+        "id": "telefono-" + id,
+        "name": "telefono-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro mobileContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "mobile-" + id,
-    "name": "mobile-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
+    }
+    }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "mobile-" + id,
+        "name": "mobile-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro mobileErrorContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "input-with-error-message-" + id,
-    "name": "test-name-" + id,
-    "errorMessage": {
-      "text": "Error: Este campo no puede estar vacío"
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
     }
-  })  }}
+    }) %}
+    <div class="c-form-group">
+      {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "input-with-error-message-" + id,
+        "name": "test-name-" + id,
+        "errorMessage": {
+          "text": "Este campo no puede estar vacío"
+        }
+        })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro grandchildContent(id='id') %}
@@ -274,39 +302,6 @@
       ]
     }
   },
-  {
-    "name": "con un legend como encabezado",
-    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "idPrefix": "legend-as-page-heading",
-      "name": "legend-as-page-heading",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "classes": "c-h2",
-          "isPageHeading": true
-        },
-        "headingLevel": 2
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
   {
     "name": "con un legend del tamaño de un encabezado h2",
     "data": {
@@ -322,7 +317,7 @@
         "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "items": [
         {
@@ -342,6 +337,7 @@
   },
   {
     "name": "sin fieldset",
+    "description": "Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.",
     "data": {
       "idPrefix": "without-fieldset",
       "name": "without-fieldset",
@@ -363,11 +359,12 @@
   },
   {
     "name": "con una sóla opción usando 'aria-describedby' en el input",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "idPrefix": "describedby",
       "name": "describedby",
       "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
       },
       "items": [
         {
@@ -379,10 +376,11 @@
   },
   {
     "name": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "name": "t-and-c-with-hint",
       "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
       },
       "items": [
         {
@@ -397,10 +395,11 @@
   },
   {
     "name": "con fieldset y mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "name": "colours",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -425,11 +424,12 @@
   },
   {
     "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "idPrefix": "error-message",
       "name": "error-message",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -454,11 +454,12 @@
   },
   {
     "name": "con mensaje de error y pistas en los items",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "idPrefix": "error-and-hints",
       "name": "error-and-hints",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -492,6 +493,7 @@
   },
   {
     "name": "con un texto de item muy largo",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "idPrefix": "long-option",
       "name": "long-option",
@@ -499,7 +501,7 @@
         "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
       },
       "errorMessage": {
-        "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -524,6 +526,7 @@
   },
   {
     "name": "con items condicionales",
+    "description": "El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "with-conditional-items",
       "name": "with-conditional-items",
@@ -558,31 +561,9 @@
       ]
     }
   },
-  {
-    "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",
+    "description": "Usa el parámetro <code>'checked': true</code> para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "with-conditional-items-checked",
       "name": "with-conditional-items-checked",

package/src/templates/components/date-input/_examples.date-input.njk

@@ -11,7 +11,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -48,7 +48,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -88,10 +88,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -132,10 +132,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -174,10 +174,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -216,10 +216,10 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -258,7 +258,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       }
     }
   },
@@ -310,7 +310,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "formGroup": {
         "classes": "p-base bg-primary-light"
@@ -328,7 +328,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -369,7 +369,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980"
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
       },
       "items": [
         {
@@ -411,7 +411,7 @@
         }
       },
       "hint": {
-        "text": "Por ejemplo, 31 3 1980",
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980",
         "classes": "text-sm"
       },
       "items": [