@qhealth-design-system/core 1.16.4 → 1.17.0

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 (103) hide show
  1. package/.storybook/assets/storybook.css +1 -1
  2. package/.storybook/globals.js +10 -0
  3. package/CHANGELOG.md +4 -0
  4. package/package.json +1 -1
  5. package/src/components/_global/css/cta_links/component.scss +107 -14
  6. package/src/components/_global/css/forms/control_inputs/component.scss +65 -77
  7. package/src/components/_global/css/link_columns/component.scss +2 -2
  8. package/src/components/_global/html/scripts.html +0 -2
  9. package/src/components/_global/js/cta_links/global.js +33 -0
  10. package/src/components/_global/js/global.js +175 -138
  11. package/src/components/_global/js/tabs/global.js +6 -2
  12. package/src/components/_template/html/component-page.html +25 -31
  13. package/src/components/banner_advanced/html/component.hbs +1 -1
  14. package/src/components/breadcrumbs/js/global.js +17 -4
  15. package/src/components/card_feature/html/component.hbs +1 -1
  16. package/src/components/card_multi_action/html/component.hbs +1 -1
  17. package/src/components/card_single_action/css/component.scss +38 -47
  18. package/src/components/card_single_action/html/component.hbs +1 -1
  19. package/src/components/code/css/component.scss +72 -73
  20. package/src/components/code/html/component.hbs +62 -19
  21. package/src/components/code/js/global.js +102 -86
  22. package/src/components/footer/css/component.scss +2 -4
  23. package/src/components/footer/html/component.hbs +11 -8
  24. package/src/components/header/css/component.scss +11 -11
  25. package/src/components/header/html/component.hbs +3 -3
  26. package/src/components/header/js/global.js +58 -65
  27. package/src/components/in_page_navigation/js/global.js +34 -31
  28. package/src/components/internal_navigation/js/global.js +13 -3
  29. package/src/components/main_navigation/css/component.scss +79 -13
  30. package/src/components/main_navigation/html/component.hbs +5 -5
  31. package/src/components/main_navigation/js/global.js +94 -115
  32. package/src/components/mega_main_navigation/css/component.scss +27 -14
  33. package/src/components/mega_main_navigation/html/component.hbs +5 -5
  34. package/src/components/mega_main_navigation/js/global.js +50 -55
  35. package/src/components/page_alert/css/component.scss +141 -179
  36. package/src/components/prefooter/css/component.scss +62 -0
  37. package/src/components/prefooter/js/manifest.json +9 -0
  38. package/src/data/current.json +3 -9
  39. package/src/data/site.json +3 -3
  40. package/src/html/component-a-z_listing.html +13 -41
  41. package/src/html/component-abstract.html +536 -40
  42. package/src/html/component-accordion.html +537 -41
  43. package/src/html/component-banner.html +537 -40
  44. package/src/html/component-banner_advanced.html +14 -41
  45. package/src/html/component-banner_basic.html +13 -40
  46. package/src/html/component-banner_intermediate.html +14 -41
  47. package/src/html/component-basic_search.html +10 -26
  48. package/src/html/component-body.html +541 -52
  49. package/src/html/component-breadcrumbs.html +538 -43
  50. package/src/html/component-btn.html +471 -69
  51. package/src/html/component-callout.html +536 -40
  52. package/src/html/component-card_feature.html +282 -312
  53. package/src/html/component-card_multi_action.html +651 -217
  54. package/src/html/component-card_no_action.html +163 -289
  55. package/src/html/component-card_single_action.html +283 -312
  56. package/src/html/component-code.html +13 -40
  57. package/src/html/component-file_upload.html +13 -41
  58. package/src/html/component-footer.html +537 -41
  59. package/src/html/component-forms.html +206 -72
  60. package/src/html/component-global-elements.html +720 -152
  61. package/src/html/component-global_alert.html +536 -41
  62. package/src/html/component-header.html +537 -42
  63. package/src/html/component-horizontal_rule.html +459 -65
  64. package/src/html/component-in_page_navigation.html +544 -48
  65. package/src/html/component-internal_navigation.html +537 -41
  66. package/src/html/component-left_hand_navigation.html +13 -41
  67. package/src/html/component-loading_spinner.html +13 -42
  68. package/src/html/component-main_navigation.html +537 -41
  69. package/src/html/component-mega_main_navigation.html +537 -42
  70. package/src/html/component-multi_column.html +536 -40
  71. package/src/html/component-overflow_menu.html +12 -35
  72. package/src/html/component-page_alert.html +536 -40
  73. package/src/html/component-page_footer_info.html +583 -0
  74. package/src/html/component-pagination.html +459 -65
  75. package/src/html/component-promo_panel.html +13 -43
  76. package/src/html/component-tab.html +13 -41
  77. package/src/html/component-tag_list.html +495 -77
  78. package/src/html/component-toggle_tip.html +2 -3
  79. package/src/html/component-tool_tip.html +2 -3
  80. package/src/html/component-video_player.html +13 -41
  81. package/src/html/components.html +306 -88
  82. package/src/html/home.html +1807 -628
  83. package/src/html/index.html +9 -22
  84. package/src/html/inner-with-nav.html +551 -137
  85. package/src/html/inner.html +570 -59
  86. package/src/stories/Checkboxes/Checkboxes.js +41 -0
  87. package/src/stories/Checkboxes/Checkboxes.mdx +45 -0
  88. package/src/stories/Checkboxes/Checkboxes.stories.js +209 -0
  89. package/src/stories/RadioButtons/RadioButtons.js +41 -0
  90. package/src/stories/RadioButtons/RadioButtons.mdx +45 -0
  91. package/src/stories/RadioButtons/RadioButtons.stories.js +209 -0
  92. package/src/styles/imports/mixins.scss +5 -43
  93. package/src/components/updated_date/css/component.scss +0 -24
  94. package/src/components/updated_date/js/manifest.json +0 -9
  95. package/src/components/widgets/css/component.scss +0 -130
  96. package/src/components/widgets/html/component.hbs +0 -8
  97. package/src/components/widgets/html/default.html +0 -3
  98. package/src/components/widgets/js/current.json +0 -471
  99. package/src/components/widgets/js/manifest.json +0 -9
  100. package/src/components/widgets/js/site.json +0 -350
  101. package/src/html/component-updated_date.html +0 -88
  102. package/src/html/component-widgets.html +0 -90
  103. /package/src/components/{updated_date → prefooter}/html/component.hbs +0 -0
