@qhealth-design-system/core 1.20.1 → 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.
Files changed (12) hide show
  1. package/.storybook/assets/storybook.scss +8 -1
  2. package/CHANGELOG.md +2 -0
  3. package/package.json +1 -1
  4. package/src/components/breadcrumbs/css/component.scss +4 -0
  5. package/src/helpers/global-helpers.js +6 -2
  6. package/src/stories/Footer/Footer.stories.js +1 -1
  7. package/src/stories/Header/Header.js +13 -29
  8. package/src/stories/Header/Header.stories.js +24 -14
  9. package/src/stories/Navbar/Navbar.js +1 -3
  10. package/src/stories/Navbar/Navbar.stories.js +19 -8
  11. package/src/stories/SelectBox/SelectBox.js +2 -2
  12. package/src/stories/Tags/Tags.js +3 -3
package/.storybook/assets/storybook.scss CHANGED
@@ -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
@@ -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.20.2 - 2026-03-12
11
+
10
12
  ## 1.20.1 - 2026-02-25
11
13
 
12
14
  ## 1.20.0 - 2026-02-25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qhealth-design-system/core",
3
- "version": "1.20.1",
3
+ "version": "1.20.2",
4
4
  "description": "",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/breadcrumbs/css/component.scss CHANGED
@@ -47,6 +47,10 @@
47
47
  align-items: center;
48
48
  align-content: center;
49
49
  }
50
+
51
+ .qld__search__result & {
52
+ flex-wrap: wrap;
53
+ }
50
54
  }
51
55
 
52
56
  > .qld__link-list {
package/src/helpers/global-helpers.js CHANGED
@@ -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 chromatic builds are safe, skip validation
4
- if (window.location.origin === "http://localhost:8080" || window.location.origin === "http://localhost:6006" || window.location.origin.includes("chromatic.com")) return true;
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
 
package/src/stories/Footer/Footer.stories.js CHANGED
@@ -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: "/QLD-icons.svg" },
121
+ coreSiteIcons: { value: args.site.metadata.coreSiteIcons.value },
122
122
  },
123
123
  };
124
124
 
package/src/stories/Header/Header.js CHANGED
@@ -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
- value: args.defaultBannerContainedBanner,
16
- },
17
- imageContainedLayoutBackground: {
18
- value: args.imageContainedLayoutBackground,
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: "qld__pre-header--light",
63
+ sitePreHeaderTheme: "",
78
64
  sitePreHeaderText: "Queensland Government",
79
- siteHeaderDefaultLogo: "/qgov-coa.svg",
80
- sitePreHeaderLogo:
81
- "https://www.childrens.health.qld.gov.au/__data/assets/file/0020/163334/CoA-Black-Mobile.svg",
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
  };
package/src/stories/Header/Header.stories.js CHANGED
@@ -17,29 +17,39 @@ export default {
17
17
  description: "Layout for displaying the contained banner if used.",
18
18
  },
19
19
  siteHeaderMainTheme: {
20
- control: { type: "radio" },
21
- options: ["Light", "Dark", "Dark Alternative"],
22
- mapping: {
23
- Light: "",
24
- Dark: "qld__header__main--dark",
25
- "Dark Alternative": "qld__header__main--dark-alt",
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: { type: "radio" },
31
- options: ["Light", "Dark", "Dark Alternative"],
32
- mapping: {
33
- Light: "",
34
- Dark: "qld__header__pre-header--dark",
35
- "Dark Alternative": "qld__header__pre-header--dark-alt",
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: "radio",
44
+ control: {
45
+ type: "radio",
46
+ labels: {
47
+ yes: "Yes",
48
+ no: "No",
49
+ },
50
+ },
41
51
  options: ["yes", "no"],
42
- description: "Show the Queensland Government logo",
52
+ description: "Whether the Queensland Government logo is displayed.",
43
53
  },
44
54
  containedBannerImageTexturePosition: {
45
55
  control: { type: "select" },
package/src/stories/Navbar/Navbar.js CHANGED
@@ -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
  },
package/src/stories/Navbar/Navbar.stories.js CHANGED
@@ -8,22 +8,34 @@ export default {
8
8
 
9
9
  argTypes: {
10
10
  mainNavStyle: {
11
- control: "radio",
12
- options: ["Light", "Dark"],
13
- mapping: {
14
- Light: "",
15
- Dark: "qld__main-nav--dark",
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
- control: "radio",
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
 
package/src/stories/SelectBox/SelectBox.js CHANGED
@@ -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="/QLD-icons.svg#status-success"></use>
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="/QLD-icons.svg#status-error"></use>
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="/QLD-icons.svg#close"></use></svg>
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="/QLD-icons.svg#close"></use></svg>
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="/QLD-icons.svg#close"></use></svg>
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>