@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.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 (119) hide show
  1. package/.esbuild/plugins/qgds-plugin-generate-icon-assets.js +31 -24
  2. package/.storybook/preview.js +5 -2
  3. package/dist/assets/components/bs5/button/button.hbs +1 -1
  4. package/dist/assets/components/bs5/dateinput/dateinput.hbs +27 -27
  5. package/dist/assets/components/bs5/footer/customLinks.hbs +1 -1
  6. package/dist/assets/components/bs5/footer/followLinks.hbs +1 -1
  7. package/dist/assets/components/bs5/formcheck/formcheck.hbs +10 -2
  8. package/dist/assets/components/bs5/head/head.hbs +1 -1
  9. package/dist/assets/components/bs5/inpageAlert/inpageAlert.hbs +10 -2
  10. package/dist/assets/components/bs5/searchInput/searchInput.hbs +35 -31
  11. package/dist/assets/components/bs5/select/select.hbs +19 -19
  12. package/dist/assets/components/bs5/textarea/textarea.hbs +17 -17
  13. package/dist/assets/components/bs5/textbox/textbox.hbs +17 -18
  14. package/dist/assets/css/qld.bootstrap.css +2 -2
  15. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  16. package/dist/assets/css/qld.bootstrap.legacy.css +2 -2
  17. package/dist/assets/css/qld.bootstrap.legacy.css.map +3 -3
  18. package/dist/assets/img/icons-sprite.svg +24 -24
  19. package/dist/assets/js/handlebars.helpers.bundle.js +1 -1
  20. package/dist/assets/js/handlebars.init.min.js +159 -140
  21. package/dist/assets/js/handlebars.init.min.js.map +2 -2
  22. package/dist/assets/js/handlebars.partials.js +159 -140
  23. package/dist/assets/js/handlebars.partials.js.map +2 -2
  24. package/dist/assets/js/qld.bootstrap.min.js +9 -10
  25. package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
  26. package/dist/assets/node/handlebars.init.min.js +57 -11
  27. package/dist/assets/node/handlebars.init.min.js.map +2 -2
  28. package/dist/components/bs5/button/button.hbs +1 -1
  29. package/dist/components/bs5/dateinput/dateinput.hbs +27 -27
  30. package/dist/components/bs5/footer/customLinks.hbs +1 -1
  31. package/dist/components/bs5/footer/followLinks.hbs +1 -1
  32. package/dist/components/bs5/formcheck/formcheck.hbs +10 -2
  33. package/dist/components/bs5/head/head.hbs +1 -1
  34. package/dist/components/bs5/inpageAlert/inpageAlert.hbs +10 -2
  35. package/dist/components/bs5/searchInput/searchInput.hbs +35 -31
  36. package/dist/components/bs5/select/select.hbs +19 -19
  37. package/dist/components/bs5/textarea/textarea.hbs +17 -17
  38. package/dist/components/bs5/textbox/textbox.hbs +17 -18
  39. package/dist/package.json +1 -1
  40. package/dist/sample-data/dateinput/dateinput.data.json +14 -12
  41. package/dist/sample-data/footer/footer.data.json +3 -0
  42. package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json +4 -5
  43. package/dist/sample-data/formcheck/stories/radio/radio.data.json +4 -4
  44. package/dist/sample-data/inpageAlert/inpageAlert.data.json +1 -1
  45. package/dist/sample-data/searchInput/searchInput.data.json +20 -10
  46. package/dist/sample-data/select/select.data.json +12 -10
  47. package/dist/sample-data/textarea/textarea.data.json +14 -11
  48. package/dist/sample-data/textbox/textbox.data.json +13 -10
  49. package/package.json +1 -1
  50. package/src/components/bs5/breadcrumbs/breadcrumbs.scss +3 -4
  51. package/src/components/bs5/button/Button.js +32 -6
  52. package/src/components/bs5/button/button.hbs +1 -1
  53. package/src/components/bs5/button/button.scss +0 -5
  54. package/src/components/bs5/card/card.scss +2 -0
  55. package/src/components/bs5/dateinput/Dateinput.js +26 -11
  56. package/src/components/bs5/dateinput/dateinput.data.json +14 -12
  57. package/src/components/bs5/dateinput/dateinput.hbs +27 -27
  58. package/src/components/bs5/footer/customLinks.hbs +1 -1
  59. package/src/components/bs5/footer/followLinks.hbs +1 -1
  60. package/src/components/bs5/footer/footer.data.json +3 -0
  61. package/src/components/bs5/formcheck/Formcheck.js +57 -6
  62. package/src/components/bs5/formcheck/_form-variables.scss +167 -0
  63. package/src/components/bs5/formcheck/formcheck.hbs +10 -2
  64. package/src/components/bs5/formcheck/formcheck.scss +268 -65
  65. package/src/components/bs5/formcheck/stories/bootstrap-validation/bootstrap-validation.stories.js +304 -0
  66. package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json +4 -5
  67. package/src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js +19 -111
  68. package/src/components/bs5/formcheck/stories/radio/radio.data.json +4 -4
  69. package/src/components/bs5/formcheck/stories/radio/radio.stories.js +30 -122
  70. package/src/components/bs5/header/header.scss +1 -2
  71. package/src/components/bs5/icons/_icons.list.js +7 -7
  72. package/src/components/bs5/icons/_icons.list.scss +113 -112
  73. package/src/components/bs5/icons/_icons.variables.scss +7 -6
  74. package/src/components/bs5/icons/icons.scss +2 -1
  75. package/src/components/bs5/inpageAlert/inpageAlert.data.json +1 -1
  76. package/src/components/bs5/inpageAlert/inpageAlert.hbs +10 -2
  77. package/src/components/bs5/inpageAlert/inpageAlert.scss +50 -52
  78. package/src/components/bs5/inpageAlert/inpageAlert.stories.js +54 -3
  79. package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js} +40 -38
  80. package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +25 -29
  81. package/src/components/bs5/searchInput/search.functions.js +120 -108
  82. package/src/components/bs5/searchInput/searchInput.data.json +20 -10
  83. package/src/components/bs5/searchInput/searchInput.hbs +35 -31
  84. package/src/components/bs5/searchInput/searchInput.scss +193 -196
  85. package/src/components/bs5/searchInput/searchInput.stories.js +35 -13
  86. package/src/components/bs5/searchInput/searchInput.test.js +96 -120
  87. package/src/components/bs5/select/Select.js +13 -5
  88. package/src/components/bs5/select/Select.stories.js +27 -83
  89. package/src/components/bs5/select/select.data.json +12 -10
  90. package/src/components/bs5/select/select.hbs +19 -19
  91. package/src/components/bs5/skiplinks/skipLinks.scss +12 -4
  92. package/src/components/bs5/textarea/Textarea.js +13 -5
  93. package/src/components/bs5/textarea/Textarea.stories.js +29 -55
  94. package/src/components/bs5/textarea/textarea.data.json +14 -11
  95. package/src/components/bs5/textarea/textarea.hbs +17 -17
  96. package/src/components/bs5/textbox/Textbox.js +16 -5
  97. package/src/components/bs5/textbox/Textbox.stories.js +26 -51
  98. package/src/components/bs5/textbox/textInput.scss +12 -232
  99. package/src/components/bs5/textbox/textbox.data.json +13 -10
  100. package/src/components/bs5/textbox/textbox.hbs +17 -18
  101. package/src/components/common/focus-styles/focusStyles.mdx +20 -0
  102. package/src/components/common/focus-styles/focusStyles.stories.js +58 -0
  103. package/src/css/functions/_index.scss +5 -0
  104. package/src/css/functions/color-icon.scss +31 -0
  105. package/src/css/functions/remify.scss +32 -0
  106. package/src/css/functions/snap-line-height.scss +7 -0
  107. package/src/css/functions/string-replace.scss +49 -0
  108. package/src/css/functions/svg-encode.scss +22 -0
  109. package/src/css/main.scss +1 -1
  110. package/src/css/mixins/focusable.scss +3 -0
  111. package/src/css/mixins/make-icon.scss +1 -1
  112. package/src/css/mixins/make-link.scss +13 -10
  113. package/src/css/{qld-theme.scss → qld-palettes.scss} +50 -35
  114. package/src/css/qld-type.scss +5 -1
  115. package/src/css/qld-utilities.scss +9 -1
  116. package/src/css/qld-variables.scss +1 -1
  117. package/src/img/icons-sprite.svg +24 -24
  118. package/src/js/qld.bootstrap.js +3 -55
  119. package/src/components/bs5/formcheck/_formcheck.stories.bak.js +0 -432
