desy-html 8.8.0 → 8.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/docs/index.html +5 -0
  2. package/package.json +1 -1
  3. package/src/js/aria/MenuHorizontal.js +9 -4
  4. package/src/js/aria/MenuVertical.js +8 -3
  5. package/src/js/aria/Nav.js +8 -3
  6. package/src/templates/components/header/_template.header.header__offcanvas.njk +1 -1
  7. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +23 -0
  8. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +24 -0
  9. package/src/templates/components/nav/_examples.nav.njk +24 -0
package/docs/index.html CHANGED
@@ -38,6 +38,11 @@
38
38
 
39
39
  <h2>Changelog (English)</h2>
40
40
  <p>What's new in the latest version of desy-html</p>
41
+ <h3>v.8.8.1</h3>
42
+ <ul class="text-sm">
43
+ <li>Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.</li>
44
+ <li>Improved height in offcanvas in Header and Header advanced.</li>
45
+ </ul>
41
46
  <h3>v.8.8.0</h3>
42
47
  <ul class="text-sm">
43
48
  <li>Added global function to select items in Listbox.</li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "desy-html",
3
- "version": "8.8.0",
3
+ "version": "8.8.1",
4
4
  "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
5
5
  "author": {
6
6
  "name": "Desy (SDA Servicios Digitales de Aragón)",
package/src/js/aria/MenuHorizontal.js CHANGED
@@ -26,15 +26,20 @@ export function MenuHorizontal(aria) {
26
26
  };
27
27
 
28
28
  aria.MenuHorizontal.prototype.wrapActiveElement = function (elementActive) {
29
- elementActive.setAttribute('aria-current', 'page');
30
- elementActive.classList.add('c-menu-horizontal__active');
31
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
29
+ if (!elementActive.getAttribute('aria-current')) {
30
+ elementActive.setAttribute('aria-current', 'page');
31
+ elementActive.classList.add('c-menu-horizontal__active');
32
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
33
+ }
32
34
  };
33
35
 
34
36
  aria.MenuHorizontal.prototype.deactivateElement = function (elementDeactivated) {
35
37
  elementDeactivated.removeAttribute('aria-current');
36
38
  elementDeactivated.classList.remove('c-menu-horizontal__active');
37
- elementDeactivated.innerHTML = elementDeactivated.textContent;
39
+ if(elementDeactivated.querySelector('strong')) {
40
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
41
+ elementDeactivated.innerHTML = `${replaceStrong}`;
42
+ }
38
43
  };
39
44
 
40
45
  window.activateItemMenuHorizontal = function (menuId, activeItemId) {
package/src/js/aria/MenuVertical.js CHANGED
@@ -25,13 +25,18 @@ export function MenuVertical(aria) {
25
25
  };
26
26
 
27
27
  aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
28
- elementActive.setAttribute('aria-current', 'page');
29
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
28
+ if (!elementActive.getAttribute('aria-current')) {
29
+ elementActive.setAttribute('aria-current', 'page');
30
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
31
+ }
30
32
  };
31
33
 
32
34
  aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
33
35
  elementDeactivated.removeAttribute('aria-current');
34
- elementDeactivated.innerHTML = elementDeactivated.textContent;
36
+ if(elementDeactivated.querySelector('strong')) {
37
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
38
+ elementDeactivated.innerHTML = `${replaceStrong}`;
39
+ }
35
40
  };
36
41
 
37
42
  window.activateItemMenuVertical = function (menuId, activeItemId) {
package/src/js/aria/Nav.js CHANGED
@@ -25,13 +25,18 @@ export function Nav(aria) {
25
25
  };
26
26
 
27
27
  aria.Nav.prototype.wrapActiveElement = function (elementActive) {
28
- elementActive.setAttribute('aria-current', 'page');
29
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
28
+ if (!elementActive.getAttribute('aria-current')) {
29
+ elementActive.setAttribute('aria-current', 'page');
30
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
31
+ }
30
32
  };
31
33
 
32
34
  aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
33
35
  elementDeactivated.removeAttribute('aria-current');
34
- elementDeactivated.innerHTML = elementDeactivated.textContent;
36
+ if(elementDeactivated.querySelector('strong')) {
37
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
38
+ elementDeactivated.innerHTML = `${replaceStrong}`;
39
+ }
35
40
  };
36
41
 
37
42
  window.activateItemNav = function (menuId, activeItemId) {
package/src/templates/components/header/_template.header.header__offcanvas.njk CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- header__offcanvas -->
2
2
  <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
3
- <div class="left-0 fixed top-0 h-screen w-offcanvas ml-offcanvas-negative">
3
+ <div class="left-0 fixed top-0 h-screen h-[100dvh] w-offcanvas ml-offcanvas-negative">
4
4
  <div class="h-full overflow-auto relative h-screen bg-white z-10">
5
5
  <div class="text-right p-sm">
6
6
  <button
package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk CHANGED
@@ -163,6 +163,29 @@
163
163
  }
164
164
  }
165
165
  },
166
+ {
167
+ "name": "con iconos en items",
168
+ "data": {
169
+ "items": [
170
+ {
171
+ "href": "#",
172
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
173
+ },
174
+ {
175
+ "href": "#",
176
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
177
+ },
178
+ {
179
+ "href": "#",
180
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
181
+ }
182
+ ],
183
+ "attributes": {
184
+ "id": "mi-menu-icons",
185
+ "aria-label": "Menu horizontal"
186
+ }
187
+ }
188
+ },
166
189
  {
167
190
  "name": "con clases aplicadas: tabs en móvil",
168
191
  "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',
package/src/templates/components/menu-vertical/_examples.menu-vertical.njk CHANGED
@@ -446,6 +446,30 @@
446
446
  }
447
447
  }
448
448
  },
449
+ {
450
+ "name": "con iconos en items",
451
+ "data": {
452
+ "idPrefix": "with-icons",
453
+ "items": [
454
+ {
455
+ "href": "#",
456
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
457
+ },
458
+ {
459
+ "href": "#",
460
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
461
+ },
462
+ {
463
+ "href": "#",
464
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
465
+ }
466
+ ],
467
+ "attributes": {
468
+ "id": "mi-menu-icons",
469
+ "aria-label": "Menu vertical"
470
+ }
471
+ }
472
+ },
449
473
  {
450
474
  "name": "con idPrefix",
451
475
  "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado',
package/src/templates/components/nav/_examples.nav.njk CHANGED
@@ -212,6 +212,30 @@
212
212
  }
213
213
  }
214
214
  },
215
+ {
216
+ "name": "con iconos en items",
217
+ "data": {
218
+ "idPrefix": "with-icons",
219
+ "items": [
220
+ {
221
+ "href": "#",
222
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
223
+ },
224
+ {
225
+ "href": "#",
226
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
227
+ },
228
+ {
229
+ "href": "#",
230
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
231
+ }
232
+ ],
233
+ "attributes": {
234
+ "id": "mi-menu-icons",
235
+ "aria-label": "Navegación local"
236
+ }
237
+ }
238
+ },
215
239
  {
216
240
  "name": "con idPrefix",
217
241
  "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado.',