@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.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 (184) hide show
  1. package/.eslintrc.cjs +27 -27
  2. package/.vscode/settings.json +5 -5
  3. package/dist/assets/components/bs5/button/button.hbs +48 -30
  4. package/dist/assets/components/bs5/card/card.hbs +3 -17
  5. package/dist/assets/components/bs5/containerLayout/containerLayout.hbs +100 -0
  6. package/dist/assets/components/bs5/footer/customLinks.hbs +7 -0
  7. package/dist/assets/components/bs5/footer/feedbackForm.hbs +25 -0
  8. package/dist/assets/components/bs5/footer/followLinks.hbs +14 -0
  9. package/dist/assets/components/bs5/footer/footer.hbs +229 -346
  10. package/dist/assets/components/bs5/formcheck/formcheck.hbs +1 -1
  11. package/dist/assets/components/bs5/head/head.hbs +4 -4
  12. package/dist/assets/components/bs5/header/header.hbs +124 -878
  13. package/dist/assets/components/bs5/header/headerBrand.hbs +35 -0
  14. package/dist/assets/components/bs5/link/link.hbs +41 -0
  15. package/dist/assets/components/bs5/logo/logoCOALandscape.hbs +110 -55
  16. package/dist/assets/components/bs5/logo/logoCOALandscape2Lines.hbs +2 -1
  17. package/dist/assets/components/bs5/navbar/navbar.hbs +65 -245
  18. package/dist/assets/components/bs5/pageLayout/templates/contentPageWithForm.hbs +53 -22
  19. package/dist/assets/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +79 -59
  20. package/dist/assets/components/bs5/pageLayout/templates/homePage.hbs +111 -0
  21. package/dist/assets/components/bs5/searchInput/searchInput.hbs +9 -11
  22. package/dist/assets/css/qld.bootstrap.css +1 -1
  23. package/dist/assets/css/qld.bootstrap.css.map +3 -3
  24. package/dist/assets/js/bootstrap.bundle.js +3 -6
  25. package/dist/assets/js/bootstrap.bundle.js.map +1 -1
  26. package/dist/assets/js/bootstrap.bundle.min.js +2 -2
  27. package/dist/assets/js/bootstrap.bundle.min.js.map +1 -1
  28. package/dist/assets/js/bootstrap.js +3 -6
  29. package/dist/assets/js/bootstrap.min.js +2 -2
  30. package/dist/assets/js/bootstrap.min.js.map +1 -1
  31. package/dist/assets/js/handlebars.helpers.bundle.js.map +2 -2
  32. package/dist/assets/js/handlebars.helpers.js +34 -34
  33. package/dist/assets/js/handlebars.init.min.js +1055 -2041
  34. package/dist/assets/js/handlebars.init.min.js.map +4 -4
  35. package/dist/assets/js/handlebars.partials.js +14 -6
  36. package/dist/assets/js/qld.bootstrap.min.js +9 -9
  37. package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
  38. package/dist/assets/node/handlebars.init.min.js +538 -108
  39. package/dist/assets/node/handlebars.init.min.js.map +3 -3
  40. package/dist/components/bs5/button/button.hbs +48 -30
  41. package/dist/components/bs5/card/card.hbs +3 -17
  42. package/dist/components/bs5/containerLayout/containerLayout.hbs +100 -0
  43. package/dist/components/bs5/footer/customLinks.hbs +7 -0
  44. package/dist/components/bs5/footer/feedbackForm.hbs +25 -0
  45. package/dist/components/bs5/footer/followLinks.hbs +14 -0
  46. package/dist/components/bs5/footer/footer.hbs +229 -346
  47. package/dist/components/bs5/formcheck/formcheck.hbs +1 -1
  48. package/dist/components/bs5/head/head.hbs +4 -4
  49. package/dist/components/bs5/header/header.hbs +124 -878
  50. package/dist/components/bs5/header/headerBrand.hbs +35 -0
  51. package/dist/components/bs5/link/link.hbs +41 -0
  52. package/dist/components/bs5/logo/logoCOALandscape.hbs +110 -55
  53. package/dist/components/bs5/logo/logoCOALandscape2Lines.hbs +2 -1
  54. package/dist/components/bs5/navbar/navbar.hbs +65 -245
  55. package/dist/components/bs5/pageLayout/templates/contentPageWithForm.hbs +53 -22
  56. package/dist/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +79 -59
  57. package/dist/components/bs5/pageLayout/templates/homePage.hbs +111 -0
  58. package/dist/components/bs5/searchInput/searchInput.hbs +9 -11
  59. package/dist/components/handlebars.helpers.js +34 -34
  60. package/dist/components/handlebars.partials.js +14 -6
  61. package/dist/package.json +2 -2
  62. package/dist/sample-data/button/button.data.json +10 -8
  63. package/dist/sample-data/footer/footer.data.json +128 -84
  64. package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json +51 -46
  65. package/dist/sample-data/formcheck/stories/radio/radio.data.json +51 -46
  66. package/dist/sample-data/header/header.variant.coBrand.data.json +28 -40
  67. package/dist/sample-data/header/header.variant.endorsed.data.json +116 -150
  68. package/dist/sample-data/header/header.variant.masterBrand.data.json +116 -152
  69. package/dist/sample-data/header/header.variant.standAlone.data.json +118 -150
  70. package/dist/sample-data/header/header.variant.subBrand.data.json +32 -159
  71. package/dist/sample-data/inpageAlert/inpageAlert.data.json +6 -6
  72. package/dist/sample-data/link/link.data.json +77 -0
  73. package/dist/sample-data/logo/logo.data.json +1 -0
  74. package/dist/sample-data/navbar/navbar.data.json +191 -0
  75. package/dist/sample-data/searchInput/searchInput.data.json +2 -3
  76. package/dist/sample-data/tabs/tabs.data.json +45 -44
  77. package/package.json +2 -2
  78. package/src/components/bs5/accordion/Accordion.mdx +8 -2
  79. package/src/components/bs5/banner/Banner.mdx +6 -1
  80. package/src/components/bs5/banner/banner.scss +16 -9
  81. package/src/components/bs5/banner/banner.stories.js +17 -17
  82. package/src/components/bs5/breadcrumbs/Breadcrumbs.mdx +8 -2
  83. package/src/components/bs5/breadcrumbs/breadcrumbs.functions.js +2 -0
  84. package/src/components/bs5/breadcrumbs/breadcrumbs.scss +1 -1
  85. package/src/components/bs5/button/button.data.json +10 -8
  86. package/src/components/bs5/button/button.hbs +48 -30
  87. package/src/components/bs5/button/button.scss +61 -0
  88. package/src/components/bs5/button/button.stories.js +29 -10
  89. package/src/components/bs5/callToAction/callToAction.mdx +8 -3
  90. package/src/components/bs5/card/Card.mdx +8 -2
  91. package/src/components/bs5/card/card.hbs +3 -17
  92. package/src/components/bs5/card/card.scss +103 -103
  93. package/src/components/bs5/containerLayout/containerLayout.hbs +100 -0
  94. package/src/components/bs5/containerLayout/containerLayout.stories.js +83 -0
  95. package/src/components/bs5/footer/Footer.js +3 -3
  96. package/src/components/bs5/footer/Footer.mdx +8 -2
  97. package/src/components/bs5/footer/customLinks.hbs +7 -0
  98. package/src/components/bs5/footer/feedbackForm.hbs +25 -0
  99. package/src/components/bs5/footer/followLinks.hbs +14 -0
  100. package/src/components/bs5/footer/footer.data.json +128 -84
  101. package/src/components/bs5/footer/footer.functions.js +2 -1
  102. package/src/components/bs5/footer/footer.hbs +229 -346
  103. package/src/components/bs5/footer/footer.scss +262 -272
  104. package/src/components/bs5/footer/footer.stories.js +4 -92
  105. package/src/components/bs5/footer/footer_formio.scss +219 -0
  106. package/src/components/bs5/formcheck/formcheck.hbs +1 -1
  107. package/src/components/bs5/formcheck/formcheck.scss +161 -139
  108. package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json +51 -46
  109. package/src/components/bs5/formcheck/stories/radio/radio.data.json +51 -46
  110. package/src/components/bs5/globalAlert/GlobalAlert.mdx +8 -2
  111. package/src/components/bs5/globalAlert/globalAlert.test.js +3 -11
  112. package/src/components/bs5/header/_header-variables.scss +272 -0
  113. package/src/components/bs5/header/header.functions.js +9 -9
  114. package/src/components/bs5/header/header.hbs +124 -878
  115. package/src/components/bs5/header/header.scss +279 -411
  116. package/src/components/bs5/header/header.stories.js +8 -28
  117. package/src/components/bs5/header/header.variant.coBrand.data.json +28 -40
  118. package/src/components/bs5/header/header.variant.endorsed.data.json +116 -150
  119. package/src/components/bs5/header/header.variant.masterBrand.data.json +116 -152
  120. package/src/components/bs5/header/header.variant.standAlone.data.json +118 -150
  121. package/src/components/bs5/header/header.variant.subBrand.data.json +32 -159
  122. package/src/components/bs5/header/headerBrand.hbs +35 -0
  123. package/src/components/bs5/icons/icons.scss +79 -72
  124. package/src/components/bs5/inpageAlert/InpageAlert.mdx +8 -2
  125. package/src/components/bs5/inpageAlert/inpageAlert.data.json +6 -6
  126. package/src/components/bs5/inpagenav/inpagenav.scss +37 -37
  127. package/src/components/bs5/link/link.data.json +77 -0
  128. package/src/components/bs5/link/link.hbs +41 -0
  129. package/src/components/bs5/{pageLayout/pageLayout.js → link/link.js} +4 -5
  130. package/src/components/bs5/link/link.mdx +16 -0
  131. package/src/components/bs5/link/link.scss +81 -0
  132. package/src/components/bs5/link/link.stories.js +126 -0
  133. package/src/components/bs5/linkColumns/linkColumns.mdx +8 -3
  134. package/src/components/bs5/logo/logo.data.json +1 -0
  135. package/src/components/bs5/logo/logoCOALandscape.hbs +110 -55
  136. package/src/components/bs5/logo/logoCOALandscape2Lines.hbs +2 -1
  137. package/src/components/bs5/navbar/Navbar.js +2 -9
  138. package/src/components/bs5/navbar/navbar.data.json +191 -0
  139. package/src/components/bs5/navbar/navbar.functions.js +48 -196
  140. package/src/components/bs5/navbar/navbar.hbs +65 -245
  141. package/src/components/bs5/navbar/navbar.scss +684 -562
  142. package/src/components/bs5/navbar/navbar.stories.js +533 -0
  143. package/src/components/bs5/pageLayout/{FullWidthLandingPage.js → HomePage.js} +2 -2
  144. package/src/components/bs5/pageLayout/pageLayout.stories.js +242 -98
  145. package/src/components/bs5/pageLayout/templates/contentPageWithForm.hbs +53 -22
  146. package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs +79 -59
  147. package/src/components/bs5/pageLayout/templates/homePage.hbs +111 -0
  148. package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx +8 -3
  149. package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +10 -9
  150. package/src/components/bs5/searchInput/search.functions.js +94 -63
  151. package/src/components/bs5/searchInput/searchInput.data.json +2 -3
  152. package/src/components/bs5/searchInput/searchInput.hbs +9 -11
  153. package/src/components/bs5/searchInput/searchInput.scss +297 -255
  154. package/src/components/bs5/searchInput/searchInput.test.js +98 -90
  155. package/src/components/bs5/tabs/tabs.data.json +45 -44
  156. package/src/components/bs5/tabs/tabs.scss +544 -500
  157. package/src/components/bs5/tabs/tabs.stories.js +81 -51
  158. package/src/components/common/layout/container.scss +22 -0
  159. package/src/components/common/layout/content.scss +11 -4
  160. package/src/components/common/layout/grid.scss +26 -0
  161. package/src/css/main.scss +7 -2
  162. package/src/css/mixins/_index.scss +2 -1
  163. package/src/css/mixins/register-vars.scss +23 -0
  164. package/src/css/qld-variables.scss +106 -83
  165. package/src/css/utilities/_index.scss +1 -0
  166. package/src/css/utilities/responsive-visually-hidden.scss +10 -0
  167. package/src/js/handlebars.helpers.js +34 -34
  168. package/src/js/handlebars.partials.js +14 -6
  169. package/src/js/qld.bootstrap.js +10 -11
  170. package/dist/assets/components/bs5/footer/footerForgov.hbs +0 -279
  171. package/dist/assets/components/bs5/pageLayout/pageLayout.hbs +0 -34
  172. package/dist/assets/components/bs5/pageLayout/templates/fullWidthLandingPage.hbs +0 -61
  173. package/dist/components/bs5/footer/footerForgov.hbs +0 -279
  174. package/dist/components/bs5/pageLayout/pageLayout.hbs +0 -34
  175. package/dist/components/bs5/pageLayout/templates/fullWidthLandingPage.hbs +0 -61
  176. package/src/components/bs5/footer/_colours.scss +0 -149
  177. package/src/components/bs5/footer/_measurements.scss +0 -32
  178. package/src/components/bs5/footer/footerForgov.hbs +0 -279
  179. package/src/components/bs5/header/_colours.scss +0 -271
  180. package/src/components/bs5/header/_icons.scss +0 -10
  181. package/src/components/bs5/navbar/_colours.scss +0 -85
  182. package/src/components/bs5/navbar/_icons.scss +0 -64
  183. package/src/components/bs5/pageLayout/pageLayout.hbs +0 -34
  184. package/src/components/bs5/pageLayout/templates/fullWidthLandingPage.hbs +0 -61
