desy-html 4.1.3 → 5.0.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 (26) hide show
  1. package/docs/_include.template-header.njk +47 -47
  2. package/docs/ds/_ds.example.header.njk +1 -1
  3. package/docs/ds/_ds.example.menubar-en-uso.njk +6 -18
  4. package/docs/ds/_ds.example.menubar-variaciones.njk +51 -121
  5. package/docs/index.html +25 -0
  6. package/package.json +1 -1
  7. package/src/js/desy-html.js +63 -4
  8. package/src/templates/components/alert/_template.alert.njk +2 -2
  9. package/src/templates/components/checkboxes/_examples.checkboxes.njk +22 -0
  10. package/src/templates/components/checkboxes/_template.checkboxes.njk +4 -3
  11. package/src/templates/components/checkboxes/params.checkboxes.yaml +8 -0
  12. package/src/templates/components/description-list/_examples.description-list.njk +63 -0
  13. package/src/templates/components/dropdown/_styles.dropdown.css +1 -0
  14. package/src/templates/components/dropdown/params.dropdown.yaml +6 -6
  15. package/src/templates/components/header/_examples.header.njk +35 -3
  16. package/src/templates/components/header/_template.header.header__dropdown.njk +17 -18
  17. package/src/templates/components/header/_template.header.header__offcanvas.njk +1 -1
  18. package/src/templates/components/header/_template.header.header__subnav.njk +16 -20
  19. package/src/templates/components/header/_template.header.njk +42 -30
  20. package/src/templates/components/header/params.header.yaml +45 -5
  21. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +2 -1
  22. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +1 -1
  23. package/src/templates/components/menubar/_examples.menubar.njk +349 -143
  24. package/src/templates/components/menubar/_styles.menubar.css +1 -0
  25. package/src/templates/components/menubar/_template.menubar.njk +2 -2
  26. package/src/templates/components/menubar/params.menubar.yaml +8 -0
@@ -26,10 +26,7 @@
26
26
  "role": "menuitem",
27
27
  "text": "Subitem 3"
28
28
  }
29
- ],
30
- "attributes": {
31
- "aria-labelledby": "menuitems-example-item-1-1"
32
- }
29
+ ]
33
30
  },
34
31
  "classes": "mb-base mr-base"
35
32
  },
@@ -52,10 +49,7 @@
52
49
  "role": "menuitemcheckbox",
53
50
  "text": "Subitem 3"
54
51
  }
55
- ],
56
- "attributes": {
57
- "aria-labelledby": "menuitems-example-item-2-1"
58
- }
52
+ ]
59
53
  }
60
54
  },
61
55
  {
@@ -66,7 +60,7 @@
66
60
  "items": [
67
61
  {
68
62
  "role": "group",
69
- "text": "Group",
63
+ "ariaLabel": "group label",
70
64
  "items": [
71
65
  {
72
66
  "role": "menuitemradio",
@@ -82,10 +76,7 @@
82
76
  }
83
77
  ]
84
78
  }
85
- ],
86
- "attributes": {
87
- "aria-labelledby": "menuitems-example-item-3-1"
88
- }
79
+ ]
89
80
  },
90
81
  "classes": "mb-base mr-base"
91
82
  },
@@ -147,10 +138,7 @@
147
138
  }
148
139
  ]
149
140
  }
150
- ],
151
- "attributes": {
152
- "aria-labelledby": "menuitems-example-item-4-1"
153
- }
141
+ ]
154
142
  },
155
143
  "classes": "mb-base mr-base"
156
144
  },
@@ -161,10 +149,7 @@
161
149
  "classes": "c-menubar__button--transparent mb-base mr-base",
162
150
  "href": "#"
163
151
  }
164
- ],
165
- "attributes": {
166
- "aria-label": "Menubar description of use"
167
- }
152
+ ]
168
153
  }
169
154
  },
170
155
  {
@@ -193,10 +178,7 @@
193
178
  "role": "menuitem",
194
179
  "text": "Subitem 3"
195
180
  }
196
- ],
197
- "attributes": {
198
- "aria-labelledby": "menuitems-example-item-1-2"
199
- }
181
+ ]
200
182
  },