package/src/html/component-forms.html CHANGED
@@ -58,7 +58,13 @@
58
58
  </div>
59
59
  <div class="qld__body qld__form">
60
60
  <div class="container-fluid">
61
- <h2>Select width variants (squiz)</h2>
61
+ <fieldset class="qld__checkboxes" role="group" aria-labelledby="qld__checkboxes-legend-cb6">
62
+ <legend id="qld__checkboxes-legend-cb6"><abbr title="required">*</abbr>My legend</legend><div class="qld__control-input qld__control-input--small"><input type="checkbox" id="qld__checkbox-cb61" name="qld__checkbox-cb6" checked=""><label for="qld__checkbox-cb61">cat</label></div><div class="qld__control-input qld__control-input--small"><input type="checkbox" id="qld__checkbox-cb62" name="qld__checkbox-cb6"><label for="qld__checkbox-cb62">dog</label></div><div class="qld__control-input qld__control-input--small"><input type="checkbox" id="qld__checkbox-cb63" name="qld__checkbox-cb6" checked=""><label for="qld__checkbox-cb63">horse</label></div><div class="qld__control-input qld__control-input--small"><input type="checkbox" id="qld__checkbox-cb64" name="qld__checkbox-cb6"><label for="qld__checkbox-cb64">ram</label></div><div class="qld__control-input qld__control-input--small"><input type="checkbox" id="qld__checkbox-cb65" name="qld__checkbox-cb6" checked=""><label for="qld__checkbox-cb65">goat</label></div>
63
+ </fieldset>
64
+ <fieldset class="qld__radio-buttons" role="radiogroup" aria-labelledby="qld__radio-buttons-legend-rb6">
65
+ <legend id="qld__radio-buttons-legend-rb6">My legend</legend><div class="qld__control-input qld__control-input--small"><input type="radio" id="qld__radio-rb61" name="qld__radio-rb6" checked="" value="qld__radio-rb61"><label for="qld__radio-rb61">cat</label></div><div class="qld__control-input qld__control-input--small"><input type="radio" id="qld__radio-rb62" name="qld__radio-rb6" value="qld__radio-rb62"><label for="qld__radio-rb62">dog</label></div><div class="qld__control-input qld__control-input--small"><input type="radio" id="qld__radio-rb63" name="qld__radio-rb6" checked="" value="qld__radio-rb63"><label for="qld__radio-rb63">horse</label></div><div class="qld__control-input qld__control-input--small"><input type="radio" id="qld__radio-rb64" name="qld__radio-rb6" value="qld__radio-rb64"><label for="qld__radio-rb64">ram</label></div><div class="qld__control-input qld__control-input--small"><input type="radio" id="qld__radio-rb65" name="qld__radio-rb6" checked="" value="qld__radio-rb65"><label for="qld__radio-rb65">goat</label></div>
66
+ </fieldset>
67
+ <h2>Width variants (squiz)</h2>
62
68
  <fieldset class="sq-form-section" id="sq_form_section_402723">
