@qld-gov-au/qgds-bootstrap5 1.0.2 → 1.0.8

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 (56) hide show
  1. package/.storybook/preview.js +2 -1
  2. package/dist/assets/css/qld.bootstrap.css +1 -1
  3. package/dist/assets/css/qld.bootstrap.css.map +2 -2
  4. package/dist/assets/js/handlebars.helpers.bundle.js +1 -22
  5. package/dist/assets/js/handlebars.helpers.bundle.js.map +4 -4
  6. package/dist/assets/js/handlebars.helpers.js +15 -1
  7. package/dist/assets/js/qld.bootstrap.min.js +16 -1
  8. package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
  9. package/dist/components/bs5/dateinput/dateinput.hbs +12 -12
  10. package/dist/components/bs5/header/header.hbs +131 -33
  11. package/dist/components/bs5/navbar/navbar.hbs +65 -3
  12. package/dist/components/bs5/select/select.hbs +3 -3
  13. package/dist/components/bs5/tag/tag.hbs +2 -2
  14. package/dist/components/bs5/textarea/textarea.hbs +8 -8
  15. package/dist/components/bs5/textbox/textbox.hbs +7 -6
  16. package/dist/components/handlebars.helpers.js +15 -1
  17. package/dist/components/{handlebars.helpers.bundle.js → handlebars.init.bundle.js} +8 -8
  18. package/dist/components/{handlebars.helpers.bundle.js.map → handlebars.init.bundle.js.map} +3 -3
  19. package/dist/sample-data/dateinput/dateinput.data.json +1 -0
  20. package/dist/sample-data/header/header.data.json +245 -31
  21. package/dist/sample-data/select/select.data.json +1 -0
  22. package/dist/sample-data/textarea/textarea.data.json +1 -0
  23. package/dist/sample-data/textbox/textbox.data.json +1 -0
  24. package/esbuild.js +2 -2
  25. package/package.json +24 -20
  26. package/src/components/bs5/dateinput/Dateinput.stories.js +2 -32
  27. package/src/components/bs5/dateinput/dateinput.data.json +1 -0
  28. package/src/components/bs5/dateinput/dateinput.hbs +12 -12
  29. package/src/components/bs5/header/_colours.scss +31 -15
  30. package/src/components/bs5/header/_icons.scss +1 -1
  31. package/src/components/bs5/header/_search.json +45 -0
  32. package/src/components/bs5/header/header.data.json +245 -31
  33. package/src/components/bs5/header/header.functions.js +143 -8
  34. package/src/components/bs5/header/header.hbs +131 -33
  35. package/src/components/bs5/header/header.scss +178 -35
  36. package/src/components/bs5/navbar/_colours.scss +19 -19
  37. package/src/components/bs5/navbar/navbar.functions.js +59 -52
  38. package/src/components/bs5/navbar/navbar.hbs +65 -3
  39. package/src/components/bs5/navbar/navbar.scss +73 -27
  40. package/src/components/bs5/select/Select.stories.js +4 -4
  41. package/src/components/bs5/select/select.data.json +1 -0
  42. package/src/components/bs5/select/select.hbs +3 -3
  43. package/src/components/bs5/tag/tag.hbs +2 -2
  44. package/src/components/bs5/textarea/Textarea.stories.js +2 -32
  45. package/src/components/bs5/textarea/textarea.data.json +1 -0
  46. package/src/components/bs5/textarea/textarea.hbs +8 -8
  47. package/src/components/bs5/textbox/Textbox.stories.js +2 -15
  48. package/src/components/bs5/textbox/textInput.scss +10 -2
  49. package/src/components/bs5/textbox/textbox.data.json +1 -0
  50. package/src/components/bs5/textbox/textbox.hbs +7 -6
  51. package/src/js/handlebars.helpers.js +15 -1
  52. package/src/main.js +26 -2
  53. package/src/stories/templates/ContentPage/ContentPage.mdx +0 -40
  54. package/src/stories/templates/ContentPage/ContentPage.stories.js +0 -36
  55. package/src/stories/templates/LandingPage/LandingPage.mdx +0 -20
  56. package/src/stories/templates/LandingPage/LandingPage.stories.js +0 -25
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "isDisabled": false,
3
3
  "isRequired": true,
4
+ "isFilled": false,
4
5
  "customClass": "",
5
6
  "label-text": "Date label",
6
7
  "day-placeholder": "DD",
@@ -8,24 +8,185 @@
8
8
  "text": {
9
9
  "value": "Queensland Government websites"
10
10
  },