package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs CHANGED
@@ -5,7 +5,6 @@
5
5
  <meta charset="UTF-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
7
  <title>{{title}}</title>
8
- {{> head }}
9
8
  </head>
10
9
 
11
10
  <body>
@@ -21,80 +20,101 @@
21
20
  {{/if}}
22
21
 
23
22
  <main>
24
- <div class="container-fluid">
25
- <div class="container qld-content">
26
- {{#if breadcrumbs}}
27
- <div class="row">
28
- <div class="col-12">
29
- <!-- breadcrumbs -->
30
- {{> breadcrumbs breadcrumbs}}
31
- </div>
23
+ <div class="container mt-40 mt-lg-64">
24
+ {{#if breadcrumbs}}
25
+ <div class="row">
26
+ <div class="col-12">
27
+ <!-- breadcrumbs -->
28
+ {{> breadcrumbs breadcrumbs}}
32
29
  </div>
33
- {{/if}}
34
-
35
- <!-- Main Grid Layout: Side navigation and content -->
36
- <div class="row">
37
- {{#if sidenav}}
38
- <!-- Side navigation Col -->
39
- <div class="col-lg-3 col-md-4 px-0">
40
- {{> sidenav sidenav}}
41
- </div>
42
- <!-- Content Col -->
43
- <div class="col-lg-8 col-md-7 ps-32">
44
- {{else}}
45
- <div class="col-12">
46
- {{/if}}
30
+ </div>
31
+ {{/if}}
32
+
33
+ <!-- Main Grid Layout: Side navigation and content -->
34
+ <div class="row">
35
+ {{#if sidenav}}
36
+ <!-- Side navigation Col -->
37
+ <div class="col-12 col-lg-3 mt-5 mt-lg-0">
38
+ {{> sidenav sidenav}}
39
+ </div>
40
+ <!-- Content Col -->
41
+ <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
42
+ {{else}}
43
+ <div class="col-12">
44
+ {{/if}}
47
45
 
48
- <!-- Main Content Sections -->
49
- <div class="content-section ps-32">
46
+ <!-- Main Content Sections -->
47
+ <div class="content-section mb-5 px-1 px-md-32">
50
48
 
51
- {{#if inpagenav}}
52
- <!-- inpagenav Section -->
53
- {{> inpagenav inpagenav}}
54
- {{/if}}
49
+ {{#if inpagenav}}
50
+ <!-- inpagenav Section -->
51
+ {{> inpagenav inpagenav}}
52
+ {{/if}}
55
53
 
56
- <h1 id="section-heading">Section heading (H1)</h1>
57
- <p>This is the main content area. It contains detailed information about the topic.</p>
54
+ <h1 id="section-heading">Section heading (H1)</h1>
55
+ <p>
56
+ Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
57
+ </p>
58
+ <p>
59
+ Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
60
+ </p>
61
+
62
+ <h2 id="content-heading">Content heading (H2)</h2>
63
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
64
+ incididunt ut labore et dolore magna aliqua.</p>
65
+
66
+ {{#if calloutdata}}
67
+ <!-- callout Section -->
68
+ {{> callout calloutdata}}
69
+ {{/if}}
58
70
 
59
- <h2 id="content-heading">Content heading (H2)</h2>
60
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
61
- incididunt ut labore et dolore magna aliqua.</p>
71
+ <h3 id="inspection">Pre-registration inspection (H3)</h3>
72
+ <p>Information about pre-registration inspection requirements.</p>
62
73
 
63
- <h3 id="inspection">Pre-registration inspection (H3)</h3>
64
- <p>Information about pre-registration inspection requirements.</p>
74
+ <h4 id="fees-and-charges">Fees and charges (H4)</h4>
75
+ <p>Details about fees and charges for vehicle registration.</p>
65
76
 
66
- <h4 id="fees-and-charges">Fees and charges (H4)</h4>
67
- <p>Details about fees and charges for vehicle registration.</p>
77
+ </div>
68
78
 
69
- </div>
79
+ {{#if accordionItems}}
80
+ <!-- accordion Section -->
81
+ <div class="my-5 px-1 px-md-32">
82
+ {{> accordion accordionItems}}
83
+ </div>
84
+ {{/if}}
70
85
 
71
- {{#if image}}
72
- <!-- image Section -->
73
- <div class="my-4 ps-32">
74
- {{> image image}}
75
- </div>
76
- {{/if}}
86
+ {{#if video}}
87
+ <!-- video Section -->
88
+ <div class="my-5 px-1 px-md-32">
89
+ {{> video video}}
90
+ </div>
91
+ {{/if}}
77
92
 
78
- {{#if table}}
79
- <!-- table Section -->
80
- <div class="my-4 ps-32">
81
- {{> table table}}
82
- </div>
83
- {{/if}}
93
+ <div class="my-5 p-1 p-md-32 bg-light">
94
+ <h2 id="inspection">Section heading (H2)</h2>
95
+ <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
96
+ est.
97
+ Tincidunt ultrices commodo vestibulum non netus. </p>
98
+ <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
99
+ condimentum adipiscing augue quisque eu.</p>
84
100
 
85
- {{#if video}}
86
- <!-- video Section -->
87
- <div class="my-4 ps-32">
88
- {{> video video}}
89
- </div>
90
- {{/if}}
101
+ {{> callToAction callToAction}}
102
+ </div>
91
103
 
92
- <!-- Content Footer -->
93
- {{> contentFooter contentFooter}}
104
+ {{#if table}}
105
+ <!-- table Section -->
106
+ <div class="my-5 px-1 px-md-32">
107
+ {{> table table}}
94
108
  </div>
109
+ {{/if}}
110
+
95
111
  </div>
96
112
  </div>
113
+
114
+ <!-- Content Footer -->
115
+ {{> contentFooter contentFooter}}
97
116
  </div>
117
+ </div>
98
118
  </main>
99
119
  <!-- Footer -->
100
120
  {{> footer footer}}
package/src/components/bs5/pageLayout/templates/homePage.hbs ADDED
@@ -0,0 +1,111 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>{{title}}</title>
8
+ </head>
9
+
10
+ <body>
11
+ {{> globalAlert globalAlert}}
12
+ {{> header header}}
13
+ {{> navbar navbar}}
14
+
15
+ {{#if banner}}
16
+ {{> banner banner}}
17
+ {{/if}}
18
+
19
+ <main>
20
+ <div class="container-fluid p-0">
21
+ {{#if cardGrid}}
22
+ <section class="py-5 mt-md-3">
23
+ <div class="container">
24
+ <div class="row">
25
+ {{#each cardGrid.cards}}
26
+ <div class="col-md-4 mb-4">
27
+ {{> card this}}
28
+ </div>
29
+ {{/each}}
30
+ </div>
31
+ </div>
32
+ </section>
33
+ {{/if}}
34
+
35
+ {{#if linkColumns}}
36
+ <section class="py-5">
37
+ <div class="container">
38
+ {{> linkColumns linkColumns}}
39
+ </div>
40
+ </section>
41
+ {{/if}}
42
+
43
+ <section class="py-5 mt-md-3 bg-light">
44
+ <div class="container">
45
+ <h2 id="content-heading">Section heading (H2)</h2>
46
+
47
+ <div class="row">
48
+ <div class="col-md-4 mb-4">
49
+ <h3 id="inspection">Content heading (H3)</h3>
50
+ <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
51
+ est.
52
+ Tincidunt ultrices commodo vestibulum non netus. </p>
53
+ <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
54
+ condimentum adipiscing augue quisque eu.</p>
55
+
56
+ {{> callToAction callToAction}}
57
+ </div>
58
+
59
+ <div class="col-md-4 mb-4">
60
+ <h3 id="inspection">Content heading (H3)</h3>
61
+ <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
62
+ est.
63
+ Tincidunt ultrices commodo vestibulum non netus. </p>
64
+ <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
65
+ condimentum adipiscing augue quisque eu.</p>
66
+
67
+ {{> callToAction callToAction}}
68
+ </div>
69
+
70
+ <div class="col-md-4 mb-4">
71
+ <h3 id="inspection">Content heading (H3)</h3>
72
+ <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
73
+ est.
74
+ Tincidunt ultrices commodo vestibulum non netus. </p>
75
+ <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
76
+ condimentum adipiscing augue quisque eu.</p>
77
+
78
+ {{> callToAction callToAction}}
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ {{#if promotionalPanel}}
85
+ <section class="pt-5 bg-light">
86
+ <div class="container">
87
+ {{> promotionalPanel promotionalPanel}}
88
+ </div>
89
+ </section>
90
+ {{/if}}
91
+
92
+ {{#if cardGridBottom}}
93
+ <section class="py-64 dark-alt">
94
+ <div class="container pt-64">
95
+ <div class="row">
96
+ {{#each cardGridBottom.cards}}
97
+ <div class="col-md-4 mb-4">
98
+ {{> card this}}
99
+ </div>
100
+ {{/each}}
101
+ </div>
102
+ </div>
103
+ </section>
104
+ {{/if}}
105
+
106
+ </div>
107
+ </main>
108
+ {{> footer footer}}
109
+ </body>
110
+
111
+ </html>
package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx CHANGED
@@ -1,16 +1,21 @@
1
- import { Canvas, Meta, Story } from "@storybook/blocks"
2
- import * as promotionalPanelStories from "./promotionalPanel.stories"
1
+ import { Canvas, Meta, Story, Source } from "@storybook/blocks";
2
+ import * as promotionalPanelStories from "./promotionalPanel.stories";
3
+ import defaultdata from "./promotionalPanel.data.json";
3
4
 
4
5
  <Meta of={promotionalPanelStories} />
5
6
 
6
7
  # Promotional Panel
8
+
7
9
  <Canvas>
8
10
  <Story of={promotionalPanelStories.Default} />
9
11
  </Canvas>
10
12
 
11
13
  ## Design resources
12
14
 
13
-
14
15
  - [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=SY0WW7uiwAl3ioEj-0)
15
16
  - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=nVLTSHpRu8jvVSar-0)
16
17
  - [Design System website](https://www.designsystem.qld.gov.au/components/promotional-panel)
18
+
19
+ ## Example JSON data
20
+
21
+ <Source language="json" code={JSON.stringify(defaultdata, null, 2)} />
package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap CHANGED
@@ -6,13 +6,13 @@ exports[`SearchInput > Renders as expected 1`] = `
6
6
  -->
7
7
  <div class="container ">
8
8
  <div class="qld-search-input d-flex">
9
- <input id="search" name=" query" class="form-control" type="text" placeholder="Search website"
9
+ <input id="search" name=" query" class="form-control" type="text"
10
10
  autocomplete="off" aria-label="Search website" data-collection="qgov~sp-search" data-profile="qld" data-numranks="10" data-tiers="off" data-suggestions="https://discover.search.qld.gov.au/s/suggest.json" data-results-url="https://discover.search.qld.gov.au/s/search.json" />
11
11
 
12
12
  <div class="suggestions suggestions__group d-none">
13
13
  <div class="default-suggestions">
14
- <div class="suggestions-category mt-2">
15
- <strong class="suggestions-category-label">Popular services</strong>
14
+ <div class="suggestions-category mt-16">
15
+ <strong class="suggestions-category-label d-block">Popular services</strong>
16
16
  <ul class="mt-2">
17
17
  <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
18
18
  <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
@@ -21,11 +21,9 @@ exports[`SearchInput > Renders as expected 1`] = `
21
21
  </ul>
22
22
  </div>
23
23
 
24
- <hr>
25
-
26
- <div class="suggestions-category mt-2">
27
- <strong class="suggestions-category-label">Browse by category</strong>
28
- <ul class="mt-2">
24
+ <div class="suggestions-category mt-16">
25
+ <strong class="suggestions-category-label d-block">Browse by category</strong>
26
+ <ul class="mt-12 mb-0">
29
27
  <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
30
28
  <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
31
29
  <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
@@ -33,11 +31,14 @@ exports[`SearchInput > Renders as expected 1`] = `
33
31
  </ul>
34
32
  </div>
35
33
 
34
+ <div class="suggestions-category">
35
+ <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="/queenslanders">Browse all categories</a>
36
+ </div>
36
37
  </div>
37
38
  <div class="dynamic-suggestions"></div>
38
39
  </div>
39
40
  <button class="btn btn-primary" type="submit" id="search-button">
40
- <span class="btn-icon"></span>
41
+ <span class="btn-icon mx-0"></span>
41
42
  <span class="btn-label">Search</span>
42
43
  </button>
43
44
  </div>
package/src/components/bs5/searchInput/search.functions.js CHANGED
@@ -1,4 +1,4 @@
1
- import { createPopper } from '@popperjs/core';
1
+ import { createPopper } from "@popperjs/core";
2
2
 
3
3
  /**
4
4
  * Fetches data from the provided URL.
@@ -11,7 +11,7 @@ async function fetchData(url, type) {
11
11
  try {
12
12
  const response = await fetch(url);
13
13
  if (!response.ok) {
14
- throw new Error('Network response was not ok');
14
+ throw new Error("Network response was not ok");
15
15
  }
16
16
  const data = await response.json();
17
17
  return data;
@@ -29,21 +29,22 @@ async function fetchData(url, type) {
29
29
  * @returns {void}
30
30
  */
31
31
  export function selectSuggestion(value, form) {
32
- const searchInput = form.querySelector('.qld-search-input input');
33
- const suggestions = form.querySelector('.suggestions');
32
+ const searchInput = form.querySelector(".qld-search-input input");
33
+ const suggestions = form.querySelector(".suggestions");
34
34
 
35
35
  if (searchInput && suggestions) {
36
36
  searchInput.value = value.trim();
37
- suggestions.classList.add('d-none');
37
+ suggestions.classList.add("d-none");
38
38
 
39
39
  // Retrieve additional params
40
- const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
41
- const profile = searchInput.getAttribute('data-profile') || 'qld';
42
- const numRanks = searchInput.getAttribute('data-numranks') || '10';
43
- const tiers = searchInput.getAttribute('data-tiers') || 'off';
40
+ const collection =
41
+ searchInput.getAttribute("data-collection") || "qgov~sp-search";
42
+ const profile = searchInput.getAttribute("data-profile") || "qld";
43
+ const numRanks = searchInput.getAttribute("data-numranks") || "10";
44
+ const tiers = searchInput.getAttribute("data-tiers") || "off";
44
45
 
45
46
  // Form action
46
- const actionUrl = form.getAttribute('action');
47
+ const actionUrl = form.getAttribute("action");
47
48
 
48
49
  // Construct the URL with proper parameters
49
50
  const params = new URLSearchParams({
@@ -69,11 +70,15 @@ export function selectSuggestion(value, form) {
69
70
  * @param {HTMLFormElement} form - The form element.
70
71
  * @returns {void}
71
72
  **/
72
- export async function showSuggestions(value = '', isDefault = false, form) {
73
- const searchInput = form.querySelector('.qld-search-input input');
74
- const suggestions = form.querySelector('.suggestions');
75
- const defaultSuggestionsContainer = form.querySelector('.default-suggestions');
76
- const dynamicSuggestionsContainer = form.querySelector('.dynamic-suggestions');
73
+ export async function showSuggestions(value = "", isDefault = false, form) {
74
+ const searchInput = form.querySelector(".qld-search-input input");
75
+ const suggestions = form.querySelector(".suggestions");
76
+ const defaultSuggestionsContainer = form.querySelector(
77
+ ".default-suggestions",
78
+ );
79
+ const dynamicSuggestionsContainer = form.querySelector(
80
+ ".dynamic-suggestions",
81
+ );
77
82
 
78
83
  if (!suggestions || !searchInput) {
79
84
  console.warn("Required suggestions elements not found.");
@@ -82,84 +87,109 @@ export async function showSuggestions(value = '', isDefault = false, form) {
82
87
 
83
88
  // Hide/show default suggestions
84
89
  if (isDefault) {
85
- defaultSuggestionsContainer.classList.remove('d-none');
86
- dynamicSuggestionsContainer.innerHTML = '';
87
- dynamicSuggestionsContainer.classList.add('d-none');
90
+ defaultSuggestionsContainer.classList.remove("d-none");
91
+ dynamicSuggestionsContainer.innerHTML = "";
92
+ dynamicSuggestionsContainer.classList.add("d-none");
88
93
  createPopper(searchInput, suggestions, {
89
- placement: 'bottom-start',
94
+ placement: "bottom-start",
90
95
  });
91
- suggestions.classList.remove('d-none');
96
+ suggestions.classList.remove("d-none");
92
97
  return;
93
98
  }
94
99
 
95
100
  if (value.length === 0) {
96
- dynamicSuggestionsContainer.innerHTML = '';
97
- dynamicSuggestionsContainer.classList.add('d-none');
101
+ dynamicSuggestionsContainer.innerHTML = "";
102
+ dynamicSuggestionsContainer.classList.add("d-none");
98
103
  return;
99
104
  }
100
105
 
101
- defaultSuggestionsContainer.classList.add('d-none');
106
+ defaultSuggestionsContainer.classList.add("d-none");
102
107
 
103
108
  // Fetch dynamic suggestions if available
104
- const suggestUrl = searchInput.getAttribute('data-suggestions');
109
+ const suggestUrl = searchInput.getAttribute("data-suggestions");
105
110
  if (suggestUrl) {
106
- const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
107
- const profile = searchInput.getAttribute('data-profile') || 'qld';
108
- const fetchedSuggestions = await fetchData(`${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`, 'suggestions');
111
+ const collection =
112
+ searchInput.getAttribute("data-collection") || "qgov~sp-search";
113
+ const profile = searchInput.getAttribute("data-profile") || "qld";
114
+ const fetchedSuggestions = await fetchData(
115
+ `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
116
+ "suggestions",
117
+ );
109
118
 
110
119
  if (fetchedSuggestions.length > 0) {
111
120
  dynamicSuggestionsContainer.innerHTML = `
112
- <div class="suggestions-category mt-2">
113
- <strong class="suggestions-category-label">Suggestions</strong>
114
- <ul class="mt-2">${fetchedSuggestions.slice(0, 4).map(item => {
115
- const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '<strong>$1</strong>');
116
- return `<li><a href="#">${highlightedText}</a></li>`;
117
- }).join('')}</ul>
121
+ <div class="suggestions-category mt-16">
122
+ <strong class="suggestions-category-label d-block">Suggestions</strong>
123
+ <ul class="mt-2">${fetchedSuggestions
124
+ .slice(0, 4)
125
+ .map((item) => {
126
+ const highlightedText = item.replace(
127
+ new RegExp(`(${value})`, "gi"),
128
+ "<strong>$1</strong>",
129
+ );
130
+ return `<li><a href="#">${highlightedText}</a></li>`;
131
+ })
132
+ .join("")}</ul>
118
133
  </div>`;
119
- dynamicSuggestionsContainer.classList.remove('d-none');
134
+ dynamicSuggestionsContainer.classList.remove("d-none");
120
135
  createPopper(searchInput, suggestions, {
121
- placement: 'bottom-start',
136
+ placement: "bottom-start",
122
137
  });
123
- suggestions.classList.remove('d-none');
138
+ suggestions.classList.remove("d-none");
124
139
 
125
140
  // Attach click event listeners to each suggestion item
126
- form.querySelectorAll('.suggestions li').forEach((item) => {
127
- item.addEventListener('click', () => selectSuggestion(item.innerText, form));
141
+ form.querySelectorAll(".suggestions li").forEach((item) => {
142
+ item.addEventListener("click", () =>
143
+ selectSuggestion(item.innerText, form),
144
+ );
128
145
  });
129
146
  } else {
130
- dynamicSuggestionsContainer.innerHTML = '';
131
- dynamicSuggestionsContainer.classList.add('d-none');
132
- suggestions.classList.add('d-none');
147
+ dynamicSuggestionsContainer.innerHTML = "";
148
+ dynamicSuggestionsContainer.classList.add("d-none");
149
+ suggestions.classList.add("d-none");
133
150
  }
134
151
  }
135
152
 
136
- const resultsUrl = searchInput.getAttribute('data-results-url');
153
+ const resultsUrl = searchInput.getAttribute("data-results-url");
137
154
  if (resultsUrl) {
138
- const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
139
- const profile = searchInput.getAttribute('data-profile') || 'qld';
140
- const fetchedServices = await fetchData(`${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`, 'services');
141
-
142
- if (fetchedServices.response.resultPacket && fetchedServices.response.resultPacket.results.length > 0) {
155
+ const collection =
156
+ searchInput.getAttribute("data-collection") || "qgov~sp-search";
157
+ const profile = searchInput.getAttribute("data-profile") || "qld";
158
+ const fetchedServices = await fetchData(
159
+ `${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`,
160
+ "services",
161
+ );
162
+
163
+ if (
164
+ fetchedServices.response.resultPacket &&
165
+ fetchedServices.response.resultPacket.results.length > 0
166
+ ) {
143
167
  dynamicSuggestionsContainer.innerHTML += `
144
- <div class="suggestions-category feature pt-2">
145
- <strong class="suggestions-category-label">Services</strong>
146
- <ul class="mt-2">${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `<li><a href="${item.liveUrl}">${item.title}</a></li>`).join('')}</ul>
168
+ <div class="suggestions-category feature pt-16">
169
+ <strong class="suggestions-category-label d-block">Services</strong>
170
+ <ul class="mt-2">${fetchedServices.response.resultPacket.results
171
+ .slice(0, 4)
172
+ .map(
173
+ (item) => `<li><a href="${item.liveUrl}">${item.title}</a></li>`,
174
+ )
175
+ .join("")}</ul>
147
176
  </div>`;
148
- dynamicSuggestionsContainer.classList.remove('d-none');
177
+ dynamicSuggestionsContainer.classList.remove("d-none");
149
178
  createPopper(searchInput, suggestions, {
150
- placement: 'bottom-start',
179
+ placement: "bottom-start",
151
180
  });
152
- suggestions.classList.remove('d-none');
181
+ suggestions.classList.remove("d-none");
153
182
 
154
183
  // Attach click event listeners to each suggestion item
155
- form.querySelectorAll('.suggestions li').forEach((item) => {
156
- item.addEventListener('click', () => selectSuggestion(item.innerText, form));
184
+ form.querySelectorAll(".suggestions li").forEach((item) => {
185
+ item.addEventListener("click", () =>
186
+ selectSuggestion(item.innerText, form),
187
+ );
157
188
  });
158
189
  }
159
190
  }
160
191
  }
161
192
 
162
-
163
193
  /**
164
194
  * Submits the search form with proper parameters.
165
195
  *
@@ -167,13 +197,14 @@ export async function showSuggestions(value = '', isDefault = false, form) {
167
197
  * @param {HTMLFormElement} form - The form element.
168
198
  * @returns {void}
169
199
  */
170
- export function submitSearchForm(query = '', form) {
171
- const searchInput = form.querySelector('.qld-search-input input');
200
+ export function submitSearchForm(query = "", form) {
201
+ const searchInput = form.querySelector(".qld-search-input input");
172
202
 
173
- const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
174
- const profile = searchInput.getAttribute('data-profile') || 'qld';
175
- const numRanks = searchInput.getAttribute('data-numranks') || '10';
176
- const tiers = searchInput.getAttribute('data-tiers') || 'off';
203
+ const collection =
204
+ searchInput.getAttribute("data-collection") || "qgov~sp-search";
205
+ const profile = searchInput.getAttribute("data-profile") || "qld";
206
+ const numRanks = searchInput.getAttribute("data-numranks") || "10";
207
+ const tiers = searchInput.getAttribute("data-tiers") || "off";
177
208
 
178
209
  const params = new URLSearchParams({
179
210
  query: query.trim(),
@@ -183,7 +214,7 @@ export function submitSearchForm(query = '', form) {
183
214
  tiers: tiers,
184
215
  });
185
216
 
186
- const searchUrl = `${form.getAttribute('action')}?${params.toString()}`;
217
+ const searchUrl = `${form.getAttribute("action")}?${params.toString()}`;
187
218
  window.location.href = searchUrl;
188
219
  }
189
220
 
package/src/components/bs5/searchInput/searchInput.data.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "customClass": "",
3
3
  "variantClass": "",
4
- "placeholder": "Search website",
5
4
  "inputID": "search",
6
5
  "inputName": "query",
7
6
  "buttonID": "search-button",
@@ -56,8 +55,8 @@
56
55
  ],
57
56
  "options": {
58
57
  "label": "Browse all categories",
59
- "view_more": false,
58
+ "view_more": true,
60
59
  "href": "/queenslanders"
61
60
  }
62
61
  }
63
- }
62
+ }