63
69
  <div class="sq-form-question sq-form-question-select " id="sq_form_field_wrapper_q402723_q1"><label class="sq-form-question-title" for="q402723_q1">qld__field-width--2char</label> <div class="sq-form-question-answer"><div class="qld__select"><select name="q402723:q1" id="q402723_q1" class="qld__text-input--block qld__field-width--2char"><option value="1" selected="selected">1</option></select></div></div>
64
70
  </div><div class="sq-form-question sq-form-question-select " id="sq_form_field_wrapper_q402723_q2"><label class="sq-form-question-title" for="q402723_q2">qld__field-width--3char</label> <div class="sq-form-question-answer"><div class="qld__select"><select name="q402723:q2" id="q402723_q2" class="qld__text-input--block qld__field-width--3char"><option value="df" selected="selected">sdf</option><option value="ds">ffs</option></select></div></div>
@@ -255,11 +261,8 @@
255
261
  </div>
256
262
  </fieldset>
257
263
 
258
-
259
-
260
-
261
- <fieldset>
262
- <legend>Checkbox</legend>
264
+ <fieldset class="qld__checkbox-group" role="group" aria-labelledby="checkbox-group-legend">
265
+ <legend id="checkbox-group-legend">Checkbox</legend>
263
266
 
264
267
  <div>
265
268
  <input type="checkbox" id="check-one" name="check-one" checked>
@@ -275,11 +278,11 @@
275
278
  <div class="sq-form-question sq-form-question-tickbox-list "
276
279
  id="sq_form_field_wrapper_q49141_q17">
277
280
  <fieldset>
278
- <legend class="sq-form-question-title">checkbox - Matrix output</legend>
281
+ <legend class="sq-form-question-title">Checkbox - Matrix output</legend>
279
282
  <div class="sq-form-question-answer">
280
283
  <ul>
281
284
  <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_0"
282
- value="0" class="sq-form-field"> <label
285
+ value="0" class="sq-form-field" checked> <label
283
286
  for="q49141_q17_0">One</label></li>
284
287
  <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_1"
285
288
  value="1" class="sq-form-field"> <label
@@ -289,9 +292,38 @@
289
292
  </fieldset>
290
293
  </div>
291
294
 
292
-
293
295
  <fieldset>
294
- <legend>Option / radio</legend>
296
+ <legend>Checkbox (disabled)</legend>
297
+ <div>
298
+ <input type="checkbox" id="check-one-disabled" name="check-one-disabled" checked disabled>
299
+ <label for="check-one-disabled">One</label>
300
+ </div>
301
+ <div>
302
+ <input type="checkbox" id="check-two-disabled" name="check-two-disabled" disabled>
303
+ <label for="check-two-disabled">Two</label>
304
+ </div>
305
+ </fieldset>
306
+
307
+ <div class="sq-form-question sq-form-question-tickbox-list "
308
+ id="sq_form_field_wrapper_q49141_q17">
309
+ <fieldset>
310
+ <legend class="sq-form-question-title">Checkbox - Matrix output (disabled)</legend>
311
+ <div class="sq-form-question-answer">
312
+ <ul>
313
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_0_disabled"
314
+ value="0" class="sq-form-field" checked disabled> <label
315
+ for="q49141_q17_0_disabled">One</label></li>
316
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_1_disabled"
317
+ value="1" class="sq-form-field" disabled> <label
318
+ for="q49141_q17_1_disabled">Two</label></li>
319
+ </ul>
320
+ </div>
321
+ </fieldset>
322
+ </div>
323
+
324
+
325
+ <fieldset class="qld__radio-group" role="radiogroup" aria-labelledby="radio-group-legend">
326
+ <legend id="radio-group-legend">Option / radio</legend>
295
327
 
