@qhealth-design-system/core 1.21.0 → 1.21.1

package/.storybook/globals.js

@@ -38,6 +38,10 @@ export const dummyText =
 
 export const dummyLink = "https://www.google.com";
 
+// Path to the icon sprite, relative to the Storybook preview iframe. Used for
+// <use href> references and the coreSiteIcons metadata across stories.
+export const iconSpritePath = "QLD-icons.svg";
+
 const dsBase = "https://www.designsystem.qld.gov.au";
 const figmaBase = "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit";
 

package/.storybook/helper-functions.js

@@ -15,7 +15,3 @@ export const cleanStorybookUrls = (html) => {
 export const themeWrapper = (theme, content) => {
     return `<div class="${theme}" style="padding: 2rem;">${content}</div>`;
 };
-
-export const getSvgPath = () => {
-    return window.location.origin === "https://qld-health-online-team.github.io" ? "/design-system/QLD-icons.svg" : "/QLD-icons.svg";
-};

package/.storybook/preview-head.html

@@ -1,2 +1,2 @@
 <!-- Add external links here, such as cdn scripts -->
-<script src="https://kit.fontawesome.com/1402b3ed47.js" crossorigin="anonymous"></script>
+<script src="https://kit.fontawesome.com/66722b4f34.js" crossorigin="anonymous"></script>

package/.storybook/preview.js

@@ -2,22 +2,7 @@ import "./assets/index.js"; // Storybook JS import
 import "./assets/index.scss"; // Storybook styles import from core
 import "./assets/storybook.scss"; // Storybook specific styles
 import { INITIAL_VIEWPORTS } from "storybook/viewport";
-import { viewports, themes, themeColours } from "./globals.js";
-import { getSvgPath } from "./helper-functions.js";
-
-const iconsIds = fetch(getSvgPath())
-    .then((res) => res.text())
-    .then((svgText) => {
-        // Parse the text as XML
-        const parser = new DOMParser();
-        const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
-
-        // Select all <symbol> elements
-        const symbols = svgDoc.querySelectorAll("symbol");
-
-        // Map their IDs
-        return Array.from(symbols).map((sym) => sym.id);
-    });
+import { viewports, themes, themeColours, iconSpritePath } from "./globals.js";
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
@@ -83,13 +68,11 @@ const preview = {
     },
     args: {
         // Ensure GitHub hosted page uses correct icon path
-        site: { metadata: { coreSiteIcons: { value: getSvgPath() } } },
-        iconIDs: await iconsIds,
+        site: { metadata: { coreSiteIcons: { value: iconSpritePath } } },
     },
     argTypes: {
         // Remove the site metadata from the controls
         site: { table: { disable: true } },
-        iconIDs: { table: { disable: true } },
     },
     decorators: [
         (storyFn, context) => {

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.21.1 - 2026-06-10
+
 ## 1.21.0 - 2026-06-09
 
 ## 1.20.2 - 2026-03-12

package/eslint.config.mjs

@@ -52,6 +52,11 @@ export default defineConfig([
             "valid-typeof": "warn",
         },
     },
+    {
+        // Storybook config files (main.js, prepare-storybook.js, etc.) run in Node.
+        files: [".storybook/**/*.js"],
+        languageOptions: { globals: globals.node },
+    },
     { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
     { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
     { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.21.0",
+    "version": "1.21.1",
     "description": "",
     "repository": {
         "type": "git",

package/src/helpers/Handlebars/renderEncoded.js

@@ -1,9 +1,14 @@
 module.exports = function (string) {
     if (!string) return "";
+    let cleaned = string;
+    let prev;
 
-    return string
-        .replace(/<[^>]*>/g, "")
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
+    while (cleaned !== prev) {
+        prev = cleaned;
+        // Remove any HTML tags
+        cleaned = cleaned.replace(/<[^>]*>/g, "");
+    }
+
+    // Convert the last remaining special characters to HTML entities
+    return cleaned.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 };

package/src/stories/Banner/bannerAdvanced.stories.js

@@ -1,5 +1,5 @@
 import Template from "../../components/banner_advanced/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import ToowoombaImage from "../Cards/Toowoomba-web.jpeg";
 
 const mockLineage = [
@@ -10,7 +10,7 @@ const mockLineage = [
 
 const mockSite = {
     metadata: {
-        coreSiteIcons: { value: "/QLD-icons.svg" },
+        coreSiteIcons: { value: iconSpritePath },
         defaultBannerTexture: { value: "" },
         defaultBannerTextureDark: { value: "" },
     },

package/src/stories/Banner/bannerBasic.stories.js

@@ -1,5 +1,5 @@
 import Template from "../../components/banner_basic/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import bannerTexture from "../../assets/img/banner-bg.png";
 
 const mockLineage = [
@@ -10,7 +10,7 @@ const mockLineage = [
 
 const mockSite = {
     metadata: {
-        coreSiteIcons: { value: "/QLD-icons.svg" },
+        coreSiteIcons: { value: iconSpritePath },
         defaultBannerTexture: { value: "" },
         defaultBannerTextureDark: { value: "" },
     },

package/src/stories/Button/Button.stories.js

@@ -1,4 +1,4 @@
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 
 function rowDecorator(Story) {
     return '<div style="display: flex; gap: 5px">\n' + `${Story()}` + "    </div>";
@@ -17,13 +17,13 @@ function renderButtonList({ variant }) {
         `<button type="button" class="${btnClasses}">Default</button>\n\n` +
         `<button type="button" class="${btnClasses} qld__btn--icon-lead">\n` +
         '    <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use' +
-        ' href="/QLD-icons.svg#announcement"></use></svg>\n' +
+        ` href="${iconSpritePath}#announcement"></use></svg>\n` +
         "    Leading icon\n" +
         "</button>\n\n" +
         `<button type="button" class="${btnClasses} qld__btn--icon-trail">\n` +
         "   Trailing icon\n" +
         '   <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use' +
-        ' href="/QLD-icons.svg#announcement"></use></svg>\n' +
+        ` href="${iconSpritePath}#announcement"></use></svg>\n` +
         "</button>\n\n" +
         `<button type="button" class="${btnClasses}" disabled="">Disabled</button>`
     );

package/src/stories/Cards/CardFeature.stories.js

@@ -1,9 +1,9 @@
 import Template from "../../components/card_feature/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import ToowoombaIMage from "./Toowoomba-web.jpeg";
 
 const mockSite = {
-    metadata: { coreSiteIcons: { value: "/QLD-icons.svg" } },
+    metadata: { coreSiteIcons: { value: iconSpritePath } },
 };
 
 function buildData(args) {

package/src/stories/Cards/CardMultiAction.stories.js

@@ -1,9 +1,9 @@
 import Template from "../../components/card_multi_action/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import ToowoombaImage from "./Toowoomba-web.jpeg";
 
 const mockSite = {
-    metadata: { coreSiteIcons: { value: "/QLD-icons.svg" } },
+    metadata: { coreSiteIcons: { value: iconSpritePath } },
 };
 
 function makeChild(id, name, description = "", icon = "fal fa-heart", ctas = []) {

package/src/stories/Cards/CardNoAction.stories.js

@@ -1,9 +1,9 @@
 import Template from "../../components/card_no_action/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import ToowoombaImage from "./Toowoomba-web.jpeg";
 
 const mockSite = {
-    metadata: { coreSiteIcons: { value: "/QLD-icons.svg" } },
+    metadata: { coreSiteIcons: { value: iconSpritePath } },
 };
 
 function makeChild(id, name, description = "", icon = "fal fa-heart", footerContent = "") {

package/src/stories/Cards/CardSingleAction.stories.js

@@ -1,9 +1,9 @@
 import Template from "../../components/card_single_action/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 import ToowoombaImage from "./Toowoomba-web.jpeg";
 
 const mockSite = {
-    metadata: { coreSiteIcons: { value: "/QLD-icons.svg" } },
+    metadata: { coreSiteIcons: { value: iconSpritePath } },
 };
 
 function makeChild(id, name, description = "", icon = "fal fa-heart", url = "#", footerContent = "") {

package/src/stories/Forms/Checkboxes/Checkboxes.js

@@ -1,3 +1,5 @@
+import { iconSpritePath } from "../../../../.storybook/globals";
+
 export const Checkboxes = ({ id, legend, hintText, isRequired, inError, errorMessage, inSuccess, successMessage, inputs, isSmall }) => {
     const getInputClasses = (input) => {
         if (input.inError) return "qld__input--error";
@@ -9,13 +11,13 @@ export const Checkboxes = ({ id, legend, hintText, isRequired, inError, errorMes
         if (inError) {
             return `
                 <span id="qld__checkboxes-status-${id}" class="qld__input--error" role="status" aria-live="polite">
-                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="QLD-icons.svg#status-error"></use></svg>${errorMessage}
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="${iconSpritePath}#status-error"></use></svg>${errorMessage}
                 </span>
             `;
         } else if (inSuccess) {
             return `
                 <span id="qld__checkboxes-status-${id}" class="qld__input--success" role="status" aria-live="polite">
-                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="QLD-icons.svg#status-success"></svg>${successMessage}
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="${iconSpritePath}#status-success"></svg>${successMessage}
                 </span>
             `;
         } else return "";

package/src/stories/Forms/RadioButtons/RadioButtons.js

@@ -1,3 +1,5 @@
+import { iconSpritePath } from "../../../../.storybook/globals";
+
 export const RadioButtons = ({ id, legend, hintText, isRequired, inError, errorMessage, inSuccess, successMessage, inputs, isSmall }) => {
     const getInputClasses = (input) => {
         if (input.inError) return "qld__input--error";
@@ -9,13 +11,13 @@ export const RadioButtons = ({ id, legend, hintText, isRequired, inError, errorM
         if (inError) {
             return `
                 <span id="qld__radio-buttons-status-${id}" class="qld__input--error" role="status" aria-live="polite">
-                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="QLD-icons.svg#status-error"></use></svg>${errorMessage}
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Error icon</title><desc>Indicates an error</desc><use href="${iconSpritePath}#status-error"></use></svg>${errorMessage}
                 </span>
             `;
         } else if (inSuccess) {
             return `
                 <span id="qld__radio-buttons-status-${id}" class="qld__input--success" role="status" aria-live="polite">
-                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="QLD-icons.svg#status-success"></svg>${successMessage}
+                    <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true"><title>Success icon</title><desc>Indicates a correct answer</desc><use href="${iconSpritePath}#status-success"></svg>${successMessage}
                 </span>
             `;
         } else return "";

package/src/stories/Forms/SelectBox/SelectBox.js

@@ -1,3 +1,5 @@
+import { iconSpritePath } from "../../../../.storybook/globals";
+
 export const SelectBox = ({ id, extraClass, isFilled, isRequired, isDisabled, isMultiple, label, hintText, state, succcessMessage, errorMessage, defaultOption, options }) => {
     let stateMessage = "";
     let stateClass = "";
@@ -21,7 +23,7 @@ export const SelectBox = ({ id, extraClass, isFilled, isRequired, isDisabled, is
             stateMessage = `
                 <span id="${id}-state-message" class="qld__input--success">
                     <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-                        <use href="QLD-icons.svg#status-success"></use>
+                        <use href="${iconSpritePath}#status-success"></use>
                     </svg>
                     <span>${succcessMessage}</span>
                 </span>`;
@@ -31,7 +33,7 @@ export const SelectBox = ({ id, extraClass, isFilled, isRequired, isDisabled, is
             stateMessage = `
                 <span id="${id}-state-message" class="qld__input--error">
                     <svg class="qld__icon qld__icon--lead qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-                        <use href="QLD-icons.svg#status-error"></use>
+                        <use href="${iconSpritePath}#status-error"></use>
                     </svg>
                     <span>${errorMessage}</span>
                 </span>`;

package/src/stories/GlobalAlert/GlobalAlert.stories.js

@@ -1,10 +1,10 @@
 import Template from "../../components/global_alert/html/component.hbs";
-import { storyParams } from "../../../.storybook/globals";
+import { storyParams, iconSpritePath } from "../../../.storybook/globals";
 
 function buildSite({ alertLevel, alertTitle, alertMessage, alertLinkTitle, alertLinkURL, secondAlert, thirdAlert }) {
     return {
         metadata: {
-            coreSiteIcons: { value: "/QLD-icons.svg" },
+            coreSiteIcons: { value: iconSpritePath },
             mainNavVerticalNav: { value: "" },
             alertDisplay: { value: "true" },
             alertLevel: { value: alertLevel },

package/src/stories/Iconography/Iconography.stories.js

@@ -1,6 +1,14 @@
 import { storyParams, themes } from "../../../.storybook/globals";
 import { Iconography } from "./Iconography";
 import { themeWrapper } from "../../../.storybook/helper-functions.js";
+import iconsSvg from "../../assets/img/QLD-icons.svg?raw";
+
+// The sprite is inlined at build time (?raw); we parse it with DOMParser to list
+// every <symbol> id for the allIcons gallery. Lives here as it's the only consumer.
+// Parsing (rather than regex) means symbols inside comments — e.g. the "XXX"
+// template placeholder — are ignored, since comment nodes aren't queried.
+const iconSprite = new DOMParser().parseFromString(iconsSvg, "image/svg+xml");
+const iconIDs = [...iconSprite.querySelectorAll("symbol")].map((symbol) => symbol.id);
 
 const iconographyArgs = {
     size: "lg",
@@ -42,8 +50,8 @@ export const allIcons = (args) => {
     let iconString = `<div tabindex="0" class="iconography-container">`;
 
     // Loop through each icon ID
-    if (args.iconIDs.length > 0) {
-        args.iconIDs.forEach((iconID) => {
+    if (iconIDs.length > 0) {
+        iconIDs.forEach((iconID) => {
             iconString += `<div class="iconography-item">`;
             iconString += Iconography(iconographySizes[2], args.site, iconID);
             iconString += `<span class="iconography-item-name">${iconID}</span></div>`;

package/src/stories/Tags/Tags.js

@@ -1,3 +1,5 @@
+import { iconSpritePath } from "../../../.storybook/globals";
+
 export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
     const tagListWrapperStart = `<div class="qld__tag-list--wrapper"><span class="qld__tag-list--title">${leadingText}</span><ul class="qld__tag-list">`;
     const tagListWrapperEnd = `</ul></div>`;
@@ -24,7 +26,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
                     <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
-                            <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>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${iconSpritePath}#close"></use></svg>
                             <span class="sr-only">close</span>
                         </button>
                     </div>
@@ -33,7 +35,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
                     <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
-                            <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>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${iconSpritePath}#close"></use></svg>
                             <span class="sr-only">close</span>
                         </button>
                     </div>
@@ -42,7 +44,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
                     <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
-                            <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>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${iconSpritePath}#close"></use></svg>
                             <span class="sr-only">close</span>
                         </button>
                     </div>