@qhealth-design-system/core 1.19.2 → 1.20.0

package/.storybook/assets/breadcrumbs-js.js

@@ -0,0 +1,216 @@
+// This file is temporarily added to Storybook to allow testing of the breadcrumbs, while the main  breadcrumbs js file is being refactored into a module.
+
+import { validateInternalSvgPath, buildIconPath } from "../../src/helpers/global-helpers.js";
+
+/**
+ * @module breadcrumb
+ */
+
+var originalBreadCrumbUl = null;
+
+export const getTheElements = (resized = false) => {
+    const bannerBreadCrumbsAll = document.querySelectorAll("nav.qld__banner__breadcrumbs--desktop");
+
+    const bodyBreadCrumbsAll = document.querySelectorAll("section.qld__body--breadcrumb nav.qld__breadcrumbs");
+
+    const bannerBreadCrumbArray = [...bannerBreadCrumbsAll, ...bodyBreadCrumbsAll];
+    const bannerBreadCrumb = bannerBreadCrumbArray.find((breadcrumb) => {
+        return breadcrumb.offsetWidth > 0;
+    });
+
+    if (bannerBreadCrumb) {
+        if (!originalBreadCrumbUl) {
+            originalBreadCrumbUl = bannerBreadCrumb.querySelector("ol.qld__link-list").cloneNode(true);
+        }
+
+        if (resized) {
+            const originalList = originalBreadCrumbUl.cloneNode(true);
+            bannerBreadCrumb.querySelector("ol.qld__link-list").replaceChildren(...originalList.children);
+        }
+
+        const breadCrumbsUl = bannerBreadCrumb.querySelector("ol.qld__link-list");
+        if (bannerBreadCrumb.parentElement && bannerBreadCrumb.parentElement.classList.contains("qld__banner__content")) {
+            const contentBanner = bannerBreadCrumb.closest(".qld__banner__content");
+            const contentBannerStyle = window.getComputedStyle(contentBanner);
+
+            const contentPaddings = parseFloat(contentBannerStyle.getPropertyValue("padding-right").replace(/[^\d.]/g, "")) + parseFloat(contentBannerStyle.getPropertyValue("padding-left").replace(/[^\d.]/g, ""));
+
+            bannerBreadCrumb.style.maxWidth = contentBanner.offsetWidth - contentPaddings + "px";
+
+            breadCrumbsUl.style.maxWidth = contentBanner.offsetWidth - contentPaddings + "px";
+        } else {
+            const containerFluid = bannerBreadCrumb.closest(".container-fluid");
+            const containerFluidStyle = window.getComputedStyle(containerFluid);
+            if (containerFluid) {
+                const paddings = parseFloat(containerFluidStyle.getPropertyValue("padding-right").replace(/[^\d.]/g, "")) + parseFloat(containerFluidStyle.getPropertyValue("padding-left").replace(/[^\d.]/g, ""));
+
+                bannerBreadCrumb.style.maxWidth = containerFluid.offsetWidth - paddings + "px";
+                breadCrumbsUl.style.maxWidth = containerFluid.offsetWidth - paddings + "px";
+            }
+        }
+        return {
+            bannerBreadCrumb,
+            breadCrumbsUl,
+        };
+    }
+};
+
+function createOverFlow(svgPath) {
+    const overFlowWrapper = document.createElement("div");
+    overFlowWrapper.className = "qld__overflow_menu_wrapper";
+
+    const button = document.createElement("button");
+    button.className = "qld__btn qld__btn--toggle qld__overflow_menu__btn qld__accordion--closed";
+    button.setAttribute("href", "#");
+    button.setAttribute("aria-controls", "overflow-menu--");
+    button.setAttribute("aria-expanded", "false");
+
+    if (svgPath) {
+        // Create <svg>
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "qld__icon qld__icon--lg");
+        svg.setAttribute("aria-hidden", "true");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+        // Create <use>
+        const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+        // Attempt to validate SVG path before using it
+        if (validateInternalSvgPath(svgPath)) {
+            use.setAttributeNS(null, "href", buildIconPath(svgPath, "more-horizontal").toString());
+        }
+
+        // Append <use> to <svg>
+        svg.appendChild(use);
+        button.appendChild(svg);
+    }
+
+    overFlowWrapper.appendChild(button);
+
+    const div = document.createElement("div");
+    div.className = "qld__overflow_menu qld__accordion--closed";
+    div.setAttribute("id", "overflow-menu--");
+
+    const ul = document.createElement("ul");
+    ul.className = "qld__overflow_menu_list";
+    ul.setAttribute("aria-label", "qld__overflow_menu qld__link-columns");
+
+    div.appendChild(ul);
+
+    overFlowWrapper.appendChild(div);
+
+    return overFlowWrapper;
+}
+
+function insertOverFlowButton(overFlowWrapper, element) {
+    const newElement = document.createElement("div");
+    newElement.className = "qld__overflow_menu_list-item";
+
+    const link = element.querySelector("a");
+    link.classList.add("qld__overflow_menu_list-item-link");
+    link.setAttribute("tabindex", "0");
+
+    newElement.appendChild(link);
+
+    const ul = overFlowWrapper.querySelector("ul");
+
+    ul.appendChild(newElement);
+
+    return overFlowWrapper;
+}
+
+function truncateLastLi(breadCrumbsUlLis) {
+    breadCrumbsUlLis[breadCrumbsUlLis.length - 1].style.overflow = "hidden";
+}
+
+function appendOverflow(breadCrumbsUlLis, overflowMenu) {
+    breadCrumbsUlLis[1].replaceChildren();
+    breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
+    breadCrumbsUlLis[1].appendChild(overflowMenu);
+    breadCrumbsUlLis[1].style.display = "flex";
+}
+
+// Function to remove excess breadcrumb chevrons in situations where breadcrumbs are hidden using JS
+function checkChevrons() {
+    const component = document.querySelector(".qld__breadcrumbs .qld__link-list.qld__breadcrumbs__list--desktop");
+    // Find the visible breadcrumb children
+    const children = Array.from(component.children).filter((child) => getComputedStyle(child).display !== "none");
+
+    // Remove excess breadcrumb chevrons
+    let wasPreviouslySVG = false;
+    children.forEach((child) => {
+        if (child.tagName === "svg") {
+            if (wasPreviouslySVG) child.remove();
+            else wasPreviouslySVG = true;
+        } else wasPreviouslySVG = false;
+    });
+}
+
+export const initBreadcrumbs = (document = document) => {
+    if (getTheElements()) {
+        const { breadCrumbsUl } = getTheElements();
+
+        const breadCrumbsUlLis = breadCrumbsUl.querySelectorAll("li");
+        if (breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) {
+            const parent = breadCrumbsUl.parentElement;
+            const svgPath = parent.getAttribute("data-path");
+            const overflowMenu = createOverFlow(svgPath);
+
+            let breadcrumbLisLength = breadCrumbsUlLis.length;
+            let i = 1;
+
+            let totalLisOffsetWidth = 0;
+
+            for (let i = 0; i < breadCrumbsUlLis.length; i++) {
+                totalLisOffsetWidth += breadCrumbsUlLis[i].offsetWidth;
+            }
+
+            if (breadcrumbLisLength > 5) {
+                insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                breadCrumbsUlLis[1].style.display = "none";
+                appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                i = 2;
+
+                while (i < breadCrumbsUlLis.length - 2) {
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                    breadCrumbsUlLis[i].style.display = "none";
+                    i++;
+                }
+            } else if (breadCrumbsUl.offsetHeight > breadCrumbsUlLis[0].offsetHeight * 1.9) {
+                if (breadcrumbLisLength > 3) {
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                    breadCrumbsUlLis[1].style.display = "none";
+                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                }
+
+                i = 2;
+
+                while (breadCrumbsUl.offsetHeight > breadCrumbsUlLis[0].offsetHeight * 1.9 && i < breadcrumbLisLength - 2) {
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                    breadCrumbsUlLis[i].style.display = "none";
+
+                    i++;
+                }
+            } else if (parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, "")) < totalLisOffsetWidth) {
+                if (breadcrumbLisLength > 3) {
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                    breadCrumbsUlLis[1].style.display = "none";
+                    appendOverflow(breadCrumbsUlLis, overflowMenu, breadCrumbsUl);
+                    totalLisOffsetWidth -= breadCrumbsUlLis[1].offsetWidth;
+                }
+
+                i = 2;
+
+                while (parseFloat(breadCrumbsUl.style.maxWidth.replace(/[^\d.]/g, "")) < totalLisOffsetWidth && i < breadcrumbLisLength - 2) {
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                    totalLisOffsetWidth -= breadCrumbsUlLis[1].offsetWidth;
+                    breadCrumbsUlLis[i].style.display = "none";
+                    i++;
+                }
+            }
+
+            truncateLastLi(breadCrumbsUlLis, breadCrumbsUl);
+        }
+
+        checkChevrons();
+    }
+};