296
328
  <div>
297
329
  <input type="radio" id="radio-one" name="radio" value="radio-one" checked>
@@ -312,12 +344,12 @@
312
344
  <div class="sq-form-question sq-form-question-option-list "
313
345
  id="sq_form_field_wrapper_q49141_q15">
314
346
  <fieldset>
315
- <legend class="sq-form-question-title">Option / radio - Matrix output <abbr
347
+ <legend class="sq-form-question-title">Option / radio - Matrix output<abbr
316
348
  class="sq-form-required-field" title="required">*</abbr></legend>
317
349
  <div class="sq-form-question-answer">
318
350
  <ul>
319
351
  <li><input type="radio" name="q49141:q15" id="q49141_q15_0" value="0"
320
- required="" class="sq-form-field"> <label
352
+ required="" class="sq-form-field" checked> <label
321
353
  for="q49141_q15_0">Yes</label></li>
322
354
  <li><input type="radio" name="q49141:q15" id="q49141_q15_1" value="1"
323
355
  required="" class="sq-form-field"> <label
@@ -328,7 +360,45 @@
328
360
  </div>
329
361
 
330
362
  <fieldset>
331
- <label for="pet-select">Select (html)</label>
363
+ <legend>Option / radio (disabled)</legend>
364
+
365
+ <div>
366
+ <input type="radio" id="radio-one-disabled" name="radio" value="radio-one-disabled" checked disabled>
367
+ <label for="radio-one-disabled">One</label>
368
+ </div>
369
+
370
+ <div>
371
+ <input type="radio" id="radio-two-disabled" name="radio" value="radio-two-disabled" disabled>
372
+ <label for="radio-two-disabled">Two</label>
373
+ </div>
374
+
375
+ <div>
376
+ <input type="radio" id="radio-three-disabled" name="radio" value="radio-three-disabled" disabled>
377
+ <label for="radio-three-disabled">Three</label>
378
+ </div>
379
+ </fieldset>
380
+
381
+ <div class="sq-form-question sq-form-question-option-list "
382
+ id="sq_form_field_wrapper_q49141_q15">
383
+ <fieldset>
384
+ <legend class="sq-form-question-title">Option / radio - Matrix output (disabled)<abbr
385
+ class="sq-form-required-field" title="required">*</abbr></legend>
386
+ <div class="sq-form-question-answer">
387
+ <ul>
388
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_0_disabled" value="0"
389
+ required="" class="sq-form-field" checked disabled> <label
390
+ for="q49141_q15_0_disabled">Yes</label></li>
391
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_1_disabled" value="1"
392
+ required="" class="sq-form-field" disabled> <label
393
+ for="q49141_q15_1_disabled">No</label></li>
394
+ </ul>
395
+ </div>
396
+ </fieldset>
397
+ </div>
398
+
399
+ <fieldset>
400
+ <label for="pet-select">Select</label>
401
+
332
402
  <select id="pet-select">
333
403
  <option value="">--Please choose an option--</option>
334
404
  <option value="dog">Dog</option>
@@ -586,7 +656,7 @@
586
656
 
587
657
  <!-- Radio option 2-->
588
658
  <div class="qld__control-input qld__control-input--block">
589
- <input class="qld__control-input__input" type="radio"
659
+ <input class="qld__control-input__input qld__input--valid" type="radio"
590
660
  name="2-radio-ex" id="2-rb-phone" role="radio">
591
661
  <label class="qld__control-input__text"
592
662
  for="2-rb-phone">Phone</label>
@@ -594,7 +664,7 @@
594
664
 
595
665
  <!-- Radio option 3-->
596
666
  <div class="qld__control-input qld__control-input--block">
597
- <input class="qld__control-input__input" type="radio"
667
+ <input class="qld__control-input__input qld__input--valid" type="radio"
598
668
  name="2-radio-ex" id="2-rb-tablet" role="radio">
599
669
  <label class="qld__control-input__text"
600
670
  for="2-rb-tablet">Tablet</label>
@@ -637,7 +707,7 @@
637
707
  <!-- Radio option 1-->