201
183
  "classes": "mb-base mr-base"
202
184
  },
@@ -220,10 +202,7 @@
220
202
  "role": "menuitemcheckbox",
221
203
  "text": "Subitem 3"
222
204
  }
223
- ],
224
- "attributes": {
225
- "aria-labelledby": "menuitems-example-item-2-2"
226
- }
205
+ ]
227
206
  }
228
207
  },
229
208
  {
@@ -234,7 +213,7 @@
234
213
  "items": [
235
214
  {
236
215
  "role": "group",
237
- "text": "Group",
216
+ "ariaLabel": "group label",
238
217
  "items": [
239
218
  {
240
219
  "role": "menuitemradio",
@@ -251,10 +230,7 @@
251
230
  }
252
231
  ]
253
232
  }
254
- ],
255
- "attributes": {
256
- "aria-labelledby": "menuitems-example-item-3-2"
257
- }
233
+ ]
258
234
  },
259
235
  "classes": "c-menubar__button--has-selection mb-base mr-base"
260
236
  },
@@ -316,10 +292,7 @@
316
292
  }
317
293
  ]
318
294
  }
319
- ],
320
- "attributes": {
321
- "aria-labelledby": "menuitems-example-item-4-2"
322
- }
295
+ ]
323
296
  },
324
297
  "classes": "c-menubar__button--has-selection mb-base mr-base"
325
298
  },
@@ -330,10 +303,315 @@
330
303
  "classes": "c-menubar__button--transparent mb-base mr-base",
331
304
  "href": "#"
332
305
  }