package/.storybook/assets/index.js

@@ -1,8 +1,8 @@
 // Storybook index file to import storybook related assets
 import "../core-assets/handlebar-helpers.js";
-import "../core-assets/main.js";
 import initAnimate from "./animate-js.js";
 import initAccordion from "./accordion-js.js";
+import { initBreadcrumbs, getTheElements } from "./breadcrumbs-js.js";
 import initComponents from "../../src/component-loader.js";
 
 // ES module initialisation for Core components
@@ -12,4 +12,12 @@ initComponents();
 document.addEventListener("DOMContentLoaded", () => {
     initAnimate(document);
     initAccordion(document);
+    initBreadcrumbs(document);
+    initAccordion(document, "overflow"); // Needed specifically for the breadcrumbs overflow functionality
+});
+
+window.addEventListener("resize", function () {
+    getTheElements(true);
+    initBreadcrumbs(document);
+    initAccordion(document, "overflow");
 });

package/.storybook/assets/index.scss

@@ -0,0 +1,9 @@
+// Global SCSS imports
+@import "../../src/styles/core-styles.scss";
+
+// Global shared imports
+@import "../../src/components/_global/css/*.scss";
+@import "../../src/components/_global/css/**/*.scss";
+
+// Component SCSS imports
+@import "../../src/components/**/css/component.scss";