11
- "mainNavCtaOne": {
12
- "value": "#",
13
- "icon": {
14
- "value": "ctaIcon"
11
+ "CTA": [
12
+ {
13
+ "id": "CTAone",
14
+ "url": {
15
+ "value": "#"
16
+ },
17
+ "icon": {
18
+ "value": "ctaIcon"
19
+ },
20
+ "text": {
21
+ "value": "For Queenslanders"
22
+ },
23
+ "dropdown_enabled": true,
24
+ "dropdown_options": {
25
+ "dropdown_type": "list",
26
+ "view_more_label": "Browse all information and services",
27
+ "view_more_url": "https://www.qld.gov.au/queenslanders",
28
+ "dropdown_config": {
29
+ "groups": [
30
+ {
31
+ "action": "_blank",
32
+ "url": "#",
33
+ "label": "Transport and motoring"
34
+ },
35
+ {
36
+ "action": "_blank",
37
+ "url": "#",
38
+ "label": "Employment and jobs"
39
+ },
40
+ {
41
+ "action": "_blank",
42
+ "url": "#",
43
+ "label": "Education and training"
44
+ },
45
+ {
46
+ "action": "_blank",
47
+ "url": "#",
48
+ "label": "Queensland and its government"
49
+ },
50
+ {
51
+ "action": "_blank",
52
+ "url": "#",
53
+ "label": "Health and wellbeing"
54
+ },
55
+ {
56
+ "action": "_blank",
57
+ "url": "#",
58
+ "label": "Community support"
59
+ }
60
+ ],
61
+ "view_more": true,
62
+ "view_more_options": {
63
+ "url": "#",
64
+ "label": "View more",
65
+ "target": "_blank"
66
+ }
67
+ }
68
+ }
15
69
  },
16
- "text": {
17
- "value": "Link 1"
18
- }
19
- },
20
- "mainNavCtaTwo": {
21
- "value": "#",
22
- "icon": {
23
- "value": "ctaIcon"
70
+ {
71
+ "id": "CTAtwo",
72
+ "url": {
73
+ "value": "#"
74
+ },
75
+ "icon": {
76
+ "value": "ctaIcon"
77
+ },
78
+ "text": {
79
+ "value": "Business and Industry"
80
+ },
81
+ "dropdown_enabled": true,
82
+ "dropdown_options": {
83
+ "dropdown_type": "list",
84
+ "view_more_label": "All categories",
85
+ "view_more_url": "https://www.business.qld.gov.au/",
86
+ "dropdown_config": {
87
+ "groups": [
88
+ {
89
+ "action": "_blank",
90
+ "url": "#",
91
+ "label": "Starting a business"
92
+ },
93
+ {
94
+ "action": "_blank",
95
+ "url": "#",
96
+ "label": "Running a business"
97
+ },
98
+ {
99
+ "action": "_blank",
100
+ "url": "#",
101
+ "label": "Employing people"
102
+ },
103
+ {
104
+ "action": "_blank",
105
+ "url": "#",
106
+ "label": "Payroll tax"
107
+ },
108
+ {
109
+ "action": "_blank",
110
+ "url": "#",
111
+ "label": "Industries"
112
+ },
113
+ {
114
+ "action": "_blank",
115
+ "url": "#",
116
+ "label": "Investing in Queensland"
117
+ }
118
+ ],
119
+ "view_more": true,
120
+ "view_more_options": {
121
+ "url": "#",
122
+ "label": "View more",
123
+ "target": "_blank"
124
+ }
125
+ }
126
+ }
24
127
  },
25
- "text": {
26
- "value": "Link 2"
128
+ {
129
+ "id": "CTAthree",
130
+ "url": {
131
+ "value": "#"
132
+ },
133
+ "icon": {
134
+ "value": "ctaIcon"
135
+ },
136
+ "text": {
137
+ "value": "Login"
138
+ },
139
+ "dropdown_enabled": true,
140
+ "dropdown_options": {
141
+ "dropdown_type": "form",
142
+ "dropdown_config": {
143
+ "groups": [
144
+ {
145
+ "heading": "Log in to For government",
146
+ "content": "Most employees can log in using single sign on (SSO).",
147
+ "usesButton": "true",
148
+ "actionType": "button",
149
+ "action": {
150
+ "button_action": "#",
151
+ "button_targetAttr": "_blank",
152
+ "button_label": "Login"
153
+ },
154
+ "links": [
155
+ {
156
+ "action": "_blank",
157
+ "label": "If your agency doesn't use SSO.",
158
+ "url": "https://www.forgov.qld.gov.au/user#log-in"
159
+ }
160
+ ]
161
+ },
162
+ {
163
+ "heading": "Select your agency",
164
+ "content": "See information relevant to your agency.",
165
+ "actionType": "select",
166
+ "options": [
167
+ {
168
+ "value": "agency 1"
169
+ }
170
+ ]
171
+ }
172
+ ],
173
+ "examples": [
174
+ {
175
+ "heading": "For employees",
176
+ "actionType": "list",
177
+ "list_items": [
178
+ {
179
+ "action": "_self",
180
+ "label": "Your profile",
181
+ "href": "#"
182
+ }
183
+ ]
184
+ }
185
+ ]
186
+ }
187
+ }
27
188
  }
28
- }
189
+ ]
29
190
  },
30
191
  "siteHeader": {
31
192
  "config": {
@@ -49,13 +210,20 @@
49
210
  },
50
211
  "siteSearchAsset": {
51
212
  "value": "#",
52
- "icons": {
53
- "menu-icon": "qld__icon__mobile-menu",
54
- "search-icon": "qld__icon__search",
55
- "search-close-icon": "qld__icon__close"
213
+ "placeholder": "",
214
+ "label": "",
215
+ "formAction": {
216
+ "url": "https://www.forgov.qld.gov.au/search"
56
217
  },
57
- "siteSearchUrl": {
58
- "value": ""
218
+ "options": {
219
+ "icons": {
220
+ "menu-icon": "qld__icon__mobile-menu",
221
+ "search-icon": "qld__icon__search",
222
+ "search-close-icon": "qld__icon__close"
223
+ },
224
+ "borderStyle": {
225
+ "full": true
226
+ }
59
227
  }
60
228
  }
61
229
  },
@@ -74,7 +242,11 @@
74
242
  "value": "#"
75
243
  },
76
244
  "text": {
77
- "value": "Link 1"
245
+ "value": "List 1"
246
+ },
247
+ "dropdown_enabled": true,
248
+ "dropdown_options": {
249
+ "dropdown_type": "list"
78
250
  }
79
251
  },
80
252
  "mainNavCtaTwo": {
@@ -83,7 +255,43 @@
83
255
  "value": "#"
84
256
  },
85
257
  "text": {
86
- "value": "Link 2"
258
+ "value": "List 2"
259
+ },
260
+ "dropdown_enabled": true,
261
+ "dropdown_options": {
262
+ "dropdown_type": "list"
263
+ }
264
+ },
265
+ "mainNavCtaThree": {
266
+ "value": "#",
267
+ "icon": {
268
+ "value": "ctaIcon"
269
+ },
270
+ "text": {
271
+ "value": "Login"
272
+ },
273
+ "dropdown_enabled": true,
274
+ "dropdown_options": {
275
+ "dropdown_type": "form",
276
+ "dropdown_config": {
277
+ "groups": [
278
+ {
279
+ "heading": "Log in to For government",
280
+ "button_action": "#",
281
+ "button_targetAttr": "_blank",
282
+ "button_label": "Login"
283
+ }
284
+ ],
285
+ "examples": [
286
+ {
287
+ "heading": "For employees",
288
+ "content": "See information relevant to your agency.",
289
+ "button_action": "#",
290
+ "button_targetAttr": "_blank",
291
+ "button_label": "Login"
292
+ }
293
+ ]
294
+ }
87
295
  }
88
296
  }
89
297
  },