333
- ],
334
- "attributes": {
335
- "aria-label": "Menubar description of use"
336
- }
306
+ ]
307
+ }
308
+ },
309
+ {
310
+ "name": "With one disabled parent item",
311
+ "data": {
312
+ "id": "with-disabled",
313
+ "idPrefix": "disabled-example",
314
+ "ariaLabel":"Menubar description",
315
+ "items": [
316
+ {
317
+ "text": "Menuitem",
318
+ "ariaLabel": "Menuitem",
319
+ "id": "menuitems-disabled-example-item-1-2",
320
+ "disabled": true,
321
+ "sub": {
322
+ "items": [
323
+ {
324
+ "role": "menuitem",
325
+ "text": "Subitem 1"
326
+ },
327
+ {
328
+ "role": "menuitem",
329
+ "text": "Subitem 2"
330
+ },
331
+ {
332
+ "role": "menuitem",
333
+ "text": "Subitem 3"
334
+ }
335
+ ]
336
+ },
337
+ "classes": "mb-base mr-base"
338
+ },
339
+ {
340
+ "text": "Menuitemcheckbox",
341
+ "ariaLabel": "Menuitemcheckbox",
342
+ "id": "menuitems-disabled-example-item-2-2",
343
+ "classes": "mb-base mr-base",
344
+ "sub": {
345
+ "items": [
346
+ {
347
+ "role": "menuitemcheckbox",
348
+ "text": "Subitem 1"
349
+ },
350
+ {
351
+ "role": "menuitemcheckbox",
352
+ "text": "Subitem 2",
353
+ "checked": true
354
+ },
355
+ {
356
+ "role": "menuitemcheckbox",
357
+ "text": "Subitem 3"
358
+ }
359
+ ]
360
+ }
361
+ },
362
+ {
363
+ "text": "Menuitemradio",
364
+ "ariaLabel": "Menuitemradio",
365
+ "id": "menuitems-disabled-example-item-3-2",
366
+ "sub": {
367
+ "items": [
368
+ {
369
+ "role": "group",
370
+ "ariaLabel": "group label",
371
+ "items": [
372
+ {
373
+ "role": "menuitemradio",
374
+ "text": "Radio 1"
375
+ },
376
+ {
377
+ "role": "menuitemradio",
378
+ "text": "Radio 2",
379
+ "checked": true
380
+ },
381
+ {
382
+ "role": "menuitemradio",
383
+ "text": "Radio 3"
384
+ }
385
+ ]
386
+ }
387
+ ]
388
+ },
389
+ "classes": "mb-base mr-base"
390
+ },
391
+ {
392
+ "text": "Mixed items",
393
+ "ariaLabel": "Mixeditems",
394
+ "id": "menuitems-disabled-example-item-4-2",
395
+ "sub": {
396
+ "items": [
397
+ {
398
+ "role": "group",
399
+ "ariaLabel": "Tamaño de letra",
400
+ "items": [
401
+ {
402
+ "role": "menuitem",
403
+ "text": "Tamaño mayor"
404
+ },
405
+ {
406
+ "role": "menuitem",
407
+ "text": "Tamaño menor"
408
+ }
409
+ ]
410
+ },
411
+ {
412
+ "role": "separator"
413
+ },
414
+ {
415
+ "role": "group",
416
+ "ariaLabel": "Estilo de letra",
417
+ "items": [
418
+ {
419
+ "role": "menuitemcheckbox",
420
+ "text": "Negritas"
421
+ },
422
+ {
423
+ "role": "menuitemcheckbox",
424
+ "text": "Itálicas"
425
+ }
426
+ ]
427
+ },
428
+ {
429
+ "role": "separator"
430
+ },
431
+ {
432
+ "role": "group",
433
+ "ariaLabel": "Estilo de texto",
434
+ "items": [
435
+ {
436
+ "role": "menuitemradio",
437
+ "text": "Ninguno"
438
+ },
439
+ {
440
+ "role": "menuitemradio",
441
+ "text": "Tachado"
442
+ },
443
+ {
444
+ "role": "menuitemradio",
445
+ "text": "Subrayado"
446
+ }
447
+ ]
448
+ }
449
+ ]
450
+ },
451
+ "classes": "mb-base mr-base"
452
+ },
453
+ {
454
+ "text": "Menuitem solo",
455
+ "ariaLabel": "Menuitem solo",
456
+ "id": "menuitems-disabled-example-item-6-2",
457
+ "classes": "c-menubar__button--transparent mb-base mr-base",
458
+ "href": "#"
459
+ }
460
+ ]
461
+ }
462
+ },
463
+ {
464
+ "name": "With one active parent item",
465
+ "data": {
466
+ "id": "with-active",
467
+ "idPrefix": "active-example",
468
+ "ariaLabel":"Menubar description",
469
+ "items": [
470
+ {
471
+ "text": "Menuitem",
472
+ "ariaLabel": "Menuitem",
473
+ "id": "menuitems-active-example-item-1-2",
474
+ "active": true,
475
+ "sub": {
476
+ "items": [
477
+ {
478
+ "role": "menuitem",
479
+ "text": "Subitem 1"
480
+ },
481
+ {
482
+ "role": "menuitem",
483
+ "text": "Subitem 2"
484
+ },
485
+ {
486
+ "role": "menuitem",
487
+ "text": "Subitem 3"
488
+ }
489
+ ]
490
+ },
491
+ "classes": "mb-base mr-base"
492
+ },
493
+ {
494
+ "text": "Menuitemcheckbox",
495
+ "ariaLabel": "Menuitemcheckbox",
496
+ "id": "menuitems-active-example-item-2-2",
497
+ "classes": "mb-base mr-base",
498
+ "sub": {
499
+ "items": [
500
+ {
501
+ "role": "menuitemcheckbox",
502
+ "text": "Subitem 1"
503
+ },
504
+ {
505
+ "role": "menuitemcheckbox",
506
+ "text": "Subitem 2",
507
+ "checked": true
508
+ },
509
+ {
510
+ "role": "menuitemcheckbox",
511
+ "text": "Subitem 3"
512
+ }
513
+ ]
514
+ }
515
+ },
516
+ {
517
+ "text": "Menuitemradio",
518
+ "ariaLabel": "Menuitemradio",
519
+ "id": "menuitems-active-example-item-3-2",
520
+ "sub": {
521
+ "items": [
522
+ {
523
+ "role": "group",
524
+ "ariaLabel": "group label",
525
+ "items": [
526
+ {
527
+ "role": "menuitemradio",
528
+ "text": "Radio 1"
529
+ },
530
+ {
531
+ "role": "menuitemradio",
532
+ "text": "Radio 2",
533
+ "checked": true
534
+ },
535
+ {
536
+ "role": "menuitemradio",
537
+ "text": "Radio 3"
538
+ }
539
+ ]
540
+ }
541
+ ]
542
+ },
543
+ "classes": "mb-base mr-base"
544
+ },
545
+ {
546
+ "text": "Mixed items",
547
+ "ariaLabel": "Mixeditems",
548
+ "id": "menuitems-active-example-item-4-2",
549
+ "sub": {
550
+ "items": [
551
+ {
552
+ "role": "group",
553
+ "ariaLabel": "Tamaño de letra",
554
+ "items": [
555
+ {
556
+ "role": "menuitem",
557
+ "text": "Tamaño mayor"
558
+ },
559
+ {
560
+ "role": "menuitem",
561
+ "text": "Tamaño menor"
562
+ }
563
+ ]
564
+ },
565
+ {
566
+ "role": "separator"
567
+ },
568
+ {
569
+ "role": "group",
570
+ "ariaLabel": "Estilo de letra",
571
+ "items": [
572
+ {
573
+ "role": "menuitemcheckbox",
574
+ "text": "Negritas"
575
+ },
576
+ {
577
+ "role": "menuitemcheckbox",
578
+ "text": "Itálicas"
579
+ }
580
+ ]
581
+ },
582
+ {
583
+ "role": "separator"
584
+ },
585
+ {
586
+ "role": "group",
587
+ "ariaLabel": "Estilo de texto",
588
+ "items": [
589
+ {
590
+ "role": "menuitemradio",
591
+ "text": "Ninguno"
592
+ },
593
+ {
594
+ "role": "menuitemradio",
595
+ "text": "Tachado"
596
+ },
597
+ {
598
+ "role": "menuitemradio",
599
+ "text": "Subrayado"
600
+ }
601
+ ]
602
+ }
603
+ ]
604
+ },
605
+ "classes": "mb-base mr-base"
606
+ },
607
+ {
608
+ "text": "Menuitem solo",
609
+ "ariaLabel": "Menuitem solo",
610
+ "id": "menuitems-active-example-item-6-2",
611
+ "classes": "c-menubar__button--transparent mb-base mr-base",
612
+ "href": "#"
613
+ }
614
+ ]
337
615
  }
338
616
  },