package/.storybook/assets/{storybook.css → storybook.scss}

@@ -24,3 +24,26 @@
         }
     }
 }
+
+.iconography-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .iconography-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        border: 1px solid var(--QLD-color-light__heading);
+        border-radius: 8px;
+        gap: 1rem;
+        margin: 1rem;
+        padding: 2rem 1rem;
+        width: 12rem;
+
+        .qld__dark &,
+        .qld__dark-alt & {
+            border-color: white;
+        }
+    }
+}

package/.storybook/globals.js

@@ -33,6 +33,11 @@ export const themeColours = {
     "dark alt": "var(--QLD-color-dark__background--alt)",
 };
 
+export const dummyText =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+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",
@@ -41,6 +46,18 @@ export const figmaLinks = {
         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",
     },
+    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",
+    },
+    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",
+    },
     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",
@@ -53,14 +70,29 @@ export const figmaLinks = {
         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",
     },
+    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",
+    },
+    iconography: {
+        ds: "https://www.designsystem.qld.gov.au/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",
     },
+    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",
+    },
     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",
     },
+    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",
+    },
     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",
@@ -77,12 +109,36 @@ export const figmaLinks = {
         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",
     },
+    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",
+    },
     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",
+    },
 };

package/.storybook/helper-functions.js

@@ -0,0 +1,21 @@
+/**
+ * Remove the ./?a= prefix from all href, src, and srcset in rendered HTML
+ * @param {string} html - the HTML string to clean
+ * @returns {string} - cleaned HTML
+ */
+export const cleanStorybookUrls = (html) => {
+    return (
+        html
+            .replace(/(\b(?:href|src|srcset)=["'])\.\/\?a=/g, "$1")
+            // CSS url(./?a=...)
+            .replace(/url\(\s*\.\/\?a=/g, "url(")
+    );
+};
+
+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,4 +1,5 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
+import sassGlobImports from "vite-plugin-sass-glob-import";
 
 const config = {
     stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -7,6 +8,10 @@ const config = {
         name: "@storybook/html-vite",
         options: {},
     },
+    async viteFinal(config) {
+        config.plugins.push(sassGlobImports());
+        return config;
+    },
     staticDirs: ["../dist/mysource_files/img", "./core-assets", "./assets"],
 };
 export default config;

package/.storybook/prepare-storybook.js

@@ -1,7 +1,7 @@
 const fs = require("fs");
 const path = require("path");
 
-const filesToCopy = ["main.css", "main.css.map", "js/main.js", "js/main.js.map", "js/helpers.js"];
+const filesToCopy = ["js/helpers.js"];
 const srcDir = path.resolve("dist");
 const destDir = path.resolve(".storybook/core-assets");
 

package/.storybook/preview-head.html

@@ -1,2 +1 @@
-<link href="main.css" rel="stylesheet" />
-<link href="storybook.css" rel="stylesheet" />
+<!-- Add external links here, such as cdn scripts -->

package/.storybook/preview.js

@@ -1,6 +1,23 @@
-import "./assets/index.js"; // Storybook assets import
+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);
+    });
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
@@ -56,16 +73,29 @@ const preview = {
                 },
             },
         },