@@ -95,8 +303,7 @@
95
303
  "url": {
96
304
  "value": "https://qld.gov.au"
97
305
  },
98
- "logo": {
99
- },
306
+ "logo": {},
100
307
  "secondaryType": {
101
308
  "logo": {
102
309
  "value": ""
@@ -111,13 +318,20 @@
111
318
  },
112
319
  "siteSearchAsset": {
113
320
  "value": "#",
114
- "icons": {
115
- "menu-icon": "qld__icon__mobile-menu",
116
- "search-icon": "qld__icon__search",
117
- "search-close-icon": "qld__icon__close"
321
+ "placeholder": "Placeholder",
322
+ "label": "Label",
323
+ "formAction": {
324
+ "url": "https://www.forgov.qld.gov.au/search"
118
325
  },
119
- "siteSearchUrl": {
120
- "value": ""
326
+ "options": {
327
+ "icons": {
328
+ "menu-icon": "qld__icon__mobile-menu",
329
+ "search-icon": "qld__icon__search",
330
+ "search-close-icon": "qld__icon__close"
331
+ },
332
+ "borderStyle": {
333
+ "full": false
334
+ }
121
335
  }
122
336
  }
123
337
  }
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "isDisabled": false,
3
3
  "isRequired": true,
4
+ "isFilled": false,
4
5
  "customClass": "",
5
6
  "label-text": "Label",
6
7
  "placeholder": "Please select",
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "isDisabled": false,
3
3
  "isRequired": true,
4
+ "isFilled": false,
4
5
  "customClass": "",
5
6
  "rows": 3,
6
7
  "label-text": "Label",
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "isDisabled": false,
3
3
  "isRequired": true,
4
+ "isFilled": false,
4
5
  "customClass": "",
5
6
  "label-text": "Label",
6
7
  "placeholder": "Hello World",
package/esbuild.js CHANGED
@@ -41,12 +41,12 @@ const buildConfig = {
41
41
  out: "./assets/css/qld.bootstrap",
42
42
  },
43
43
  {
44
- in: "./src/js/handlebars.init.js",
44
+ in: "./src/js/handlebars.helpers.js",
45
45
  out: "./assets/js/handlebars.helpers.bundle",
46
46
  },
47
47
  {
48
48
  in: "./src/js/handlebars.init.js",
49
- out: "./components/handlebars.helpers.bundle",
49
+ out: "./components/handlebars.init.bundle",
50
50
  },
51
51
  ],
52
52
 
package/package.json CHANGED
@@ -1,11 +1,15 @@
1
1
  {
2
2
  "name": "@qld-gov-au/qgds-bootstrap5",
3
- "version": "1.0.2",
3
+ "version": "1.0.8",
4
4
  "description": "",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/qld-gov-au/qgds-qol-mvp"
8
+ },
5
9
  "main": "index.js",
6
10
  "scripts": {
7
11
  "start": "npm run build",
8
- "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' .",
12
+ "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' .",
9
13
  "build": "node esbuild.js",
10
14
  "test": "echo 'no tests yet'",
11
15
  "watch": "node esbuild.js --watch",
@@ -35,23 +39,22 @@
35
39
  "dependencies": {
36
40
  "@fortawesome/fontawesome-free": "^6.5.2",
37
41
  "bootstrap": "^5.3.1",
38
- "material-symbols": "^0.17.4"
42
+ "material-symbols": "^0.18.0"
39
43
  },
40
44
  "devDependencies": {
41
- "handlebars": "4.7.8",
42
- "@chromatic-com/storybook": "^1.3.5",
43
- "@storybook/addon-essentials": "^8.1.0",
44
- "@storybook/addon-interactions": "^8.1.0",
45
- "@storybook/addon-links": "^8.1.0",
46
- "@storybook/addon-mdx-gfm": "^8.1.0",
47
- "@storybook/addon-themes": "^8.1.0",
48
- "@storybook/blocks": "^8.1.0",
49
- "@storybook/cli": "^8.1.0",
50
- "@storybook/html": "^8.1.0",
51
- "@storybook/html-vite": "^8.1.0",
52
- "@storybook/manager-api": "^8.1.0",
53
- "@storybook/test": "^8.1.0",
54
- "@storybook/theming": "^8.1.0",
45
+ "@chromatic-com/storybook": "^1.4.0",
46
+ "@storybook/addon-essentials": "^8.1.1",
47
+ "@storybook/addon-interactions": "^8.1.1",
48
+ "@storybook/addon-links": "^8.1.1",
49
+ "@storybook/addon-mdx-gfm": "^8.1.1",
50
+ "@storybook/addon-themes": "^8.1.1",
51
+ "@storybook/blocks": "^8.1.1",
52
+ "@storybook/cli": "^8.1.1",
53
+ "@storybook/html": "^8.1.1",
54
+ "@storybook/html-vite": "^8.1.1",
55
+ "@storybook/manager-api": "^8.1.1",
56
+ "@storybook/test": "^8.1.1",
57
+ "@storybook/theming": "^8.1.1",
55
58
  "@stylistic/eslint-plugin-js": "2.1.0",
56
59
  "@vitejs/plugin-vue": "5.0.4",
57
60
  "@whitespace/storybook-addon-html": "^6.1.1",
@@ -62,10 +65,11 @@
62
65
  "esbuild-plugin-copy": "^2.1.1",
63
66
  "esbuild-plugin-eslint": "^0.3.7",
64
67
  "esbuild-plugin-handlebars": "1.0.3",
65
- "esbuild-sass-plugin": "3.2.0",
68
+ "esbuild-sass-plugin": "3.3.0",
66
69
  "eslint": "8.57.0",
67
70
  "eslint-plugin-json": "^3.1.0",
68
71
  "eslint-plugin-storybook": "^0.8.0",
72
+ "handlebars": "4.7.8",
69
73
  "live-server": "1.2.2",
70
74
  "minimist": "^1.2.8",
71
75
  "npm-run-all2": "^6.1.2",
@@ -73,9 +77,9 @@
73
77
  "postcss": "^8.4.29",
74
78
  "prettier": "3.2.5",
75
79
  "raw-loader": "^4.0.2",
76
- "rimraf": "^5.0.6",
80
+ "rimraf": "^5.0.7",
77
81
  "sass": "^1.76.0",
78
- "storybook": "^8.1.0",
82
+ "storybook": "^8.1.1",
79
83
  "vite": "^5.2.11",
80
84
  "watch": "^1.0.2"
81
85
  },
@@ -22,36 +22,6 @@ export default {
22
22
 
23
23
  //https://storybook.js.org/docs/api/arg-types
24
24
  argTypes: {
25
- customClass: {
26
- name: "Classes",
27
- description: 'Settable classes for the component',
28
- control: {
29
- type: "check",
30
- labels: {
31
- "form-style-filled": "Filled",
32
- },
33
- },
34
- options: [
35
- "form-style-filled",
36
- ],
37
- },
38
- states: {
39
- name: "States",
40
- description: `Valid/Invalid states`,
41
- control: {
42
- type: "radio",
43
- labels: {
44
- "default": "Default",
45
- "qld-input-success": "Success",
46
- "qld-input-error": "Error",
47
- },
48
- },
49
- options: [
50
- "default",
51
- "qld-input-success",
52
- "qld-input-error",
53
- ],
54
- },
55
25
  },
56
26
  };
57
27
 
@@ -116,7 +86,7 @@ export const Disabled = {
116
86
  export const Valid = {
117
87
  args: {
118
88
  ...defaultdata,
119
- ...{states: "qld-input-success"},
89
+ ...{customClass: "qld-input-success"},
120
90
  },
121
91
  };
122
92
 
@@ -126,6 +96,6 @@ export const Valid = {
126
96
  export const Invalid = {
127
97
  args: {
128
98
  ...defaultdata,
129
- ...{states: "qld-input-error"},
99
+ ...{customClass: "qld-input-error"},
130
100
  },
131
101
  };
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "isDisabled": false,
3
3
  "isRequired": true,
4
+ "isFilled": false,
4
5
  "customClass": "",
5
6
  "label-text": "Date label",
6
7
  "day-placeholder": "DD",
@@ -15,13 +15,13 @@
15
15
  <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
16
16
  {{/if}}
17
17
 
18
- {{#contains "qld-input-success" states}}
18
+ {{#contains "qld-input-success" customClass}}
19
19
  <span id="text-field-success" class="qld-input-success">
20
20
  {{successMessageText}}
21
21
  </span>
22
22
  {{/contains}}
23
23
 
24
- {{#contains "qld-input-error" states}}
24
+ {{#contains "qld-input-error" customClass}}
25
25
  <span id="text-field-error" class="qld-input-error">
26
26
  {{errorMessageText}}
27
27
  </span>
@@ -34,9 +34,9 @@
34
34
  <div>
35
35
  <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
36
36
  inputmode="numeric" maxlength="2"
37
- class="qld-text-input form-control dayinput {{customClass}} {{states}}" id="dayinput"
38
- ref="day" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
39
- aria-required="true" {{/if}}>
37
+ class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="dayinput" ref="day"
38
+ aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
39
+ {{/if}}>
40
40
  </div>
41
41
  </div>
42
42
  <!-- month group -->
@@ -45,9 +45,9 @@
45
45
  <div>
46
46
  <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
47
47
  type="text" inputmode="numeric" maxlength="2"
48
- class="qld-text-input form-control monthinput {{customClass}} {{states}}" id="monthinput"
49
- ref="month" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
50
- aria-required="true" {{/if}}>
48
+ class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}}" id="monthinput" ref="month"
49
+ aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
50
+ {{/if}}>
51
51
  </div>
52
52
  </div>
53
53
  <!-- year group -->
@@ -56,9 +56,9 @@
56
56
  <div class="year-label">
57
57
  <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"
58
58
  placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
59
- class="qld-text-input form-control yearinput {{customClass}} {{states}}" id="yearinput"
60
- ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
61
- aria-required="true" {{/if}}>
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}}>
62
62
  </div>
63
63
  </div>
64
- </div>
64
+ </div>