@qhealth-design-system/core 1.5.0 → 1.6.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 (15) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/basic_search/css/component.scss +3 -3
  4. package/src/components/file_upload/css/component.scss +295 -213
  5. package/src/components/file_upload/html/component.hbs +2 -1
  6. package/src/components/file_upload/js/global.js +146 -84
  7. package/src/components/file_upload/js/manifest.json +5 -9
  8. package/src/components/mega_main_navigation/css/component.scss +1 -1
  9. package/src/components/promo_panel/css/component.scss +933 -0
  10. package/src/components/promo_panel/html/component.hbs +100 -0
  11. package/src/components/promo_panel/js/global.js +45 -0
  12. package/src/components/promo_panel/js/manifest.json +219 -0
  13. package/src/data/current.json +6 -0
  14. package/src/html/component-promo_panel.html +76 -0
  15. package/src/styles/imports/variables.scss +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## Unreleased
9
9
 
10
+ ## 1.6.0 - 2024-06-07
11
+
10
12
  ## 1.5.0 - 2024-05-07
11
13
 
12
14
  ## 1.4.2 - 2024-04-15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qhealth-design-system/core",
3
- "version": "1.5.0",
3
+ "version": "1.6.0",
4
4
  "description": "",
5
5
  "licence": "MIT",
6
6
  "main": "index.js",
package/src/components/basic_search/css/component.scss CHANGED
@@ -111,7 +111,7 @@
111
111
  margin: 0;
112
112
  @include QLD-space(padding-top, 1.5unit);
113
113
  @include QLD-space(padding-bottom, 1.5unit);
114
- border-bottom: 2px solid var(--QLD-color-light__border);
114
+ border-bottom: 1px solid $QLD-color-neutral--lighter;
115
115
 