638
708
  <div class="qld__control-input qld__control-input--block">
639
709
  <input class="qld__control-input__input qld__input--error"
640
- type="radio" name="dark-1--radio-ex" id="dark-1-rb-laptop"
710
+ type="radio" name="dark-1--radio-ex" id="3-rb-laptop"
641
711
  role="radio">
642
712
  <label class="qld__control-input__text"
643
713
  for="3-rb-laptop">Laptop</label>
@@ -646,7 +716,7 @@
646
716
  <!-- Radio option 2-->
647
717
  <div class="qld__control-input qld__control-input--block">
648
718
  <input class="qld__control-input__input qld__input--error"
649
- type="radio" name="dark-1--radio-ex" id="dark-1-rb-phone"
719
+ type="radio" name="dark-1--radio-ex" id="3-rb-phone"
650
720
  role="radio">
651
721
  <label class="qld__control-input__text"
652
722
  for="3-rb-phone">Phone</label>
@@ -655,7 +725,7 @@
655
725
  <!-- Radio option 3-->
656
726
  <div class="qld__control-input qld__control-input--block">
657
727
  <input class="qld__control-input__input qld__input--error"
658
- type="radio" name="dark-1--radio-ex" id="dark-1-rb-tablet"
728
+ type="radio" name="dark-1--radio-ex" id="3-rb-tablet"
659
729
  role="radio">
660
730
  <label class="qld__control-input__text"
661
731
  for="3-rb-tablet">Tablet</label>
@@ -931,50 +1001,78 @@
931
1001
  <legend>Checkbox</legend>
932
1002
 
933
1003
  <div>
934
- <input type="checkbox" id="check-one" name="check-one" checked>
935
- <label for="check-one">One</label>
1004
+ <input type="checkbox" id="check-one1" name="check-one1" checked>
1005
+ <label for="check-one1">One</label>
936
1006
  </div>
937
1007
 
938
1008
  <div>
939
- <input type="checkbox" id="check-two" name="check-two">
940
- <label for="check-two">Two</label>
1009
+ <input type="checkbox" id="check-two2" name="check-two2">
1010
+ <label for="check-two2">Two</label>
941
1011
  </div>
942
1012
  </fieldset>
943
1013
 
944
1014
  <div class="sq-form-question sq-form-question-tickbox-list "
945
1015
  id="sq_form_field_wrapper_q49141_q17">
946
1016
  <fieldset>
947
- <legend class="sq-form-question-title">checkbox - Matrix output</legend>
1017
+ <legend class="sq-form-question-title">Checkbox - Matrix output</legend>
948
1018
  <div class="sq-form-question-answer">
949
1019
  <ul>
950
- <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_0"
951
- value="0" class="sq-form-field"> <label
952
- for="q49141_q17_0">One</label></li>
953
- <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_1"
1020
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_00"
1021
+ value="0" class="sq-form-field" checked> <label
1022
+ for="q49141_q17_00">One</label></li>
1023
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_11"
954
1024
  value="1" class="sq-form-field"> <label
955
- for="q49141_q17_1">Two</label></li>
1025
+ for="q49141_q17_11">Two</label></li>
956
1026
  </ul>
957
1027
  </div>
958
1028
  </fieldset>
959
1029
  </div>
960
1030
 
1031
+ <fieldset>
1032
+ <legend>Checkbox (disabled)</legend>
1033
+ <div>
1034
+ <input type="checkbox" id="check-one-dark-disabled" name="check-one-dark-disabled" checked disabled>
1035
+ <label for="check-one-dark-disabled">One</label>
1036
+ </div>
1037
+ <div>
1038
+ <input type="checkbox" id="check-two-dark-disabled" name="check-two-dark-disabled" disabled>
1039
+ <label for="check-two-dark-disabled">Two</label>
1040
+ </div>
1041
+ </fieldset>
1042
+
1043
+ <div class="sq-form-question sq-form-question-tickbox-list "
1044
+ id="sq_form_field_wrapper_q49141_q17">
1045
+ <fieldset>
1046
+ <legend class="sq-form-question-title">Checkbox - Matrix output (disabled)</legend>
1047
+ <div class="sq-form-question-answer">
1048
+ <ul>
1049
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_0_dark_disabled"
1050
+ value="0" class="sq-form-field" checked disabled> <label
1051
+ for="q49141_q17_0_dark_disabled">One</label></li>
1052
+ <li><input type="checkbox" name="q49141:q17[]" id="q49141_q17_1_dark_disabled"
1053
+ value="1" class="sq-form-field" disabled> <label
1054
+ for="q49141_q17_1_dark_disabled">Two</label></li>
1055
+ </ul>
1056
+ </div>
1057
+ </fieldset>
1058
+ </div>
961
1059
 
