@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.0.12
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/preview.js +5 -2
- package/dist/assets/components/bs5/dateinput/dateinput.hbs +27 -27
- package/dist/assets/components/bs5/formcheck/formcheck.hbs +10 -2
- package/dist/assets/components/bs5/head/head.hbs +1 -1
- package/dist/assets/components/bs5/searchInput/searchInput.hbs +31 -29
- package/dist/assets/components/bs5/select/select.hbs +19 -19
- package/dist/assets/components/bs5/textarea/textarea.hbs +17 -17
- package/dist/assets/components/bs5/textbox/textbox.hbs +17 -18
- package/dist/assets/css/qld.bootstrap.css +2 -2
- package/dist/assets/css/qld.bootstrap.css.map +3 -3
- package/dist/assets/css/qld.bootstrap.legacy.css +2 -2
- package/dist/assets/css/qld.bootstrap.legacy.css.map +3 -3
- package/dist/assets/js/handlebars.helpers.bundle.js +1 -1
- package/dist/assets/js/handlebars.init.min.js +134 -125
- package/dist/assets/js/handlebars.init.min.js.map +2 -2
- package/dist/assets/js/handlebars.partials.js +134 -125
- package/dist/assets/js/handlebars.partials.js.map +2 -2
- package/dist/assets/js/qld.bootstrap.min.js +9 -10
- package/dist/assets/js/qld.bootstrap.min.js.map +3 -3
- package/dist/assets/node/handlebars.init.min.js +51 -7
- package/dist/assets/node/handlebars.init.min.js.map +2 -2
- package/dist/components/bs5/dateinput/dateinput.hbs +27 -27
- package/dist/components/bs5/formcheck/formcheck.hbs +10 -2
- package/dist/components/bs5/head/head.hbs +1 -1
- package/dist/components/bs5/searchInput/searchInput.hbs +31 -29
- package/dist/components/bs5/select/select.hbs +19 -19
- package/dist/components/bs5/textarea/textarea.hbs +17 -17
- package/dist/components/bs5/textbox/textbox.hbs +17 -18
- package/dist/package.json +1 -1
- package/dist/sample-data/dateinput/dateinput.data.json +14 -12
- package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json +4 -5
- package/dist/sample-data/formcheck/stories/radio/radio.data.json +4 -4
- package/dist/sample-data/searchInput/searchInput.data.json +19 -10
- package/dist/sample-data/select/select.data.json +12 -10
- package/dist/sample-data/textarea/textarea.data.json +14 -11
- package/dist/sample-data/textbox/textbox.data.json +13 -10
- package/package.json +1 -1
- package/src/components/bs5/dateinput/Dateinput.js +26 -11
- package/src/components/bs5/dateinput/dateinput.data.json +14 -12
- package/src/components/bs5/dateinput/dateinput.hbs +27 -27
- package/src/components/bs5/formcheck/Formcheck.js +57 -6
- package/src/components/bs5/formcheck/_form-variables.scss +131 -0
- package/src/components/bs5/formcheck/formcheck.hbs +10 -2
- package/src/components/bs5/formcheck/formcheck.scss +229 -66
- package/src/components/bs5/formcheck/stories/bootstrap-validation/bootstrap-validation.stories.js +304 -0
- package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json +4 -5
- package/src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js +19 -111
- package/src/components/bs5/formcheck/stories/radio/radio.data.json +4 -4
- package/src/components/bs5/formcheck/stories/radio/radio.stories.js +30 -122
- package/src/components/bs5/inpageAlert/inpageAlert.scss +1 -1
- package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js} +36 -35
- package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +24 -28
- package/src/components/bs5/searchInput/search.functions.js +93 -76
- package/src/components/bs5/searchInput/searchInput.data.json +19 -10
- package/src/components/bs5/searchInput/searchInput.hbs +31 -29
- package/src/components/bs5/searchInput/searchInput.scss +140 -196
- package/src/components/bs5/searchInput/searchInput.stories.js +35 -13
- package/src/components/bs5/searchInput/searchInput.test.js +5 -1
- package/src/components/bs5/select/Select.js +13 -5
- package/src/components/bs5/select/Select.stories.js +27 -83
- package/src/components/bs5/select/select.data.json +12 -10
- package/src/components/bs5/select/select.hbs +19 -19
- package/src/components/bs5/textarea/Textarea.js +13 -5
- package/src/components/bs5/textarea/Textarea.stories.js +29 -55
- package/src/components/bs5/textarea/textarea.data.json +14 -11
- package/src/components/bs5/textarea/textarea.hbs +17 -17
- package/src/components/bs5/textbox/Textbox.js +16 -5
- package/src/components/bs5/textbox/Textbox.stories.js +26 -51
- package/src/components/bs5/textbox/textInput.scss +12 -232
- package/src/components/bs5/textbox/textbox.data.json +13 -10
- package/src/components/bs5/textbox/textbox.hbs +17 -18
- package/src/css/functions/_index.scss +2 -0
- package/src/css/functions/remify.scss +32 -0
- package/src/css/functions/snap-line-height.scss +7 -0
- package/src/css/main.scss +1 -1
- package/src/css/mixins/focusable.scss +3 -0
- package/src/css/{qld-theme.scss → qld-palettes.scss} +30 -23
- package/src/components/bs5/formcheck/_formcheck.stories.bak.js +0 -432
|
@@ -623,7 +623,7 @@ var init_customLinks = __esm({
|
|
|
623
623
|
var dateinput_default;
|
|
624
624
|
var init_dateinput = __esm({
|
|
625
625
|
"src/components/bs5/dateinput/dateinput.hbs?raw"() {
|
|
626
|
-
dateinput_default = '<!-- QGDS Component: Date input -->\n\n
|
|
626
|
+
dateinput_default = '<!-- QGDS Component: Date input -->\n\n<label id="{{id}}-label"\n class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">\n <!-- day group -->\n <div class="day-group">\n <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>\n <div>\n <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"\n inputmode="numeric" maxlength="2"\n class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- month group -->\n <div class="date-group">\n <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>\n <div>\n <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"\n type="text" inputmode="numeric" maxlength="2"\n class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"\n aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"\n {{/if}}>\n </div>\n </div>\n <!-- year group -->\n <div class="date-group">\n <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>\n <div class="year-label">\n <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"\n placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"\n class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"\n ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required{{/if}}>\n </div>\n </div>\n</div>\n';
|
|
627
627
|
}
|
|
628
628
|
});
|
|
629
629
|
|
|
@@ -906,7 +906,7 @@ var init_footer = __esm({
|
|
|
906
906
|
var formcheck_default;
|
|
907
907
|
var init_formcheck = __esm({
|
|
908
908
|
"src/components/bs5/formcheck/formcheck.hbs?raw"() {
|
|
909
|
-
formcheck_default = ' \n {{#if questionLabel}}\n <div class="qld-text-input-label {{listClasses}}">\n {{questionLabel}}\n {{#if optionalLabel}}\n <span class="label-text-optional">{{optionalLabel}}</span>\n {{/if}}\n </div>\n {{/if}}\n\n {{#if hintLabel}}\n <span class="qld-hint-text">{{hintLabel}}</span>\n {{/if}}\n \n {{#each listitems}}\n <div class="form-check">\n <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>\n <label class="form-check-label" for="{{id}}">\n {{label}}\n </label>\n </div>\n {{/each}}\n ';
|
|
909
|
+
formcheck_default = ' \n {{#if questionLabel}}\n <div class="qld-text-input-label {{listClasses}}">\n {{questionLabel}}\n {{#if optionalLabel}}\n <span class="label-text-optional">{{optionalLabel}}</span>\n {{/if}}\n </div>\n {{/if}}\n\n {{#if hintLabel}}\n <span class="qld-hint-text">{{hintLabel}}</span>\n {{/if}}\n\n {{#if successMessageText}}\n <div class="valid-feedback">{{successMessageText}}</div>\n {{/if}}\n\n {{#if errorMessageText}}\n <div class="invalid-feedback">{{errorMessageText}}</div>\n {{/if}}\n \n {{#each listitems}}\n <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">\n <input class="form-check-input" type="{{#if ../type}}{{../type}}{{else}}{{#if type}}{{type}}{{else}}checkbox{{/if}}{{/if}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}} {{#if isRequired}}required{{/if}} >\n <label class="form-check-label" for="{{id}}">\n {{label}}\n </label>\n </div>\n {{/each}}\n ';
|
|
910
910
|
}
|
|
911
911
|
});
|
|
912
912
|
|
|
@@ -966,7 +966,7 @@ var head_default;
|
|
|
966
966
|
var init_head = __esm({
|
|
967
967
|
"src/components/bs5/head/head.hbs?raw"() {
|
|
968
968
|
head_default = `
|
|
969
|
-
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.
|
|
969
|
+
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
|
|
970
970
|
|
|
971
971
|
{{! Select environment, used verbatium if not using predefind key
|
|
972
972
|
cdn := PROD|STAGING|BETA|TEST|DEV|???
|
|
@@ -1369,7 +1369,51 @@ var init_quickexit = __esm({
|
|
|
1369
1369
|
var searchInput_default;
|
|
1370
1370
|
var init_searchInput = __esm({
|
|
1371
1371
|
"src/components/bs5/searchInput/searchInput.hbs?raw"() {
|
|
1372
|
-
searchInput_default =
|
|
1372
|
+
searchInput_default = `<!--
|
|
1373
|
+
QGDS Component: Search input
|
|
1374
|
+
-->
|
|
1375
|
+
<div class="qld-search-input {{customClass}}">
|
|
1376
|
+
<input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
|
|
1377
|
+
aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
1378
|
+
<button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
|
|
1379
|
+
<span class="btn-icon"></span>
|
|
1380
|
+
<span class="btn-label">{{ buttonLabel }}</span>
|
|
1381
|
+
</button>
|
|
1382
|
+
{{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
|
|
1383
|
+
<div class="suggestions suggestions__group d-none default">
|
|
1384
|
+
{{#if hasDefaultSuggestions}}
|
|
1385
|
+
<div class="default-suggestions">
|
|
1386
|
+
<div class="suggestions-category">
|
|
1387
|
+
<strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
|
|
1388
|
+
<ul>
|
|
1389
|
+
{{#each defaultSuggestions.popularServices}}
|
|
1390
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
1391
|
+
{{/each}}
|
|
1392
|
+
{{#if defaultSuggestions.popularServicesLink}}
|
|
1393
|
+
<li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
|
|
1394
|
+
{{/if}}
|
|
1395
|
+
</ul>
|
|
1396
|
+
</div>
|
|
1397
|
+
|
|
1398
|
+
<div class="suggestions-category">
|
|
1399
|
+
<strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
|
|
1400
|
+
<ul>
|
|
1401
|
+
{{#each defaultSuggestions.categories}}
|
|
1402
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
1403
|
+
{{/each}}
|
|
1404
|
+
{{#if defaultSuggestions.categoriesLink}}
|
|
1405
|
+
<li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
|
|
1406
|
+
{{/if}}
|
|
1407
|
+
</ul>
|
|
1408
|
+
</div>
|
|
1409
|
+
</div>
|
|
1410
|
+
{{/if}}
|
|
1411
|
+
{{#if hasDynamicSuggestions}}
|
|
1412
|
+
<div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
|
|
1413
|
+
{{/if}}
|
|
1414
|
+
</div>
|
|
1415
|
+
{{/ifCond}}
|
|
1416
|
+
</div>`;
|
|
1373
1417
|
}
|
|
1374
1418
|
});
|
|
1375
1419
|
|
|
@@ -1377,7 +1421,7 @@ var init_searchInput = __esm({
|
|
|
1377
1421
|
var select_default;
|
|
1378
1422
|
var init_select = __esm({
|
|
1379
1423
|
"src/components/bs5/select/select.hbs?raw"() {
|
|
1380
|
-
select_default = '<!-- QGDS Component: Select -->\n\n
|
|
1424
|
+
select_default = '<!-- QGDS Component: Select -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `valid-feedback`}}\n{{#if successMessageText}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}{{! updated bootstrap style classes - `invalid-feedback`}}\n{{#if errorMessageText}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" \n {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >\n <option selected value="">{{placeholder}}</option>\n <option value="1">Option 1</option>\n <option value="2">Option 2</option>\n <option value="3">Option 3</option>\n</select>\n';
|
|
1381
1425
|
}
|
|
1382
1426
|
});
|
|
1383
1427
|
|
|
@@ -1486,7 +1530,7 @@ var init_tag = __esm({
|
|
|
1486
1530
|
var textarea_default;
|
|
1487
1531
|
var init_textarea = __esm({
|
|
1488
1532
|
"src/components/bs5/textarea/textarea.hbs?raw"() {
|
|
1489
|
-
textarea_default = '<!-- QGDS Component: Textarea -->\n\n
|
|
1533
|
+
textarea_default = '<!-- QGDS Component: Textarea -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<!-- First text input field, described by the hint text above -->\n<textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"\n placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}\n {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>';
|
|
1490
1534
|
}
|
|
1491
1535
|
});
|
|
1492
1536
|
|
|
@@ -1494,7 +1538,7 @@ var init_textarea = __esm({
|
|
|
1494
1538
|
var textbox_default;
|
|
1495
1539
|
var init_textbox = __esm({
|
|
1496
1540
|
"src/components/bs5/textbox/textbox.hbs?raw"() {
|
|
1497
|
-
textbox_default = '<!-- QGDS Component: Textbox -->\n\n
|
|
1541
|
+
textbox_default = '<!-- QGDS Component: Textbox -->\n\n<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"\n for="{{id}}">\n {{label-text}}\n {{#if optional-text}}\n <span class="label-text-optional">({{optional-text}})</span>\n {{/if}}\n</label>\n\n{{#if hint-text}}\n<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>\n{{/if}}\n\n{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}\n<span class="qld-input-success">{{successMessageText}}</span>\n{{else}}\n{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}\n<div class="valid-feedback">{{successMessageText}}</div>\n{{/if}}{{/contains}}\n\n{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}\n<span class="qld-input-error">{{errorMessageText}}</span>\n{{else}}\n{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}\n<div class="invalid-feedback">{{errorMessageText}}</div>\n{{/if}}{{/contains}}\n\n<input id={{id}} {{#if value}}value="{{value}}"{{/if}} class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"\n type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if\n isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />';
|
|
1498
1542
|
}
|
|
1499
1543
|
});
|
|
1500
1544
|
|