@@ -10,7 +10,7 @@
10
10
 
11
11
  {{#unless islink}}
12
12
 
13
- <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
13
+ <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
14
14
  {{#if isprogress}}
15
15
  {{~>progressSpinner~}}
16
16
  {{else}}
@@ -1,64 +1,64 @@
1
1
  <!-- QGDS Component: Date input -->
2
2
 
3
- <!-- Label -->
4
- <label id="dategroup-label"
3
+ <label id="{{id}}-label"
5
4
  class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
6
- for="example-1">
5
+ for="{{id}}">
7
6
  {{label-text}}
8
7
  {{#if optional-text}}
9
8
  <span class="label-text-optional">({{optional-text}})</span>
10
9
  {{/if}}
11
10
  </label>
12
11
 
13
- <!-- Hint text -->
14
12
  {{#if hint-text}}
15
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
13
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
16
14
  {{/if}}
17
15
 
18
- {{#contains "qld-input-success" customClass}}
19
- <span id="text-field-success" class="qld-input-success">
20
- {{successMessageText}}
21
- </span>
22
- {{/contains}}
16
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
17
+ <span class="qld-input-success">{{successMessageText}}</span>
18
+ {{else}}
19
+ {{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
20
+ <div class="valid-feedback">{{successMessageText}}</div>
21
+ {{/if}}{{/contains}}
23
22
 
24
- {{#contains "qld-input-error" customClass}}
25
- <span id="text-field-error" class="qld-input-error">
26
- {{errorMessageText}}
27
- </span>
28
- {{/contains}}
23
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
24
+ <span class="qld-input-error">{{errorMessageText}}</span>
25
+ {{else}}
26
+ {{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
27
+ <div class="invalid-feedback">{{errorMessageText}}</div>
28
+ {{/if}}{{/contains}}
29
29
 
30
- <div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
30
+ <div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
31
31
  <!-- day group -->
32
32
  <div class="day-group">
33
- <label for="dayinput" class="date-label qld-text-input-label">Day</label>
33
+ <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
34
34
  <div>
35
- <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
35
+ <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
36
36
  inputmode="numeric" maxlength="2"
37
- class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"
37
+ 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"
38
38
  aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
39
39
  {{/if}}>
40
40
  </div>
41
41
  </div>
42
42
  <!-- month group -->
43
43
  <div class="date-group">
44
- <label for="monthinput" class="date-label qld-text-input-label">Month</label>
44
+ <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
45
45
  <div>
46
- <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
46
+ <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
47
47
  type="text" inputmode="numeric" maxlength="2"
48
- class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"
48
+ 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"
49
49
  aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
50
50
  {{/if}}>
51
51
  </div>
52
52
  </div>
53
53
  <!-- year group -->
54
54
  <div class="date-group">
55
- <label for="yearinput" class="date-label">Year</label>
55
+ <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
56
56
  <div class="year-label">
57
- <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"
57
+ <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
58
58
  placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
59
- class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
60
- id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
61
- isRequired}}required aria-required="true" {{/if}}>
59
+ 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}}"
60
+ ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
61
+ isRequired}}required{{/if}}>
62
62
  </div>
63
63
  </div>
64
64
  </div>
@@ -1,5 +1,5 @@
1
1
  {{#if customLinks }}
2
- <ul class="nav footer-link-list footer-link-list--custom flex-column">
2
+ <ul class="nav footer-link-list footer-link-list--custom flex-column">
3
3
  {{#each customLinks }}
4
4
  <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
5
5
  {{/each }}
@@ -6,7 +6,7 @@
6
6
  <span class="qld-icon qld-icon-md qld-icon-{{icon}} d-lg-none" aria-hidden="true"></span>
7
7
  <span class="qld-icon qld-icon-sm qld-icon-{{icon}} d-none d-lg-block" aria-hidden="true"></span>
8
8
  <span class="nav-link-label d-none d-lg-block">{{ label }}</span>
9
- <span class="sr-only">{{ label }}</span>
9
+ <span class="sr-only">{{isdefined accessibleLabel label}}</span>
10
10
  </a>
11
11
  </li>
12
12
  {{/each }}
@@ -11,10 +11,18 @@
11
11
  {{#if hintLabel}}
12
12
  <span class="qld-hint-text">{{hintLabel}}</span>
13
13
  {{/if}}
14
+
15
+ {{#if successMessageText}}
16
+ <div class="valid-feedback">{{successMessageText}}</div>
17
+ {{/if}}
18
+
19
+ {{#if errorMessageText}}
20
+ <div class="invalid-feedback">{{errorMessageText}}</div>
21
+ {{/if}}
14
22
 
15
23
  {{#each listitems}}
16
- <div class="form-check">
17
- <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>
24
+ <div class="form-check {{#if ../isValid}}is-valid{{else}}{{#ifCond ../isValid "===" false}}is-invalid{{/ifCond}}{{/if}}">
25
+ <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}} >
18
26
  <label class="form-check-label" for="{{id}}">
19
27
  {{label}}
20
28
  </label>
@@ -1,5 +1,5 @@
1
1
 
2
- <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.11","branch":"HEAD","tag":"v2.0.11","commit":"c1bc176e3a8502826203a87dc48aab0bc1bc8770","majorVersion":"v2"} -->
2
+ <!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.0","branch":"HEAD","tag":"v2.1.0","commit":"1610f625e3e2ba5c9420ba3ef0ebb53ed35820f6","majorVersion":"v2"} -->
3
3
 
4
4
  {{! Select environment, used verbatium if not using predefind key
5
5
  cdn := PROD|STAGING|BETA|TEST|DEV|???
@@ -1,5 +1,13 @@
1
- <div class="alert {{variantClass}} {{customClass}}" role="alert"
2
- {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
1
+ <div class="alert {{variantClass}} {{customClass}}" role="alert"
2
+ {{#if ariaLabel}}
3
+ aria-label="{{ ariaLabel }}"
4
+ {{else}}
5
+ {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
6
+ {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
7
+ {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
8
+ {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
9
+ {{/if}}
10
+ >
3
11
  {{#if heading}}
4
12
  {{#if headingTag}}
5
13
  <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>
@@ -3,41 +3,45 @@
3
3
  -->
4
4
  <div class="qld-search-input {{customClass}}">
5
5
  <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
6
- aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
6
+ aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
7
7
  <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
8
8
  <span class="btn-icon"></span>
9
9
  <span class="btn-label">{{ buttonLabel }}</span>
10
10
  </button>
11
- {{#if suggestions}}
12
- <div class="suggestions suggestions__group d-none">
13
- <div class="default-suggestions">
14
- <div class="suggestions-category mt-16">
15
- <strong class="suggestions-category-label d-block">Popular services</strong>
16
- <ul class="mt-2">
17
- {{#each default_suggestions.popular_services}}
18
- <li><a href="{{link}}">{{title}}</a></li>
19
- {{/each}}
20
- </ul>
21
- </div>
22
-
23
- <div class="suggestions-category mt-16">
24
- <strong class="suggestions-category-label d-block">Browse by category</strong>
25
- <ul class="mt-12 mb-0">
26
- {{#each default_suggestions.categories}}
27
- <li><a href="{{link}}">{{title}}</a></li>
28
- {{/each}}
29
- </ul>
30
- </div>
31
-
32
- {{#if default_suggestions.options.view_more}}
33
- <div class="suggestions-category">
34
- <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
35
- href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
11
+ {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
12
+
13
+ <div class="suggestions suggestions__group default">
14
+ {{#if hasDefaultSuggestions}}
15
+ <div class="default-suggestions">
16
+ <div class="suggestions-category">
17
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
18
+ <ul>
19
+ {{#each defaultSuggestions.popularServices}}
20
+ <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
21
+ {{/each}}
22
+ {{#if defaultSuggestions.popularServicesLink}}
23
+ <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
24
+ {{/if}}
25
+ </ul>
26
+ </div>
27
+ {{#if defaultSuggestions.categories}}
28
+ <div class="suggestions-category">
29
+ <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
30
+ <ul>
31
+ {{#each defaultSuggestions.categories}}
32
+ <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
33
+ {{/each}}
34
+ {{#if defaultSuggestions.categoriesLink}}
35
+ <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
36
+ {{/if}}
37
+ </ul>
38
+ </div>
39
+ {{/if}}
36
40
  </div>
37
- {{/if}}
38
- </div>
39
- <div class="dynamic-suggestions"></div>
41
+ {{/if}}
42
+ {{#if hasDynamicSuggestions}}
43
+ <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
44
+ {{/if}}
40
45
  </div>
41
- {{/if}}
42
-
46
+ {{/ifCond}}
43
47
  </div>
@@ -1,33 +1,33 @@
1
1
  <!-- QGDS Component: Select -->
2
2
 
3
- <!-- Label for the first input field -->
4
- <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">
3
+ <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">
5
4
  {{label-text}}
6
5
  {{#if optional-text}}
7
- <span class="label-text-optional">({{optional-text}})</span></label>
6
+ <span class="label-text-optional">({{optional-text}})</span>
8
7
  {{/if}}
8
+ </label>
9
9
 
10
- <!-- Hint text for the first input field -->
11
10
  {{#if hint-text}}
12
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
11
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
13
12
  {{/if}}
14
13
 
15
- {{#contains "qld-input-success" customClass}}
16
- <span id="text-field-success" class="qld-input-success">
17
- {{successMessageText}}
18
- </span>
19
- {{/contains}}
14
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
15
+ <span class="qld-input-success">{{successMessageText}}</span>
16
+ {{else}}{{! updated bootstrap style classes - `valid-feedback`}}
17
+ {{#if successMessageText}}
18
+ <div class="valid-feedback">{{successMessageText}}</div>
19
+ {{/if}}{{/contains}}
20
20
 
21
- {{#contains "qld-input-error" customClass}}
22
- <span id="text-field-error" class="qld-input-error">
23
- {{errorMessageText}}
24
- </span>
25
- {{/contains}}
21
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
22
+ <span class="qld-input-error">{{errorMessageText}}</span>
23
+ {{else}}{{! updated bootstrap style classes - `invalid-feedback`}}
24
+ {{#if errorMessageText}}
25
+ <div class="invalid-feedback">{{errorMessageText}}</div>
26
+ {{/if}}{{/contains}}
26
27
 
27
- <!-- First text input field, described by the hint text above -->
28
- <select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
29
- aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
30
- <option selected>{{placeholder}}</option>
28
+ <select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}"
29
+ {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
30
+ <option selected value="">{{placeholder}}</option>
31
31
  <option value="1">Option 1</option>
32
32
  <option value="2">Option 2</option>
33
33
  <option value="3">Option 3</option>
@@ -1,32 +1,32 @@
1
1
  <!-- QGDS Component: Textarea -->
2
2
 
3
- <!-- Label for the first input field -->
4
3
  <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
5
- for="example-1">
4
+ for="{{id}}">
6
5
  {{label-text}}
7
6
  {{#if optional-text}}
8
7
  <span class="label-text-optional">({{optional-text}})</span>
9
8
  {{/if}}
10
9
  </label>
11
10
 
12
- <!-- Hint text for the first input field -->
13
11
  {{#if hint-text}}
14
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
12
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
15
13
  {{/if}}
16
14
 
17
- {{#contains "qld-input-success" customClass}}
18
- <span id="text-field-success" class="qld-input-success">
19
- {{successMessageText}}
20
- </span>
21
- {{/contains}}
15
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
16
+ <span class="qld-input-success">{{successMessageText}}</span>
17
+ {{else}}
18
+ {{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
19
+ <div class="valid-feedback">{{successMessageText}}</div>
20
+ {{/if}}{{/contains}}
22
21
 
23
- {{#contains "qld-input-error" customClass}}
24
- <span id="text-field-error" class="qld-input-error">
25
- {{errorMessageText}}
26
- </span>
27
- {{/contains}}
22
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
23
+ <span class="qld-input-error">{{errorMessageText}}</span>
24
+ {{else}}
25
+ {{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
26
+ <div class="invalid-feedback">{{errorMessageText}}</div>
27
+ {{/if}}{{/contains}}
28
28
 
29
29
  <!-- First text input field, described by the hint text above -->
30
- <textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
31
- placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
32
- aria-required="true" {{/if}}></textarea>
30
+ <textarea id="{{id}}" class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
31
+ placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}
32
+ {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}}>{{value}}</textarea>
@@ -1,32 +1,31 @@
1
1
  <!-- QGDS Component: Textbox -->
2
2
 
3
- <!-- Label for the first input field -->
4
3
  <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
5
- for="example-1">
4
+ for="{{id}}">
6
5
  {{label-text}}
7
6
  {{#if optional-text}}
8
7
  <span class="label-text-optional">({{optional-text}})</span>
9
8
  {{/if}}
10
9
  </label>
11
10
 
12
- <!-- Hint text for the first input field -->
13
11
  {{#if hint-text}}
14
- <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
12
+ <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
15
13
  {{/if}}
16
14
 
17
- {{#contains "qld-input-success" customClass}}
18
- <span id="text-field-success" class="qld-input-success">
19
- {{successMessageText}}
20
- </span>
21
- {{/contains}}
15
+ {{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
16
+ <span class="qld-input-success">{{successMessageText}}</span>
17
+ {{else}}
18
+ {{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
19
+ <div class="valid-feedback">{{successMessageText}}</div>
20
+ {{/if}}{{/contains}}
22
21
 
23
- {{#contains "qld-input-error" customClass}}
24
- <span id="text-field-error" class="qld-input-error">
25
- {{errorMessageText}}
26
- </span>
27
- {{/contains}}
22
+ {{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
23
+ <span class="qld-input-error">{{errorMessageText}}</span>
24
+ {{else}}
25
+ {{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
26
+ <div class="invalid-feedback">{{errorMessageText}}</div>
27
+ {{/if}}{{/contains}}
28
28
 
29
- <!-- First text input field, described by the hint text above -->
30
- <input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
31
- type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
32
- isRequired}}required aria-required="true" {{/if}} />
29
+ <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}}"
30
+ type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
31
+ isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qld-gov-au/qgds-bootstrap5",
3
- "version": "2.0.11",
3
+ "version": "2.1.0",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,14 +1,16 @@
1
1
  {
2
- "isDisabled": false,
3
- "isRequired": true,
4
- "isFilled": false,
5
- "customClass": "",
6
- "label-text": "Date label",
7
- "day-placeholder": "DD",
8
- "month-placeholder": "MM",
9
- "year-placeholder": "YYYY",
10
- "optional-text": "optional",
11
- "hint-text": "(dd/mm/yyyy)",
12
- "successMessageText": "Success message",
13
- "errorMessageText": "Error message"
2
+ "id": "example-1",
3
+ "isDisabled": false,
4
+ "isRequired": true,
5
+ "isValid": null,
6
+ "isFilled": false,
7
+ "customClass": "",
8
+ "label-text": "Date label",
9
+ "day-placeholder": "DD",
10
+ "month-placeholder": "MM",
11
+ "year-placeholder": "YYYY",
12
+ "optional-text": "optional",
13
+ "hint-text": "(dd/mm/yyyy)",
14
+ "successMessageText": "Success message",
15
+ "errorMessageText": "Error message"
14
16
  }
@@ -61,18 +61,21 @@
61
61
  "followLinks": [
62
62
  {
63
63
  "label": "Facebook",
64
+ "accessibleLabel": "Facebook page",
64
65
  "link": "#",
65
66
  "icon": "facebook",
66
67
  "target": "_blank"
67
68
  },
68
69
  {
69
70
  "label": "LinkedIn",
71
+ "accessibleLabel": "LinkedIn page",
70
72
  "link": "#",
71
73
  "icon": "linkedin",
72
74
  "target": "_blank"
73
75
  },
74
76
  {
75
77
  "label": "X (Twitter)",
78
+ "accessibleLabel": "X page",
76
79
  "link": "#",
77
80
  "icon": "x",
78
81
  "target": "_blank"
@@ -3,9 +3,12 @@
3
3
  "optionalLabel": "(Optional)",
4
4
  "hintLabel": "Hint label",
5
5
  "listClasses": "field-required",
6
+ "successMessageText": "Success message",
7
+ "errorMessageText": "Error message",
8
+ "isValid": null,
9
+ "type": "checkbox",
6
10
  "listitems": [
7
11
  {
8
- "type": "checkbox",
9
12
  "id": "checkboxItem1",
10
13
  "name": "checkboxOption",
11
14
  "label": "Option 1",
@@ -14,7 +17,6 @@
14
17
  "isChecked": false
15
18
  },
16
19
  {
17
- "type": "checkbox",
18
20
  "id": "checkboxItem2",
19
21
  "name": "checkboxOption",
20
22
  "label": "Option 2",
@@ -23,7 +25,6 @@
23
25
  "isChecked": false
24
26
  },
25
27
  {
26
- "type": "checkbox",
27
28
  "id": "checkboxItem3",
28
29
  "name": "checkboxOption",
29
30
  "label": "Option 3",
@@ -32,7 +33,6 @@
32
33
  "isChecked": false
33
34
  },
34
35
  {
35
- "type": "checkbox",
36
36
  "id": "checkboxItem4",
37
37
  "name": "checkboxOption",
38
38
  "label": "Option 4",
@@ -41,7 +41,6 @@
41
41
  "isChecked": true
42
42
  },
43
43
  {
44
- "type": "checkbox",
45
44
  "id": "checkboxItem5",
46
45
  "name": "checkboxOption",
47
46
  "label": "Disabled",
@@ -3,9 +3,12 @@
3
3
  "optionalLabel": "(Optional)",
4
4
  "hintLabel": "Hint label",
5
5
  "listClasses": "field-required",
6
+ "successMessageText": "Success message",
7
+ "errorMessageText": "Error message",
8
+ "isValid": null,
9
+ "type": "radio",
6
10
  "listitems": [
7
11
  {
8
- "type": "radio",
9
12
  "id": "radioItem1",
10
13
  "name": "radioOption",
11
14
  "label": "Option 1",
@@ -14,7 +17,6 @@
14
17
  "isChecked": false
15
18
  },
16
19
  {
17
- "type": "radio",
18
20
  "id": "radioItem2",
19
21
  "name": "radioOption",
20
22
  "label": "Option 2",
@@ -23,7 +25,6 @@
23
25
  "isChecked": false
24
26
  },
25
27
  {
26
- "type": "radio",
27
28
  "id": "radioItem3",
28
29
  "name": "radioOption",
29
30
  "label": "Option 3",
@@ -32,7 +33,6 @@
32
33
  "isChecked": true
33
34
  },
34
35
  {
35
- "type": "radio",
36
36
  "id": "radioItem4",
37
37
  "name": "radioOption",
38
38
  "label": "Option 4",
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "variantClass": "alert-success",
3
- "alertType": "",
3
+ "ariaLabel": "Success alert",
4
4
  "heading": "Alert heading",
5
5
  "headingTag": "h2",
6
6
  "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"
@@ -6,7 +6,7 @@
6
6
  "buttonType": "submit",
7
7
  "buttonLabel": "Search",
8
8
  "ariaLabel": "Search website",
9
- "suggestions": true,
9
+ "placeholder": "",
10
10
  "tags": {
11
11
  "collection": "qgov~sp-search",
12
12
  "profile": "qld",
@@ -15,10 +15,20 @@
15
15
  "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
16
16
  "results-url": "https://discover.search.qld.gov.au/s/search.json"
17
17
  },
18
- "default_suggestions": {
19
- "popular_services": [
18
+ "hasDynamicSuggestions": true,
19
+ "hasDefaultSuggestions": true,
20
+ "dynamicSuggestionsServiceLink": {
21
+ "href": "/queenslanders"
22
+ },
23
+ "defaultSuggestions": {
24
+ "popularServicesTitle": "Popular",
25
+ "popularServicesLink": {
26
+ "label": "View more",
27
+ "href": "/queenslanders"
28
+ },
29
+ "popularServices": [
20
30
  {
21
- "title": "Apply for leave",
31
+ "title": "Apply for leave now",
22
32
  "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application"
23
33
  },
24
34
  {
@@ -34,6 +44,11 @@
34
44
  "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment"
35
45
  }
36
46
  ],
47
+ "categoriesTitle": "Collection",
48
+ "categoriesLink": {
49
+ "label": "View all",
50
+ "href": "/queenslanders"
51
+ },
37
52
  "categories": [
38
53
  {
39
54
  "title": "Search for directives, policies, circulars, and guidelines",
@@ -51,11 +66,6 @@
51
66
  "title": "Career development",
52
67
  "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development"
53
68
  }
54
- ],
55
- "options": {
56
- "label": "Browse all categories",
57
- "view_more": true,
58
- "href": "/queenslanders"
59
- }
69
+ ]
60
70
  }
61
71
  }