962
1060
  <fieldset>
963
1061
  <legend>Option / radio</legend>
964
1062
 
965
1063
  <div>
966
- <input type="radio" id="radio-one" name="radio" value="radio-one" checked>
967
- <label for="radio-one">One</label>
1064
+ <input type="radio" id="radio-one1" name="radio" value="radio-one1" checked>
1065
+ <label for="radio-one1">One</label>
968
1066
  </div>
969
1067
 
970
1068
  <div>
971
- <input type="radio" id="radio-two" name="radio" value="radio-two">
972
- <label for="radio-two">Two</label>
1069
+ <input type="radio" id="radio-two2" name="radio" value="radio-two2">
1070
+ <label for="radio-two2">Two</label>
973
1071
  </div>
974
1072
 
975
1073
  <div>
976
- <input type="radio" id="radio-three" name="radio" value="radio-three">
977
- <label for="radio-three">Three</label>
1074
+ <input type="radio" id="radio-three3" name="radio" value="radio-three3">
1075
+ <label for="radio-three3">Three</label>
978
1076
  </div>
979
1077
  </fieldset>
980
1078
 
@@ -985,12 +1083,49 @@
985
1083
  class="sq-form-required-field" title="required">*</abbr></legend>
986
1084
  <div class="sq-form-question-answer">
987
1085
  <ul>
988
- <li><input type="radio" name="q49141:q15" id="q49141_q15_0"
989
- value="0" required="" class="sq-form-field"> <label
990
- for="q49141_q15_0">Yes</label></li>
991
- <li><input type="radio" name="q49141:q15" id="q49141_q15_1"
1086
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_00"
1087
+ value="0" required="" class="sq-form-field" checked> <label
1088
+ for="q49141_q15_00">Yes</label></li>
1089
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_11"
992
1090
  value="1" required="" class="sq-form-field"> <label
993
- for="q49141_q15_1">No</label></li>
1091
+ for="q49141_q15_11">No</label></li>
1092
+ </ul>
1093
+ </div>
1094
+ </fieldset>
1095
+ </div>
1096
+
1097
+ <fieldset>
1098
+ <legend>Option / radio (disabled)</legend>
1099
+
1100
+ <div>
1101
+ <input type="radio" id="radio-one-dark-disabled" name="radio" value="radio-one-dark-disabled" checked disabled>
1102
+ <label for="radio-one-dark-disabled">One</label>
1103
+ </div>
1104
+
1105
+ <div>
1106
+ <input type="radio" id="radio-two-dark-disabled" name="radio" value="radio-two-dark-disabled" disabled>
1107
+ <label for="radio-two-dark-disabled">Two</label>
1108
+ </div>
1109
+
1110
+ <div>
1111
+ <input type="radio" id="radio-three-dark-disabled" name="radio" value="radio-three-dark-disabled" disabled>
1112
+ <label for="radio-three-dark-disabled">Three</label>
1113
+ </div>
1114
+ </fieldset>
1115
+
1116
+ <div class="sq-form-question sq-form-question-option-list "
1117
+ id="sq_form_field_wrapper_q49141_q15">
1118
+ <fieldset>
1119
+ <legend class="sq-form-question-title">Option / radio - Matrix output (disabled)<abbr
1120
+ class="sq-form-required-field" title="required">*</abbr></legend>
1121
+ <div class="sq-form-question-answer">
1122
+ <ul>
1123
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_0_dark_disabled" value="0"
1124
+ required="" class="sq-form-field" checked disabled> <label
1125
+ for="q49141_q15_0_dark_disabled">Yes</label></li>
1126
+ <li><input type="radio" name="q49141:q15" id="q49141_q15_1_dark_disabled" value="1"
1127
+ required="" class="sq-form-field" disabled> <label
1128
+ for="q49141_q15_1_dark_disabled">No</label></li>
994
1129
  </ul>
995
1130
  </div>
