@qld-gov-au/qgds-bootstrap5 1.0.11 → 1.0.13
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/dist/assets/css/qld.bootstrap.css +1 -1
- package/dist/assets/css/qld.bootstrap.css.map +3 -3
- package/dist/assets/js/qld.bootstrap.min.js +20 -14
- package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
- package/dist/components/bs5/header/header.hbs +18 -72
- package/dist/sample-data/header/header.data.json +33 -169
- package/dist/sample-data/tag/tag.data.json +19 -15
- package/package.json +18 -17
- package/src/components/bs5/breadcrumbs/breadcrumb.functions.js +56 -0
- package/src/components/bs5/breadcrumbs/breadcrumbs.scss +20 -0
- package/src/components/bs5/card/card.scss +13 -2
- package/src/components/bs5/correctincorrect/correctincorrect.scss +45 -51
- package/src/components/bs5/correctincorrect/correctincorrect.stories.js +29 -28
- package/src/components/bs5/header/_colours.scss +93 -122
- package/src/components/bs5/header/header.data.json +33 -169
- package/src/components/bs5/header/header.functions.js +141 -78
- package/src/components/bs5/header/header.hbs +18 -72
- package/src/components/bs5/header/header.scss +32 -9
- package/src/components/bs5/navbar/navbar.functions.js +26 -7
- package/src/components/bs5/spinner/spinner.scss +1 -3
- package/src/components/bs5/tag/tag.data.json +19 -15
- package/src/components/bs5/tag/tag.scss +129 -39
- package/src/components/bs5/tag/tag.stories.js +12 -12
- package/src/main.js +13 -15
- package/src/main.scss +1 -0
- package/src/scss/qld-variables.scss +6 -15
|
@@ -228,64 +228,10 @@
|
|
|
228
228
|
{{/isType}}
|
|
229
229
|
|
|
230
230
|
{{#isType dropdown_options.dropdown_type "form"}}
|
|
231
|
-
{{#if dropdown_options.dropdown_config.
|
|
232
|
-
{{
|
|
233
|
-
|
|
234
|
-
{{#if heading}}<h4 class="mt-2">{{heading}}</h4>{{/if}}
|
|
235
|
-
{{#if content}}<p>{{content}}</p>{{/if}}
|
|
236
|
-
|
|
237
|
-
{{#isType actionType "button"}}
|
|
238
|
-
<a class="btn btn-primary" href="{{action.button_action}}"
|
|
239
|
-
{{#if action.button_targetAttr }}
|
|
240
|
-
target="{{action.button_targetAttr}}"
|
|
241
|
-
{{/if}}>
|
|
242
|
-
<span class="btn-icon fa-solid fa-arrow-up-right-from-square"></span>
|
|
243
|
-
{{action.button_label}}
|
|
244
|
-
</a>
|
|
245
|
-
{{/isType}}
|
|
246
|
-
|
|
247
|
-
{{#each links}}
|
|
248
|
-
<div class="group">
|
|
249
|
-
<a class="mt-4 qld__header__cta-group-list" href="{{url}}"
|
|
250
|
-
{{#if action}}
|
|
251
|
-
target="{{action}}"
|
|
252
|
-
{{/if}}>
|
|
253
|
-
{{label}}
|
|
254
|
-
</a>
|
|
255
|
-
</div>
|
|
256
|
-
<hr>
|
|
257
|
-
{{/each}}
|
|
258
|
-
|
|
259
|
-
{{#isType actionType "list"}}
|
|
260
|
-
{{#each list_items}}
|
|
261
|
-
<ul>
|
|
262
|
-
<li class="qld__header__cta-group-list group">
|
|
263
|
-
<a href="{{url}}"
|
|
264
|
-
{{#if action }}
|
|
265
|
-
target="{{action}}"
|
|
266
|
-
{{/if}}>
|
|
267
|
-
{{label}}
|
|
268
|
-
</a>
|
|
269
|
-
</li>
|
|
270
|
-
</ul>
|
|
271
|
-
<hr>
|
|
272
|
-
{{/each}}
|
|
273
|
-
{{/isType}}
|
|
274
|
-
|
|
275
|
-
{{#isType actionType "select"}}
|
|
276
|
-
<select class="qld-text-input form-select qld-select" aria-label="" required=""
|
|
277
|
-
aria-required="">
|
|
278
|
-
<option selected="">Please select</option>
|
|
279
|
-
{{#each options}}
|
|
280
|
-
<option value="{{value}}">{{value}}</option>
|
|
281
|
-
{{/each}}
|
|
282
|
-
</select>
|
|
283
|
-
{{/isType}}
|
|
284
|
-
|
|
285
|
-
{{/each}}
|
|
231
|
+
{{#if dropdown_options.dropdown_config.content}}
|
|
232
|
+
{{{dropdown_options.dropdown_config.content}}}
|
|
286
233
|
{{/if}}
|
|
287
234
|
{{/isType}}
|
|
288
|
-
|
|
289
235
|
</ul>
|
|
290
236
|
{{/if}}
|
|
291
237
|
</div>
|
|
@@ -294,22 +240,18 @@
|
|
|
294
240
|
</div>
|
|
295
241
|
<div class="qld__header__main-nav-controls">
|
|
296
242
|
{{#if siteSearchAsset.value}}
|
|
297
|
-
<button aria-controls="qld-header-search"
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
class="
|
|
301
|
-
<use href="{{icon-root}}#{{siteSearchAsset.options.icons.search-icon}}"></use>
|
|
243
|
+
<button aria-controls="qld-header-search" class="qld__header__toggle-main-nav qld__main-nav__toggle-search" aria-expanded="false">
|
|
244
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
|
|
245
|
+
<use class="icon-search" href="{{icon-root}}#{{icons.search-icon}}" style="display: block;"></use>
|
|
246
|
+
<use class="icon-close" href="{{icon-root}}#{{icons.close-icon}}" style="display: none;"></use>
|
|
302
247
|
</svg>
|
|
303
248
|
<span class="qld__main-nav__toggle-text">Search</span>
|
|
304
249
|
</button>
|
|
305
250
|
{{/if}}
|
|
306
|
-
<button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open"
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
class="qld__icon qld__icon--lg">
|
|
311
|
-
<use href="{{icon-root}}#{{siteSearchAsset.options.icons.menu-icon}}"></use>
|
|
312
|
-
</svg>
|
|
251
|
+
<button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
252
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
|
|
253
|
+
<use href="{{icon-root}}#{{icons.menu-icon}}"></use>
|
|
254
|
+
</svg>
|
|
313
255
|
<span class="qld__main-nav__toggle-text">Menu</span>
|
|
314
256
|
</button>
|
|
315
257
|
</div>
|
|
@@ -938,15 +880,19 @@
|
|
|
938
880
|
{{/if}}
|
|
939
881
|
{{#if siteSearchAsset.value}}
|
|
940
882
|
<div id="qld-header-search" class="qld__header__site-search qld__header__site-search--closed">
|
|
941
|
-
|
|
942
|
-
|
|
883
|
+
<form id="site-search" role="search"
|
|
884
|
+
{{#if siteSearchAsset.formAction.url}}action="{{siteSearchAsset.formAction.url}}"{{/if}}
|
|
885
|
+
{{#if siteSearchAsset.formAction.suggestions}}data-suggestions="{{siteSearchAsset.formAction.suggestions}}"{{/if}}
|
|
886
|
+
{{#if siteSearchAsset.formAction.results}}data-results-url="{{siteSearchAsset.formAction.results}}"{{/if}} novalidate="true">
|
|
887
|
+
<input type="text" class="form-control{{#if siteSearchAsset.options.borderStyle.full}} border-full{{/if}}"
|
|
943
888
|
placeholder="{{#if siteSearchAsset.placeholder}}{{siteSearchAsset.placeholder}}{{else}}Search this site{{/if}}"
|
|
944
889
|
id="search-input">
|
|
945
|
-
|
|
946
|
-
|
|
890
|
+
<ul id="suggestions" class="suggestions-dropdown suggestions-dropdown__group"></ul>
|
|
891
|
+
<input type="submit" class="btn btn-primary" value="{{#if siteSearchAsset.label}}{{siteSearchAsset.label}}{{else}}Search{{/if}}">
|
|
947
892
|
</form>
|
|
948
893
|
</div>
|
|
949
894
|
{{/if}}
|
|
895
|
+
|
|
950
896
|
</div>
|
|
951
897
|
</div>
|
|
952
898
|
</header>
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"masterbrand_variant": {
|
|
3
3
|
"icon-root": "assets/img/svg-icons.svg",
|
|
4
|
+
"icons": {
|
|
5
|
+
"menu-icon": "qld__icon__mobile-menu",
|
|
6
|
+
"search-icon": "qld__icon__search",
|
|
7
|
+
"close-icon": "qld__icon__close"
|
|
8
|
+
},
|
|
4
9
|
"sitePreHeader": {
|
|
5
10
|
"url": {
|
|
6
11
|
"value": "https://qld.gov.au"
|
|
@@ -140,49 +145,7 @@
|
|
|
140
145
|
"dropdown_options": {
|
|
141
146
|
"dropdown_type": "form",
|
|
142
147
|
"dropdown_config": {
|
|
143
|
-
"
|
|
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
|
-
]
|
|
148
|
+
"content": "<div></div>"
|
|
186
149
|
}
|
|
187
150
|
}
|
|
188
151
|
}
|
|
@@ -215,14 +178,11 @@
|
|
|
215
178
|
"placeholder": "",
|
|
216
179
|
"label": "",
|
|
217
180
|
"formAction": {
|
|
218
|
-
"url": "https://www.forgov.qld.gov.au/search"
|
|
181
|
+
"url": "https://www.forgov.qld.gov.au/search",
|
|
182
|
+
"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
|
|
183
|
+
"results": "https://discover.search.qld.gov.au/s/search.json"
|
|
219
184
|
},
|
|
220
185
|
"options": {
|
|
221
|
-
"icons": {
|
|
222
|
-
"menu-icon": "qld__icon__mobile-menu",
|
|
223
|
-
"search-icon": "qld__icon__search",
|
|
224
|
-
"search-close-icon": "qld__icon__close"
|
|
225
|
-
},
|
|
226
186
|
"borderStyle": {
|
|
227
187
|
"full": true
|
|
228
188
|
}
|
|
@@ -231,6 +191,11 @@
|
|
|
231
191
|
},
|
|
232
192
|
"subbrand_variant": {
|
|
233
193
|
"icon-root": "assets/img/svg-icons.svg",
|
|
194
|
+
"icons": {
|
|
195
|
+
"menu-icon": "qld__icon__mobile-menu",
|
|
196
|
+
"search-icon": "qld__icon__search",
|
|
197
|
+
"close-icon": "qld__icon__close"
|
|
198
|
+
},
|
|
234
199
|
"sitePreHeader": {
|
|
235
200
|
"url": {
|
|
236
201
|
"value": "https://qld.gov.au"
|
|
@@ -276,23 +241,7 @@
|
|
|
276
241
|
"dropdown_options": {
|
|
277
242
|
"dropdown_type": "form",
|
|
278
243
|
"dropdown_config": {
|
|
279
|
-
"
|
|
280
|
-
{
|
|
281
|
-
"heading": "Log in to For government",
|
|
282
|
-
"button_action": "#",
|
|
283
|
-
"button_targetAttr": "_blank",
|
|
284
|
-
"button_label": "Login"
|
|
285
|
-
}
|
|
286
|
-
],
|
|
287
|
-
"examples": [
|
|
288
|
-
{
|
|
289
|
-
"heading": "For employees",
|
|
290
|
-
"content": "See information relevant to your agency.",
|
|
291
|
-
"button_action": "#",
|
|
292
|
-
"button_targetAttr": "_blank",
|
|
293
|
-
"button_label": "Login"
|
|
294
|
-
}
|
|
295
|
-
]
|
|
244
|
+
"content": "<div></div>"
|
|
296
245
|
}
|
|
297
246
|
}
|
|
298
247
|
}
|
|
@@ -325,14 +274,11 @@
|
|
|
325
274
|
"placeholder": "Placeholder",
|
|
326
275
|
"label": "Label",
|
|
327
276
|
"formAction": {
|
|
328
|
-
"url": "https://www.forgov.qld.gov.au/search"
|
|
277
|
+
"url": "https://www.forgov.qld.gov.au/search",
|
|
278
|
+
"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
|
|
279
|
+
"results": "https://discover.search.qld.gov.au/s/search.json"
|
|
329
280
|
},
|
|
330
281
|
"options": {
|
|
331
|
-
"icons": {
|
|
332
|
-
"menu-icon": "qld__icon__mobile-menu",
|
|
333
|
-
"search-icon": "qld__icon__search",
|
|
334
|
-
"search-close-icon": "qld__icon__close"
|
|
335
|
-
},
|
|
336
282
|
"borderStyle": {
|
|
337
283
|
"full": false
|
|
338
284
|
}
|
|
@@ -341,6 +287,11 @@
|
|
|
341
287
|
},
|
|
342
288
|
"endorsed_variant": {
|
|
343
289
|
"icon-root": "assets/img/svg-icons.svg",
|
|
290
|
+
"icons": {
|
|
291
|
+
"menu-icon": "qld__icon__mobile-menu",
|
|
292
|
+
"search-icon": "qld__icon__search",
|
|
293
|
+
"close-icon": "qld__icon__close"
|
|
294
|
+
},
|
|
344
295
|
"sitePreHeader": {
|
|
345
296
|
"url": {
|
|
346
297
|
"value": "https://qld.gov.au"
|
|
@@ -480,49 +431,7 @@
|
|
|
480
431
|
"dropdown_options": {
|
|
481
432
|
"dropdown_type": "form",
|
|
482
433
|
"dropdown_config": {
|
|
483
|
-
"
|
|
484
|
-
{
|
|
485
|
-
"heading": "Log in to For government",
|
|
486
|
-
"content": "Most employees can log in using single sign on (SSO).",
|
|
487
|
-
"usesButton": "true",
|
|
488
|
-
"actionType": "button",
|
|
489
|
-
"action": {
|
|
490
|
-
"button_action": "#",
|
|
491
|
-
"button_targetAttr": "_blank",
|
|
492
|
-
"button_label": "Login"
|
|
493
|
-
},
|
|
494
|
-
"links": [
|
|
495
|
-
{
|
|
496
|
-
"action": "_blank",
|
|
497
|
-
"label": "If your agency doesn't use SSO.",
|
|
498
|
-
"url": "https://www.forgov.qld.gov.au/user#log-in"
|
|
499
|
-
}
|
|
500
|
-
]
|
|
501
|
-
},
|
|
502
|
-
{
|
|
503
|
-
"heading": "Select your agency",
|
|
504
|
-
"content": "See information relevant to your agency.",
|
|
505
|
-
"actionType": "select",
|
|
506
|
-
"options": [
|
|
507
|
-
{
|
|
508
|
-
"value": "agency 1"
|
|
509
|
-
}
|
|
510
|
-
]
|
|
511
|
-
}
|
|
512
|
-
],
|
|
513
|
-
"examples": [
|
|
514
|
-
{
|
|
515
|
-
"heading": "For employees",
|
|
516
|
-
"actionType": "list",
|
|
517
|
-
"list_items": [
|
|
518
|
-
{
|
|
519
|
-
"action": "_self",
|
|
520
|
-
"label": "Your profile",
|
|
521
|
-
"href": "#"
|
|
522
|
-
}
|
|
523
|
-
]
|
|
524
|
-
}
|
|
525
|
-
]
|
|
434
|
+
"content": "<div></div>"
|
|
526
435
|
}
|
|
527
436
|
}
|
|
528
437
|
}
|
|
@@ -555,14 +464,11 @@
|
|
|
555
464
|
"placeholder": "",
|
|
556
465
|
"label": "",
|
|
557
466
|
"formAction": {
|
|
558
|
-
"url": "https://www.forgov.qld.gov.au/search"
|
|
467
|
+
"url": "https://www.forgov.qld.gov.au/search",
|
|
468
|
+
"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
|
|
469
|
+
"results": "https://discover.search.qld.gov.au/s/search.json"
|
|
559
470
|
},
|
|
560
471
|
"options": {
|
|
561
|
-
"icons": {
|
|
562
|
-
"menu-icon": "qld__icon__mobile-menu",
|
|
563
|
-
"search-icon": "qld__icon__search",
|
|
564
|
-
"search-close-icon": "qld__icon__close"
|
|
565
|
-
},
|
|
566
472
|
"borderStyle": {
|
|
567
473
|
"full": true
|
|
568
474
|
}
|
|
@@ -571,6 +477,11 @@
|
|
|
571
477
|
},
|
|
572
478
|
"standalone_variant": {
|
|
573
479
|
"icon-root": "assets/img/svg-icons.svg",
|
|
480
|
+
"icons": {
|
|
481
|
+
"menu-icon": "qld__icon__mobile-menu",
|
|
482
|
+
"search-icon": "qld__icon__search",
|
|
483
|
+
"close-icon": "qld__icon__close"
|
|
484
|
+
},
|
|
574
485
|
"sitePreHeader": {
|
|
575
486
|
"url": {
|
|
576
487
|
"value": "https://qld.gov.au"
|
|
@@ -710,49 +621,7 @@
|
|
|
710
621
|
"dropdown_options": {
|
|
711
622
|
"dropdown_type": "form",
|
|
712
623
|
"dropdown_config": {
|
|
713
|
-
"
|
|
714
|
-
{
|
|
715
|
-
"heading": "Log in to For government",
|
|
716
|
-
"content": "Most employees can log in using single sign on (SSO).",
|
|
717
|
-
"usesButton": "true",
|
|
718
|
-
"actionType": "button",
|
|
719
|
-
"action": {
|
|
720
|
-
"button_action": "#",
|
|
721
|
-
"button_targetAttr": "_blank",
|
|
722
|
-
"button_label": "Login"
|
|
723
|
-
},
|
|
724
|
-
"links": [
|
|
725
|
-
{
|
|
726
|
-
"action": "_blank",
|
|
727
|
-
"label": "If your agency doesn't use SSO.",
|
|
728
|
-
"url": "https://www.forgov.qld.gov.au/user#log-in"
|
|
729
|
-
}
|
|
730
|
-
]
|
|
731
|
-
},
|
|
732
|
-
{
|
|
733
|
-
"heading": "Select your agency",
|
|
734
|
-
"content": "See information relevant to your agency.",
|
|
735
|
-
"actionType": "select",
|
|
736
|
-
"options": [
|
|
737
|
-
{
|
|
738
|
-
"value": "agency 1"
|
|
739
|
-
}
|
|
740
|
-
]
|
|
741
|
-
}
|
|
742
|
-
],
|
|
743
|
-
"examples": [
|
|
744
|
-
{
|
|
745
|
-
"heading": "For employees",
|
|
746
|
-
"actionType": "list",
|
|
747
|
-
"list_items": [
|
|
748
|
-
{
|
|
749
|
-
"action": "_self",
|
|
750
|
-
"label": "Your profile",
|
|
751
|
-
"href": "#"
|
|
752
|
-
}
|
|
753
|
-
]
|
|
754
|
-
}
|
|
755
|
-
]
|
|
624
|
+
"content": "<div></div>"
|
|
756
625
|
}
|
|
757
626
|
}
|
|
758
627
|
}
|
|
@@ -788,11 +657,6 @@
|
|
|
788
657
|
"url": "https://www.forgov.qld.gov.au/search"
|
|
789
658
|
},
|
|
790
659
|
"options": {
|
|
791
|
-
"icons": {
|
|
792
|
-
"menu-icon": "qld__icon__mobile-menu",
|
|
793
|
-
"search-icon": "qld__icon__search",
|
|
794
|
-
"search-close-icon": "qld__icon__close"
|
|
795
|
-
},
|
|
796
660
|
"borderStyle": {
|
|
797
661
|
"full": true
|
|
798
662
|
}
|
|
@@ -4,15 +4,19 @@
|
|
|
4
4
|
"tagItems": [
|
|
5
5
|
{
|
|
6
6
|
"id": "One",
|
|
7
|
-
"content": "
|
|
7
|
+
"content": "Tag text"
|
|
8
8
|
},
|
|
9
9
|
{
|
|
10
10
|
"id": "Two",
|
|
11
|
-
"content": "
|
|
11
|
+
"content": "Tag text"
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
"id": "Three",
|
|
15
|
-
"content": "
|
|
15
|
+
"content": "Tag text"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"id": "Four",
|
|
19
|
+
"content": "Tag text"
|
|
16
20
|
}
|
|
17
21
|
]
|
|
18
22
|
},
|
|
@@ -21,17 +25,17 @@
|
|
|
21
25
|
"tagItems": [
|
|
22
26
|
{
|
|
23
27
|
"id": "One",
|
|
24
|
-
"content": "
|
|
28
|
+
"content": "Tag text",
|
|
25
29
|
"classes": "tag-large"
|
|
26
30
|
},
|
|
27
31
|
{
|
|
28
32
|
"id": "Two",
|
|
29
|
-
"content": "
|
|
33
|
+
"content": "Tag text",
|
|
30
34
|
"classes": "tag-large"
|
|
31
35
|
},
|
|
32
36
|
{
|
|
33
37
|
"id": "Three",
|
|
34
|
-
"content": "
|
|
38
|
+
"content": "Tag text",
|
|
35
39
|
"classes": "tag-large"
|
|
36
40
|
}
|
|
37
41
|
]
|
|
@@ -41,17 +45,17 @@
|
|
|
41
45
|
"tagItems": [
|
|
42
46
|
{
|
|
43
47
|
"id": "One",
|
|
44
|
-
"content": "<a href='javascript:void(0)'>
|
|
48
|
+
"content": "<a href='javascript:void(0)'>Tag text</a>",
|
|
45
49
|
"classes": "tag-link"
|
|
46
50
|
},
|
|
47
51
|
{
|
|
48
52
|
"id": "Two",
|
|
49
|
-
"content": "<a href='javascript:void(0)'>
|
|
53
|
+
"content": "<a href='javascript:void(0)'>Tag text</a>",
|
|
50
54
|
"classes": "tag-link"
|
|
51
55
|
},
|
|
52
56
|
{
|
|
53
57
|
"id": "Three",
|
|
54
|
-
"content": "<a href='javascript:void(0)'>
|
|
58
|
+
"content": "<a href='javascript:void(0)'>Tag text</a>",
|
|
55
59
|
"classes": "tag-link"
|
|
56
60
|
}
|
|
57
61
|
]
|
|
@@ -62,15 +66,15 @@
|
|
|
62
66
|
"tagItems": [
|
|
63
67
|
{
|
|
64
68
|
"id": "One",
|
|
65
|
-
"content": "
|
|
69
|
+
"content": "Tag text"
|
|
66
70
|
},
|
|
67
71
|
{
|
|
68
72
|
"id": "Two",
|
|
69
|
-
"content": "
|
|
73
|
+
"content": "Tag text"
|
|
70
74
|
},
|
|
71
75
|
{
|
|
72
76
|
"id": "Three",
|
|
73
|
-
"content": "
|
|
77
|
+
"content": "Tag text"
|
|
74
78
|
}
|
|
75
79
|
]
|
|
76
80
|
},
|
|
@@ -79,17 +83,17 @@
|
|
|
79
83
|
"tagItems": [
|
|
80
84
|
{
|
|
81
85
|
"id": "One",
|
|
82
|
-
"content": "
|
|
86
|
+
"content": "Tag text",
|
|
83
87
|
"classes": "tag-info"
|
|
84
88
|
},
|
|
85
89
|
{
|
|
86
90
|
"id": "Two",
|
|
87
|
-
"content": "
|
|
91
|
+
"content": "Tag text",
|
|
88
92
|
"classes": "tag-info"
|
|
89
93
|
},
|
|
90
94
|
{
|
|
91
95
|
"id": "Three",
|
|
92
|
-
"content": "
|
|
96
|
+
"content": "Tag text",
|
|
93
97
|
"classes": "tag-info"
|
|
94
98
|
}
|
|
95
99
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qld-gov-au/qgds-bootstrap5",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,28 +39,29 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@fortawesome/fontawesome-free": "^6.5.2",
|
|
41
41
|
"bootstrap": "^5.3.1",
|
|
42
|
-
"material-symbols": "^0.
|
|
42
|
+
"material-symbols": "^0.19.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@chromatic-com/storybook": "^1.
|
|
46
|
-
"@
|
|
47
|
-
"@storybook/addon-
|
|
48
|
-
"@storybook/addon-
|
|
49
|
-
"@storybook/addon-
|
|
50
|
-
"@storybook/addon-
|
|
45
|
+
"@chromatic-com/storybook": "^1.5.0",
|
|
46
|
+
"@qld-gov-au/qgds-tokens": "^1.2.0",
|
|
47
|
+
"@storybook/addon-essentials": "^8.1.5",
|
|
48
|
+
"@storybook/addon-interactions": "^8.1.5",
|
|
49
|
+
"@storybook/addon-links": "^8.1.5",
|
|
50
|
+
"@storybook/addon-mdx-gfm": "^8.1.5",
|
|
51
|
+
"@storybook/addon-themes": "^8.1.5",
|
|
51
52
|
"@storybook/blocks": "^8.1.2",
|
|
52
|
-
"@storybook/cli": "^8.1.
|
|
53
|
-
"@storybook/html": "^8.1.
|
|
54
|
-
"@storybook/html-vite": "^8.1.
|
|
55
|
-
"@storybook/manager-api": "^8.1.
|
|
53
|
+
"@storybook/cli": "^8.1.5",
|
|
54
|
+
"@storybook/html": "^8.1.5",
|
|
55
|
+
"@storybook/html-vite": "^8.1.5",
|
|
56
|
+
"@storybook/manager-api": "^8.1.5",
|
|
56
57
|
"@storybook/test": "^8.1.2",
|
|
57
|
-
"@storybook/theming": "^8.1.
|
|
58
|
+
"@storybook/theming": "^8.1.5",
|
|
58
59
|
"@stylistic/eslint-plugin-js": "2.1.0",
|
|
59
60
|
"@vitejs/plugin-vue": "5.0.4",
|
|
60
61
|
"@whitespace/storybook-addon-html": "^6.1.1",
|
|
61
62
|
"autoprefixer": "^10.4.15",
|
|
62
63
|
"chalk": "^5.3.0",
|
|
63
|
-
"chromatic": "^11.4.
|
|
64
|
+
"chromatic": "^11.4.1",
|
|
64
65
|
"esbuild": "0.21.4",
|
|
65
66
|
"esbuild-plugin-copy": "^2.1.1",
|
|
66
67
|
"esbuild-plugin-eslint": "^0.3.7",
|
|
@@ -78,9 +79,9 @@
|
|
|
78
79
|
"prettier": "3.2.5",
|
|
79
80
|
"raw-loader": "^4.0.2",
|
|
80
81
|
"rimraf": "^5.0.7",
|
|
81
|
-
"sass": "^1.
|
|
82
|
-
"storybook": "^8.1.
|
|
83
|
-
"vite": "^5.2.
|
|
82
|
+
"sass": "^1.77.3",
|
|
83
|
+
"storybook": "^8.1.5",
|
|
84
|
+
"vite": "^5.2.12",
|
|
84
85
|
"watch": "^1.0.2"
|
|
85
86
|
},
|
|
86
87
|
"peerDependencies": {
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shorten long breadcrumb lists
|
|
3
|
+
*
|
|
4
|
+
* @memberof module:Breadcrumb
|
|
5
|
+
*
|
|
6
|
+
* @param {Object} event - The event that triggered this function.
|
|
7
|
+
* @returns {void}
|
|
8
|
+
*/
|
|
9
|
+
export function breadcrumbShorten () {
|
|
10
|
+
let breadcrumbList = document.querySelector('.breadcrumb').querySelectorAll('.breadcrumb-item')
|
|
11
|
+
|
|
12
|
+
if (breadcrumbList.length > 4) {
|
|
13
|
+
breadcrumbList.forEach((crumb, index) => {
|
|
14
|
+
if (index > 1 && index < breadcrumbList.length - 2) {
|
|
15
|
+
crumb.classList.add('shortened')
|
|
16
|
+
crumb.querySelector('a').setAttribute('tabindex',-1)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
if (index === 1) {
|
|
20
|
+
let expandCrumb = document.createElement('li'),
|
|
21
|
+
expandButton = document.createElement('a')
|
|
22
|
+
|
|
23
|
+
expandCrumb.classList.add('breadcrumb-item','breadcrumb-toggle')
|
|
24
|
+
|
|
25
|
+
expandButton.setAttribute('href', 'javascript:void(0)')
|
|
26
|
+
expandButton.setAttribute('aria-label', 'Expand the breadcrumbs')
|
|
27
|
+
expandButton.textContent = '[...]'
|
|
28
|
+
expandButton.addEventListener('click', breadcrumbExpand)
|
|
29
|
+
|
|
30
|
+
expandCrumb.appendChild(expandButton)
|
|
31
|
+
crumb.after(expandCrumb)
|
|
32
|
+
}
|
|
33
|
+
})
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Expand shortened breadcrumb lists
|
|
39
|
+
*
|
|
40
|
+
* @memberof module:Breadcrumb
|
|
41
|
+
*
|
|
42
|
+
* @param {Object} event - The event that triggered this function.
|
|
43
|
+
* @returns {void}
|
|
44
|
+
*/
|
|
45
|
+
export function breadcrumbExpand () {
|
|
46
|
+
let breadcrumbList = document.querySelector('.breadcrumb').querySelectorAll('.breadcrumb-item')
|
|
47
|
+
|
|
48
|
+
breadcrumbList[0].parentElement.classList.add('expanded')
|
|
49
|
+
|
|
50
|
+
breadcrumbList.forEach((crumb, index) => {
|
|
51
|
+
if (index > 1 && index < breadcrumbList.length - 2) {
|
|
52
|
+
crumb.classList.remove('shortened')
|
|
53
|
+
crumb.querySelector('a').setAttribute('tabindex', 0)
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
}
|