@qhealth-design-system/core 1.18.3 → 1.19.0

package/src/components/tool_tip/css/component.scss

@@ -1,5 +1,5 @@
 .qld__tool-tip {
     &-content {
-        padding: 2px #{map-get($QLD-space-map, 2)}px 2px #{map-get($QLD-space-map, 2)}px;
+        padding: 0.125rem 0.5rem 0.125rem 0.5rem;
     }
 }

package/src/components/video_player/js/global.js

@@ -1,19 +1,22 @@
-(function () {
-    'use strict';
+/**
+ * @module VideoPlayer
+ */
 
+export default function initVideoPlayer(document = document) {
     // Select all accordion title buttons
-    const accordionTitles = document.querySelectorAll('.qld__body qld__video__player--wrapper .qld__accordion__title');
-
+    const accordionTitles = document.querySelectorAll(".qld__body .qld__video__player--wrapper .qld__accordion__title");
     if (!accordionTitles.length) return;
 
-    accordionTitles.forEach(function (accordionTitle) {
-        accordionTitle.addEventListener('click', function () {
-            // Toggle the text content based on the accordion state
-            const buttonText = this.querySelector('i').nextSibling;
-
-            buttonText.textContent = accordionTitle.classList.contains('qld__accordion--open')
-            ? "Show transcript"
-            : "Hide transcript";
+    accordionTitles.forEach((accordionTitle) => {
+        accordionTitle.addEventListener("click", () => {
+            toggleButtonState(accordionTitle);
         });
     });
-})();
+}
+
+function toggleButtonState(accordionTitle) {
+    // Toggle the text content based on the accordion state
+    const buttonSpan = accordionTitle.querySelector("svg").nextElementSibling;
+    const isCurrentlyOpen = accordionTitle.classList.contains("qld__accordion--open");
+    buttonSpan.textContent = isCurrentlyOpen ? "Show transcript" : "Hide transcript";
+}

package/src/data/current.json

@@ -541,7 +541,23 @@
             "asset_url": "/inner.html",
             "asset_name": "Inner",
             "asset_short_name": "Inner",
-            "children": []
+            "children": [
+                {
+                    "asset_assetid": "test1",
+                    "asset_url": "/test1.html",
+                    "asset_name": "Test1",
+                    "asset_short_name": "Test1",
+                    "children": [
+                        {
+                            "asset_assetid": "test2",
+                            "asset_url": "/test2.html",
+                            "asset_name": "Test2",
+                            "asset_short_name": "Test2",
+                            "children": []
+                        }
+                    ]
+                }
+            ]
         }
     ],
     "lineage": [
@@ -568,6 +584,22 @@
             "asset_is_site_asset": "0",
             "asset_url": "https://qhscb.squiz.cloud/design/components",
             "asset_type_code": "page_standard"
+        },
+        {
+            "asset_assetid": "test1",
+            "asset_name": "Components",
+            "asset_short_name": "Components",
+            "asset_is_site_asset": "0",
+            "asset_url": "https://qhscb.squiz.cloud/design/components",
+            "asset_type_code": "page_standard"
+        },
+        {
+            "asset_assetid": "test2",
+            "asset_name": "Components",
+            "asset_short_name": "Components",
+            "asset_is_site_asset": "0",
+            "asset_url": "https://qhscb.squiz.cloud/design/components",
+            "asset_type_code": "page_standard"
         }
     ],
     "top": {

package/src/helpers/global-helpers.js

@@ -0,0 +1,56 @@
+// Validate that the SVG path has the correct extension and is same-origin
+export const validateInternalSvgPath = (path) => {
+    let shouldValidate = true;
+
+    // Check given path is a string
+    if (typeof path !== "string") {
+        console.error(`Path provided is not a string. ${path}.`);
+        shouldValidate = false;
+        return shouldValidate;
+    }
+
+    const trimmed = path.trim();
+
+    // Reject dangerous schemes or characters
+    if (trimmed.includes("javascript:") || trimmed.includes("data:") || trimmed.includes("vbscript:")) {
+        console.error(`Path contains potentially dangerous scheme. ${path}.`);
+        shouldValidate = false;
+        return shouldValidate;
+    }
+
+    const url = new URL(trimmed, window.location.origin);
+    const filePath = url.searchParams.get("a"); // Extracts asset path from query parameter
+
+    // Ensure same-origin
+    if (url.origin !== window.location.origin) {
+        console.error(`The SVG path comes from a different origin: ${url.origin} but expected ${window.location.origin}`);
+        shouldValidate = false;
+        return shouldValidate;
+    }
+
+    // Only allow simple path characters and .svg extension
+    if (!/^\d+:[a-z0-9/_-]+\.svg$/i.test(filePath)) {
+        console.error(`The SVG path is invalid: ${filePath}`);
+        shouldValidate = false;
+        return shouldValidate;
+    }
+
+    return shouldValidate;
+};
+
+export const buildIconPath = (path, icon) => {
+    try {
+        const url = new URL(path, window.location.origin);
+        if (icon) {
+            url.hash = icon;
+        }
+        return url;
+    } catch {
+        return null;
+    }
+};
+
+// Remove all special characters
+export const normaliseIdentifier = (string) => {
+    return string.replace(/[^a-z0-9]+/g, "");
+};

package/src/html/component-in_page_navigation.html

@@ -566,8 +566,8 @@
                             ${require('../components/_global/html/component.hbs')({ "manifest":require('../components/in_page_navigation/js/manifest.json'), "callback": "QLD.inPageNav.init",
                             "component":require('!url-loader!../components/in_page_navigation/html/component.hbs'), "component_output":require('../components/in_page_navigation/html/component.hbs')({
                             "component":require('../components/in_page_navigation/js/manifest.json').component, "content":"Lorem Ipsum" }) })}
-                            <div id="content" style="display: none">
-                                <h2>Heading 2.1</h2>
+                            <div id="content" style="display: block">
+                                <h2>Heading 2.""//**1</h2>
                                 <p>Lorem ipsum dolor</p>
 
                                 <h2>Heading 2.2</h2>

package/src/index.js

@@ -1,14 +1,10 @@
-import initHeader from "./components/header/js/global.js";
-import initLeftHandNav from "./components/left_hand_navigation/js/global.js";
-
 // JS
-require("prismjs");
+import initComponents from "./component-loader.js";
+import "../src/helpers/global-helpers.js";
+import "prismjs";
 
 // Adding ES module initialisation for components
-document.addEventListener("DOMContentLoaded", () => {
-    initHeader(document);
-    initLeftHandNav(document);
-});
+initComponents();
 
 // CSS
 import "./styles/global.scss";

package/src/stories/BackToTop/BackToTop.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story } from "@storybook/blocks";
+import { Meta, Canvas, Story } from "@storybook/addon-docs/blocks";
 import * as BackToTopStories from "./BackToTop.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -16,27 +16,9 @@ The 'back to top' button, is a small button placed at the end of the page on the
 
 ## Design resources
 
--   <a
-        className="figma-link"
-        href={figmaLinks.backToTop.design}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
+-   <a className="figma-link" href={figmaLinks.backToTop.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a
-        className="figma-link"
-        href={figmaLinks.backToTop.file}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
-        Component file (Figma)
-    </a>
--   <a
-        className="figma-link"
-        href={figmaLinks.backToTop.ds}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
+-   <a className="figma-link" href={figmaLinks.backToTop.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/CTALink/CTALink.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
 import * as CTALink from "./CTALink.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -31,9 +31,6 @@ In our Design System we have 2 styles, a default and view all.
 -   <a className="figma-link" href={figmaLinks.ctaLink.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.ctaLink.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.ctaLink.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/Checkboxes/Checkboxes.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
 import * as checkboxesStories from "./Checkboxes.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -37,9 +37,6 @@ Disabled control inputs can be used to indicate inputs that are no longer valid
 -   <a className="figma-link" href={figmaLinks.checkboxes.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.checkboxes.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.checkboxes.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/DirectionLinks/DirectionLinks.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
 import * as DirectionLinks from "./DirectionLinks.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -29,9 +29,6 @@ Use direction links to indicate a physical direction, such as:
 -   <a className="figma-link" href={figmaLinks.directionLinks.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.directionLinks.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.directionLinks.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/InPageAlert/InPageAlert.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story, Source, Design } from "@storybook/blocks";
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
 import * as InPageAlertsStories from "./InPageAlert.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -59,9 +59,6 @@ In-page alerts do not have theme variants.
 -   <a className="figma-link" href={figmaLinks.inPageAlert.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.inPageAlert.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.inPageAlert.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/Introduction.mdx

@@ -1,8 +1,8 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Introduction" />
 
-# Queensland Government Design System - Core
+# Queensland Government Design System - VanillaJS - Edition
 
 The Queensland Government design system helps teams create consistent, user-centric digital experiences quickly.
 
@@ -24,12 +24,16 @@ Prior to using QGDS, please liaise with Queensland Online to ensure that the pla
 
 If you have already been through the recommendation process with Queensland Online and your site has been endorsed as an approved campaign or corporate site, and is outside the franchise or Forgov model, please contact us to discuss how your team could become a community consumer of the current version of QGDS.
 
+## Cloning the repository
+
+Use `git clone https://github.com/Qld-Health-Online-Team/design-system.git` to clone the repository locally.
+
 ## Running and building storybook
 
-If you haven't already, follow the below steps:
+Once you have cloned the repository, follow the below steps:
 
-1. Execute `npm install` in this directory to download the required dependencies
+1. Execute `npm install` in the directory to download the required dependencies
 
-2. Execute `npm run build-storybook` to generate and build necessary filters
+2. Execute `npm run build-storybook` to generate and build necessary files
 
 3. Execute `npm run storybook` to locally host the application

package/src/stories/LinkColumns/LinkColumns.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Story, Source } from "@storybook/blocks";
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
 import * as LinkColumns from "./LinkColumns.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -23,9 +23,6 @@ The link columns component consists of a single continuous list of links that ca
 -   <a className="figma-link" href={figmaLinks.linkColumns.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.linkColumns.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.linkColumns.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/Pagination/Pagination.mdx

@@ -0,0 +1,26 @@
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
+import * as PaginationStories from "./Pagination.stories";
+import { figmaLinks } from "../../../.storybook/globals";
+
+<Meta of={PaginationStories} />
+
+# Pagination
+
+## Overview
+
+Pagination is used to divide large amounts of content into a series of pages. This allows users to navigate through the content more easily, with controls for moving to the next or previous page, and an option to jump to a specific page. Whether it's search results or product catalogues, pagination helps users browse through the content in a more organised and manageable way.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Design resources
+
+-   <a className="figma-link" href={figmaLinks.pagination.design} target="_blank" rel="noopener noreferrer">
+        Component design view (Figma)
+    </a>
+-   <a className="figma-link" href={figmaLinks.pagination.ds} target="_blank" rel="noopener noreferrer">
+        Design System website
+    </a>

package/src/stories/Pagination/Pagination.stories.js

@@ -0,0 +1,257 @@
+import Handlebars from "handlebars";
+import Template from "../../components/pagination/html/component.hbs?raw";
+import { figmaLinks, themes } from "../../../.storybook/globals";
+
+const renderPagination = ({ data, ...args }) =>
+    Handlebars.compile(Template)({
+        pagination: data,
+        ...args,
+    });
+
+const paginationData = [
+    {
+        linkType: "prev",
+    },
+    {
+        label: 1,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 2,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 3,
+        isCurrent: true,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 4,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 5,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 8,
+        linkType: "last",
+        url: "https://www.google.com/",
+    },
+    {
+        linkType: "next",
+        url: "https://www.google.com/",
+    },
+];
+
+const paginationDataShort = [
+    {
+        linkType: "prev",
+    },
+    {
+        label: 1,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 2,
+        isCurrent: true,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 3,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        linkType: "next",
+        url: "https://www.google.com/",
+    },
+];
+
+const paginationDataLong = [
+    {
+        linkType: "prev",
+    },
+    {
+        label: 1,
+        isCurrent: false,
+        linkType: "first",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 6,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 7,
+        isCurrent: true,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 8,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 15,
+        isCurrent: false,
+        linkType: "last",
+        url: "https://www.google.com/",
+    },
+    {
+        linkType: "next",
+        url: "https://www.google.com/",
+    },
+];
+
+const paginationDataPreviousOnly = [
+    {
+        linkType: "prev",
+    },
+    {
+        label: 1,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 2,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 3,
+        isCurrent: true,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 4,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 5,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+];
+
+const paginationDataNextOnly = [
+    {
+        label: 1,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 2,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 3,
+        isCurrent: true,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 4,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        label: 5,
+        isCurrent: false,
+        linkType: "num",
+        url: "https://www.google.com/",
+    },
+    {
+        linkType: "next",
+        url: "https://www.google.com/",
+    },
+];
+
+export default {
+    title: "Components/Pagination",
+    render: renderPagination,
+    args: { data: paginationData },
+    parameters: {
+        design: {
+            type: "figma",
+            url: figmaLinks.pagination.design,
+        },
+    },
+};
+
+export const Default = {};
+
+export const light = {
+    render: (args) => {
+        return `<div class="${themes["light"]}">
+            ${renderPagination(args)}
+        </div>`;
+    },
+};
+
+export const lightAlt = {
+    render: (args) => {
+        return `<div class="${themes["light alt"]}">
+            ${renderPagination(args)}
+        </div>`;
+    },
+};
+
+export const dark = {
+    render: (args) => {
+        return `<div class="${themes["dark"]}">
+            ${renderPagination(args)}
+        </div>`;
+    },
+};
+
+export const darkAlt = {
+    render: (args) => {
+        return `<div class="${themes["dark alt"]}">
+            ${renderPagination(args)}
+        </div>`;
+    },
+};
+
+export const short = {
+    args: { data: paginationDataShort },
+};
+
+export const long = {
+    args: { data: paginationDataLong },
+};
+
+export const previousOnly = {
+    args: { data: paginationDataPreviousOnly },
+};
+
+export const nextOnly = {
+    args: { data: paginationDataNextOnly },
+};

package/src/stories/PromoPanel/PromoPanel.mdx

@@ -0,0 +1,26 @@
+import { Meta, Primary, Controls, Story, Source } from "@storybook/addon-docs/blocks";
+import * as PromoPanelStories from "./PromoPanel.stories";
+import { figmaLinks } from "../../../.storybook/globals";
+
+<Meta of={PromoPanelStories} />
+
+# Promo Panel
+
+## Overview
+
+Promotional panels are a key element in web design used to highlight specific content or messages. They act as a visual break on a page, drawing attention to important announcements, new features, or promotional content. These panels typically consist of a combination of text and images designed to engage users and guide them toward a desired action, such as clicking a link or learning more about a particular topic.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Design resources
+
+-   <a className="figma-link" href={figmaLinks.promoPanel.design} target="_blank" rel="noopener noreferrer">
+        Component design view (Figma)
+    </a>
+-   <a className="figma-link" href={figmaLinks.promoPanel.ds} target="_blank" rel="noopener noreferrer">
+        Design System website
+    </a>