996
1131
  </fieldset>
@@ -1131,28 +1266,28 @@
1131
1266
  <!-- Checkbox 1 with label and error class -->
1132
1267
  <div class="qld__control-input qld__control-input--block">
1133
1268
  <input class="qld__control-input__input qld__input--error"
1134
- type="checkbox" name="checkbox-example" id="Phone-1"
1269
+ type="checkbox" name="checkbox-example" id="Phone-11"
1135
1270
  aria-describedby="text-field-error">
1136
1271
  <label class="qld__control-input__text"
1137
- for="Phone-1">Phone</label>
1272
+ for="Phone-11">Phone</label>
1138
1273
  </div>
1139
1274
 
1140
1275
  <!-- Checkbox 2 with label and error class -->
1141
1276
  <div class="qld__control-input qld__control-input--block">
1142
1277
  <input class="qld__control-input__input qld__input--error"
1143
- type="checkbox" name="checkbox-example" id="Email-2"
1278
+ type="checkbox" name="checkbox-example" id="Email-22"
1144
1279
  aria-describedby="text-field-error">
1145
1280
  <label class="qld__control-input__text"
1146
- for="Email-2">Email</label>
1281
+ for="Email-22">Email</label>
1147
1282
  </div>
1148
1283
 
1149
1284
  <!-- Checkbox 3 with label and error class -->
1150
1285
  <div class="qld__control-input qld__control-input--block">
1151
1286
  <input class="qld__control-input__input qld__input--error"
1152
- type="checkbox" name="checkbox-example" id="Mail-3"
1287
+ type="checkbox" name="checkbox-example" id="Mail-33"
1153
1288
  aria-describedby="text-field-error">
1154
1289
  <label class="qld__control-input__text"
1155
- for="Mail-3">Mail</label>
1290
+ for="Mail-33">Mail</label>
1156
1291
  </div>
1157
1292
 
1158
1293
  </div>
@@ -1184,28 +1319,28 @@
1184
1319
  <!-- Checkbox 1 with label and success class -->
1185
1320
  <div class="qld__control-input qld__control-input--block">
1186
1321
  <input class="qld__control-input__input qld__input--valid"
1187
- type="checkbox" name="checkbox-example-dark-1" id="checkbox-example-dark-1"
1322
+ type="checkbox" name="checkbox-example-dark-1" id="checkbox-example-dark-11"
1188
1323
  aria-describedby="text-field-success">
1189
1324
  <label class="qld__control-input__text"
1190
- for="checkbox-example-dark-1">Answer 1</label>
1325
+ for="checkbox-example-dark-11">Answer 1</label>
1191
1326
  </div>
1192
1327
 
1193
1328
  <!-- Checkbox 2 with label -->
1194
1329
  <div class="qld__control-input qld__control-input--block">
1195
- <input class="qld__control-input__input" type="checkbox"
1196
- name="checkbox-example" id="Answer-2"
1330
+ <input class="qld__control-input__input qld__input--valid" type="checkbox"
1331
+ name="checkbox-example" id="checkbox-example-dark-22"
1197
1332
  aria-describedby="text-field-success">
1198
1333
  <label class="qld__control-input__text"
1199
- for="Answer-2">Answer 2</label>
1334
+ for="checkbox-example-dark-22">Answer 2</label>
1200
1335
  </div>
1201
1336
 
1202
1337
  <!-- Checkbox 3 with label -->
1203
1338
  <div class="qld__control-input qld__control-input--block">
1204
- <input class="qld__control-input__input" type="checkbox"
1205
- name="checkbox-example" id="Answer-3"
1339
+ <input class="qld__control-input__input qld__input--valid" type="checkbox"
1340
+ name="checkbox-example" id="checkbox-example-dark-33"
1206
1341
  aria-describedby="text-field-success">
1207
1342
  <label class="qld__control-input__text"
1208
- for="Answer-3">Answer 3</label>
1343
+ for="checkbox-example-dark-33">Answer 3</label>
1209
1344
  </div>
1210
1345
 
1211
1346
  </div>
@@ -1247,26 +1382,26 @@
1247
1382
  <div class="qld__control-input qld__control-input--block">
1248
1383
  <input
1249
1384
  class="qld__control-input__input qld__input--valid"