339
617
  {
@@ -362,10 +640,7 @@
362
640
  "role": "menuitem",
363
641
  "text": "Subitem 3"
364
642
  }
365
- ],
366
- "attributes": {
367
- "aria-labelledby": "small-example-item-1"
368
- }
643
+ ]
369
644
  },
370
645
  "classes": "c-menubar__button--sm mb-sm mr-sm"
371
646
  },
@@ -389,10 +664,7 @@
389
664
  "role": "menuitemcheckbox",
390
665
  "text": "Subitem 3"
391
666
  }
392
- ],
393
- "attributes": {
394
- "aria-labelledby": "small-example-item-2"
395
- }
667
+ ]
396
668
  }
397
669
  },
398
670
  {
@@ -403,7 +675,7 @@
403
675
  "items": [
404
676
  {
405
677
  "role": "group",
406
- "text": "Group",
678
+ "ariaLabel": "group label",
407
679
  "items": [
408
680
  {
409
681
  "role": "menuitemradio",
@@ -420,10 +692,7 @@
420
692
  }
421
693
  ]
422
694
  }
423
- ],
424
- "attributes": {
425
- "aria-labelledby": "small-example-item-3"
426
- }
695
+ ]
427
696
  },
428
697
  "classes": "c-menubar__button--sm mb-sm mr-sm"
429
698
  },
@@ -485,10 +754,7 @@
485
754
  }
486
755
  ]
487
756
  }
488
- ],
489
- "attributes": {
490
- "aria-labelledby": "small-example-item-4"
491
- }
757
+ ]
492
758
  },
493
759
  "classes": "c-menubar__button--sm mb-sm mr-sm"
494
760
  },
