@qhealth-design-system/core 1.22.2 → 1.23.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 (78) hide show
  1. package/.storybook/assets/image-position-demo-portrait.svg +54 -0
  2. package/.storybook/assets/image-position-demo.svg +55 -0
  3. package/.storybook/globals.js +9 -0
  4. package/.storybook/preview.js +8 -1
  5. package/CHANGELOG.md +2 -0
  6. package/README.md +0 -6
  7. package/package.json +13 -33
  8. package/src/assets/img/svg-icons.svg +154 -154
  9. package/src/component-loader.js +11 -2
  10. package/src/components/_global/css/admin/component.scss +1 -0
  11. package/src/components/_global/css/btn/component.scss +9 -0
  12. package/src/components/_global/css/img/image-position-utility-classes.scss +30 -0
  13. package/src/components/_global/css/img/image-ratio-utility-classes.scss +41 -0
  14. package/src/components/_global/css/img/images.scss +74 -5
  15. package/src/components/_global/css/modal/component.scss +1 -0
  16. package/src/components/_global/js/animate/global.js +272 -294
  17. package/src/components/_global/js/collapsible.js +3 -3
  18. package/src/components/_global/js/global.js +304 -316
  19. package/src/components/_global/js/legacyGlobal.js +63 -0
  20. package/src/components/_global/js/modal/global.js +218 -223
  21. package/src/components/_global/js/popover/controller.js +4 -4
  22. package/src/components/_global/js/tabs/global.js +264 -276
  23. package/src/components/a-z_listing/js/global.js +106 -92
  24. package/src/components/accordion/css/component.scss +24 -41
  25. package/src/components/accordion/html/component.hbs +23 -5
  26. package/src/components/accordion/js/global.js +5 -10
  27. package/src/components/basic_search/js/global.js +0 -7
  28. package/src/components/code/js/global.js +6 -12
  29. package/src/components/file_upload/js/global.js +1 -5
  30. package/src/components/internal_navigation/css/component.scss +2 -2
  31. package/src/components/internal_navigation/html/component.hbs +16 -1
  32. package/src/components/main_navigation/js/global.js +341 -335
  33. package/src/components/overflow_menu/css/component.scss +1 -0
  34. package/src/components/search_box/css/component.scss +0 -1
  35. package/src/components/tab/js/global.js +5 -10
  36. package/src/components/toggle_tip/js/global.js +0 -6
  37. package/src/components/tool_tip/js/global.js +0 -6
  38. package/src/components/video_player/css/component.scss +27 -9
  39. package/src/components/video_player/html/component.hbs +32 -6
  40. package/src/components/video_player/js/global.js +8 -1
  41. package/src/index.js +4 -0
  42. package/src/stories/Accordion/accordion.stories.js +1 -0
  43. package/src/stories/Banner/bannerContained.stories.js +123 -0
  44. package/src/stories/Flexbox/Flexbox.stories.js +316 -0
  45. package/src/stories/Image/Image.stories.js +182 -0
  46. package/src/stories/Templates/ContentPage.stories.js +101 -0
  47. package/src/stories/Templates/LandingPage.stories.js +193 -0
  48. package/src/stories/Templates/templateHelpers.js +102 -0
  49. package/src/stories/VideoPlayer/VideoPlayer.stories.js +16 -0
  50. package/src/styles/imports/utilities.scss +15 -25
  51. package/src/styles/imports/variables.scss +26 -0
  52. package/src/components/_global/html/head.html +0 -22
  53. package/src/components/_global/html/scripts.html +0 -28
  54. package/src/components/_global/js/_polyfills/global.js +0 -19
  55. package/src/components/_template/html/component-page.html +0 -75
  56. package/src/components/_template/js/global.js +0 -3
  57. package/src/components/accordion/html/accordion-group.html +0 -163
  58. package/src/components/accordion/html/default.html +0 -99
  59. package/src/components/banner_basic/js/global.js +0 -3
  60. package/src/components/loading_spinner/js/global.js +0 -3
  61. package/src/components/pagination/html/default.html +0 -39
  62. package/src/components/search_box/html/component.html +0 -26
  63. package/src/data/current.json +0 -400
  64. package/src/data/current_admin.json +0 -305
  65. package/src/data/model_component.js +0 -14
  66. package/src/data/site.json +0 -977
  67. package/src/externals/tinymce_classes.css +0 -62
  68. package/src/html/component-global-elements.html +0 -2857
  69. package/src/html/component-horizontal_rule.html +0 -647
  70. package/src/html/component-internal_navigation.html +0 -583
  71. package/src/html/component-left_hand_navigation.html +0 -57
  72. package/src/html/component-main_navigation.html +0 -583
  73. package/src/html/component-multi_column.html +0 -582
  74. package/src/html/components.html +0 -354
  75. package/src/html/home.html +0 -1898
  76. package/src/html/index.html +0 -129
  77. package/src/html/inner-with-nav.html +0 -605
  78. package/src/html/inner.html +0 -618
