@qhealth-design-system/core 1.16.5 → 1.17.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.
- package/.storybook/assets/storybook.css +1 -1
- package/.storybook/globals.js +10 -0
- package/CHANGELOG.md +4 -0
- package/package.json +1 -1
- package/src/components/_global/css/cta_links/component.scss +107 -14
- package/src/components/_global/css/forms/control_inputs/component.scss +65 -77
- package/src/components/_global/css/link_columns/component.scss +2 -2
- package/src/components/_global/html/head.html +4 -57
- package/src/components/_global/html/scripts.html +0 -2
- package/src/components/_global/js/cta_links/global.js +33 -0
- package/src/components/_global/js/global.js +175 -138
- package/src/components/_global/js/tabs/global.js +6 -2
- package/src/components/banner_advanced/html/component.hbs +1 -1
- package/src/components/breadcrumbs/js/global.js +17 -4
- package/src/components/card_feature/html/component.hbs +1 -1
- package/src/components/card_multi_action/html/component.hbs +1 -1
- package/src/components/card_single_action/css/component.scss +38 -47
- package/src/components/card_single_action/html/component.hbs +1 -1
- package/src/components/code/css/component.scss +72 -73
- package/src/components/code/html/component.hbs +62 -19
- package/src/components/code/js/global.js +102 -86
- package/src/components/footer/css/component.scss +2 -4
- package/src/components/footer/html/component.hbs +11 -8
- package/src/components/header/css/component.scss +12 -12
- package/src/components/header/html/component.hbs +3 -3
- package/src/components/header/js/global.js +58 -65
- package/src/components/in_page_navigation/js/global.js +34 -31
- package/src/components/internal_navigation/js/global.js +13 -3
- package/src/components/main_navigation/css/component.scss +79 -13
- package/src/components/main_navigation/html/component.hbs +5 -5
- package/src/components/main_navigation/js/global.js +94 -115
- package/src/components/mega_main_navigation/css/component.scss +27 -14
- package/src/components/mega_main_navigation/html/component.hbs +5 -5
- package/src/components/mega_main_navigation/js/global.js +50 -55
- package/src/components/page_alert/css/component.scss +141 -179
- package/src/data/site.json +3 -3
- package/src/html/component-card_feature.html +74 -487
- package/src/html/component-card_single_action.html +219 -1175
- package/src/html/component-forms.html +202 -67
- package/src/stories/Checkboxes/Checkboxes.js +41 -0
- package/src/stories/Checkboxes/Checkboxes.mdx +45 -0
- package/src/stories/Checkboxes/Checkboxes.stories.js +209 -0
- package/src/stories/RadioButtons/RadioButtons.js +41 -0
- package/src/stories/RadioButtons/RadioButtons.mdx +45 -0
- package/src/stories/RadioButtons/RadioButtons.stories.js +209 -0
- package/src/styles/imports/mixins.scss +5 -43
- package/src/styles/imports/variables.scss +3 -2
|
@@ -58,7 +58,13 @@
|
|
|
58
58
|
</div>
|
|
59
59
|
<div class="qld__body qld__form">
|
|
60
60
|
<div class="container-fluid">
|
|
61
|
-
|
|
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">
|
|
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>
|
|
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
|
|
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
|
-
<
|
|
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="
|
|
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="
|
|
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="
|
|
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-
|
|
935
|
-
<label for="check-
|
|
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-
|
|
940
|
-
<label for="check-
|
|
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">
|
|
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="
|
|
951
|
-
value="0" class="sq-form-field"> <label
|
|
952
|
-
for="
|
|
953
|
-
<li><input type="checkbox" name="q49141:q17[]" id="
|
|
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="
|
|
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-
|
|
967
|
-
<label for="radio-
|
|
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-
|
|
972
|
-
<label for="radio-
|
|
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-
|
|
977
|
-
<label for="radio-
|
|
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="
|
|
989
|
-
value="0" required="" class="sq-form-field"> <label
|
|
990
|
-
for="
|
|
991
|
-
<li><input type="radio" name="q49141:q15" id="
|
|
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="
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
1469
|
+
for="3-rb-tablet3">Tablet</label>
|
|
1335
1470
|
</div>
|
|
1336
1471
|
|
|
1337
1472
|
</div>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export const Checkboxes = ({ id, legend, hintText, isRequired, inError, errorMessage, inSuccess, successMessage, inputs, isSmall }) => {
|
|
2
|
+
const getInputClasses = (input) => {
|
|
3
|
+
if (input.inError) return "qld__input--error";
|
|
4
|
+
else if (input.inSuccess) return "qld__input--valid";
|
|
5
|
+
else return "";
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
const getFeedbackMessage = () => {
|
|
9
|
+
if (inError) {
|
|
10
|
+
return `
|
|
11
|
+
<span id="qld__checkboxes-status-${id}" class="qld__input--error" role="status" aria-live="polite">
|
|
12
|
+
<svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="QLD-icons.svg#status-error"></use></svg>${errorMessage}
|
|
13
|
+
</span>
|
|
14
|
+
`;
|
|
15
|
+
} else if (inSuccess) {
|
|
16
|
+
return `
|
|
17
|
+
<span id="qld__checkboxes-status-${id}" class="qld__input--success" role="status" aria-live="polite">
|
|
18
|
+
<svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="QLD-icons.svg#status-success"></svg>${successMessage}
|
|
19
|
+
</span>
|
|
20
|
+
`;
|
|
21
|
+
} else return "";
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const getHintText = () => {
|
|
25
|
+
return hintText ? `<span class="qld__hint-text" id="qld__checkboxes-hint-${id}">${hintText}</span>` : "";
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const inputsMapped = inputs
|
|
29
|
+
?.map((input) => {
|
|
30
|
+
return `<div class="qld__control-input ${isSmall ? "qld__control-input--small" : ""}"><input type="checkbox" id="qld__checkbox-${input.id}" ${
|
|
31
|
+
getInputClasses(input) ? `class="${getInputClasses(input)}"` : ""
|
|
32
|
+
} name="qld__checkbox-${id}" ${input.checked ? "checked" : ""} ${input.disabled ? "disabled" : ""}><label for="qld__checkbox-${input.id}">${input.label}</label></div>`;
|
|
33
|
+
})
|
|
34
|
+
.join("");
|
|
35
|
+
|
|
36
|
+
return `
|
|
37
|
+
<fieldset class="qld__checkboxes" role="group" aria-labelledby="qld__checkboxes-legend-${id}" ${getFeedbackMessage() ? `aria-describedby="qld__checkboxes-status-${id}"` : ""}>
|
|
38
|
+
<legend id="qld__checkboxes-legend-${id}">${isRequired ? "<abbr title='required'>*</abbr>" : ""}${legend}</legend>${getHintText()}${getFeedbackMessage()}${inputsMapped}
|
|
39
|
+
</fieldset>
|
|
40
|
+
`;
|
|
41
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
|
|
2
|
+
import * as checkboxesStories from "./Checkboxes.stories";
|
|
3
|
+
import { figmaLinks } from "../../../.storybook/globals";
|
|
4
|
+
|
|
5
|
+
<Meta of={checkboxesStories} />
|
|
6
|
+
|
|
7
|
+
# Checkboxes
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
These components help users select one or more items from multiple options.
|
|
12
|
+
|
|
13
|
+
<Primary />
|
|
14
|
+
|
|
15
|
+
## Props
|
|
16
|
+
|
|
17
|
+
<Controls />
|
|
18
|
+
|
|
19
|
+
### Valid and invalid states
|
|
20
|
+
|
|
21
|
+
Add a border around the control inputs to indicate valid or invalid selections.
|
|
22
|
+
|
|
23
|
+
<Story of={checkboxesStories.successVariant} />
|
|
24
|
+
|
|
25
|
+
<br />
|
|
26
|
+
|
|
27
|
+
<Story of={checkboxesStories.errorVariant} />
|
|
28
|
+
|
|
29
|
+
### Disabled control inputs
|
|
30
|
+
|
|
31
|
+
Disabled control inputs can be used to indicate inputs that are no longer valid or have expired.
|
|
32
|
+
|
|
33
|
+
<Story of={checkboxesStories.disabledVariant} />
|
|
34
|
+
|
|
35
|
+
## Design resources
|
|
36
|
+
|
|
37
|
+
- <a className="figma-link" href={figmaLinks.checkboxes.design} target="_blank" rel="noopener noreferrer">
|
|
38
|
+
Component design view (Figma)
|
|
39
|
+
</a>
|
|
40
|
+
- <a className="figma-link" href={figmaLinks.checkboxes.file} target="_blank" rel="noopener noreferrer">
|
|
41
|
+
Component file (Figma)
|
|
42
|
+
</a>
|
|
43
|
+
- <a className="figma-link" href={figmaLinks.checkboxes.ds} target="_blank" rel="noopener noreferrer">
|
|
44
|
+
Design System website
|
|
45
|
+
</a>
|