@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/components.html DELETED
@@ -1,354 +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
- </head>
19
-
20
- <body class="qld__grid qld__form-style-filled">
21
- <!--noindex-->
22
- ${require('../components/header/html/component.hbs')({ "site":require('/src/data/site.json') })}
23
- <!--endnoindex-->
24
- ${require('../components/mega_main_navigation/html/component.hbs')({ "site":require('/src/data/site.json') })}
25
- <main class="main" role="main">
26
- <section class="qld__body qld__body--breadcrumb">
27
- <div class="container-fluid">${require('../components/breadcrumbs/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json'), })}</div>
28
- </section>
29
- <!--CONTENT-->
30
- <div class="qld__body">
31
- <div class="container-fluid">
32
- <div class="row">
33
- <div class="col-xs-12 col-lg-4 col-xl-3">
34
- <!-- INTERNAL NAVIGATION -->
35
- ${require('../components/internal_navigation/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
36
- </div>
37
- <div class="col-xs-12 col-lg-8 col-xl-9" id="content">
38
- <!-- <h1>Components</h1>
39
- <p>Components are reusable parts of the design system. Each component has been developed to meet a user interface need. All components work together to create different patterns and templates.</p>
40
- <p>Use the Navigation on the left to look at a specific component.</p> -->
41
-
42
- <section class="qld__body qld__body--dark">
43
- <div class="container-fluid">
44
- <!-- Page Contents Render -->
45
- <form id="form_email_99828" enctype="multipart/form-data" action="https://qhscb.squiz.cloud/QGDS-quithq/how-to-quit/get-help-from-quitline/request-a-quitline-event" method="post">
46
- <input type="hidden" name="SQ_FORM_99828_PAGE" value="1" class="sq-form-field" id="SQ_FORM_99828_PAGE" /><input type="hidden" name="form_email_99828_referral_url" value="" />
47
- <p>Complete this form to request Quitline to attend your event. Quitline will then contact you to discuss your event further.</p>
48
- <p></p>
49
- <fieldset class="sq-form-section" id="sq_form_section_99839">
50
- <legend class="sq-form-section-title">Organisation</legend>
51
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99839_q1">
52
- <label class="sq-form-question-title" for="q99839_q1">Organisation name</label>
53
- <div class="sq-form-question-answer">
54
- <input type="text" name="q99839:q1" value="" size="30" maxlength="300" id="q99839_q1" class="sq-form-field" />
55
- </div>
56
- </div>
57
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99839_q2">
58
- <label class="sq-form-question-title" for="q99839_q2">Department</label>
59
- <div class="sq-form-question-answer">
60
- <input type="text" name="q99839:q2" value="" size="30" maxlength="300" id="q99839_q2" class="sq-form-field" />
61
- </div>
62
- </div>
63
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99839_q3">
64
- <label class="sq-form-question-title" for="q99839_q3">Contact name <abbr class="sq-form-required-field" title="required">*</abbr></label>
65
- <div class="sq-form-question-answer">
66
- <input type="text" name="q99839:q3" value="" size="30" maxlength="300" id="q99839_q3" class="sq-form-field" />
67
- </div>
68
- </div>
69
- <div class="sq-form-question sq-form-question-numeric" id="sq_form_field_wrapper_q99839_q4">
70
- <label class="sq-form-question-title" for="q99839_q4">Contact number <abbr class="sq-form-required-field" title="required">*</abbr></label>
71
- <div class="sq-form-question-answer">
72
- <input type="text" name="q99839:q4" value="" size="30" maxlength="300" id="q99839_q4" class="sq-form-field" />
73
- </div>
74
- </div>
75
- <div class="sq-form-question sq-form-question-email-address" id="sq_form_field_wrapper_q99839_q5">
76
- <label class="sq-form-question-title" for="q99839_q5">Contact email <abbr class="sq-form-required-field" title="required">*</abbr></label>
77
- <div class="sq-form-question-answer">
78
- <input type="text" name="q99839:q5" value="" size="30" maxlength="300" id="q99839_q5" class="sq-form-field" />
79
- <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important"></div>
80
- </div>
81
- </div>
82
- </fieldset>
83
- <fieldset class="sq-form-section" id="sq_form_section_99840">
84
- <legend class="sq-form-section-title">Event</legend>
85
- <div class="sq-form-question sq-form-question-datetime" id="sq_form_field_wrapper_q99840_q1">
86
- <fieldset>
87
- <legend class="sq-form-question-title">
88
- Event date
89
- <abbr class="sq-form-required-field" title="required">*</abbr>
90
- </legend>
91
- <div class="sq-form-question-answer">
92
- <script type="text/javascript">
93
- //<![CDATA[
94
- if (typeof adjustDate != "function") {
95
- // function to enable + and - keys on a field
96
- adjustDate = function (input, evt) {
97
- var key = evt.keyCode;
98
- var value = parseInt(input.value * 1);
99
- if (key == 107 || key == 109) {
100
- value += key == 109 ? -1 : 1;
101
- if (value != 0) {
102
- input.value = value;
103
- }
104
- event.returnValue = false;
105
- event.cancelBubble = true;
106
- return false;
107
- }
108
- };
109
- }
110
- //]]>
111
- </script>
112
-
113
- <input type="hidden" name="q99840_q1_show" value="dmy" /><label for="q99840_q1_value_d">Day</label>
114
- <select name="q99840_q1_value[d]" id="q99840_q1_value_d" class="sq-form-field">
115
- <option value="--"></option>
116
- <option value="1">1</option>
117
- <option value="2">2</option>
118
- <option value="3">3</option>
119
- <option value="4">4</option>
120
- <option value="5">5</option>
121
- <option value="6">6</option>
122
- <option value="7">7</option>
123
- <option value="8">8</option>
124
- <option value="9">9</option>
125
- <option value="10">10</option>
126
- <option value="11">11</option>
127
- <option value="12">12</option>
128
- <option value="13">13</option>
129
- <option value="14">14</option>
130
- <option value="15">15</option>
131
- <option value="16">16</option>
132
- <option value="17">17</option>
133
- <option value="18">18</option>
134
- <option value="19">19</option>
135
- <option value="20">20</option>
136
- <option value="21">21</option>
137
- <option value="22">22</option>
138
- <option value="23">23</option>
139
- <option value="24">24</option>
140
- <option value="25">25</option>
141
- <option value="26">26</option>
142
- <option value="27">27</option>
143
- <option value="28">28</option>
144
- <option value="29">29</option>
145
- <option value="30">30</option>
146
- <option value="31">31</option>
147
- </select>
148
- <label for="q99840_q1_value_m">Month</label>
149
- <select name="q99840_q1_value[m]" id="q99840_q1_value_m" class="sq-form-field">
150
- <option value="--"></option>
151
- <option value="1">Jan</option>
152
- <option value="2">Feb</option>
153
- <option value="3">Mar</option>
154
- <option value="4">Apr</option>
155
- <option value="5">May</option>
156
- <option value="6">Jun</option>
157
- <option value="7">Jul</option>
158
- <option value="8">Aug</option>
159
- <option value="9">Sep</option>
160
- <option value="10">Oct</option>
161
- <option value="11">Nov</option>
162
- <option value="12">Dec</option>
163
- </select>
164
- <label for="q99840_q1_value_y">Year</label>
165
- <select name="q99840_q1_value[y]" id="q99840_q1_value_y" class="sq-form-field">
166
- <option value="--"></option>
167
- <option value="2022">2022</option>
168
- <option value="2023">2023</option>
169
- <option value="2024">2024</option>
170
- <option value="2025">2025</option>
171
- <option value="2026">2026</option>
172
- <option value="2027">2027</option>
173
- <option value="2028">2028</option>
174
- <option value="2029">2029</option>
175
- <option value="2030">2030</option>
176
- <option value="2031">2031</option>
177
- <option value="2032">2032</option>
178
- <option value="2033">2033</option>
179
- <option value="2034">2034</option>
180
- <option value="2035">2035</option>
181
- <option value="2036">2036</option>
182
- <option value="2037">2037</option>
183
- <option value="2038">2038</option>
184
- <option value="2039">2039</option>
185
- <option value="2040">2040</option>
186
- <option value="2041">2041</option>
187
- <option value="2042">2042</option>
188
- <option value="2043">2043</option>
189
- <option value="2044">2044</option>
190
- <option value="2045">2045</option>
191
- <option value="2046">2046</option>
192
- <option value="2047">2047</option>
193
- <option value="2048">2048</option>
194
- <option value="2049">2049</option>
195
- <option value="2050">2050</option>
196
- <option value="2051">2051</option>
197
- <option value="2052">2052</option>
198
- <option value="2053">2053</option>
199
- <option value="2054">2054</option>
200
- <option value="2055">2055</option>
201
- <option value="2056">2056</option>
202
- <option value="2057">2057</option>
203
- <option value="2058">2058</option>
204
- <option value="2059">2059</option>
205
- <option value="2060">2060</option>
206
- <option value="2061">2061</option>
207
- <option value="2062">2062</option>
208
- <option value="2063">2063</option>
209
- <option value="2064">2064</option>
210
- <option value="2065">2065</option>
211
- <option value="2066">2066</option>
212
- <option value="2067">2067</option>
213
- <option value="2068">2068</option>
214
- <option value="2069">2069</option>
215
- <option value="2070">2070</option>
216
- <option value="2071">2071</option>
217
- <option value="2072">2072</option>
218
- <option value="2073">2073</option>
219
- <option value="2074">2074</option>
220
- <option value="2075">2075</option>
221
- <option value="2076">2076</option>
222
- <option value="2077">2077</option>
223
- <option value="2078">2078</option>
224
- <option value="2079">2079</option>
225
- <option value="2080">2080</option>
226
- <option value="2081">2081</option>
227
- <option value="2082">2082</option>
228
- <option value="2083">2083</option>
229
- <option value="2084">2084</option>
230
- <option value="2085">2085</option>
231
- <option value="2086">2086</option>
232
- <option value="2087">2087</option>
233
- <option value="2088">2088</option>
234
- <option value="2089">2089</option>
235
- <option value="2090">2090</option>
236
- <option value="2091">2091</option>
237
- <option value="2092">2092</option>
238
- <option value="2093">2093</option>
239
- <option value="2094">2094</option>
240
- <option value="2095">2095</option>
241
- <option value="2096">2096</option>
242
- <option value="2097">2097</option>
243
- <option value="2098">2098</option>
244
- <option value="2099">2099</option>
245
- </select>
246
- <input type="hidden" name="q99840_q1_value[h]" value="" /><input type="hidden" name="q99840_q1_value[i]" value="" /><input type="hidden" name="q99840_q1_value[s]" value="" />
247
- </div>
248
- </fieldset>
249
- </div>
250
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q2">
251
- <label class="sq-form-question-title" for="q99840_q2">Event duration</label>
252
- <div class="sq-form-question-answer">
253
- <input type="text" name="q99840:q2" value="" size="30" maxlength="300" placeholder="e.g. From: 12pm to 3pm" id="q99840_q2" class="sq-form-field" />
254
- </div>
255
- </div>
256
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q3">
257
- <label class="sq-form-question-title" for="q99840_q3">Event name</label>
258
- <div class="sq-form-question-answer">
259
- <input type="text" name="q99840:q3" value="" size="30" maxlength="300" id="q99840_q3" class="sq-form-field" />
260
- </div>
261
- </div>
262
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q4">
263
- <label class="sq-form-question-title" for="q99840_q4">Tell us about your event and what you want to achieve.</label>
264
- <div class="sq-form-question-answer">
265
- <input type="text" name="q99840:q4" value="" size="30" maxlength="300" id="q99840_q4" class="sq-form-field" />
266
- </div>
267
- </div>
268
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q5">
269
- <label class="sq-form-question-title" for="q99840_q5">Address of event</label>
270
- <em class="sq-form-question-note">* Queensland events only.</em>
271
- <div class="sq-form-question-answer">
272
- <input type="text" name="q99840:q5" value="" size="30" maxlength="300" id="q99840_q5" class="sq-form-field" />
273
- </div>
274
- </div>
275
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q6">
276
- <label class="sq-form-question-title" for="q99840_q6">Contact name</label>
277
- <div class="sq-form-question-answer">
278
- <input type="text" name="q99840:q6" value="" size="30" maxlength="300" id="q99840_q6" class="sq-form-field" />
279
- </div>
280
- </div>
281
- <div class="sq-form-question sq-form-question-numeric" id="sq_form_field_wrapper_q99840_q7">
282
- <label class="sq-form-question-title" for="q99840_q7">Contact number</label>
283
- <div class="sq-form-question-answer">
284
- <input type="text" name="q99840:q7" value="" size="30" maxlength="300" id="q99840_q7" class="sq-form-field" />
285
- </div>
286
- </div>
287
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q8">
288
- <label class="sq-form-question-title" for="q99840_q8">Target audience</label>
289
- <div class="sq-form-question-answer">
290
- <input type="text" name="q99840:q8" value="" size="30" maxlength="300" id="q99840_q8" class="sq-form-field" />
291
- </div>
292
- </div>
293
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q9">
294
- <label class="sq-form-question-title" for="q99840_q9">Number of people attending</label>
295
- <div class="sq-form-question-answer">
296
- <input type="text" name="q99840:q9" value="" size="30" maxlength="300" id="q99840_q9" class="sq-form-field" />
297
- </div>
298
- </div>
299
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q10">
300
- <label class="sq-form-question-title" for="q99840_q10">Other services attending event</label>
301
- <div class="sq-form-question-answer">
302
- <input type="text" name="q99840:q10" value="" size="30" maxlength="300" id="q99840_q10" class="sq-form-field" />
303
- </div>
304
- </div>
305
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q11">
306
- <label class="sq-form-question-title" for="q99840_q11">List of equipment provided</label>
307
- <div class="sq-form-question-answer">
308
- <input type="text" name="q99840:q11" value="" size="30" maxlength="300" placeholder="e.g. chairs, table, marquee etc." id="q99840_q11" class="sq-form-field" />
309
- </div>
310
- </div>
311
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q12">
312
- <label class="sq-form-question-title" for="q99840_q12">List of equipment Quitline is required to bring</label>
313
- <div class="sq-form-question-answer">
314
- <input type="text" name="q99840:q12" value="" size="30" maxlength="300" id="q99840_q12" class="sq-form-field" />
315
- </div>
316
- </div>
317
- <div class="sq-form-question sq-form-question-text" id="sq_form_field_wrapper_q99840_q13">
318
- <label class="sq-form-question-title" for="q99840_q13">Are you evaluating the event?</label>
319
- <div class="sq-form-question-answer">
320
- <input type="text" name="q99840:q13" value="" size="30" maxlength="300" placeholder="e.g. number of attendees" id="q99840_q13" class="sq-form-field" />
321
- </div>
322
- </div>
323
- </fieldset>
324
- <p></p>
325
- <p>
326
- <input type="submit" name="form_email_99828_submit" value="Submit" class="sq-form-submit" id="form_email_99828_submit" />
327
- </p>
328
- </form>
329
- </div>
330
- </section>
331
- <!-- Last updated date -->
332
- <!-- -->
333
-
334
- <section class="qld__body">
335
- <div class="container-fluid">
336
- <p><strong style="padding-right: 12px">Last updated:</strong>&nbsp;October 2022</p>
337
- </div>
338
- </section>
339
- </div>
340
- </div>
341
- </div>
342
- </div>
343
- <!--END CONTENT-->
344
- <!-- Page Footer Info -->
345
- ${require('../components/prefooter/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
346
- </main>
347
- <!-- END MAIN BODY -->
348
-
349
- <!-- FOOTER-->
350
- ${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
351
-
352
- <div class="footer-scripts" id="footer_js" style="display: none !important">{require('../components/_global/html/scripts.html')}</div>
353
- </body>
354
- </html>