116
116
  &:last-child{
117
117
  border: none;
@@ -216,7 +216,7 @@
216
216
 
217
217
 
218
218
  &__related{
219
- background-color: var(--QLD-color-light__background)--shade;
219
+ background-color: $QLD-color-neutral--lightest;
220
220
  @include QLD-space(margin-top, 1.5unit);
221
221
  @include QLD-space(padding-top, 1.5unit);
222
222
  @include QLD-space(padding-bottom, 1.5unit);
@@ -242,7 +242,7 @@
242
242
 
243
243
 
244
244
  &__tips{
245
- background-color: var(--QLD-color-light__background)--shade;
245
+ background-color: $QLD-color-neutral--lightest;
246
246
  @include QLD-space(margin-top, 2unit);
247
247
  @include QLD-space(padding-top, 1.5unit);
248
248
  @include QLD-space(padding-bottom, 1.5unit);
package/src/components/file_upload/css/component.scss CHANGED
@@ -2,12 +2,6 @@
2
2
  // {{component_name}}
3
3
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
4
4
 
5
- .qld__form-group--file-upload {
6
- .qld__input--error {
7
- margin-top: 0.25rem !important;
8
- }
9
- }
10
-
11
5
  .qld__form-file-wrapper {
12
6
  margin-top: pxToRem(8);
13
7
 
@@ -40,7 +34,11 @@
40
34
  font-weight: 600;
41
35
  font-size: pxToRem(20);
42
36
  line-height: pxToRem(24);
43
- margin: 0 auto pxToRem(24) !important;
37
+ margin: 0 auto pxToRem(24);
38
+
39
+ .qld__body--dark & {
40
+ color: var(--QLD-color-dark__heading);
41
+ }
44
42
 
45
43
  &::first-letter {
46
44
  text-transform: capitalize;
@@ -54,19 +52,19 @@
54
52
  }
55
53
 
56
54
  @include QLD-media(lg) {
57
- margin: pxToRem(24) auto !important;
55
+ margin: pxToRem(24) auto;
58
56
  }
59
57
  }
60
58
 
61
- &--dark {
59
+ .qld__body--dark & {
62
60
  .qld__file-input-title {
63
- color: $QLD-color-dark__heading;
61
+ color: var(--QLD-color-dark__heading);
64
62
  }
65
63
  .qld__form-file-info {
66
64
  &:not(.qld__form-file--success) & {
67
65
  p,
68
66
  span {
69
- color: $QLD-color-dark__text !important;
67
+ color: var(--QLD-color-dark__text);
70
68
  }
71
69
  }
72
70
  }
@@ -75,27 +73,268 @@
75
73
  .qld__file-input-label {
76
74
  font-weight: 400;
77
75
  }
78
- }
79
76
 
80
- .qld__file-wrapper {
81
- border: pxToRem(1) solid $QLD-color-light__background--alt-shade;
82
- margin: pxToRem(10) 0;
83
- border-radius: pxToRem(3);
84
- flex-wrap: wrap;
85
- display: flex;
86
- align-items: center;
87
- justify-content: flex-start;
77
+ .qld__form-file-dropzone {
78
+ border: 2px dashed var(--QLD-color-light__border--alt);
79
+ border-radius: var(--QLD-border-radius-xs);
80
+ padding: pxToRem(24) 0;
81
+ text-align: center;
82
+
83
+ &:not(.qld__input--error) {
84
+ .qld__body--dark & {
85
+ background-color: var(--QLD-color-dark__background);
86
+ border-color: var(--QLD-color-dark__border)--alt;
87
+
88
+ .qld__loading-spinner {
89
+ background-color: var(--QLD-color-dark__background);
90
+ }
91
+
92
+ .qld__loading_spinner-label {
93
+ color: var(--QLD-color-dark__heading);
94
+ }
95
+
96
+ .qld__file-input-label {
97
+ border-color: var(--QLD-color-dark__action--secondary);
98
+ color: var(--QLD-color-dark__heading);
99
+
100
+ &:hover,
101
+ &:focus,
102
+ &:active {
103
+ background-color: transparent;
104
+ border-color: $QLD-color-neutral--lightest;
105
+ text-decoration-color: var(--QLD-color-dark__heading);
106
+ }
107
+ }
108
+
109
+ p.qld__file-input-title {
110
+ color: var(--QLD-color-dark__heading);
111
+ }
112
+ }
113
+ }
88
114
 
89
- a {
90
- width: 100%;
91
- }
115
+ &.qld__input--error:not(.qld__form-file-dropzone--updating) {
116
+ background-color: $QLD-color-status__error--lightest;
117
+ border-color: $QLD-color-status__error;
118
+
119
+ p.qld__file-input-title {
120
+ color: var(--QLD-color-light__text--lighter);
121
+ }
122
+
123
+ .qld__file-input-label {
124
+ border-color: var(--QLD-color-light__action--secondary);
125
+ color: var(--QLD-color-light__action--primary);
126
+
127
+ &:hover,
128
+ &:active,
129
+ &:focus {
130
+ border-color: var(--QLD-color-light__action--secondary-hover);
131
+ text-decoration-color: var(--QLD-color-light__action--primary);
132
+ }
133
+ }
134
+
135
+ .qld__file-input-icon {
136
+ background-color: $QLD-color-status__error--lighter;
137
+ color: $QLD-color-status__error;
138
+ }
139
+ }
92
140
 
93
- button {
94
- margin: pxToRem(10) 0;
141
+ &--dragged-over:not(.qld__form-file-dropzone--updating) {
142
+ background-color: $QLD-color-neutral--lightest;
143
+ border-color: var(--QLD-color-light__action--primary-hover);
144
+
145
+ .qld__body--dark & {
146
+ background-color: var(--QLD-color-dark__background--shade);
147
+ border-color: var(--QLD-color-dark__action--secondary);
148
+
149
+ p.qld__file-input-title,
150
+ .qld__file-input-constraints span,
151
+ .qld__file-input-label {
152
+ color: var(--QLD-color-dark__link);
153
+ }
154
+ label.qld__file-input-label {
155
+ border-color: var(--QLD-color-dark__action--secondary);
156
+ &:hover,
157
+ &:active,
158
+ &:focus {
159
+ border-color: var(--QLD-color-dark__action--secondary);
160
+ text-decoration-color: var(--QLD-color-dark__heading);
161
+ }
162
+ }
163
+ .qld__file-input-icon {
164
+ background-color: var(--QLD-color-dark__background);
165
+ color: var(--QLD-color-dark__link);
166
+ }
167
+ }
168
+ }
169
+
170
+ &--disabled:not(.qld__input--error),
171
+ &--updating:not(.qld__input--error) {
172
+ color: var(--QLD-color-light__text--lighter);
173
+
174
+ .qld__file-input-label {
175
+ border-color: var(--QLD-color-light__background--alt);
176
+ color: var(--QLD-color-light__text--lighter);
177
+ pointer-events: none;
178
+
179
+ .qld__body--dark & {
180
+ color: var(--QLD-color-dark__heading);
181
+ border-color: var(--QLD-color-light__background--alt-shade);
182
+ }
183
+ }
184
+ }
185
+
186
+ @include QLD-media(lg) {
187
+ padding: pxToRem(32) pxToRem(24);
188
+ }
95
189
  }
96
190
 
97
- img {
98
- width: pxToRem(22);
191
+ .qld__form-file-preview {
192
+ div.qld__form-file {
193
+ align-items: center;
194
+ border: 2px solid $QLD-color-neutral--lightest;
195
+ border-radius: var(--QLD-border-radius-xs);
196
+ display: flex;
197
+ flex-wrap: wrap;
198
+ margin: pxToRem(16) 0 0;
199
+ padding: pxToRem(16);
200
+
201
+ .qld__body--dark & {
202
+ background-color: var(--QLD-color-dark__background--shade);
203
+ border-color: var(--QLD-color-dark__border);
204
+ }
205
+
206
+ .qld__form-file-delete-btn {
207
+ i {
208
+ color: var(--QLD-color-light__action--secondary);
209
+
210
+ .qld__body--dark & {
211
+ color: var(--QLD-color-dark__action--secondary);
212
+ }
213
+ }
214
+
215
+ &:hover,
216
+ &:focus,
217
+ &:active {
218
+ background-color: transparent;
219
+ text-decoration-color: var(--QLD-color-light__link);
220
+
221
+ .qld__body--dark & {
222
+ text-decoration-color: var(--QLD-color-dark__heading);
223
+ }
224
+ }
225
+ }
226
+
227
+ &--complete {
228
+ background-color: $QLD-color-neutral--lightest;
229
+ border-color: $QLD-color-neutral--lighter;
230
+
231
+ .qld__body--dark & {
232
+ background-color: var(--QLD-color-dark__background--shade);
233
+ border-color: var(--QLD-color-dark__border);
234
+
235
+ p,span {
236
+ color: var(--QLD-color-dark__heading);
237
+ }
238
+
239
+ button.qld__form-file-delete-btn {
240
+ color: var(--QLD-color-dark__heading);
241
+ i {
242
+ color: var(--QLD-color-dark__action--secondary);
243
+ }
244
+ &:hover,
245
+ &:focus,
246
+ &:active {
247
+ background-color: transparent;
248
+ text-decoration-color: var(--QLD-color-dark__text);
249
+ i {
250
+ color: var(--QLD-color-dark__action--secondary);
251
+ }
252
+ }
253
+ }
254
+ }
255
+ }
256
+
257
+ &--error {
258
+ background-color: $QLD-color-status__error--lightest;
259
+ border-color: $QLD-color-status__error;
260
+
261
+ .qld__body--dark & {
262
+ background-color: $QLD-color-status__error--lightest;
263
+ border-color: $QLD-color-status__error;
264
+
265
+ .qld__form-file-info-name {
266
+ color: var(--QLD-color-light__heading);
267
+ }
268
+ .qld__form-file-delete-btn {
269
+ color: var(--QLD-color-light__link);
270
+ text-decoration-color: var(--QLD-color-light__action--primary);
271
+
272
+ i {
273
+ color: var(--QLD-color-light__action--secondary);
274
+ }
275
+
276
+ &:hover,
277
+ &:focus,
278
+ &:active {
279
+ color: var(--QLD-color-light__link);
280
+ text-decoration-color: var(--QLD-color-light__action--primary);
281
+ }
282
+ }
283
+ }
284
+ }
285
+
286
+ &--updating {
287
+ background-color: var(--QLD-color-dark__heading);
288
+
289
+ .qld__body--dark & {
290
+ background-color: var(--QLD-color-dark__background);
291
+ border-color: var(--QLD-color-dark__border);
292
+
293
+ p,span {
294
+ color: var(--QLD-color-dark__heading);
295
+ }
296
+ }
297
+ }
298
+
299
+ &--success {
300
+ background-color: $QLD-color-status__success--lightest;
301
+ border-color: $QLD-color-status__success;
302
+
303
+ .qld__body--dark & {
304
+ background-color: $QLD-color-status__success--lightest;
305
+ border-color: $QLD-color-status__success;
306
+
307
+ .qld__form-file-loader {
308
+ i {
309
+ color: var(--QLD-color-light__action--secondary);
310
+ }
311
+ }
312
+ .qld__form-file-info-name {
313
+ color: var(--QLD-color-light__heading);
314
+ }
315
+ .qld__form-file-delete-btn {
316
+ color: var(--QLD-color-light__action--primary);
317
+ i {
318
+ color: $QLD-color-status__success;
319
+ }
320
+ &:hover,
321
+ &:focus,
322
+ &:active {
323
+ background-color: transparent;
324
+ text-decoration-color: var(--QLD-color-light__link);
325
+ }
326
+ }
327
+ }
328
+ }
329
+
330
+ @include QLD-media(md) {
331
+ flex-wrap: nowrap;
332
+ }
333
+
334
+ @include QLD-media(md) {
335
+ padding: pxToRem(24);
336
+ }
337
+ }
99
338
  }
100
339
  }
101
340
 
@@ -103,11 +342,16 @@
103
342
  span {
104
343
  display: block;
105
344
  }
106
- .qld__form-file-wrapper--dark & {
107
- color: $QLD-color-dark__heading;
345
+ .qld__body--dark & {
346
+ color: var(--QLD-color-dark__heading);
108
347
  }
109
- .qld__input--error & {
110
- color: $QLD-color-dark__text--lighter;
348
+ span {
349
+ .qld__input--error & {
350
+ color: var(--QLD-color-light__text--lighter);
351
+ }
352
+ .qld__form-file-dropzone--updating & {
353
+ color: inherit;
354
+ }
111
355
  }
112
356
  }
113
357
 
@@ -136,17 +380,17 @@
136
380
  font-size: inherit;
137
381
  }
138
382
 
139
- .qld__form-file-wrapper--dark & {
140
- background-color: $QLD-color-dark__background--shade;
141
- color: $QLD-color-dark__action--secondary;
383
+ .qld__body--dark & {
384
+ background-color: var(--QLD-color-dark__background--shade);
385
+ color: var(--QLD-color-dark__action--secondary);
142
386
  }
143
387
 
144
388
  .qld__form-file-dropzone--dragged-over & {
145
- background-color: $QLD-color-neutral--white;
389
+ background-color: var(--QLD-color-dark__heading);
146
390
 
147
- .qld__form-file-wrapper--dark & {
148
- background-color: $QLD-color-dark__background;
149
- color: $QLD-color-neutral--light__opacity-10;
391
+ .qld__body--dark & {
392
+ background-color: var(--QLD-color-dark__background);
393
+ color: var(--QLD-color-dark__link);
150
394
  }
151
395
  }
152
396
 
@@ -169,12 +413,7 @@
169
413
  font-size: pxToRem(16);
170
414
  }
171
415
  }
172
- }
173
-
174
- :not(.qld__form-file-dropzone--updating).qld__input--error & {
175
- background-color: $QLD-color-status__error--lighter;
176
- color: $QLD-color-status__error;
177
- }
416
+ }
178
417
 
179
418
  @include QLD-media(lg) {
180
419
  display: inline-flex;
@@ -183,179 +422,22 @@
183
422
  }
184
423
  }
185
424
 
186
- .qld__form-file-dropzone {
187
- border: 2px dashed var(--QLD-color-light__border--alt);
188
- border-radius: var(--QLD-border-radius-xs);
189
- padding: pxToRem(24) 0;
190
- text-align: center;
191
-
192
- &:not(.qld__input--error) {
193
- .qld__form-file-wrapper--dark & {
194
- background-color: $QLD-color-dark__background;
195
- border-color: $QLD-color-dark__border--alt;
196
-
197
- .qld__loading-spinner {
198
- background-color: var(--QLD-color-dark__background);
199
- }
200
-
201
- .qld__loading_spinner-label {
202
- color: var(--QLD-color-dark__heading);
203
- }
204
-
205
- .qld__file-input-label {
206
- border-color: $QLD-color-dark__action--secondary;
207
- color: var(--QLD-color-dark__heading);
208
-
209
- &:hover,
210
- &:focus,
211
- &:active {
212
- background-color: transparent !important;
213
- border-color: $QLD-color-neutral--light__opacity-10;
214
- text-decoration-color: $QLD-color-dark__heading;
215
- }
216
- }
217
-
218
- p.qld__file-input-title {
219
- color: $QLD-color-dark__heading;
220
- }
221
- }
222
- }
223
-
224
- &.qld__input--error:not(.qld__form-file-dropzone--updating) {
225
- background-color: $QLD-color-status__error--lightest;
226
- border-color: $QLD-color-status__error;
227
-
228
- p.qld__file-input-title {
229
- color: $QLD-color-light__text--lighter !important;
230
- }
231
- }
232
-
233
- &--dragged-over {
234
- background-color: $QLD-color-neutral--lightest;
235
- border-color: var(--QLD-color-light__action--primary-hover);
236
-
237
- .qld__form-file-wrapper--dark & {
238
- background-color: $QLD-color-dark__background--shade !important;
239
- border-color: $QLD-color-dark__action--secondary !important;
240
-
241
- p.qld__file-input-title,
242
- .qld__file-input-constraints,
243
- .qld__file-input-label {
244
- color: $QLD-color-dark__link--on-action !important;
245
- }
246
-
247
- .qld__file-input-label {
248
- border-color: $QLD-color-dark__action--secondary !important;
249
- }
250
- }
251
- }
252
-
253
- &--disabled,
254
- &--updating {
255
- color: $QLD-color-light__text--lighter;
256
-
257
- .qld__file-input-label {
258
- border-color: $QLD-color-light__background--alt !important;
259
- color: var(--QLD-color-light__text--lighter) !important;
260
- pointer-events: none;
261
-
262
- .qld__form-file-wrapper--dark & {
263
- color: $QLD-color-neutral--white !important;
264
- border-color: $QLD-color-light__background--alt-shade !important;
265
- }
266
- }
267
- }
268
-
269
- @include QLD-media(lg) {
270
- padding: pxToRem(32) pxToRem(24);
271
- }
272
- }
273
-
274
- .qld__form-file {
275
- align-items: center;
276
- border: 2px solid $QLD-color-neutral--lightest;
277
- border-radius: var(--QLD-border-radius-xs);
278
- display: flex;
279
- flex-wrap: wrap;
280
- margin: pxToRem(16) 0 0;
281
- padding: pxToRem(16);
282
-
283
- &--success {
284
- background-color: $QLD-color-status__success--lightest;
285
- border-color: $QLD-color-status__success;
286
-
287
- .qld__form-file-wrapper--dark & {
288
- i {
289
- color: $QLD-color-status__success !important;
290
- }
291
- }
292
- }
293
-
294
- &--complete {
295
- background-color: $QLD-color-neutral--lightest;
296
- border-color: $QLD-color-neutral--lighter;
297
-
298
- .qld__form-file-wrapper--dark & {
299
- background-color: $QLD-color-dark__background--shade;
300
- border-color: $QLD-color-dark__border;
301
-
302
- p,span {
303
- color: $QLD-color-neutral--white;
304
- }
305
-
306
- button.qld__form-file-delete-btn {
307
- color: $QLD-color-dark__heading;
308
- i {
309
- color: $QLD-color-dark__action--secondary;
310
- }
311
- &:hover,
312
- &:focus,
313
- &:active {
314
- background-color:transparent;
315
- text-decoration-color: $QLD-color-dark__text;
316
- i {
317
- color: $QLD-color-dark__action--secondary;
318
- }
319
- }
320
- }
321
- }
322
- }
323
-
324
- &--error {
325
- background-color: $QLD-color-status__error--lightest;
326
- border-color: $QLD-color-status__error;
327
- }
328
-
329
- &--updating {
330
- background-color: $QLD-color-neutral--white;
331
-
332
- .qld__form-file-wrapper--dark & {
333
- background-color: $QLD-color-dark__background;
334
- border-color: $QLD-color-dark__border;
335
-
336
- p,span {
337
- color: $QLD-color-neutral--white;
338
- }
339
- }
340
- }
341
-
342
- @include QLD-media(md) {
343
- flex-wrap: nowrap;
344
- }
345
-
346
- @include QLD-media(md) {
347
- padding: pxToRem(24);
348
- }
349
- }
350
-
351
425
  .qld__form-file-info-status {
352
426
  align-content: center;
353
- color: $QLD-color-light__text--lighter;
427
+ color: var(--QLD-color-light__text--lighter);
354
428
  display: flex;
355
429
  font-weight:400;
356
430
  font-size: pxToRem(14);
357
431
  line-height: pxToRem(20);
358
432
 
433
+ .qld__body--dark & {
434
+ color: var(--QLD-color-dark__heading);
435
+ }
436
+
437
+ .qld__form-file--success & {
438
+ color: var(--QLD-color-light__text--lighter);
439
+ }
440
+
359
441
  .qld__form-file--error & {
360
442
  color: $QLD-color-status__error;
361
443
  }
@@ -400,14 +482,14 @@
400
482
  margin-bottom: 0;
401
483
  }
402
484
 
403
- .qld__form-file-wrapper--dark & {
485
+ .qld__body--dark & {
404
486
  i {
405
- color: $QLD-color-dark__action--secondary;
487
+ color: var(--QLD-color-dark__action--secondary);
406
488
  }
407
489
  }
408
490
 
409
491
  i {
410
- color: var(--QLD-color-dark__action--secondary);
492
+ color: var(--QLD-color-light__action--secondary);
411
493
  width: 100%;
412
494
 
413
495
  .qld__form-file--error & {
package/src/components/file_upload/html/component.hbs CHANGED
@@ -30,7 +30,8 @@
30
30
  data-files=''
31
31
  data-max-size="{{metadata.max_size.value}}"
32
32
  data-max-files="{{metadata.max_selection.value}}"
33
- data-js-api="{{metadata.js_api.value}}"
33
+ {{!-- data-js-api-key="{{metadata.js_api_key.value}}"
34
+ data-js-api="{{metadata.js_api.value}}" --}}
34
35
  {{#ifCond metadata.max_selection.value '>' '1'}}multiple{{/ifCond}}
35
36
  required
36
37
  >