+        options: {
+            storySort: {
+                // Force SB to load Introduction page first
+                order: ["Introduction", "1. Core Styles", "2. Layout", "3. Components"],
+            },
+        },
     },
     args: {
-        site: { metadata: { coreSiteIcons: { value: "/QLD-icons.svg" } } },
+        // Ensure GitHub hosted page uses correct icon path
+        site: { metadata: { coreSiteIcons: { value: getSvgPath() } } },
+        iconIDs: await iconsIds,
     },
     argTypes: {
         // Remove the site metadata from the controls
         site: { table: { disable: true } },
+        iconIDs: { table: { disable: true } },
     },
     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) => themeColours[key] === context.globals.backgrounds?.value);
             const wrapper = document.createElement("div");

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.20.0 - 2026-02-25
+
 ## 1.19.2 - 2026-02-04
 
 ## 1.19.1 - 2026-02-02

package/package.json

@@ -1,7 +1,11 @@
 {
     "name": "@qhealth-design-system/core",
-    "version": "1.19.2",
+    "version": "1.20.0",
     "description": "",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Qld-Health-Online-Team/design-system"
+    },
     "licence": "MIT",
     "main": "index.js",
     "scripts": {
@@ -60,6 +64,7 @@
         "terser-webpack-plugin": "^5.3.9",
         "url-loader": "^4.1.1",
         "vite": "^7.2.6",
+        "vite-plugin-sass-glob-import": "^6.0.2",
         "webpack": "^5.88.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"

package/src/component-loader.js

@@ -7,11 +7,13 @@ import initPromoPanel from "./components/promo_panel/js/global.js";
 import initVideoPlayer from "./components/video_player/js/global.js";
 
 // Global components
+import initCtaLinks from "./components/_global/js/cta_links/global.js";
 import initSelectBoxes from "./components/_global/js/select_boxes/global.js";
 
 // Adding ES module initialisation for components
 export default function initComponents() {
     document.addEventListener("DOMContentLoaded", () => {
+        initCtaLinks(document);
         initHeader(document);
         initInPageNavigation(document);
         initInternalNavigation(document);