@qhealth-design-system/core 1.20.2 → 1.21.1

package/.storybook/globals.js

@@ -38,107 +38,121 @@ export const dummyText =
 
 export const dummyLink = "https://www.google.com";
 
-export const figmaLinks = {
-    masterDoc: {
-        file: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23529-440999&t=y8LMLpCtTxOgtHpT-0",
-    },
+// 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";
+
+export const componentLinks = {
+    accordion: { ds: `${dsBase}/components/accordion` },
     backToTop: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321317&p=f&t=A5RGn3vQ6cEyXHw7-0",
-        ds: "https://www.designsystem.qld.gov.au/components/back-to-top",
+        ds: `${dsBase}/patterns/back-to-top`,
+        figma: `${figmaBase}?node-id=135268-27564&t=Gk55sISVPoJM2wm4-0`,
     },
+    banner: { ds: `${dsBase}/components/banner`, figma: `${figmaBase}?node-id=120353-65175&t=Lne25vgTT2xUkJcD-0` },
     breadcrumbs: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98076&p=f&t=4xsFBWGSPA5BjG6z-0",
-        ds: "https://www.designsystem.qld.gov.au/components/breadcrumbs",
-    },
-    button: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98058&p=f&t=pMQreNNlQuuKMxlD-0",
-        ds: "https://www.designsystem.qld.gov.au/components/button",
+        ds: `${dsBase}/components/breadcrumbs`,
+        figma: `${figmaBase}?node-id=5990-98076&p=f&t=4xsFBWGSPA5BjG6z-0`,
     },
-    callout: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98115&p=f&t=3aGzWYalpb1UXS73-0",
-        ds: "https://www.designsystem.qld.gov.au/components/callout",
+    button: { ds: `${dsBase}/components/button`, figma: `${figmaBase}?node-id=5990-98058&p=f&t=pMQreNNlQuuKMxlD-0` },
+    callout: { ds: `${dsBase}/components/callout`, figma: `${figmaBase}?node-id=5990-98115&p=f&t=3aGzWYalpb1UXS73-0` },
+    card: {
+        ds: `${dsBase}/components/card`,
+        figma: `${figmaBase}?node-id=120360-98159&t=SzNNrsljtXa1LjkF-0`,
     },
     checkboxes: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321348&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/checkboxes",
+        ds: `${dsBase}/components/checkbox`,
+        figma: `${figmaBase}?node-id=11056-321348&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
     ctaLink: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/call-to-action-cta",
+        ds: `${dsBase}/components/call-to-action-cta`,
+        figma: `${figmaBase}?node-id=11056-321367&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
     directionLinks: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/direction-links",
+        ds: `${dsBase}/components/direction-link`,
+        figma: `${figmaBase}?node-id=11056-321363&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
+    footer: { ds: `${dsBase}/components/footer`, figma: `${figmaBase}?node-id=5990-97582&p=f&t=xM7nOPN0NPouiFDO-0` },
+    forms: { ds: `${dsBase}/components/forms` },
     globalAlert: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97590&p=f&t=DWJ5IM0EPnQV6Sui-0",
-        ds: "https://www.designsystem.qld.gov.au/components/global-alert",
+        ds: `${dsBase}/components/global-alert`,
+        figma: `${figmaBase}?node-id=5990-97590&p=f&t=DWJ5IM0EPnQV6Sui-0`,
     },
-    iconography: {
-        ds: "https://www.designsystem.qld.gov.au/styles/iconography",
+    header: { ds: `${dsBase}/components/header`, figma: `${figmaBase}?node-id=5990-97586&p=f&t=UZuh698yg2zKvMDG-0` },
+    horizontalRule: {
+        ds: `${dsBase}/components/horizontal-rule`,
+        figma: `${figmaBase}?node-id=5990-97954&p=f&t=avPgpU6waAIMt5Tt-0`,
     },
+    iconography: { ds: `${dsBase}/styles/iconography` },
     inPageAlert: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-98125&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/alerts-in-page",
+        ds: `${dsBase}/components/alerts-in-page`,
+        figma: `${figmaBase}?node-id=5990-98125&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
     inPageNavigation: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=7905-252906&p=f&t=HnUAp2BI742820Qk-0",
