@qhealth-design-system/core 1.17.2 → 1.18.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 (46) hide show
  1. package/.storybook/globals.js +10 -0
  2. package/.storybook/preview.js +9 -13
  3. package/CHANGELOG.md +2 -0
  4. package/package.json +1 -1
  5. package/src/assets/img/QLD-Health-icons.svg +10 -6
  6. package/src/assets/img/QLD-icons.svg +12 -8
  7. package/src/assets/img/qgov-coa.svg +65 -0
  8. package/src/components/_global/css/forms/general/component.scss +1 -1
  9. package/src/components/_global/css/icons/component.scss +40 -38
  10. package/src/components/_global/css/tags/component.scss +28 -27
  11. package/src/components/_global/html/head.html +1 -1
  12. package/src/components/basic_search/html/component.hbs +2 -1
  13. package/src/components/card_single_action/css/component.scss +15 -0
  14. package/src/components/footer/html/component.hbs +18 -15
  15. package/src/components/header/css/component.scss +25 -85
  16. package/src/components/header/html/component.hbs +4 -176
  17. package/src/components/header/js/global.js +189 -181
  18. package/src/components/left_hand_navigation/css/component.scss +32 -29
  19. package/src/components/left_hand_navigation/html/component.hbs +10 -6
  20. package/src/components/left_hand_navigation/js/global.js +49 -26
  21. package/src/components/main_navigation/css/component.scss +115 -89
  22. package/src/components/main_navigation/html/component.hbs +9 -3
  23. package/src/components/mega_main_navigation/css/component.scss +6 -6
  24. package/src/components/mega_main_navigation/html/component.hbs +9 -3
  25. package/src/components/multi_column/css/component.scss +2 -32
  26. package/src/components/overflow_menu/css/component.scss +19 -41
  27. package/src/components/search_box/css/component.scss +42 -0
  28. package/src/components/tab/css/component.scss +56 -41
  29. package/src/components/tab/html/component.hbs +13 -13
  30. package/src/components/tab/js/global.js +43 -114
  31. package/src/components/tab/js/manifest.json +881 -873
  32. package/src/data/site.json +28 -4
  33. package/src/index.js +11 -2
  34. package/src/stories/BackToTop/BackToTop.js +8 -0
  35. package/src/stories/BackToTop/BackToTop.mdx +42 -0
  36. package/src/stories/BackToTop/BackToTop.stories.js +28 -0
  37. package/src/stories/CTALink/CTALink.js +5 -0
  38. package/src/stories/CTALink/CTALink.mdx +39 -0
  39. package/src/stories/CTALink/CTALink.stories.js +151 -0
  40. package/src/assets/data-tables-csv-test.csv +0 -191
  41. package/src/assets/img/header-logo-agov.png +0 -0
  42. package/src/assets/img/header-search.svg +0 -3
  43. package/src/assets/img/layers-2x.png +0 -0
  44. package/src/assets/img/layers.png +0 -0
  45. package/src/assets/img/marker-icon.png +0 -0
  46. package/src/assets/img/video-play.svg +0 -3
package/src/components/overflow_menu/css/component.scss CHANGED
@@ -1,14 +1,13 @@
1
1
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
2
- // {{component_name}}
2
+ // Overflow Menu
3
3
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
4
4
 
5
5
  .qld__banner:has(.qld__overflow_menu_wrapper) {
6
6
  overflow: visible;
7
7
  }
8
8
 