1250
- type="radio" name="2-radio-ex" id="2-rb-laptop"
1385
+ type="radio" name="2-radio-ex" id="2-rb-laptop2"
1251
1386
  role="radio">
1252
1387
  <label class="qld__control-input__text"
1253
- for="2-rb-laptop">Laptop</label>
1388
+ for="2-rb-laptop2">Laptop</label>
1254
1389
  </div>
1255
1390
 
1256
1391
  <!-- Radio option 2-->
1257
1392
  <div class="qld__control-input qld__control-input--block">
1258
- <input class="qld__control-input__input" type="radio"
1259
- name="2-radio-ex" id="2-rb-phone" role="radio">
1393
+ <input class="qld__control-input__input qld__input--valid" type="radio"
1394
+ name="2-radio-ex" id="2-rb-phone2" role="radio">
1260
1395
  <label class="qld__control-input__text"
1261
- for="2-rb-phone">Phone</label>
1396
+ for="2-rb-phone2">Phone</label>
1262
1397
  </div>
1263
1398
 
1264
1399
  <!-- Radio option 3-->
1265
1400
  <div class="qld__control-input qld__control-input--block">
1266
- <input class="qld__control-input__input" type="radio"
1267
- name="2-radio-ex" id="2-rb-tablet" role="radio">
1401
+ <input class="qld__control-input__input qld__input--valid" type="radio"
1402
+ name="2-radio-ex" id="2-rb-tablet2" role="radio">
1268
1403
  <label class="qld__control-input__text"
1269
- for="2-rb-tablet">Tablet</label>
1404
+ for="2-rb-tablet2">Tablet</label>
1270
1405
  </div>
1271
1406
 
1272
1407
  </div>
@@ -1308,30 +1443,30 @@
1308
1443
  <div class="qld__control-input qld__control-input--block">
1309
1444
  <input
1310
1445
  class="qld__control-input__input qld__input--error"
1311
- type="radio" name="3-radio-ex" id="3-rb-laptop"
1446
+ type="radio" name="3-radio-ex" id="3-rb-laptop3"
1312
1447
  role="radio">
1313
1448
  <label class="qld__control-input__text"
1314
- for="3-rb-laptop">Laptop</label>
1449
+ for="3-rb-laptop3">Laptop</label>
1315
1450
  </div>
1316
1451
 
1317
1452
  <!-- Radio option 2-->
1318
1453
  <div class="qld__control-input qld__control-input--block">
1319
1454
  <input
1320
1455
  class="qld__control-input__input qld__input--error"
1321
- type="radio" name="3-radio-ex" id="3-rb-phone"
1456
+ type="radio" name="3-radio-ex" id="3-rb-phone3"
1322
1457
  role="radio">
1323
1458
  <label class="qld__control-input__text"
1324
- for="3-rb-phone">Phone</label>
1459
+ for="3-rb-phone3">Phone</label>
1325
1460
  </div>
1326
1461
 
1327
1462
  <!-- Radio option 3-->
1328
1463
  <div class="qld__control-input qld__control-input--block">
1329
1464
  <input
1330
1465
  class="qld__control-input__input qld__input--error"
1331
- type="radio" name="3-radio-ex" id="3-rb-tablet"
1466
+ type="radio" name="3-radio-ex" id="3-rb-tablet3"
1332
1467
  role="radio">
1333
1468
  <label class="qld__control-input__text"
1334
- for="3-rb-tablet">Tablet</label>
1469
+ for="3-rb-tablet3">Tablet</label>
1335
1470
  </div>
1336
1471
 
1337
1472
  </div>
@@ -1456,14 +1591,13 @@
1456
1591
  </div>
1457
1592
  </div>
1458
1593
  </div>
1594
+ <!-- Page Footer Info -->
1595
+ ${require('../components/prefooter/html/component.hbs')({
1596
+ "site":require('/src/data/site.json'),
1597
+ "current":require('/src/data/current.json') })}
1459
1598
  </main>
1460
1599
  <!-- END MAIN BODY -->
1461
1600
 
1462
- <!-- WIDGETS -->
1463
- ${require('../components/widgets/html/component.hbs')({
1464
- "site":require('/src/data/site.json'),
1465
- "current":require('/src/data/current.json')
1466
- })}
1467
1601
 
1468
1602
  <!-- FOOTER-->
1469
1603
  ${require('../components/footer/html/component.hbs')({