@qhealth-design-system/core 1.21.0 → 1.22.0

package/.storybook/preview-head.html

@@ -1,2 +1,5 @@
 <!-- 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

@@ -1,115 +1,101 @@
-import "./assets/index.js"; // Storybook JS import
+import "./core-assets/handlebar-helpers.js";
 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";
+import { formatHtmlSource } from "./helper-functions.js";
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
-    tags: ["autodocs"],
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
-        a11y: {
-            config: {
-                rules: [
-                    {
-                        id: "color-contrast",
-                        enabled: true,
-                    },
-                ],
-            },
+  tags: ["autodocs"],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: "color-contrast",
+            enabled: true,
+          },
+        ],
+      },
+    },
+    viewport: {
+      options: {
+        ...viewports,
+        ...INITIAL_VIEWPORTS,
+      },
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+        // Pretty-print the rendered HTML in the code panel. Storybook's built-in
+        // `format` only dedents, so we re-indent the markup ourselves.
+        transform: (code) => formatHtmlSource(code),
+      },
+    },
+    backgrounds: {
+      options: {
+        white: {
+          name: "White",
+          value: themeColours["white"],
         },
-        viewport: {
-            options: {
-                ...viewports,
-                ...INITIAL_VIEWPORTS,
-            },
+        light: {
+          name: "Light",
+          value: themeColours["light"],
         },
-        docs: {
-            source: {
-                excludeDecorators: true,
-            },
+        "light alt": {
+          name: "Light Alternate",
+          value: themeColours["light alt"],
         },
-        backgrounds: {
-            options: {
-                white: {
-                    name: "White",
-                    value: themeColours["white"],
-                },
-                light: {
-                    name: "Light",
-                    value: themeColours["light"],
-                },
-                light_alternate: {
-                    name: "Light Alternate",
-                    value: themeColours["light alt"],
-                },
-                dark: {
-                    name: "Dark",
-                    value: themeColours["dark"],
-                },
-                dark_alternate: {
-                    name: "Dark Alternate",
-                    value: themeColours["dark alt"],
-                },
-            },
+        dark: {
+          name: "Dark",
+          value: themeColours["dark"],
         },
-        options: {
-            storySort: {
-                // Force SB to load Introduction page first
-                order: ["Introduction", "1. Core Styles", "2. Layout", "3. Components"],
-            },
+        "dark alt": {
+          name: "Dark Alternate",
+          value: themeColours["dark alt"],
         },
+      },
     },
-    args: {
-        // Ensure GitHub hosted page uses correct icon path
-        site: { metadata: { coreSiteIcons: { value: getSvgPath() } } },
-        iconIDs: await iconsIds,
+    options: {
+      storySort: {
+        // Force SB to load Introduction page first
+        order: ["Introduction", "1. Core Styles", "2. Layout", "3. Components"],
+      },
     },
-    argTypes: {
-        // Remove the site metadata from the controls
-        site: { table: { disable: true } },
-        iconIDs: { table: { disable: true } },
+  },
+  args: {
+    // Ensure GitHub hosted page uses correct icon path
+    site: { metadata: { coreSiteIcons: { value: iconSpritePath } } },
+  },
+  argTypes: {
+    // Remove the site metadata from the controls
+    site: { table: { disable: true } },
+  },
+  decorators: [
+    (storyFn, context) => {
+      // Manual flag passed from the story to avoid the following parent wrapping
+      if (context.parameters.skipDecorator) {
+        return storyFn();
+      }
+      const wrapper = document.createElement("div");
+      wrapper.className =
+        themes[context.globals.backgrounds?.value] || themes["white"];
+      const story = storyFn();
+      if (typeof story === "string") {
+        wrapper.innerHTML = story;
+      } else if (story instanceof HTMLElement) {
+        wrapper.appendChild(story);
+      }
+      return wrapper;
     },
-    decorators: [
-        (storyFn, context) => {
-            // Skip wrapper for Navbar story
-            if (context.kind === "Components/Navbar") {
-                return storyFn();
-            }
-            // Get the theme key from the background, to use within the decorator
-            const themeKey = Object.keys(themeColours).find((key) => key === context.globals.backgrounds?.value);
-            const wrapper = document.createElement("div");
-            wrapper.className = themes[themeKey] || themes["white"];
-            const story = storyFn();
-            if (typeof story === "string") {
-                wrapper.innerHTML = story;
-            } else if (story instanceof HTMLElement) {
-                wrapper.appendChild(story);
-            }
-            return wrapper;
-        },
-    ],
+  ],
 };
 
 export default preview;

package/.storybook/vite-plugin-hbs.js

@@ -1,4 +1,4 @@
-import Handlebars from 'handlebars';
+import Handlebars from "handlebars";
 
 /**
  * Vite plugin that transforms Handlebars component templates (.hbs)
@@ -29,24 +29,24 @@ import Handlebars from 'handlebars';
  * @returns {import('vite').Plugin}
  */
 export default function hbsPlugin() {
-    return {
-        name: 'vite-plugin-hbs',
+  return {
+    name: "vite-plugin-hbs",
 
-        transform(src, id) {
-            if (!id.endsWith('.hbs')) return;
+    transform(src, id) {
+      if (!id.endsWith(".hbs")) return;
 
-            const templateSpec = Handlebars.precompile(src);
+      const templateSpec = Handlebars.precompile(src);
 
-            const code = `
+      const code = `
                 import Handlebars from 'handlebars';
                 const template = Handlebars.template(${templateSpec});
                 export default template;
             `;
 
-            return {
-                code,
-                map: null,
-            };
-        },
-    };
+      return {
+        code,
+        map: null,
+      };
+    },
+  };
 }

package/.stylelintrc.json

@@ -1,24 +1,24 @@
 {
-    "extends": ["stylelint-config-standard"],
-    "plugins": ["stylelint-scss"],
-    "rules": {
-        "selector-class-pattern": [
-            "^[a-z][a-z0-9-]*(__[a-z0-9][a-z0-9_-]*)*(--[a-z0-9][a-z0-9-]*)?$",
-            { "message": "Expected class selector to use BEM naming convention" }
-        ],
-        "custom-property-pattern": null
-    },
-    "overrides": [
-        {
-            "files": ["**/*.scss"],
-            "customSyntax": "postcss-scss",
-            "rules": {
-                "at-rule-no-unknown": null,
-                "scss/at-rule-no-unknown": true,
-                "function-no-unknown": null,
-                "no-descending-specificity": null,
-                "annotation-no-unknown": null
-            }
-        }
-    ]
-}
+  "extends": ["stylelint-config-standard"],
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "selector-class-pattern": [
+      "^[a-z][a-z0-9-]*(__[a-z0-9][a-z0-9_-]*)*(--[a-z0-9][a-z0-9-]*)?$",
+      { "message": "Expected class selector to use BEM naming convention" }
+    ],
+    "custom-property-pattern": null
+  },
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss",
+      "rules": {
+        "at-rule-no-unknown": null,
+        "scss/at-rule-no-unknown": true,
+        "function-no-unknown": null,
+        "no-descending-specificity": null,
+        "annotation-no-unknown": null
+      }
+    }
+  ]
+}

package/CHANGELOG.md

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