9
- .qld__overflow_menu--breadcrumbs .qld__overflow_menu_wrapper,
9
+ .qld__overflow_menu--breadcrumbs .qld__overflow_menu_wrapper,
10
10
  .qld__overflow_menu_wrapper {
11
-
12
11
  button.qld__btn.qld__btn--toggle {
13
12
  display: inline-flex;
14
13
  align-items: center;
@@ -27,14 +26,16 @@
27
26
  color: var(--QLD-color-light__link);
28
27
  }
29
28
 
30
- &:hover, &.qld__accordion--open {
29
+ &:hover,
30
+ &.qld__accordion--open {
31
31
  background-color: $QLD-color-neutral--black__opacity-10;
32
32
  svg {
33
33
  color: var(--QLD-color-light__action--secondary);
34
34
  }
35
35
  }
36
36
 
37
- &:focus, &:hover:focus {
37
+ &:focus,
38
+ &:hover:focus {
38
39
  background-color: $QLD-color-neutral--black__opacity-10;
39
40
  box-shadow: none;
40
41
  }
@@ -51,7 +52,7 @@
51
52
  z-index: 9999;
52
53
  &.qld__accordion--open {
53
54
  display: block;
54
- border-bottom: $QLD-border-width-thick solid $QLD-color-light__design-accent;
55
+ border-bottom: $QLD-border-width-thick solid var(--QLD-color-light__design-accent);
55
56
  border-radius: $QLD-border-radius-xs;
56
57
  height: auto;
57
58
  }
@@ -62,7 +63,6 @@
62
63
  }
63
64
 
64
65
  &_list {
65
-
66
66
  list-style-type: none;
67
67
  padding: 0;
68
68
  margin: 0;
@@ -118,66 +118,46 @@
118
118
  .qld__body--dark &,
119
119
  .qld__body--dark-alt &,
120
120
  .qld__breadcrumbs--dark & {
121
-
122
121
  button.qld__btn.qld__btn--toggle {
123
-
124
122
  background-color: transparent;
125
-
123
+
126
124
  svg {
127
125
  color: var(--QLD-color-dark__link);
128
126
  }
129
-
130
- &:hover, &.qld__accordion--open {
127
+
128
+ &:hover,
129
+ &.qld__accordion--open {
131
130
  background-color: $QLD-color-neutral--black__opacity-10;
132
-
131
+
133
132
  svg {
134
133
  color: var(--QLD-color-dark__action--secondary);
135
134
  }
136
135
  }
137
-
138
- &:focus, &:hover:focus {
136
+
137
+ &:focus,
138
+ &:hover:focus {
139
139
  background-color: $QLD-color-neutral--black__opacity-10;
140
- // box-shadow: none;
141
140
  }
142
-
143
141
  }
144
142
 
145
143
  .qld__overflow_menu {
146
-
147
- &.qld__accordion--open {}
148
-
149
- &.qld__accordion--closed {}
150
-
151
144
  &_list {
152
-
153
145
  &-item {
154
-
155
146
  &-link {
156
-
157
-
158
- &:visited {}
159
-
160
- &:hover,
161
- &:hover:visited {}
162
-
163
147
  &:focus {
164
148
  outline: 3px solid var(--QLD-color-light__focus);
165
149
  }
166
-
167
- &:active {}
168
-
169
-
170
150
  }
171
151
 
172
152
  &-link {
173
153
  color: var(--QLD-color-light__text);
174
154
  background-color: $QLD-color-neutral--lightest;
175
155
  text-decoration: none;
176
-
156
+
177
157
  &:visited {
178
158
  color: var(--QLD-color-light__text);
179
159
  }
180
-
160
+
181
161
  &:hover,
182
162
  &:hover:visited {
183
163
  color: var(--QLD-color-light__link);
@@ -185,22 +165,20 @@
185
165
  text-decoration-color: var(--QLD-color-light__link);
186
166
  background-color: $QLD-color-neutral--lighter;
187
167
  }
188
-
168
+
189
169
  &:focus {
190
170
  outline: 3px solid var(--QLD-color-light__focus);
191
171
  outline-offset: -3px !important;
192
172
  }
193
-
173
+
194
174
  &:active {
195
175
  color: var(--QLD-color-light__text);
196
176
  background-color: $QLD-color-neutral--white;
197
177
  text-decoration: none;
198
178
  }
199
-
200
179
  }
201
180
  }
202
181
  }
203
182
  }
204
-
205
183
  }
206
184
  }
package/src/components/search_box/css/component.scss CHANGED
@@ -10,6 +10,48 @@
10
10
  input.qld__text-input,
11
11
  .qld__search-form__btn button {
12
12
  height: pxToRem(52);
13
+
14
+ &.qld__btn.qld__btn--search:focus {
15
+ border-top-left-radius: 0;
16
+ border-bottom-left-radius: 0;
17
+ }
18
+ }
19
+
20
+ // Search icon
21
+ @include QLD-media("lg") {
22
+ // Search icon overlay on search
23
+ .qld__search-form__inner-icon {
24
+ position: absolute;
25
+ left: 1rem;
26
+ z-index: 1;
27
+ color: $QLD-color-light__text--lighter;
28
+ }
29
+
30
+ // Dark theme styling on parent components
31
+ .qld__header__main--dark &,
32
+ .qld__header__main--dark-alt &,
33
+ .qld__banner--dark &,
34
+ .qld__banner--dark-alt & {
35
+ > .qld__search-form__inner-icon {
36
+ color: $QLD-color-neutral--white;
37
+ }
38
+
39
+ &:has(input.qld__text-input:is(:active, :focus)) .qld__search-form__inner-icon {
40
+ color: $QLD-color-light__text--lighter;
41
+ }
42
+ }
43
+
44
+ // Push the input cursor to the right when search icon is present
45
+ > input.qld__text-input {
46
+ padding-left: 3rem;
47
+ }
48
+ }
49
+
50
+ // Search icon - hide icon on small screens
51
+ @include QLD-media("lg", "down") {
52
+ .qld__search-form__inner-icon {
53
+ display: none;
54
+ }
13
55
  }
14
56
  }
15
57
 
package/src/components/tab/css/component.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
2
- // {{component_name}}
2
+ // Tabs
3
3
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
4
4
 
5
5
  .qld__tab {
@@ -33,7 +33,8 @@
33
33
  font-size: 1rem;
34
34
  color: var(--QLD-color-light__link);
35
35
  cursor: pointer;
36
- border-radius: 4px 4px 0px 0px;
36
+ border-top-left-radius: $QLD-border-radius-xs;
37
+ border-top-right-radius: $QLD-border-radius-xs;
37
38
  display: flex;
38
39
  justify-content: flex-end;
39
40
  flex-direction: column;
@@ -42,9 +43,11 @@
42
43
  text-align: left;
43
44
 
44
45
  span {
45
- display: inline-block;
46
+ max-height: 24px;
47
+ white-space: nowrap;
46
48
 
47
- i {
49
+ svg.qld__icon {
50
+ margin-bottom: 4px;
48
51
  margin-right: 8px;
49
52
  color: var(--QLD-color-light__action--secondary);
50
53
  }
@@ -57,7 +60,8 @@
57
60
  position: relative;
58
61
  bottom: 0px;
59
62
  background-color: transparent;
60
- border-radius: 4px 4px 0px 0px;
63
+ border-top-left-radius: $QLD-border-radius-xs;
64
+ border-top-right-radius: $QLD-border-radius-xs;
61
65
  }
62
66
 
63
67
  &:not(.active):hover {
@@ -69,13 +73,19 @@
69
73
  text-decoration-color: var(--QLD-color-light__link--on-action);
70
74
  outline: none;
71
75
 
72
- span i {
76
+ span svg.qld__icon {
73
77
  color: var(--QLD-color-light__link--on-action);
74
78
  text-decoration: none;
75
79
  display: inline-block;
76
80
  }
77
81
  }
78
82
 
83
+ // Ensure the active tab has the correct border radius.
84
+ &.active[role="tab"]:focus {
85
+ border-bottom-left-radius: 0;
86
+ border-bottom-right-radius: 0;
87
+ }
88
+
79
89
  /**
80
90
  * 1. Light and Fix Width
81
91
  * 2. Fix Width
@@ -99,7 +109,7 @@
99
109
  z-index: 1;
100
110
  text-decoration: none;
101
111
 
102
- span i {
112
+ span svg.qld__icon {
103
113
  color: var(--QLD-color-light__heading);
104
114
  }
105
115
 
@@ -245,7 +255,7 @@
245
255
  color: var(--QLD-color-dark__link);
246
256
  background: var(--QLD-color-dark__background--shade);
247
257
 
248
- span i {
258
+ span svg.qld__icon {
249
259
  color: var(--QLD-color-dark__action--secondary);
250
260
  }
251
261
 
@@ -265,7 +275,7 @@
265
275
  background-color: var(--QLD-color-dark__design-accent);
266
276
  }
267
277
 
268
- span i {
278
+ span svg.qld__icon {
269
279
  color: var(--QLD-color-dark__heading);
270
280
  text-decoration: none;
271
281
  display: inline-block;
@@ -280,7 +290,7 @@
280
290
  text-decoration-thickness: var(--QLD-underline__thickness-thick);
281
291
  text-decoration-color: var(--QLD-color-dark__link--on-action);
282
292
 
283
- span i {
293
+ span svg.qld__icon {
284
294
  color: var(--QLD-color-dark__link--on-action);
285
295
  text-decoration: none;
286
296
  display: inline-block;
@@ -321,7 +331,7 @@
321
331
  color: var(--QLD-color-dark__link);
322
332
  background: var(--QLD-color-dark__background--alt-shade);
323
333
 
324
- span i {
334
+ span svg.qld__icon {
325
335
  color: var(--QLD-color-dark__action--secondary);
326
336
  }
327
337
 
@@ -341,7 +351,7 @@
341
351
  background-color: var(--QLD-color-dark__design-accent);
342
352
  }
343
353
 
344
- span i {
354
+ span svg.qld__icon {
345
355
  color: var(--QLD-color-dark__heading);
346
356
  text-decoration: none;
347
357
  display: inline-block;
@@ -363,7 +373,7 @@
363
373
  text-decoration-thickness: var(--QLD-underline__thickness-thick);
364
374
  text-decoration-color: var(--QLD-color-dark__link--on-action);
365
375
 
366
- span i {
376
+ span svg.qld__icon {
367
377
  color: var(--QLD-color-dark__link--on-action);
368
378
  text-decoration: none;
369
379
  display: inline-block;
@@ -414,6 +424,11 @@
414
424
  padding-left: 0px;
415
425
  padding-right: 0px;
416
426
  }
427
+
428
+ &:focus {
429
+ border-top-left-radius: 0;
430
+ border-top-right-radius: 0;
431
+ }
417
432
  }
418
433
  }
419
434
 
@@ -506,7 +521,7 @@
506
521
  background: var(--QLD-color-light__background--shade);
507
522
  color: var(--QLD--color-light__link);
508
523
 
509
- span i {
524
+ span svg.qld__icon {
510
525
  color: var(--QLD-color-light__action--secondary);
511
526
  }
512
527
 
@@ -515,7 +530,7 @@
515
530
  color: var(--QLD-color-light__link--on-action);
516
531
  text-decoration-color: var(--QLD--color-light__link--on-action);
517
532
 
518
- span i {
533
+ span svg.qld__icon {
519
534
  color: var(--QLD-color-light__link--on-action);
520
535
  }
521
536
  }
@@ -547,7 +562,7 @@
547
562
  background: var(--QLD-color-light__background--alt-shade);
548
563
  color: var(--QLD--color-light__link);
549
564
 
550
- span i {
565
+ span svg.qld__icon {
551
566
  color: var(--QLD-color-light__action--secondary);
552
567
  }
553
568
 
@@ -556,7 +571,7 @@
556
571
  color: var(--QLD-color-light__link--on-action);
557
572
  text-decoration-color: var(--QLD--color-light__link--on-action);
558
573
 
559
- span i {
574
+ span svg.qld__icon {
560
575
  color: var(--QLD-color-light__link--on-action);
561
576
  }
562
577
  }
@@ -588,7 +603,7 @@
588
603
  background: var(--QLD-color-dark__background--shade);
589
604
  color: var(--QLD-color-dark__link);
590
605
 
591
- span i {
606
+ span svg.qld__icon {
592
607
  color: var(--QLD-color-dark__action--secondary);
593
608
  }
594
609
  }
@@ -598,7 +613,7 @@
598
613
  color: var(--QLD-color-dark__link--on-action);
599
614
  text-decoration-color: var(--QLD--color-dark__link--on-action);
600
615
 
601
- span i {
616
+ span svg.qld__icon {
602
617
  color: var(--QLD-color-dark__link--on-action);
603
618
  }
604
619
  }
@@ -628,7 +643,7 @@
628
643
  background: var(--QLD-color-dark__background--alt-shade);
629
644
  color: var(--QLD-color-dark__link);
630
645
 
631
- span i {
646
+ span svg.qld__icon {
632
647
  color: var(--QLD-color-dark__action--secondary);
633
648
  }
634
649
  }
@@ -638,7 +653,7 @@
638
653
  color: var(--QLD-color-dark__link--on-action);
639
654
  text-decoration-color: var(--QLD--color-dark__link--on-action);
640
655
 
641
- span i {
656
+ span svg.qld__icon {
642
657
  color: var(--QLD-color-dark__link--on-action);
643
658
  }
644
659
  }
@@ -668,7 +683,7 @@
668
683
  background: var(--QLD-color-light__background--shade);
669
684
  color: var(--QLD--color-light__link);
670
685
 
671
- span i {
686
+ span svg.qld__icon {
672
687
  color: var(--QLD-color-light__action--secondary);
673
688
  }
674
689
 
@@ -677,7 +692,7 @@
677
692
  color: var(--QLD-color-light__link--on-action);
678
693
  text-decoration-color: var(--QLD--color-light__link--on-action);
679
694
 
680
- span i {
695
+ span svg.qld__icon {
681
696
  color: var(--QLD-color-light__link--on-action);
682
697
  }
683
698
  }
@@ -713,7 +728,7 @@
713
728
  background: var(--QLD-color-light__background--alt-shade);
714
729
  color: var(--QLD-color-light__link);
715
730
 
716
- span i {
731
+ span svg.qld__icon {
717
732
  color: var(--QLD-color-light__action--secondary);
718
733
  }
719
734
 
@@ -722,7 +737,7 @@
722
737
  color: var(--QLD-color-light__link--on-action);
723
738
  text-decoration-color: var(--QLD--color-light__link--on-action);
724
739
 
725
- span i {
740
+ span svg.qld__icon {
726
741
  color: var(--QLD-color-light__link--on-action);
727
742
  }
728
743
  }
@@ -757,7 +772,7 @@
757
772
  background: var(--QLD-color-dark__background--shade);
758
773
  color: var(--QLD-color-dark__link);
759
774
 
760
- span i {
775
+ span svg.qld__icon {
761
776
  color: var(--QLD-color-dark__action--secondary);
762
777
  }
763
778
  &[tabindex="-1"]:focus,
@@ -771,7 +786,7 @@
771
786
  color: var(--QLD-color-dark__link--on-action);
772
787
  text-decoration-color: var(--QLD--color-dark__link--on-action);
773
788
 
774
- span i {
789
+ span svg.qld__icon {
775
790
  color: var(--QLD-color-dark__link--on-action);
776
791
  }
777
792
  }
@@ -809,7 +824,7 @@
809
824
  background: var(--QLD-color-dark__background--alt-shade);
810
825
  color: var(--QLD-color-dark__link);
811
826
 
812
- span i {
827
+ span svg.qld__icon {
813
828
  color: var(--QLD-color-dark__action--secondary);
814
829
  }
815
830
  &[tabindex="-1"]:focus,
@@ -823,7 +838,7 @@
823
838
  color: var(--QLD-color-dark__link--on-action);
824
839
  text-decoration-color: var(--QLD--color-dark__link--on-action);
825
840
 
826
- span i {
841
+ span svg.qld__icon {
827
842
  color: var(--QLD-color-dark__link--on-action);
828
843
  }
829
844
  }
@@ -863,7 +878,7 @@
863
878
 
864
879
  &-container {
865
880
  .qld__tab-button {
866
- span i {
881
+ span svg.qld__icon {
867
882
  color: var(--QLD-color-dark__action--secondary);
868
883
  }
869
884
 
@@ -876,14 +891,14 @@
876
891
  background: var(--QLD-color-dark__action--primary-hover);
877
892
  text-decoration-color: var(--QLD-color-dark__link--on-action);
878
893
 
879
- span i {
894
+ span svg.qld__icon {
880
895
  color: var(--QLD-color-dark__link--on-action);
881
896
  }
882
897
  }
883
898
  }
884
899
 
885
900
  &.active {
886
- span i {
901
+ span svg.qld__icon {
887
902
  color: var(--QLD-color-light__heading);
888
903
  }
889
904
  }
@@ -895,7 +910,7 @@
895
910
  background: var(--QLD-color-light__background--shade);
896
911
  color: var(--QLD-color-light__link);
897
912
 
898
- span i {
913
+ span svg.qld__icon {
899
914
  color: var(--QLD-color-light__action--secondary);
900
915
  }
901
916
 
@@ -904,14 +919,14 @@
904
919
  color: var(--QLD-color-light__link--on-action);
905
920
  text-decoration-color: var(--QLD-color-light__link--on-action);
906
921
 
907
- span i {
922
+ span svg.qld__icon {
908
923
  color: var(--QLD-color-dark__heading);
909
924
  }
910
925
  }
911
926
  }
912
927
 
913
928
  &.active {
914
- span i {
929
+ span svg.qld__icon {
915
930
  color: var(--QLD-color-light__heading);
916
931
  }
917
932
  }
@@ -924,7 +939,7 @@
924
939
  background: var(--QLD-color-light__background--alt-shade);
925
940
  color: var(--QLD-color-light__link);
926
941
 
927
- span i {
942
+ span svg.qld__icon {
928
943
  color: var(--QLD-color-light__action--secondary);
929
944
  }
930
945
 
@@ -933,14 +948,14 @@
933
948
  color: var(--QLD-color-light__link--on-action);
934
949
  text-decoration-color: var(--QLD-color-light__link--on-action);
935
950
 
936
- span i {
951
+ span svg.qld__icon {
937
952
  color: var(--QLD-color-dark__heading);
938
953
  }
939
954
  }
940
955
  }
941
956
 
942
957
  &.active {
943
- span i {
958
+ span svg.qld__icon {
944
959
  color: var(--QLD-color-light__heading);
945
960
  }
946
961
  }
@@ -959,7 +974,7 @@
959
974
  &--dark,
960
975
  &--dark-alt {
961
976
  .qld__tab-button {
962
- span i {
977
+ span svg.qld__icon {
963
978
  color: var(--QLD-color-light__action--secondary);
964
979
  }
965
980
 
@@ -977,13 +992,13 @@
977
992
  color: var(--QLD-color-light__link--on-action);
978
993
  text-decoration-color: var(--QLD-color-light__link--on-action);
979
994
 
980
- span i {
995
+ span svg.qld__icon {
981
996
  color: var(--QLD-color-dark__heading);
982
997
  }
983
998
  }
984
999
 
985
1000
  &.active {
986
- span i {
1001
+ span svg.qld__icon {
987
1002
  color: var(--QLD-color-dark__heading);
988
1003
  }
989
1004
  }
package/src/components/tab/html/component.hbs CHANGED
@@ -51,64 +51,64 @@
51
51
 
52
52
  <div class="qld__tab-container{{#if metadata.theme.value}} qld__tab-container--{{metadata.theme.value}}{{/if}} qld__tab-container__fixed" id="tab-{{assetid}}">
53
53
  <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-left" aria-hidden="true" aria-label="Scroll tab buttons left" tabindex="-1">
54
- <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-left"></use></svg>
54
+ <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-left"></use></svg>
55
55
  </button>
56
56
  <button class="qld__tab-nav__item-scroll tab-overflow-nav-button-right" aria-hidden="true" aria-label="Scroll tab buttons right" tabindex="-1">
57
- <svg class="qld__icon qld__icon--xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
57
+ <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
58
58
  </button>
59
59
  <div class="qld__tabs" role="tablist">
60
60
  {{#ifCond metadata.type.value '==' 'wysiwyg'}}
61
61
  {{#if metadata.title_1.value}}
62
- <button role="tab" class="qld__tab-button active" data-tab="tab1-{{assetid}}" aria-selected="true" aria-controls="tab1-{{assetid}}-content" tabindex="0" id="tab1-{{assetid}}-button"><span>{{#if metadata.icon_1.value}}<i class="{{metadata.icon_1.value}}"></i>{{/if}}{{metadata.title_1.value}}</span></button>
62
+ <button role="tab" class="qld__tab-button active" data-tab="tab1-{{assetid}}" aria-selected="true" aria-controls="tab1-{{assetid}}-content" tabindex="0" id="tab1-{{assetid}}-button"><span>{{#if metadata.icon_1.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_1.value}}"></use></svg>{{/if}}{{metadata.title_1.value}}</span></button>
63
63
  {{/if}}
64
64
  {{#ifCond metadata.tab_num.value '>=' '2'}}
65
65
  {{#if metadata.title_2.value}}
66
- <button role="tab" class="qld__tab-button" data-tab="tab2-{{assetid}}" aria-selected="false" aria-controls="tab2-{{assetid}}-content" tabindex="-1" id="tab2-{{assetid}}-button"><span>{{#if metadata.icon_2.value}}<i class="{{metadata.icon_2.value}}"></i>{{/if}}{{metadata.title_2.value}}</span></button>
66
+ <button role="tab" class="qld__tab-button" data-tab="tab2-{{assetid}}" aria-selected="false" aria-controls="tab2-{{assetid}}-content" tabindex="-1" id="tab2-{{assetid}}-button"><span>{{#if metadata.icon_2.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_2.value}}"></use></svg>{{/if}}{{metadata.title_2.value}}</span></button>
67
67
  {{/if}}
68
68
  {{/ifCond}}
69
69
  {{#ifCond metadata.tab_num.value '>=' '3'}}
70
70
  {{#if metadata.title_3.value}}
71
- <button role="tab" class="qld__tab-button" data-tab="tab3-{{assetid}}" aria-selected="false" aria-controls="tab3-{{assetid}}-content" tabindex="-1" id="tab3-{{assetid}}-button"><span>{{#if metadata.icon_3.value}}<i class="{{metadata.icon_3.value}}"></i>{{/if}}{{metadata.title_3.value}}</span></button>
71
+ <button role="tab" class="qld__tab-button" data-tab="tab3-{{assetid}}" aria-selected="false" aria-controls="tab3-{{assetid}}-content" tabindex="-1" id="tab3-{{assetid}}-button"><span>{{#if metadata.icon_3.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_3.value}}"></use></svg>{{/if}}{{metadata.title_3.value}}</span></button>
72
72
  {{/if}}
73
73
  {{/ifCond}}
74
74
  {{#ifCond metadata.tab_num.value '>=' '4'}}
75
75
  {{#if metadata.title_4.value}}
76
- <button role="tab" class="qld__tab-button" data-tab="tab4-{{assetid}}" aria-selected="false" aria-controls="tab4-{{assetid}}-content" tabindex="-1" id="tab4-{{assetid}}-button"><span>{{#if metadata.icon_4.value}}<i class="{{metadata.icon_4.value}}"></i>{{/if}}{{metadata.title_4.value}}</span></button>
76
+ <button role="tab" class="qld__tab-button" data-tab="tab4-{{assetid}}" aria-selected="false" aria-controls="tab4-{{assetid}}-content" tabindex="-1" id="tab4-{{assetid}}-button"><span>{{#if metadata.icon_4.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_4.value}}"></use></svg>{{/if}}{{metadata.title_4.value}}</span></button>
77
77
  {{/if}}
78
78
  {{/ifCond}}
79
79
  {{#ifCond metadata.tab_num.value '>=' '5'}}
80
80
  {{#if metadata.title_5.value}}
81
- <button role="tab" class="qld__tab-button" data-tab="tab5-{{assetid}}" aria-selected="false" aria-controls="tab5-{{assetid}}-content" tabindex="-1" id="tab5-{{assetid}}-button"><span>{{#if metadata.icon_5.value}}<i class="{{metadata.icon_5.value}}"></i>{{/if}}{{metadata.title_5.value}}</span></button>
81
+ <button role="tab" class="qld__tab-button" data-tab="tab5-{{assetid}}" aria-selected="false" aria-controls="tab5-{{assetid}}-content" tabindex="-1" id="tab5-{{assetid}}-button"><span>{{#if metadata.icon_5.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_5.value}}"></use></svg>{{/if}}{{metadata.title_5.value}}</span></button>
82
82
  {{/if}}
83
83
  {{/ifCond}}
84
84
  {{#ifCond metadata.tab_num.value '>=' '6'}}
85
85
  {{#if metadata.title_6.value}}
86
- <button role="tab" class="qld__tab-button" data-tab="tab6-{{assetid}}" aria-selected="false" aria-controls="tab6-{{assetid}}-content" tabindex="-1" id="tab6-{{assetid}}-button"><span>{{#if metadata.icon_6.value}}<i class="{{metadata.icon_6.value}}"></i>{{/if}}{{metadata.title_6.value}}</span></button>
86
+ <button role="tab" class="qld__tab-button" data-tab="tab6-{{assetid}}" aria-selected="false" aria-controls="tab6-{{assetid}}-content" tabindex="-1" id="tab6-{{assetid}}-button"><span>{{#if metadata.icon_6.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_6.value}}"></use></svg>{{/if}}{{metadata.title_6.value}}</span></button>
87
87
  {{/if}}
88
88
  {{/ifCond}}
89
89
  {{#ifCond metadata.tab_num.value '>=' '7'}}
90
90
  {{#if metadata.title_7.value}}
91
- <button role="tab" class="qld__tab-button" data-tab="tab7-{{assetid}}" aria-selected="false" aria-controls="tab7-{{assetid}}-content" tabindex="-1" id="tab7-{{assetid}}-button"><span>{{#if metadata.icon_7.value}}<i class="{{metadata.icon_7.value}}"></i>{{/if}}{{metadata.title_7.value}}</span></button>
91
+ <button role="tab" class="qld__tab-button" data-tab="tab7-{{assetid}}" aria-selected="false" aria-controls="tab7-{{assetid}}-content" tabindex="-1" id="tab7-{{assetid}}-button"><span>{{#if metadata.icon_7.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_7.value}}"></use></svg>{{/if}}{{metadata.title_7.value}}</span></button>
92
92
  {{/if}}
93
93
  {{/ifCond}}
94
94
  {{#ifCond metadata.tab_num.value '>=' '8'}}
95
95
  {{#if metadata.title_8.value}}
96
- <button role="tab" class="qld__tab-button" data-tab="tab8-{{assetid}}" aria-selected="false" aria-controls="tab8-{{assetid}}-content" tabindex="-1" id="tab8-{{assetid}}-button"><span>{{#if metadata.icon_8.value}}<i class="{{metadata.icon_8.value}}"></i>{{/if}}{{metadata.title_8.value}}</span></button>
96
+ <button role="tab" class="qld__tab-button" data-tab="tab8-{{assetid}}" aria-selected="false" aria-controls="tab8-{{assetid}}-content" tabindex="-1" id="tab8-{{assetid}}-button"><span>{{#if metadata.icon_8.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_8.value}}"></use></svg>{{/if}}{{metadata.title_8.value}}</span></button>
97
97
  {{/if}}
98
98
  {{/ifCond}}
99
99
  {{#ifCond metadata.tab_num.value '>=' '9'}}
100
100
  {{#if metadata.title_9.value}}
101
- <button role="tab" class="qld__tab-button" data-tab="tab9-{{assetid}}" aria-selected="false" aria-controls="tab9-{{assetid}}-content" tabindex="-1" id="tab9-{{assetid}}-button"><span>{{#if metadata.icon_9.value}}<i class="{{metadata.icon_9.value}}"></i>{{/if}}{{metadata.title_9.value}}</span></button>
101
+ <button role="tab" class="qld__tab-button" data-tab="tab9-{{assetid}}" aria-selected="false" aria-controls="tab9-{{assetid}}-content" tabindex="-1" id="tab9-{{assetid}}-button"><span>{{#if metadata.icon_9.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_9.value}}"></use></svg>{{/if}}{{metadata.title_9.value}}</span></button>
102
102
  {{/if}}
103
103
  {{/ifCond}}
104
104
  {{#ifCond metadata.tab_num.value '>=' '10'}}
105
105
  {{#if metadata.title_10.value}}
106
- <button role="tab" class="qld__tab-button" data-tab="tab10-{{assetid}}" aria-selected="false" aria-controls="tab10-{{assetid}}-content" tabindex="-1" id="tab10-{{assetid}}-button"><span>{{#if metadata.icon_10.value}}<i class="{{metadata.icon_10.value}}"></i>{{/if}}{{metadata.title_10.value}}</span></button>
106
+ <button role="tab" class="qld__tab-button" data-tab="tab10-{{assetid}}" aria-selected="false" aria-controls="tab10-{{assetid}}-content" tabindex="-1" id="tab10-{{assetid}}-button"><span>{{#if metadata.icon_10.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.icon_10.value}}"></use></svg>{{/if}}{{metadata.title_10.value}}</span></button>
107
107
  {{/if}}
108
108
  {{/ifCond}}
109
109
  {{else}}
110
110
  {{#each ../component.assets}}
111
- <button role="tab" class="qld__tab-button {{#ifCond @key '==' 0}}active{{/ifCond}}" data-tab="tab{{@key}}-{{this.assetid}}" aria-selected="{{#ifCond @key '==' 0}}true{{else}}false{{/ifCond}}" aria-controls="tab{{@key}}-{{this.assetid}}-content" tabindex="{{#ifCond @key '==' 0}}0{{else}}-1{{/ifCond}}" id="tab{{@key}}-button"><span>{{#if this.metadata.tabIcon.value}}<i class="{{this.metadata.tabIcon.value}}"></i>{{/if}}{{this.name}}</span></button>
111
+ <button role="tab" class="qld__tab-button {{#ifCond @key '==' 0}}active{{/ifCond}}" data-tab="tab{{@key}}-{{this.assetid}}" aria-selected="{{#ifCond @key '==' 0}}true{{else}}false{{/ifCond}}" aria-controls="tab{{@key}}-{{this.assetid}}-content" tabindex="{{#ifCond @key '==' 0}}0{{else}}-1{{/ifCond}}" id="tab{{@key}}-button"><span>{{#if this.metadata.tabIcon.value}}<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{this.metadata.tabIcon.value}}"></use></svg>{{/if}}{{this.name}}</span></button>
112
112
  {{/each}}
113
113
  {{/ifCond}}
114
114
  </div>