@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
@@ -1,163 +0,0 @@
1
- <div
2
- id="accordion--group1"
3
- class="component"
4
- data-component-id="accordion"
5
- data-asset-id="123"
6
- ></div>
7
- <div
8
- id="accordion--group2"
9
- class="component"
10
- data-component-id="accordion"
11
- data-asset-id="123"
12
- ></div>
13
-
14
- <script>
15
- document.addEventListener("DOMContentLoaded", function (e) {
16
- var accordion1 = document.getElementById("accordion--group1");
17
- var accordion2 = document.getElementById("accordion--group2");
18
-
19
- if (accordion1) {
20
- accordion1.outerHTML = accordionTemplate({
21
- containerId: "3",
22
- data: {
23
- heading: {
24
- value: "Group of 3",
25
- fieldid: "450",
26
- type: "metadata_field_text",
27
- is_contextable: true,
28
- default_value: true,
29
- use_default: true,
30
- },
31
- intro: {
32
- value: "",
33
- fieldid: "451",
34
- type: "metadata_field_wysiwyg",
35
- is_contextable: true,
36
- default_value: false,
37
- use_default: true,
38
- },
39
- title_1: {
40
- value: "Accordion title",
41
- fieldid: "452",
42
- type: "metadata_field_text",
43
- is_contextable: true,
44
- default_value: false,
45
- use_default: true,
46
- },
47
- content_1: {
48
- value: "<p>Type something<\/p>",
49
- fieldid: "453",
50
- type: "metadata_field_wysiwyg",
51
- is_contextable: true,
52
- default_value: false,
53
- use_default: true,
54
- },
55
- title_2: {
56
- value: "Accordion title",
57
- fieldid: "454",
58
- type: "metadata_field_text",
59
- is_contextable: true,
60
- default_value: false,
61
- use_default: true,
62
- },
63
- content_2: {
64
- value: "<p>Type something<\/p>",
65
- fieldid: "455",
66
- type: "metadata_field_wysiwyg",
67
- is_contextable: true,
68
- default_value: false,
69
- use_default: true,
70
- },
71
- title_3: {
72
- value: "Accordion title",
73
- fieldid: "456",
74
- type: "metadata_field_text",
75
- is_contextable: true,
76
- default_value: false,
77
- use_default: true,
78
- },
79
- content_3: {
80
- value: "<p>Type something<\/p>",
81
- fieldid: "457",
82
- type: "metadata_field_wysiwyg",
83
- is_contextable: true,
84
- default_value: false,
85
- use_default: true,
86
- },
87
- },
88
- });
89
- }
90
-
91
- if (accordion2) {
92
- accordion2.outerHTML = accordionTemplate({
93
- containerId: "4",
94
- data: {
95
- heading: {
96
- value: "Group of 2",
97
- fieldid: "450",
98
- type: "metadata_field_text",
99
- is_contextable: true,
100
- default_value: true,
101
- use_default: true,
102
- },
103
- intro: {
104
- value: "",
105
- fieldid: "451",
106
- type: "metadata_field_wysiwyg",
107
- is_contextable: true,
108
- default_value: false,
109
- use_default: true,
110
- },
111
- title_1: {
112
- value: "Accordion title",
113
- fieldid: "452",
114
- type: "metadata_field_text",
115
- is_contextable: true,
116
- default_value: false,
117
- use_default: true,
118
- },
119
- content_1: {
120
- value: "<p>Type something<\/p>",
121
- fieldid: "453",
122
- type: "metadata_field_wysiwyg",
123
- is_contextable: true,
124
- default_value: false,
125
- use_default: true,
126
- },
127
- title_2: {
128
- value: "Accordion title",
129
- fieldid: "454",
130
- type: "metadata_field_text",
131
- is_contextable: true,
132
- default_value: false,
133
- use_default: true,
134
- },
135
- content_2: {
136
- value: "<p>Type something<\/p>",
137
- fieldid: "455",
138
- type: "metadata_field_wysiwyg",
139
- is_contextable: true,
140
- default_value: false,
141
- use_default: true,
142
- },
143
- title_3: {
144
- value: "",
145
- fieldid: "456",
146
- type: "metadata_field_text",
147
- is_contextable: true,
148
- default_value: false,
149
- use_default: true,
150
- },
151
- content_3: {
152
- value: "",
153
- fieldid: "457",
154
- type: "metadata_field_wysiwyg",
155
- is_contextable: true,
156
- default_value: false,
157
- use_default: true,
158
- },
159
- },
160
- });
161
- }
162
- });
163
- </script>
@@ -1,99 +0,0 @@
1
- <div
2
- id="accordion--single1"
3
- class="component"
4
- data-component-id="accordion"
5
- data-asset-id="123"
6
- ></div>
7
- <div
8
- id="accordion--single2"
9
- class="component"
10
- data-component-id="accordion"
11
- data-asset-id="123"
12
- ></div>
13
-
14
- <script>
15
- document.addEventListener("DOMContentLoaded", function (e) {
16
- var accordion1 = document.getElementById("accordion--single1");
17
- var accordion2 = document.getElementById("accordion--single2");
18
-
19
- if (accordion1) {
20
- accordion1.outerHTML = accordionTemplate({
21
- containerId: "1",
22
- data: {
23
- heading: {
24
- value: "Single accordion",
25
- fieldid: "450",
26
- type: "metadata_field_text",
27
- is_contextable: true,
28
- default_value: true,
29
- use_default: true,
30
- },
31
- intro: {
32
- value: "<p>Some intro text<\/p>",
33
- fieldid: "451",
34
- type: "metadata_field_wysiwyg",
35
- is_contextable: true,
36
- default_value: false,
37
- use_default: true,
38
- },
39
- title_1: {
40
- value: "Accordion title",
41
- fieldid: "452",
42
- type: "metadata_field_text",
43
- is_contextable: true,
44
- default_value: false,
45
- use_default: true,
46
- },
47
- content_1: {
48
- value: "<p>Type something<\/p>",
49
- fieldid: "453",
50
- type: "metadata_field_wysiwyg",
51
- is_contextable: true,
52
- default_value: false,
53
- use_default: true,
54
- },
55
- },
56
- });
57
- }
58
-
59
- if (accordion2) {
60
- accordion2.outerHTML = accordionTemplate({
61
- containerId: "2",
62
- data: {
63
- heading: {
64
- value: "Another single accordion",
65
- fieldid: "450",
66
- type: "metadata_field_text",
67
- is_contextable: true,
68
- default_value: true,
69
- use_default: true,
70
- },
71
- intro: {
72
- value: "",
73
- fieldid: "451",
74
- type: "metadata_field_wysiwyg",
75
- is_contextable: true,
76
- default_value: false,
77
- use_default: true,
78
- },
79
- title_1: {
80
- value: "Accordion title",
81
- fieldid: "452",
82
- type: "metadata_field_text",
83
- is_contextable: true,
84
- default_value: false,
85
- use_default: true,
86
- },
87
- content_1: {
88
- value: "<p>Type something<\/p>",
89
- fieldid: "453",
90
- type: "metadata_field_wysiwyg",
91
- is_contextable: true,
92
- default_value: false,
93
- use_default: true,
94
- },
95
- },
96
- });
97
- }
98
- });
99
- </script>
@@ -1,3 +0,0 @@
1
- (function () {
2
- "use strict";
3
- })();
@@ -1,3 +0,0 @@
1
- (function () {
2
- "use strict";
3
- })();
@@ -1,39 +0,0 @@
1
- <div
2
- id="pagination"
3
- class="component"
4
- data-component-id="pagination"
5
- data-asset-id="123"
6
- ></div>
7
- <script src="externals/getPagination.js"></script>
8
- <script>
9
- document.addEventListener("DOMContentLoaded", function (e) {
10
- var pagination = document.getElementById("pagination");
11
- var startRank = parseInt(
12
- window.location.search.replace(/^.+start_rank=(\\d)/, "$1") || 1,
13
- 10,
14
- );
15
- var resultsSummary = {
16
- fullyMatching: 24,
17
- collapsed: 0,
18
- partiallyMatching: 0,
19
- totalMatching: 24,
20
- estimatedCounts: false,
21
- carriedOverFtd: null,
22
- totalDistinctMatchingUrls: null,
23
- numRanks: 3,
24
- currStart: startRank,
25
- currEnd: startRank + 2,
26
- prevStart: Math.max(startRank - 3, 0),
27
- nextStart: Math.min(startRank + 3, 24),
28
- totalSecurityObscuredUrls: null,
29
- anyUrlsPromoted: false,
30
- resultDiversificationApplied: true,
31
- };
32
-
33
- if (pagination) {
34
- pagination.outerHTML = paginationTemplate({
35
- pagination: getPagination(resultsSummary, "?"),
36
- });
37
- }
38
- });
39
- </script>
@@ -1,26 +0,0 @@
1
- {{#with component.data}}
2
- <div class="qld__search-form--wrapper">
3
- <form
4
- role="search"
5
- aria-label="sitewide"
6
- class="qld__search-form {{metadata.background.value}} {{metadata.responsive.value}} {{metadata.width.value}}"
7
- action="{{#if metadata.search_page.value}}./?a={{metadata.search_page.value}}{{/if}}"
8
- >
9
- <label for="query-{{assetid}}" class="qld__label qld__search-form__label"
10
- >{{metadata.search_label.value}}</label
11
- >
12
- <input
13
- type="search"
14
- id="query-{{assetid}}"
15
- name="{{metadata.query_key.value}}"
16
- class="qld__text-input"
17
- />
18
- <div class="qld__search-form__btn">
19
- <button class="qld__btn qld__btn--search" type="submit">
20
- <span class="qld__btn__icon"></span>
21
- <span class="qld__btn__text">Search</span>
22
- </button>
23
- </div>
24
- </form>
25
- </div>
26
- {{/with}}