@qhealth-design-system/core 1.20.0 → 1.20.2
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.
- package/.storybook/assets/storybook.scss +8 -1
- package/CHANGELOG.md +4 -0
- package/package.json +1 -1
- package/src/components/basic_search/html/component.hbs +8 -0
- package/src/components/breadcrumbs/css/component.scss +4 -0
- package/src/helpers/global-helpers.js +6 -2
- package/src/stories/Footer/Footer.stories.js +1 -1
- package/src/stories/Header/Header.js +13 -29
- package/src/stories/Header/Header.stories.js +24 -14
- package/src/stories/Navbar/Navbar.js +1 -3
- package/src/stories/Navbar/Navbar.stories.js +19 -8
- package/src/stories/SelectBox/SelectBox.js +2 -2
- package/src/stories/Tags/Tags.js +3 -3
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
#storybook-docs {
|
|
4
4
|
/* Reset the styling of the radio buttons */
|
|
5
|
-
.docblock-argstable input[type="radio"] {
|
|
5
|
+
.docblock-argstable .docblock-argstable-body input[type="radio"] {
|
|
6
6
|
border: initial;
|
|
7
7
|
clip: auto;
|
|
8
8
|
height: auto;
|
|
@@ -11,6 +11,13 @@
|
|
|
11
11
|
position: static;
|
|
12
12
|
width: auto;
|
|
13
13
|
}
|
|
14
|
+
|
|
15
|
+
/* Remove the default chevron down in SB select elements */
|
|
16
|
+
.docblock-argstable .docblock-argstable-body .css-1x3be6s {
|
|
17
|
+
> svg {
|
|
18
|
+
display: none;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
14
21
|
}
|
|
15
22
|
|
|
16
23
|
.figma-link {
|
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -191,6 +191,9 @@
|
|
|
191
191
|
{{#each listMetadata.assetLineage}}
|
|
192
192
|
{{#each (split this "+")}}
|
|
193
193
|
<li>{{this}}</li>
|
|
194
|
+
{{#unless @last}}
|
|
195
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
196
|
+
{{/unless}}
|
|
194
197
|
{{/each}}
|
|
195
198
|
{{/each}}
|
|
196
199
|
</ul>
|
|
@@ -200,7 +203,9 @@
|
|
|
200
203
|
<div class="qld__breadcrumbs qld__search__result-breadcrumbs" aria-label="breadcrumb">
|
|
201
204
|
<ul class="qld__link-list qld__link-list--inline">
|
|
202
205
|
<li>Services</li>
|
|
206
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
203
207
|
<li>{{itemAt (split title '-') '0' }}</li>
|
|
208
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
204
209
|
<li>{{{title}}}</li>
|
|
205
210
|
</ul>
|
|
206
211
|
</div>
|
|
@@ -209,7 +214,9 @@
|
|
|
209
214
|
<div class="qld__breadcrumbs qld__search__result-breadcrumbs" aria-label="breadcrumb">
|
|
210
215
|
<ul class="qld__link-list qld__link-list--inline">
|
|
211
216
|
<li>Services</li>
|
|
217
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
212
218
|
<li>Locations</li>
|
|
219
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
213
220
|
<li>{{{title}}}</li>
|
|
214
221
|
</ul>
|
|
215
222
|
</div>
|
|
@@ -218,6 +225,7 @@
|
|
|
218
225
|
<div class="qld__breadcrumbs qld__search__result-breadcrumbs" aria-label="breadcrumb">
|
|
219
226
|
<ul class="qld__link-list qld__link-list--inline">
|
|
220
227
|
<li>Services</li>
|
|
228
|
+
<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-right"></use></svg>
|
|
221
229
|
<li>{{{title}}}</li>
|
|
222
230
|
</ul>
|
|
223
231
|
</div>
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
// Validate that the SVG path has the correct extension and is same-origin
|
|
2
2
|
export const validateInternalSvgPath = (path) => {
|
|
3
|
-
// Local testing and
|
|
4
|
-
|
|
3
|
+
// Local testing, chromatic, and github builds are safe
|
|
4
|
+
const allowedOrigins = ["http://localhost:8080", "http://localhost:6006", "chromatic.com", "https://qld-health-online-team.github.io"];
|
|
5
|
+
// Skip validation
|
|
6
|
+
if (allowedOrigins.some((origin) => window.location.origin.includes(origin))) {
|
|
7
|
+
return true;
|
|
8
|
+
}
|
|
5
9
|
|
|
6
10
|
let shouldValidate = true;
|
|
7
11
|
|
|
@@ -118,7 +118,7 @@ const renderFooter = (args) => {
|
|
|
118
118
|
footerAcknowledgements: { value: rest.footerAcknowledgements },
|
|
119
119
|
footerCopyrightMessage: { value: rest.footerCopyrightMessage },
|
|
120
120
|
footerLogoLink: { value: rest.footerLogoLink },
|
|
121
|
-
coreSiteIcons: { value:
|
|
121
|
+
coreSiteIcons: { value: args.site.metadata.coreSiteIcons.value },
|
|
122
122
|
},
|
|
123
123
|
};
|
|
124
124
|
|
|
@@ -5,30 +5,18 @@ import { renderNavbar, navbarArgs } from "../Navbar/Navbar";
|
|
|
5
5
|
|
|
6
6
|
// Render function for Storybook / pages
|
|
7
7
|
export const renderHeader = (args) => {
|
|
8
|
-
const navbarHTML = renderNavbar(navbarArgs);
|
|
8
|
+
const navbarHTML = renderNavbar({ ...navbarArgs, ...args });
|
|
9
9
|
|
|
10
10
|
const template = Handlebars.compile(Template);
|
|
11
11
|
const headerHTML = template({
|
|
12
12
|
site: {
|
|
13
13
|
metadata: {
|
|
14
|
-
defaultBannerContainedBanner: {
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
imageContainedLayoutTexture: {
|
|
21
|
-
value: args.imageContainedLayoutTexture,
|
|
22
|
-
},
|
|
23
|
-
containedBannerImageTexturePosition: {
|
|
24
|
-
value: args.containedBannerImageTexturePosition,
|
|
25
|
-
},
|
|
26
|
-
containedBannerImageTextureSize: {
|
|
27
|
-
value: args.containedBannerImageTextureSize,
|
|
28
|
-
},
|
|
29
|
-
containedBannerImageTextureRepeat: {
|
|
30
|
-
value: args.containedBannerImageTextureRepeat,
|
|
31
|
-
},
|
|
14
|
+
defaultBannerContainedBanner: { value: args.defaultBannerContainedBanner },
|
|
15
|
+
imageContainedLayoutBackground: { value: args.imageContainedLayoutBackground },
|
|
16
|
+
imageContainedLayoutTexture: { value: args.imageContainedLayoutTexture },
|
|
17
|
+
containedBannerImageTexturePosition: { value: args.containedBannerImageTexturePosition },
|
|
18
|
+
containedBannerImageTextureSize: { value: args.containedBannerImageTextureSize },
|
|
19
|
+
containedBannerImageTextureRepeat: { value: args.containedBannerImageTextureRepeat },
|
|
32
20
|
sitePreHeaderURL: { value: args.sitePreHeaderURL },
|
|
33
21
|
sitePreHeaderTheme: { value: args.sitePreHeaderTheme },
|
|
34
22
|
sitePreHeaderText: { value: args.sitePreHeaderText },
|
|
@@ -39,9 +27,7 @@ export const renderHeader = (args) => {
|
|
|
39
27
|
|
|
40
28
|
siteShowLogo: { value: args.siteShowLogo },
|
|
41
29
|
siteLogoSecondary: { value: args.siteLogoSecondary },
|
|
42
|
-
siteLogoSecondaryMobile: {
|
|
43
|
-
value: args.siteLogoSecondaryMobile,
|
|
44
|
-
},
|
|
30
|
+
siteLogoSecondaryMobile: { value: args.siteLogoSecondaryMobile },
|
|
45
31
|
siteTitle: { value: args.siteTitle },
|
|
46
32
|
siteSubline: { value: args.siteSubline },
|
|
47
33
|
siteSearchAsset: { value: args.siteSearchAsset },
|
|
@@ -53,7 +39,7 @@ export const renderHeader = (args) => {
|
|
|
53
39
|
mainNavCtaTwoText: { value: args.mainNavCtaTwoText },
|
|
54
40
|
mainNavCtaTwoIcon: { value: args.mainNavCtaTwoIcon },
|
|
55
41
|
siteHeaderMainTheme: { value: args.siteHeaderMainTheme },
|
|
56
|
-
coreSiteIcons: { value: args.coreSiteIcons },
|
|
42
|
+
coreSiteIcons: { value: args.site.metadata.coreSiteIcons.value },
|
|
57
43
|
},
|
|
58
44
|
data: { assetid: "123" }, // fallback asset ID
|
|
59
45
|
},
|
|
@@ -74,12 +60,11 @@ export const headerArgs = {
|
|
|
74
60
|
containedBannerImageTextureSize: "auto",
|
|
75
61
|
containedBannerImageTextureRepeat: "",
|
|
76
62
|
sitePreHeaderURL: "https://www.qld.gov.au",
|
|
77
|
-
sitePreHeaderTheme: "
|
|
63
|
+
sitePreHeaderTheme: "",
|
|
78
64
|
sitePreHeaderText: "Queensland Government",
|
|
79
|
-
siteHeaderDefaultLogo: "
|
|
80
|
-
sitePreHeaderLogo:
|
|
81
|
-
|
|
82
|
-
siteLogoUrl: "hhttps://www.qld.gov.au/",
|
|
65
|
+
siteHeaderDefaultLogo: "qgov-coa.svg",
|
|
66
|
+
sitePreHeaderLogo: "https://www.childrens.health.qld.gov.au/__data/assets/file/0020/163334/CoA-Black-Mobile.svg",
|
|
67
|
+
siteLogoUrl: "https://www.qld.gov.au/",
|
|
83
68
|
siteLogo: "",
|
|
84
69
|
siteShowLogo: "yes",
|
|
85
70
|
siteLogoSecondary: "",
|
|
@@ -95,5 +80,4 @@ export const headerArgs = {
|
|
|
95
80
|
mainNavCtaTwoText: "Contact",
|
|
96
81
|
mainNavCtaTwoIcon: "location",
|
|
97
82
|
siteHeaderMainTheme: "",
|
|
98
|
-
coreSiteIcons: "/QLD-icons.svg",
|
|
99
83
|
};
|
|
@@ -17,29 +17,39 @@ export default {
|
|
|
17
17
|
description: "Layout for displaying the contained banner if used.",
|
|
18
18
|
},
|
|
19
19
|
siteHeaderMainTheme: {
|
|
20
|
-
control: {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
control: {
|
|
21
|
+
type: "radio",
|
|
22
|
+
labels: {
|
|
23
|
+
"": "Light",
|
|
24
|
+
"qld__header__main--dark": "Dark",
|
|
25
|
+
"qld__header__main--dark-alt": "Dark Alternative",
|
|
26
|
+
},
|
|
26
27
|
},
|
|
28
|
+
options: ["", "qld__header__main--dark", "qld__header__main--dark-alt"],
|
|
27
29
|
description: "Main header colour theme.",
|
|
28
30
|
},
|
|
29
31
|
sitePreHeaderTheme: {
|
|
30
|
-
control: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
control: {
|
|
33
|
+
type: "radio",
|
|
34
|
+
labels: {
|
|
35
|
+
"": "Light",
|
|
36
|
+
"qld__header__pre-header--dark": "Dark",
|
|
37
|
+
"qld__header__pre-header--dark-alt": "Dark Alternative",
|
|
38
|
+
},
|
|
36
39
|
},
|
|
40
|
+
options: ["", "qld__header__pre-header--dark", "qld__header__pre-header--dark-alt"],
|
|
37
41
|
description: "Pre header colour theme.",
|
|
38
42
|
},
|
|
39
43
|
siteShowLogo: {
|
|
40
|
-
control:
|
|
44
|
+
control: {
|
|
45
|
+
type: "radio",
|
|
46
|
+
labels: {
|
|
47
|
+
yes: "Yes",
|
|
48
|
+
no: "No",
|
|
49
|
+
},
|
|
50
|
+
},
|
|
41
51
|
options: ["yes", "no"],
|
|
42
|
-
description: "
|
|
52
|
+
description: "Whether the Queensland Government logo is displayed.",
|
|
43
53
|
},
|
|
44
54
|
containedBannerImageTexturePosition: {
|
|
45
55
|
control: { type: "select" },
|
|
@@ -21,8 +21,6 @@ export const navbarArgs = {
|
|
|
21
21
|
mainNavCtaTwoText: "Contact",
|
|
22
22
|
mainNavCtaTwoIcon: "location",
|
|
23
23
|
|
|
24
|
-
coreSiteIcons: "/QLD-icons.svg",
|
|
25
|
-
|
|
26
24
|
// Add this to show the "View all" link
|
|
27
25
|
mainNavViewAllShow: "true",
|
|
28
26
|
};
|
|
@@ -102,7 +100,7 @@ export const renderNavbar = (args) => {
|
|
|
102
100
|
mainNavCtaTwoText: { value: args.mainNavCtaTwoText },
|
|
103
101
|
mainNavCtaTwoIcon: { value: args.mainNavCtaTwoIcon },
|
|
104
102
|
|
|
105
|
-
coreSiteIcons: { value: args.coreSiteIcons },
|
|
103
|
+
coreSiteIcons: { value: args.site.metadata.coreSiteIcons.value },
|
|
106
104
|
|
|
107
105
|
mainNavViewAllShow: { value: args.mainNavViewAllShow },
|
|
108
106
|
},
|
|
@@ -8,22 +8,34 @@ export default {
|
|
|
8
8
|
|
|
9
9
|
argTypes: {
|
|
10
10
|
mainNavStyle: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
description: "Whether component is light or dark themed.",
|
|
12
|
+
control: {
|
|
13
|
+
type: "radio",
|
|
14
|
+
labels: {
|
|
15
|
+
"": "Light",
|
|
16
|
+
"qld__main-nav--dark": "Dark",
|
|
17
|
+
},
|
|
16
18
|
},
|
|
19
|
+
options: ["", "qld__main-nav--dark"],
|
|
20
|
+
default: "",
|
|
17
21
|
},
|
|
18
|
-
|
|
19
22
|
mainNavMegaMenuShow: {
|
|
20
|
-
|
|
23
|
+
description: "Whether the mega menu is displayed.",
|
|
24
|
+
control: {
|
|
25
|
+
type: "radio",
|
|
26
|
+
labels: {
|
|
27
|
+
true: "Yes",
|
|
28
|
+
false: "No",
|
|
29
|
+
},
|
|
30
|
+
},
|
|
21
31
|
options: ["true", "false"],
|
|
32
|
+
default: "true",
|
|
22
33
|
},
|
|
23
34
|
mainNavPageDescLevelTwo: {
|
|
24
35
|
control: "boolean",
|
|
25
36
|
},
|
|
26
37
|
mainNavHomeIconShow: {
|
|
38
|
+
description: "Whether the home icon is displayed.",
|
|
27
39
|
control: "boolean",
|
|
28
40
|
},
|
|
29
41
|
mainNavDesktopHide: {
|
|
@@ -37,7 +49,6 @@ export default {
|
|
|
37
49
|
mainNavCtaTwo: { table: { disable: true } },
|
|
38
50
|
mainNavCtaTwoText: { table: { disable: true } },
|
|
39
51
|
mainNavCtaTwoIcon: { table: { disable: true } },
|
|
40
|
-
coreSiteIcons: { table: { disable: true } },
|
|
41
52
|
sitePreHeaderTheme: { table: { disable: true } },
|
|
42
53
|
},
|
|
43
54
|
|
|
@@ -21,7 +21,7 @@ export const SelectBox = ({ id, extraClass, isFilled, isRequired, isDisabled, is
|
|
|
21
21
|
stateMessage = `
|
|
22
22
|
<span id="${id}-state-message" class="qld__input--success">
|
|
23
23
|
<svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
24
|
-
<use href="
|
|
24
|
+
<use href="QLD-icons.svg#status-success"></use>
|
|
25
25
|
</svg>
|
|
26
26
|
<span>${succcessMessage}</span>
|
|
27
27
|
</span>`;
|
|
@@ -31,7 +31,7 @@ export const SelectBox = ({ id, extraClass, isFilled, isRequired, isDisabled, is
|
|
|
31
31
|
stateMessage = `
|
|
32
32
|
<span id="${id}-state-message" class="qld__input--error">
|
|
33
33
|
<svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
34
|
-
<use href="
|
|
34
|
+
<use href="QLD-icons.svg#status-error"></use>
|
|
35
35
|
</svg>
|
|
36
36
|
<span>${errorMessage}</span>
|
|
37
37
|
</span>`;
|
package/src/stories/Tags/Tags.js
CHANGED
|
@@ -24,7 +24,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
|
|
|
24
24
|
<div class="qld__tag qld__tag--filter">
|
|
25
25
|
${text}
|
|
26
26
|
<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
|
|
27
|
-
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="
|
|
27
|
+
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="QLD-icons.svg#close"></use></svg>
|
|
28
28
|
<span class="sr-only">close</span>
|
|
29
29
|
</button>
|
|
30
30
|
</div>
|
|
@@ -33,7 +33,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
|
|
|
33
33
|
<div class="qld__tag qld__tag--filter">
|
|
34
34
|
${text}
|
|
35
35
|
<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
|
|
36
|
-
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="
|
|
36
|
+
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="QLD-icons.svg#close"></use></svg>
|
|
37
37
|
<span class="sr-only">close</span>
|
|
38
38
|
</button>
|
|
39
39
|
</div>
|
|
@@ -42,7 +42,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
|
|
|
42
42
|
<div class="qld__tag qld__tag--filter">
|
|
43
43
|
${text}
|
|
44
44
|
<button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
|
|
45
|
-
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="
|
|
45
|
+
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="QLD-icons.svg#close"></use></svg>
|
|
46
46
|
<span class="sr-only">close</span>
|
|
47
47
|
</button>
|
|
48
48
|
</div>
|