package/src/html/inner.html DELETED
@@ -1,618 +0,0 @@
1
- <!DOCTYPE html>
2
- <!--[if lt IE 8]>
3
- <html class="no-js lt-ie8 lt-ie9" lang="en">
4
- <![endif]-->
5
- <!--[if IE 8]>
6
- <html class="no-js lt-ie9 ie8" lang="en">
7
- <![endif]-->
8
- <!--[if IE 9]>
9
- <html class="no-js ie9" lang="en">
10
- <![endif]-->
11
- <!--[if !(IE)]><!-->
12
- <html class="no-js" lang="en">
13
- <!--<![endif]-->
14
-
15
- <head>
16
- <title>Queensland Design System</title>
17
- ${require('../components/_global/html/head.html')}
18
- <script>
19
- var globals = {
20
- site: {
21
- data: {
22
- assetid: "136",
23
- type_code: "site",
24
- version: "0.0.8",
25
- name: "Design System",
26
- short_name: "Design System",
27
- status: "2",
28
- force_secure: "0",
29
- languages: "en",
30
- charset: "utf-8",
31
- created: "2020-12-09 13:11:12",
32
- created_userid: "54",
33
- updated: "2021-01-20 15:08:30",
34
- updated_userid: "312",
35
- published: "Never",
36
- published_userid: "",
37
- status_changed: "2020-12-09 13:11:12",
38
- status_changed_userid: "54",
39
- thumbnail: "",
40
- attributes: {
41
- name: {
42
- attrid: "685",
43
- type: "text",
44
- value: "Design System",
45
- is_contextable: true,
46
- use_default: true,
47
- },
48
- not_found_page_cache_globally: {
49
- attrid: "686",
50
- type: "boolean",
51
- value: false,
52
- is_contextable: false,
53
- use_default: true,
54
- },
55
- available_conditions: {
56
- attrid: "687",
57
- type: "serialise",
58
- value: [],
59
- is_contextable: false,
60
- use_default: true,
61
- },
62
- },
63
- metadata: {
64
- displayInPageNav: {
65
- value: "",
66
- fieldid: "808",
67
- type: "metadata_field_select",
68
- is_contextable: true,
69
- default_value: true,
70
- use_default: true,
71
- },
72
- inPageNav_heading: {
73
- value: "On this page",
74
- fieldid: "809",
75
- type: "metadata_field_text",
76
- is_contextable: true,
77
- default_value: true,
78
- use_default: true,
79
- },
80
- inPageNav_headingType: {
81
- value: "h2",
82
- fieldid: "810",
83
- type: "metadata_field_select",
84
- is_contextable: true,
85
- default_value: true,
86
- use_default: true,
87
- },
88
- siteTitle: {
89
- value: "Queensland Health Design System",
90
- fieldid: "166",
91
- type: "metadata_field_text",
92
- is_contextable: true,
93
- default_value: false,
94
- use_default: true,
95
- },
96
- siteLogo: {
97
- value: "169",
98
- fieldid: "127",
99
- type: "metadata_field_related_asset",
100
- is_contextable: true,
101
- default_value: false,
102
- use_default: true,
103
- },
104
- siteFavicon: {
105
- value: "106",
106
- fieldid: "128",
107
- type: "metadata_field_related_asset",
108
- is_contextable: true,
109
- default_value: false,
110
- use_default: true,
111
- },
112
- siteAppleTouch: {
113
- value: "106",
114
- fieldid: "129",
115
- type: "metadata_field_related_asset",
116
- is_contextable: true,
117
- default_value: false,
118
- use_default: true,
119
- },
120
- sitePreHeaderLogo: {
121
- value: "170",
122
- fieldid: "171",
123
- type: "metadata_field_related_asset",
124
- is_contextable: true,
125
- default_value: false,
126
- use_default: true,
127
- },
128
- sitePreHeaderText: {
129
- value: "digital.qld.gov.au",
130
- fieldid: "167",
131
- type: "metadata_field_text",
132
- is_contextable: true,
133
- default_value: false,
134
- use_default: true,
135
- },
136
- sitePreHeaderURL: {
137
- value: "http://www.digital.qld.gov.au",
138
- fieldid: "168",
139
- type: "metadata_field_text",
140
- is_contextable: true,
141
- default_value: false,
142
- use_default: true,
143
- },
144
- showHomeIcon: {
145
- value: "true",
146
- fieldid: "481",
147
- type: "metadata_field_select",
148
- is_contextable: true,
149
- default_value: true,
150
- use_default: true,
151
- },
152
- siteRepository: {
153
- value: "164",
154
- fieldid: "213",
155
- type: "metadata_field_related_asset",
156
- is_contextable: true,
157
- default_value: false,
158
- use_default: true,
159
- },
160
- footerLinks: {
161
- value: '["186","194","198","458","676"]',
162
- fieldid: "715",
163
- type: "metadata_field_related_asset",
164
- is_contextable: true,
165
- default_value: false,
166
- use_default: true,
167
- },
168
- footerCopyrightMessage: {
169
- value: "© The State of Queensland 2020",
170
- fieldid: "722",
171
- type: "metadata_field_text",
172
- is_contextable: true,
173
- default_value: true,
174
- use_default: true,
175
- },
176
- footerCopyrightLink: {
177
- value: "206",
178
- fieldid: "723",
179
- type: "metadata_field_related_asset",
180
- is_contextable: true,
181
- default_value: false,
182
- use_default: true,
183
- },
184
- footerCTAHeading: {
185
- value: "Help us improve",
186
- fieldid: "724",
187
- type: "metadata_field_text",
188
- is_contextable: true,
189
- default_value: false,
190
- use_default: true,
191
- },
192
- footerCTALead: {
193
- value: "We are always looking for ways to improve our website.",
194
- fieldid: "725",
195
- type: "metadata_field_text",
196
- is_contextable: true,
197
- default_value: false,
198
- use_default: true,
199
- },
200
- footerCTALink: {
201
- value: "186",
202
- fieldid: "726",
203
- type: "metadata_field_related_asset",
204
- is_contextable: true,
205
- default_value: false,
206
- use_default: true,
207
- },
208
- },
209
- },
210
- metadata: {
211
- displayInPageNav: {
212
- value: "",
213
- fieldid: "808",
214
- type: "metadata_field_select",
215
- is_contextable: true,
216
- default_value: true,
217
- use_default: true,
218
- },
219
- inPageNav_heading: {
220
- value: "On this page",
221
- fieldid: "809",
222
- type: "metadata_field_text",
223
- is_contextable: true,
224
- default_value: true,
225
- use_default: true,
226
- },
227
- inPageNav_headingType: {
228
- value: "h2",
229
- fieldid: "810",
230
- type: "metadata_field_select",
231
- is_contextable: true,
232
- default_value: true,
233
- use_default: true,
234
- },
235
- siteTitle: {
236
- value: "Queensland Health Design System",
237
- fieldid: "166",
238
- type: "metadata_field_text",
239
- is_contextable: true,
240
- default_value: false,
241
- use_default: true,
242
- },
243
- siteLogo: {
244
- value: "169",
245
- fieldid: "127",
246
- type: "metadata_field_related_asset",
247
- is_contextable: true,
248
- default_value: false,
249
- use_default: true,
250
- },
251
- siteFavicon: {
252
- value: "106",
253
- fieldid: "128",
254
- type: "metadata_field_related_asset",
255
- is_contextable: true,
256
- default_value: false,
257
- use_default: true,
258
- },
259
- siteAppleTouch: {
260
- value: "106",
261
- fieldid: "129",
262
- type: "metadata_field_related_asset",
263
- is_contextable: true,
264
- default_value: false,
265
- use_default: true,
266
- },
267
- sitePreHeaderLogo: {
268
- value: "170",
269
- fieldid: "171",
270
- type: "metadata_field_related_asset",
271
- is_contextable: true,
272
- default_value: false,
273
- use_default: true,
274
- },
275
- sitePreHeaderText: {
276
- value: "digital.qld.gov.au",
277
- fieldid: "167",
278
- type: "metadata_field_text",
279
- is_contextable: true,
280
- default_value: false,
281
- use_default: true,
282
- },
283
- sitePreHeaderURL: {
284
- value: "http://www.digital.qld.gov.au",
285
- fieldid: "168",
286
- type: "metadata_field_text",
287
- is_contextable: true,
288
- default_value: false,
289
- use_default: true,
290
- },
291
- showHomeIcon: {
292
- value: "true",
293
- fieldid: "481",
294
- type: "metadata_field_select",
295
- is_contextable: true,
296
- default_value: true,
297
- use_default: true,
298
- },
299
- siteRepository: {
300
- value: "164",
301
- fieldid: "213",
302
- type: "metadata_field_related_asset",
303
- is_contextable: true,
304
- default_value: false,
305
- use_default: true,
306
- },
307
- footerLinks: {
308
- value: '["186","194","198","458","676"]',
309
- fieldid: "715",
310
- type: "metadata_field_related_asset",
311
- is_contextable: true,
312
- default_value: false,
313
- use_default: true,
314
- },
315
- footerCopyrightMessage: {
316
- value: "© The State of Queensland 2020",
317
- fieldid: "722",
318
- type: "metadata_field_text",
319
- is_contextable: true,
320
- default_value: true,
321
- use_default: true,
322
- },
323
- footerCopyrightLink: {
324
- value: "206",
325
- fieldid: "723",
326
- type: "metadata_field_related_asset",
327
- is_contextable: true,
328
- default_value: false,
329
- use_default: true,
330
- },
331
- footerCTAHeading: {
332
- value: "Help us improve",
333
- fieldid: "724",
334
- type: "metadata_field_text",
335
- is_contextable: true,
336
- default_value: false,
337
- use_default: true,
338
- },
339
- footerCTALead: {
340
- value: "We are always looking for ways to improve our website.",
341
- fieldid: "725",
342
- type: "metadata_field_text",
343
- is_contextable: true,
344
- default_value: false,
345
- use_default: true,
346
- },
347
- footerCTALink: {
348
- value: "186",
349
- fieldid: "726",
350
- type: "metadata_field_related_asset",
351
- is_contextable: true,
352
- default_value: false,
353
- use_default: true,
354
- },
355
- },
356
- children: [
357
- { asset_name: "Get started", asset_assetid: "186" },
358
- {
359
- asset_name: "Brand guidelines",
360
- asset_assetid: "190",
361
- },
362
- {
363
- asset_name: "Content guidelines",
364
- asset_assetid: "194",
365
- },
366
- { asset_name: "Components", asset_assetid: "198" },
367
- { asset_name: "Examples", asset_assetid: "202" },
368
- { asset_name: "Support", asset_assetid: "206" },
369
- ],
370
- },
371
- current: {
372
- data: {
373
- assetid: "676",
374
- type_code: "page_standard",
375
- version: "0.0.16",
376
- name: "Links",
377
- short_name: "Links",
378
- status: "2",
379
- force_secure: "0",
380
- languages: "en",
381
- charset: "utf-8",
382
- created: "2021-01-11 11:48:22",
383
- created_userid: "312",
384
- updated: "2021-01-20 15:08:29",
385
- updated_userid: "312",
386
- published: "Never",
387
- published_userid: "",
388
- status_changed: "2021-01-11 11:48:22",
389
- status_changed_userid: "312",
390
- thumbnail: "",
391
- attributes: {
392
- name: {
393
- attrid: "631",
394
- type: "text",
395
- value: "Links",
396
- is_contextable: true,
397
- use_default: true,
398
- },
399
- short_name: {
400
- attrid: "632",
401
- type: "text",
402
- value: "Links",
403
- is_contextable: true,
404
- use_default: true,
405
- },
406
- available_conditions: {
407
- attrid: "633",
408
- type: "serialise",
409
- value: [],
410
- is_contextable: false,
411
- use_default: true,
412
- },
413
- conditions: {
414
- attrid: "634",
415
- type: "serialise",
416
- value: [],
417
- is_contextable: true,
418
- use_default: true,
419
- },
420
- },
421
- metadata: {
422
- description: {
423
- value: "",
424
- fieldid: "132",
425
- type: "metadata_field_text",
426
- is_contextable: true,
427
- default_value: true,
428
- use_default: true,
429
- },
430
- pageType: {
431
- value: "landing",
432
- fieldid: "680",
433
- type: "metadata_field_select",
434
- is_contextable: true,
435
- default_value: false,
436
- use_default: true,
437
- },
438
- displayBreadcrumbs: {
439
- value: "true",
440
- fieldid: "681",
441
- type: "metadata_field_select",
442
- is_contextable: true,
443
- default_value: true,
444
- use_default: true,
445
- },
446
- displayBanner: {
447
- value: "true",
448
- fieldid: "682",
449
- type: "metadata_field_select",
450
- is_contextable: true,
451
- default_value: true,
452
- use_default: true,
453
- },
454
- displayInPageNav: {
455
- value: "true",
456
- fieldid: "808",
457
- type: "metadata_field_select",
458
- is_contextable: true,
459
- default_value: true,
460
- use_default: true,
461
- },
462
- inPageNav_heading: {
463
- value: "On this page",
464
- fieldid: "809",
465
- type: "metadata_field_text",
466
- is_contextable: true,
467
- default_value: true,
468
- use_default: true,
469
- },
470
- inPageNav_headingType: {
471
- value: "h2",
472
- fieldid: "810",
473
- type: "metadata_field_select",
474
- is_contextable: true,
475
- default_value: true,
476
- use_default: true,
477
- },
478
- },
479
- },
480
- home: 0,
481
- children: [
482
- {
483
- asset_assetid: "458",
484
- asset_url: "https://qhscb.squiz.cloud/components/accordion",
485
- asset_name: "Accordion",
486
- children: [],
487
- },
488
- {
489
- asset_assetid: "325",
490
- asset_url: "https://qhscb.squiz.cloud/components/callout",
491
- asset_name: "Callout",
492
- children: [],
493
- },
494
- {
495
- asset_assetid: "659",
496
- asset_url: "https://qhscb.squiz.cloud/components/card-listing",
497
- asset_name: "Card Listing",
498
- children: [],
499
- },
500
- {
501
- asset_assetid: "676",
502
- asset_url: "https://qhscb.squiz.cloud/components/links",
503
- asset_name: "Links",
504
- children: [],
505
- },
506
- {
507
- asset_assetid: "683",
508
- asset_url: "https://qhscb.squiz.cloud/components/search-box",
509
- asset_name: "Search Box",
510
- children: [],
511
- },
512
- {
513
- asset_assetid: "785",
514
- asset_url: "https://qhscb.squiz.cloud/components/page-alert",
515
- asset_name: "Page Alert",
516
- children: [],
517
- },
518
- ],
519
- lineage: [
520
- {
521
- asset_assetid: "136",
522
- asset_name: "Design System",
523
- asset_url: "https://qhscb.squiz.cloud",
524
- },
525
- {
526
- asset_assetid: "198",
527
- asset_name: "Components",
528
- asset_url: "https://qhscb.squiz.cloud/components",
529
- },
530
- {
531
- asset_assetid: "676",
532
- asset_name: "Links",
533
- asset_url: "https://qhscb.squiz.cloud/components/links",
534
- },
535
- ],
536
- top: {
537
- asset_assetid: "198",
538
- asset_name: "Components",
539
- asset_url: "https://qhscb.squiz.cloud/components",
540
- },
541
- },
542
- };
543
- </script>
544
- </head>
545
-
546
- <body class="qld__grid">
547
- <!--noindex-->
548
- ${require('../components/header/html/component.hbs')({ "site":require('/src/data/site.json') })}
549
- <!--endnoindex-->
550
- ${require('../components/main_navigation/html/component.hbs')({ "site":require('/src/data/site.json') })}
551
- <!-- MAIN BODY -->
552
- <main class="main" role="main">
553
- ${require('../components/banner_basic/html/component.hbs')({ "site":require('/src/data/site.json'), "component":require('../components/banner_basic/js/manifest.json').component })}
554
- <section class="qld__body qld__body--breadcrumb">
555
- <div class="container-fluid">
556
- <div class="row">
557
- <!-- {require('../components/breadcrumbs/html/component.hbs')({
558
- "data":require('../components/banner_home/js/manifest.json').data,
559
- "site":require('/src/data/site.json'),
560
- "current":require('/src/data/current.json'),
561
- })} -->
562
- <h2>Direction links</h2>
563
- <div class="qld__body">
564
- <div class="container-fluid">
565
- <h3>Default</h3>
566
- <br />
567
- <a href="#" class="qld__direction-link qld__direction-link--up">Up</a>
568
- <a href="#" class="qld__direction-link qld__direction-link--down">Down</a>
569
- <a href="#" class="qld__direction-link qld__direction-link--left">Left</a>
570
- <a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
571
- </div>
572
- </div>
573
- <div class="qld__body qld__body--alt">
574
- <div class="container-fluid">
575
- <h3>Alternative</h3>
576
- <br />
577
- <a href="#" class="qld__direction-link qld__direction-link--up">Up</a>
578
- <a href="#" class="qld__direction-link qld__direction-link--down">Down</a>
579
- <a href="#" class="qld__direction-link qld__direction-link--left">Left</a>
580
- <a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
581
- <a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
582
- </div>
583
- </div>
584
- <div class="qld__body qld__body--dark">
585
- <div class="container-fluid">
586
- <h3>Dark</h3>
587
- <br />
588
- <a href="#" class="qld__direction-link qld__direction-link--up">Up</a>
589
- <a href="#" class="qld__direction-link qld__direction-link--down">Down</a>
590
- <a href="#" class="qld__direction-link qld__direction-link--left">Left</a>
591
- <a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
592
- </div>
593
- </div>
594
- <div class="qld__body qld__body--dark-alt">
595
- <div class="container-fluid">
596
- <h3>Dark Alternative</h3>
597
- <br />
598
- <a href="#" class="qld__direction-link qld__direction-link--up">Up</a>
599
- <a href="#" class="qld__direction-link qld__direction-link--down">Down</a>
600
- <a href="#" class="qld__direction-link qld__direction-link--left">Left</a>
601
- <a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
602
- </div>
603
- </div>
604
- </div>
605
- </div>
606
- </section>
607
- <!--CONTENT-->
608
- <!-- Page Footer Info -->
609
- ${require('../components/prefooter/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
610
- </main>
611
- <!-- END MAIN BODY -->
612
-
613
- <!-- FOOTER-->
614
- ${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
615
-
616
- <div class="footer-scripts" id="footer_js" style="display: none !important">${require('../components/_global/html/scripts.html')}</div>
617
- </body>
618
- </html>