@@ -499,10 +765,7 @@
499
765
  "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
500
766
  "href": "#"
501
767
  }
502
- ],
503
- "attributes": {
504
- "aria-label": "Menubar description of use"
505
- }
768
+ ]
506
769
  }
507
770
  },
508
771
  {
@@ -531,10 +794,7 @@
531
794
  "role": "menuitem",
532
795
  "text": "Subitem 3"
533
796
  }
534
- ],
535
- "attributes": {
536
- "aria-labelledby": "transparent-example-item-1"
537
- }
797
+ ]
538
798
  },
539
799
  "classes": "c-menubar__button--transparent mb-sm mr-sm"
540
800
  },
@@ -558,10 +818,7 @@
558
818
  "role": "menuitemcheckbox",
559
819
  "text": "Subitem 3"
560
820
  }
561
- ],
562
- "attributes": {
563
- "aria-labelledby": "transparent-example-item-2"
564
- }
821
+ ]
565
822
  }
566
823
  },
567
824
  {
@@ -572,7 +829,7 @@
572
829
  "items": [
573
830
  {
574
831
  "role": "group",
575
- "text": "Group",
832
+ "ariaLabel": "group label",
576
833
  "items": [
577
834
  {
578
835
  "role": "menuitemradio",
@@ -589,10 +846,7 @@
589
846
  }
590
847
  ]
591
848
  }
592
- ],
593
- "attributes": {
594
- "aria-labelledby": "transparent-example-item-3"
595
- }
849
+ ]
596
850
  },
597
851
  "classes": "c-menubar__button--transparent mb-sm mr-sm"
598
852
  },
@@ -654,10 +908,7 @@
654
908
  }
655
909
  ]
656
910
  }
657
- ],
658
- "attributes": {
659
- "aria-labelledby": "transparent-example-item-4"
660
- }
911
+ ]
661
912
  },
662
913
  "classes": "c-menubar__button--transparent mb-sm mr-sm"
663
914
  },
@@ -668,10 +919,7 @@
668
919
  "classes": "c-menubar__button--transparent mb-sm mr-sm",
669
920
  "href": "#"
670
921
  }
671
- ],
672
- "attributes": {
673
- "aria-label": "Menubar description of use"
674
- }
922
+ ]
675
923
  }
676
924
  },
677
925
  {
@@ -700,10 +948,7 @@
700
948
  "role": "menuitem",
701
949
  "text": "Subitem 3"
702
950
  }
703
- ],
704
- "attributes": {
705
- "aria-labelledby": "header-example-item-1"
706
- }
951
+ ]
707
952
  },
708
953
  "classes": "c-menubar__button--header mr-base"
709
954
  },
@@ -727,10 +972,7 @@
727
972
  "role": "menuitemcheckbox",
728
973
  "text": "Subitem 3"
729
974
  }
730
- ],
731
- "attributes": {
732
- "aria-labelledby": "header-example-item-2"
733
- }
975
+ ]
734
976
  }
735
977
  },
736
978
  {
@@ -741,7 +983,7 @@
741
983
  "items": [
742
984
  {
743
985
  "role": "group",
744
- "text": "Group",
986
+ "ariaLabel": "group label",
745
987
  "items": [
746
988
  {
747
989
  "role": "menuitemradio",
@@ -758,10 +1000,7 @@
758
1000
  }
759
1001
  ]
760
1002
  }
761
- ],
762
- "attributes": {
763
- "aria-labelledby": "header-example-item-3"
764
- }
1003
+ ]
765
1004
  },
766
1005
  "classes": "c-menubar__button--header mr-base"
767
1006
  },
@@ -823,10 +1062,7 @@
823
1062
  }
824
1063
  ]
825
1064
  }
826
- ],
827
- "attributes": {
828
- "aria-labelledby": "header-example-item-4"
829
- }
1065
+ ]
830
1066
  },
831
1067
  "classes": "c-menubar__button--header mr-base"
832
1068
  },
@@ -838,10 +1074,7 @@
838
1074
  "href": "#"
839
1075
  }
840
1076
  ],