-        ds: "https://www.designsystem.qld.gov.au/components/in-page-navigation",
+        ds: `${dsBase}/components/in-page-navigation`,
+        figma: `${figmaBase}?node-id=7905-252906&p=f&t=Tb6VtPPWrZ7Na35f-0`,
     },
     linkColumns: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/link-columns-link-list",
+        ds: `${dsBase}/components/link-columns-link-list`,
+        figma: `${figmaBase}?node-id=11056-321574&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
     loadingSpinner: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=49314-16705&p=f&t=N6vEZVb73vuDEtRO-0",
-        ds: "https://www.designsystem.qld.gov.au/components/loading-spinner",
+        ds: `${dsBase}/components/loading-spinner`,
+        figma: `${figmaBase}?node-id=49314-16705&p=f&t=N6vEZVb73vuDEtRO-0`,
+    },
+    navbar: {
+        ds: `${dsBase}/components/navigation-horizontal`,
+        figma: `${figmaBase}?node-id=5990-97586&p=f&t=UZuh698yg2zKvMDG-0`,
     },
     pagination: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321779&p=f&t=wdrRF6qJa1fuzxWP-0",
-        ds: "https://www.designsystem.qld.gov.au/components/pagination",
+        ds: `${dsBase}/components/pagination`,
+        figma: `${figmaBase}?node-id=11056-321779&p=f&t=wdrRF6qJa1fuzxWP-0`,
     },
     promoPanel: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=ub7vIB4rUQNZ6zzo-0",
-        ds: "https://www.designsystem.qld.gov.au/components/promotional-panel",
+        ds: `${dsBase}/components/promotional-panel`,
+        figma: `${figmaBase}?node-id=23269-286312&p=f&t=ub7vIB4rUQNZ6zzo-0`,
     },
     radioButtons: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321347&p=f&t=kHfUZsyKYuDkprji-0",
-        ds: "https://www.designsystem.qld.gov.au/components/radio-buttons",
+        ds: `${dsBase}/components/radio-buttons`,
+        figma: `${figmaBase}?node-id=11056-321347&p=f&t=kHfUZsyKYuDkprji-0`,
     },
     selectBox: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321345&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/input-fields-select-box",
-    },
-    tabs: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=25951-236134&p=f&t=pMQreNNlQuuKMxlD-0",
-        ds: "https://www.designsystem.qld.gov.au/components/tabs",
-    },
-    tags: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97596&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components/tags",
+        ds: `${dsBase}/components/input-fields-select-box`,
+        figma: `${figmaBase}?node-id=11056-321345&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
+    table: { ds: `${dsBase}/components/table`, figma: `${figmaBase}?node-id=120418-57729&t=VPLTzrxLs85peK9J-0` },
+    tabs: { ds: `${dsBase}/components/tabs`, figma: `${figmaBase}?node-id=25951-236134&p=f&t=pMQreNNlQuuKMxlD-0` },
+    tags: { ds: `${dsBase}/components/tags`, figma: `${figmaBase}?node-id=5990-97596&p=f&t=WmKMIp3MbkVrYkUf-0` },
     textInput: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97997&p=f&t=yRd2EKrtkEkPbBDT-0",
-        ds: "https://www.designsystem.qld.gov.au/components/text-input",
+        ds: `${dsBase}/components/text-input`,
+        figma: `${figmaBase}?node-id=5990-97997&p=f&t=yRd2EKrtkEkPbBDT-0`,
     },
     videoPlayer: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=13297-214065&p=f&t=WmKMIp3MbkVrYkUf-0",
-        ds: "https://www.designsystem.qld.gov.au/components",
-    },
-    header: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97586&p=f&t=UZuh698yg2zKvMDG-0",
-        ds: "https://www.designsystem.qld.gov.au/components/header",
-    },
-    horizontalRule: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97954&p=f&t=avPgpU6waAIMt5Tt-0",
-        ds: "https://www.designsystem.qld.gov.au/components/horizontal-rule",
-    },
-    navbar: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97586&p=f&t=UZuh698yg2zKvMDG-0",
-        ds: "https://www.designsystem.qld.gov.au/components/navigation-horizontal",
-    },
-    footer: {
-        design: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5990-97582&p=f&t=xM7nOPN0NPouiFDO-0",
-        ds: "https://www.designsystem.qld.gov.au/components/footer",
+        figma: `${figmaBase}?node-id=13297-214065&p=f&t=WmKMIp3MbkVrYkUf-0`,
     },
 };
+
+/**
+ * Standard docs parameters for a story.
+ * Renders a Resources line at the top of autodocs with links to the QLD Design System
+ * and Figma (when available). Both are looked up automatically from the component key.
+ *
+ * @param {keyof typeof componentLinks} componentKey
+ */
+export function storyParams(componentKey) {
+    const { ds, figma } = componentLinks[componentKey] ?? {};
+    const links = ds ? [`[QLD Design System ↗](${ds})`] : [];
+    if (figma) links.push(`[Figma UI Kit ↗](${figma})`);
+    return {
+        docs: {
+            toc: true,
+            codePanel: true,
+            description: {
+                component: `**Resources:** ${links.join(" · ")}`,
+            },
+        },
+        ...(figma && { design: { type: "figma", url: figma } }),
+    };
+}

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/main.js

@@ -1,5 +1,6 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 import sassGlobImports from "vite-plugin-sass-glob-import";
+import hbsPlugin from "./vite-plugin-hbs.js"
 
 const config = {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -10,6 +11,7 @@ const config = {
     },
     async viteFinal(config) {
         config.plugins.push(sassGlobImports());
+        config.plugins.push(hbsPlugin())
         return config;
     },
     staticDirs: ["../dist/mysource_files/img", "./core-assets", "./assets"],

package/.storybook/preview-head.html

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

package/.storybook/preview.js

@@ -2,25 +2,11 @@ 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 = {
+    tags: ["autodocs"],
     parameters: {
         controls: {
             matchers: {
@@ -82,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) => {
@@ -97,7 +81,7 @@ const preview = {
                 return storyFn();
             }
             // Get the theme key from the background, to use within the decorator
-            const themeKey = Object.keys(themeColours).find((key) => themeColours[key] === context.globals.backgrounds?.value);
+            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();

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

@@ -0,0 +1,52 @@
+import Handlebars from 'handlebars';
+
+/**
+ * Vite plugin that transforms Handlebars component templates (.hbs)
+ * into pre-compiled JavaScript modules for use in Storybook.
+ *
+ * Without this plugin, Vite cannot handle .hbs files. Stories would need to import
+ * templates as raw strings (?raw) and call Handlebars.compile() at runtime in the
+ * browser on every render. This plugin moves compilation to build time instead.
+ *
+ * How it works:
+ *   1. Vite intercepts any import ending in .hbs
+ *   2. Handlebars.precompile() converts the template source into a serialisable
+ *      template spec (a plain JS object) at build time in Node
+ *   3. The plugin emits a JS module that calls Handlebars.template(spec) to wrap
+ *      the spec in a callable function — no parsing or compilation in the browser
+ *
+ * The emitted module imports the full 'handlebars' package (not 'handlebars/runtime')
+ * so that custom helpers registered in .storybook/core-assets/handlebar-helpers.js
+ * are available on the same Handlebars instance at runtime.
+ *
+ * Usage in a story:
+ *   import Template from './html/component.hbs';
+ *   Template({ component: { data: { metadata: { ... } } } }); // → HTML string
+ *
+ * Note: Files imported with the ?raw suffix bypass this plugin entirely — Vite's
+ * built-in raw loader handles those and returns the template source as a string.
+ *
+ * @returns {import('vite').Plugin}
+ */
+export default function hbsPlugin() {
+    return {
+        name: 'vite-plugin-hbs',
+
+        transform(src, id) {
+            if (!id.endsWith('.hbs')) return;
+
+            const templateSpec = Handlebars.precompile(src);
+
+            const code = `
+                import Handlebars from 'handlebars';
+                const template = Handlebars.template(${templateSpec});
+                export default template;
+            `;
+
+            return {
+                code,
+                map: null,
+            };
+        },
+    };
+}

package/.stylelintignore

@@ -0,0 +1,5 @@
+src/externals/
+src/styles/imports/cssbackup.css
+**/*.hbs
+storybook-static
+dist

package/.stylelintrc.json

@@ -0,0 +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
+            }
+        }
+    ]
+}

package/CHANGELOG.md

@@ -7,6 +7,10 @@ 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
 
 ## 1.20.1 - 2026-02-25

package/eslint.config.mjs

@@ -0,0 +1,65 @@
+import js from "@eslint/js";
+import globals from "globals";
+import json from "@eslint/json";
+import markdown from "@eslint/markdown";
+import css from "@eslint/css";
+import { defineConfig, globalIgnores } from "eslint/config";
+import eslintConfigPrettier from "eslint-config-prettier/flat";
+import storybook from "eslint-plugin-storybook";
+
+export default defineConfig([
+    globalIgnores(["!.storybook"], "Include Storybook Directory"),
+    globalIgnores(["storybook-static", "*.min.js", "src/externals", "dist"]),
+    {
+        files: ["src/**/*.js", ".storybook/**/*.js"],
+        plugins: { js },
+        extends: ["js/recommended"],
+        languageOptions: {
+            sourceType: "module",
+            globals: globals.browser,
+            parserOptions: {
+                allowImportExportEverywhere: true,
+            },
+        },
+        rules: {
+            "no-const-assign": "warn",
+            "no-this-before-super": "warn",
+            "no-undef": "warn",
+            "no-unreachable": "warn",
+            "no-unused-vars": "warn",
+            "constructor-super": "warn",
+            "valid-typeof": "warn",
+        },
+    },
+    {
+        files: ["webpack/**/*.js", "scripts/**/*.js", "*.config.js", "postcss.config.js"],
+        plugins: { js },
+        extends: ["js/recommended"],
+        languageOptions: {
+            sourceType: "commonjs",
+            globals: globals.node,
+            parserOptions: {
+                allowImportExportEverywhere: true,
+            },
+        },
+        rules: {
+            "no-const-assign": "warn",
+            "no-this-before-super": "warn",
+            "no-undef": "warn",
+            "no-unreachable": "warn",
+            "no-unused-vars": "warn",
+            "constructor-super": "warn",
+            "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"] },
+    eslintConfigPrettier,
+    ...storybook.configs["flat/recommended"],
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.20.2",
+    "version": "1.21.1",
     "description": "",
     "repository": {
         "type": "git",
@@ -14,8 +14,8 @@
         "serve": "webpack-dev-server --open --config webpack/webpack.dev.js",
         "add-component": "bash scripts/add_component.sh",
         "jsdoc": "./node_modules/jsdoc/jsdoc.js -a all -c jsdoc.json -r -R README.md ./src/components/ -d ./documentation/jsdoc",
-        "lint:js": "eslint \"./src/**/*.js\"",
-        "lint:styles": "stylelint \"./src/**/*.css\" \"./src/**/*.scss\" \"!./src/**/*.min.css\"",
+        "lint:js": "eslint .",
+        "lint:styles": "stylelint \"**/*.{css,scss}\"",
         "lint": "npm run lint:js && npm run lint:styles",
         "build-storybook": "node .storybook/prepare-storybook.js && storybook build",
         "storybook": "storybook dev -p 6006",
@@ -26,24 +26,30 @@
     "license": "ISC",
     "devDependencies": {
         "@babel/core": "^7.22.5",
-        "@babel/eslint-parser": "^7.22.9",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/preset-env": "^7.22.5",
         "@babel/preset-react": "^7.22.5",
-        "@storybook/addon-a11y": "^10.1.10",
-        "@storybook/addon-designs": "^11.1.0",
-        "@storybook/addon-docs": "^10.1.10",
-        "@storybook/addon-themes": "^10.1.10",
-        "@storybook/html-vite": "^10.1.10",
+        "@eslint/css": "^1.3.0",
+        "@eslint/js": "^10.0.1",
+        "@eslint/json": "^2.0.0",
+        "@eslint/markdown": "^8.0.2",
+        "@poliklot/prettier-plugin-handlebars": "^0.2.12",
+        "@storybook/addon-a11y": "^10.4.0",
+        "@storybook/addon-designs": "^11.1.3",
+        "@storybook/addon-docs": "^10.4.0",
+        "@storybook/addon-themes": "^10.4.0",
+        "@storybook/html-vite": "^10.4.0",
         "autoprefixer": "^10.4.14",
-        "chromatic": "^13.3.4",
+        "chromatic": "^17.0.0",
         "copy-webpack-plugin": "^11.0.0",
         "core-js": "^3.31.0",
         "css-loader": "^5.2.6",
-        "eslint": "^8.43.0",
-        "eslint-plugin-storybook": "^10.1.10",
-        "eslint-webpack-plugin": "^4.0.1",
+        "eslint": "^10.4.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-storybook": "^10.4.0",
+        "eslint-webpack-plugin": "^6.0.0",
         "glob": "^7.2.0",
+        "globals": "^17.6.0",
         "handlebars": "^4.7.8",
         "html-loader": "^0.5.5",
         "html-webpack-plugin": "^5.5.3",
@@ -52,15 +58,16 @@
         "jsdoc": "^4.0.2",
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-loader": "^7.3.3",
+        "postcss-scss": "^4.0.9",
+        "prettier": "3.8.3",
         "sass": "^1.63.6",
         "sass-loader": "^13.3.2",
-        "storybook": "^10.1.10",
+        "storybook": "^10.4.0",
         "string-replace-loader": "^3.1.0",
         "style-loader": "^3.3.3",
-        "stylelint": "^15.9.0",
-        "stylelint-config-standard": "^33.0.0",
-        "stylelint-scss": "^5.0.1",
-        "stylelint-webpack-plugin": "^4.1.1",
+        "stylelint": "^17.12.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-scss": "^7.1.0",
         "terser-webpack-plugin": "^5.3.9",
         "url-loader": "^4.1.1",
         "vite": "^7.2.6",

package/prettier.config.js

@@ -0,0 +1,17 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+    printWidth: 240,
+    semi: true,
+    tabWidth: 4,
+    singleQuote: false,
+    trailingComma: "all",
+    plugins: ["@poliklot/prettier-plugin-handlebars"],
+    overrides: [
+        {
+            files: ["*.hbs", "*.handlebars"],
+            options: {
+                parser: "handlebars",
+            },
+        },
+    ],
+};

package/src/component-loader.js

@@ -1,3 +1,6 @@
+// Global utilities (sets up window.QLD / QLD.utils) — must load before any init runs
+import "./components/_global/js/global.js";
+
 // Standard components
 import initHeader from "./components/header/js/global.js";
 import initInPageNavigation from "./components/in_page_navigation/js/global.js";
@@ -5,6 +8,8 @@ import initInternalNavigation from "./components/internal_navigation/js/global.j
 import initLeftHandNav from "./components/left_hand_navigation/js/global.js";
 import initPromoPanel from "./components/promo_panel/js/global.js";
 import initVideoPlayer from "./components/video_player/js/global.js";
+import { initMegaMenu } from "./components/mega_main_navigation/js/global";
+import { initGlobalAlert } from "./components/global_alert/js/global.js";
 
 // Global components
 import initCtaLinks from "./components/_global/js/cta_links/global.js";
@@ -12,12 +17,17 @@ import initSelectBoxes from "./components/_global/js/select_boxes/global.js";
 
 // Adding ES module initialisation for components
 export default function initComponents() {
+    // Call initGlobalAlert outside the DOMContentLoaded callback so it executes immediately. There is a noticeable
+    // delay before the DOMContentLoaded event fires, which can cause dismissed global alerts to stay visible for a few
+    // seconds before they are removed. Likely to remove DOMContentLoaded event listener in the future.
+    initGlobalAlert();
     document.addEventListener("DOMContentLoaded", () => {
         initCtaLinks(document);
         initHeader(document);
         initInPageNavigation(document);
         initInternalNavigation(document);
         initLeftHandNav(document);
+        initMegaMenu();
         initPromoPanel(document);
         initSelectBoxes(document);
         initVideoPlayer(document);

package/src/components/_global/css/cta_links/component.scss

@@ -14,7 +14,7 @@ a.qld__cta-link {
 
     &::before {
         @include QLD-space(width, 1unit);
-        top: 50%;
+        top: 1rem;
         right: 0.3rem;
     }
 

package/src/components/_global/css/link_columns/component.scss

@@ -43,6 +43,14 @@
             padding-right: 2rem;
         }
 
+        // Rule that ensures that if a cta-link is used in the link columns, the correct arrow is displayed
+        a.qld__cta-link:not(.qld__cta-link--view-all) {
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
         &::before {
             @include QLD-space(margin, 0 0.5unit 0 0.5unit);
             flex: 0 0 auto;