841
- "classes": "bg-black",
842
- "attributes": {
843
- "aria-label": "Menubar description of use"
844
- }
1077
+ "classes": "bg-black"
845
1078
  }
846
1079
  },
847
1080
  {
@@ -939,10 +1172,7 @@
939
1172
  }
940
1173
  ]
941
1174
  }
942
- ],
943
- "attributes": {
944
- "aria-labelledby": "filter-example-item-2"
945
- }
1175
+ ]
946
1176
  }
947
1177
  },
948
1178
  {
@@ -1035,10 +1265,7 @@
1035
1265
  "role": "menuitemcheckbox",
1036
1266
  "text": "Tramitación íntegra digital"
1037
1267
  }
1038
- ],
1039
- "attributes": {
1040
- "aria-labelledby": "filter-example-item-3"
1041
- }
1268
+ ]
1042
1269
  }
1043
1270
  },
1044
1271
  {
@@ -1056,7 +1283,7 @@
1056
1283
  "items": [
1057
1284
  {
1058
1285
  "role": "group",
1059
- "text": "Group",
1286
+ "ariaLabel": "Tipos de ordenación",
1060
1287
  "items": [
1061
1288
  {
1062
1289
  "role": "menuitemradio",
@@ -1077,18 +1304,12 @@
1077
1304
  }
1078
1305
  ]
1079
1306
  }
1080
- ],
1081
- "attributes": {
1082
- "aria-labelledby": "filter-example-item-4"
1083
- }
1307
+ ]
1084
1308
  },
1085
1309
  "classes": "c-menubar__button--sm mb-sm"
1086
1310
  }
1087
1311
  ],
1088
- "classes": "c-menubar--last-right",
1089
- "attributes": {
1090
- "aria-label": "Filtrar items de la lista de Servicios"
1091
- }
1312
+ "classes": "c-menubar--last-right"
1092
1313
  }
1093
1314
  },
1094
1315
  {
@@ -1120,10 +1341,7 @@
1120
1341
  "role": "menuitem",
1121
1342
  "text": "Subitem 3"
1122
1343
  }
1123
- ],
1124
- "attributes": {
1125
- "aria-labelledby": "menuitems-example-item-1-3"
1126
- }
1344
+ ]
1127
1345
  },
1128
1346
  "classes": "mb-base mr-base"
1129
1347
  },
@@ -1146,10 +1364,7 @@
1146
1364
  "role": "menuitemcheckbox",
1147
1365
  "text": "Subitem 3"
1148
1366
  }
1149
- ],
1150
- "attributes": {
1151
- "aria-labelledby": "menuitems-example-item-2-3"
1152
- }
1367
+ ]
1153
1368
  }
1154
1369
  },
1155
1370
  {
@@ -1160,7 +1375,7 @@
1160
1375
  "items": [
1161
1376
  {
1162
1377
  "role": "group",
1163
- "text": "Group",
1378
+ "ariaLabel": "group label",
1164
1379
  "items": [
1165
1380
  {
1166
1381
  "role": "menuitemradio",
@@ -1176,10 +1391,7 @@
1176
1391
  }
1177
1392
  ]
1178
1393
  }
1179
- ],
1180
- "attributes": {
1181
- "aria-labelledby": "menuitems-example-item-3-3"
1182
- }
1394
+ ]
1183
1395
  },
1184
1396
  "classes": "mb-base mr-base"
1185
1397
  },
@@ -1241,10 +1453,7 @@
1241
1453
  }
1242
1454
  ]
1243
1455
  }
1244
- ],
1245
- "attributes": {
1246
- "aria-labelledby": "menuitems-example-item-4-3"
1247
- }
1456
+ ]
1248
1457
  },
1249
1458
  "classes": "mb-base mr-base"
1250
1459
  },
@@ -1255,10 +1464,7 @@
1255
1464
  "classes": "c-menubar__button--transparent mb-base mr-base",
1256
1465
  "href": "#"
1257
1466
  }
1258
- ],
1259
- "attributes": {
1260
- "aria-label": "Menubar description of use"
1261
- }
1467
+ ]
1262
1468
  }
1263
1469
  }
1264
1470
  ] %}