@qhealth-design-system/core 1.20.2 → 1.21.0

package/src/data/current.json

@@ -261,97 +261,18 @@
             "asset_name": "Components &",
             "asset_short_name": "Components &",
             "children": [
-                {
-                    "asset_url": "/component-a-z_listing.html",
-                    "asset_name": "A-z_listing",
-                    "asset_short_name": "A-z_listing",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-abstract.html",
-                    "asset_name": "Abstract",
-                    "asset_short_name": "Abstract",
-                    "asset_metadata_shortDescription": "",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-accordion.html",
                     "asset_name": "Accordion",
                     "asset_short_name": "Accordion",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-banner.html",
-                    "asset_name": "Banner",
-                    "asset_short_name": "Banner",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-banner_advanced.html",
-                    "asset_name": "Banner Advanced",
-                    "asset_short_name": "Banner Advanced",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-banner_basic.html",
-                    "asset_name": "Banner_basic",
-                    "asset_short_name": "Banner_basic",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-banner_intermediate.html",
-                    "asset_name": "Banner_intermediate",
-                    "asset_short_name": "Banner_intermediate",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-basic_search.html",
                     "asset_name": "Basic_search",
                     "asset_short_name": "Basic_search",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-body.html",
-                    "asset_name": "Body",
-                    "asset_short_name": "Body",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-btn.html",
-                    "asset_name": "Buttons",
-                    "asset_short_name": "Buttons",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-callout.html",
-                    "asset_name": "Callout",
-                    "asset_short_name": "Callout",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-card_feature.html",
-                    "asset_name": "Card_feature",
-                    "asset_short_name": "Card_feature",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-card_multi_action.html",
-                    "asset_name": "Card_multi_action",
-                    "asset_short_name": "Card_multi_action",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-card_no_action.html",
-                    "asset_name": "Card_no_action",
-                    "asset_short_name": "Card_no_action",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-card_single_action.html",
-                    "asset_name": "Card_single_action",
-                    "asset_short_name": "Card_single_action",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-code.html",
                     "asset_name": "Code",
@@ -364,12 +285,6 @@
                     "asset_short_name": "File_upload",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-forms.html",
-                    "asset_name": "Forms",
-                    "asset_short_name": "Forms",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-global-elements.html",
                     "asset_name": "Global elements",
@@ -382,66 +297,18 @@
                     "asset_short_name": "Horizontal Rule",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-in_page_navigation.html",
-                    "asset_name": "In Page Navigation",
-                    "asset_short_name": "In Page Navigation",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-loading_spinner.html",
-                    "asset_name": "Loading_spinner",
-                    "asset_short_name": "Loading_spinner",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-multi_column.html",
                     "asset_name": "Multi Column",
                     "asset_short_name": "Multi Column",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-overflow_menu.html",
-                    "asset_name": "Overflow_menu",
-                    "asset_short_name": "Overflow_menu",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-page_alert.html",
-                    "asset_name": "Page Alert",
-                    "asset_short_name": "Page Alert",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-promo_panel.html",
-                    "asset_name": "Promo_panel",
-                    "asset_short_name": "Promo_panel",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-search_box.html",
-                    "asset_name": "Search Box",
-                    "asset_short_name": "Search Box",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-tab.html",
                     "asset_name": "Tab",
                     "asset_short_name": "Tab",
                     "children": []
                 },
-                {
-                    "asset_url": "/component-tag_list.html",
-                    "asset_name": "Tag List",
-                    "asset_short_name": "Tag List",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-tag_list_linked.html",
-                    "asset_name": "Tag List Linked",
-                    "asset_short_name": "Tag List Linked",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-toggle_tip.html",
                     "asset_name": "Toggle tip",
@@ -453,12 +320,6 @@
                     "asset_name": "Tool tip",
                     "asset_short_name": "Tool tip",
                     "children": []
-                },
-                {
-                    "asset_url": "/component-video_player.html",
-                    "asset_name": "Video player",
-                    "asset_short_name": "Video player",
-                    "children": []
                 }
             ]
         },
@@ -468,36 +329,6 @@
             "asset_name": "Site templates",
             "asset_short_name": "Site templates",
             "children": [
-                {
-                    "asset_url": "/component-banner.html",
-                    "asset_name": "Banner",
-                    "asset_short_name": "Banner",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-breadcrumbs.html",
-                    "asset_name": "Breadcrumbs",
-                    "asset_short_name": "Breadcrumbs",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-footer.html",
-                    "asset_name": "Footer",
-                    "asset_short_name": "Footer",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-global_alert.html",
-                    "asset_name": "Global Alert",
-                    "asset_short_name": "Global Alert",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-header.html",
-                    "asset_name": "Header",
-                    "asset_short_name": "Header",
-                    "children": []
-                },
                 {
                     "asset_url": "/component-internal_navigation.html",
                     "asset_name": "Internal Navigation",
@@ -515,24 +346,6 @@
                     "asset_name": "Mega Main Navigation",
                     "asset_short_name": "Mega Main Navigation",
                     "children": []
-                },
-                {
-                    "asset_url": "/component-pagination.html",
-                    "asset_name": "Pagination",
-                    "asset_short_name": "Pagination",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-tags_metadata.html",
-                    "asset_name": "Tags Metadata",
-                    "asset_short_name": "Tags Metadata",
-                    "children": []
-                },
-                {
-                    "asset_url": "/component-prefooter.html",
-                    "asset_name": "Page Footer Info",
-                    "asset_short_name": "Page Footer Info",
-                    "children": []
                 }
             ]
         },

package/src/helpers/Handlebars/renderEncoded.js

@@ -0,0 +1,9 @@
+module.exports = function (string) {
+    if (!string) return "";
+
+    return string
+        .replace(/<[^>]*>/g, "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+};

package/src/html/home.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--[if lt IE 8]>
         <html class="no-js lt-ie8 lt-ie9" lang="en">
     <![endif]-->
@@ -1860,11 +1860,6 @@
             "component":require('../components/banner_advanced/js/manifest.json').component,
             "site":require('/src/data/site.json'),
             "current":require('/src/data/current.json')
-        })} -->
-            <!-- {require('../components/banner_intermediate/html/component.hbs')({
-            "component":require('../components/banner_intermediate/js/manifest.json').component,
-            "site":require('/src/data/site.json'),
-            "current":require('/src/data/current.json')
         })} -->
             <!-- {require('../components/banner_basic/html/component.hbs')({
             "component":require('../components/banner_basic/js/manifest.json').component,

package/src/html/inner-with-nav.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--[if lt IE 8]>
         <html class="no-js lt-ie8 lt-ie9" lang="en">
     <![endif]-->
@@ -554,8 +554,6 @@
             ${require('../components/left_hand_navigation/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
 
             <div class="qld__body--left-nav">
-                ${require('../components/banner_intermediate/html/component.hbs')({ "component":require('../components/banner_intermediate/js/manifest.json').component, "site":require('/src/data/site.json'),
-                "current":require('/src/data/current.json'), "content":"Lorem Ipsum" })}
                 <section class="qld__body qld__body--breadcrumb">
                     <div class="container-fluid">
                         <!-- {require('../components/breadcrumbs/html/component.hbs')({

package/src/stories/AZListing/a-z_listing.stories.js

@@ -0,0 +1,72 @@
+import Template from "../../components/a-z_listing/html/component.hbs";
+import { storyParams } from "../../../.storybook/globals";
+
+function render({ letterHeading, children }) {
+    return Template({
+        component: {
+            data: {
+                metadata: {
+                    letter_heading: { value: letterHeading },
+                },
+            },
+            children,
+        },
+    });
+}
+
+const parameters = storyParams("aZListing");
+
+const meta = {
+    title: "3. Components/A-Z Listing",
+    render,
+    argTypes: {
+        letterHeading: {
+            name: "heading_level",
+            control: {
+                type: "radio",
+                labels: { h2: "H2", h3: "H3", h4: "H4", h5: "H5", span: "span" },
+            },
+            options: ["h2", "h3", "h4", "h5", "span"],
+            table: { defaultValue: { summary: "h2" } },
+        },
+    },
+    args: {
+        letterHeading: "h2",
+        children: [
+            { assetid: "1", name: "Accordion" },
+            { assetid: "2", name: "Alerts (in-page)" },
+            { assetid: "3", name: "Breadcrumbs" },
+            { assetid: "4", name: "Button" },
+            { assetid: "5", name: "Callout" },
+            { assetid: "6", name: "Card" },
+            { assetid: "7", name: "Footer" },
+            { assetid: "8", name: "Header" },
+            { assetid: "9", name: "In-page navigation" },
+            { assetid: "10", name: "Pagination" },
+            { assetid: "11", name: "Tabs" },
+            { assetid: "12", name: "Tags" },
+            { assetid: "13", name: "Video player" },
+        ],
+    },
+    parameters: {
+        ...parameters,
+        docs: {
+            ...parameters.docs,
+            description: {
+                component:
+                    "The A-Z listing component groups a set of links alphabetically by their first letter, " +
+                    "displaying each group under a letter heading so users can scan and find content quickly.\n" +
+                    "\n" +
+                    "It is typically used for index or directory pages where a long list of items benefits from being " +
+                    "broken into alphabetical sections.",
+            },
+        },
+    },
+};
+export default meta;
+
+export const Default = {};
+
+export const Empty = {
+    args: { children: [] },
+};

package/src/stories/Abstract/abstract.stories.js

@@ -0,0 +1,68 @@
+import Template from "../../components/abstract/html/component.hbs";
+import { dummyText, storyParams } from "../../../.storybook/globals";
+import { expect } from "storybook/test";
+
+function render({ id, content }) {
+    return Template({
+        component: {
+            data: {
+                assetid: "123",
+                metadata: {
+                    id_field: { value: id },
+                    content: { value: content },
+                },
+            },
+        },
+    });
+}
+
+const parameters = storyParams("abstract");
+
+const meta = {
+    title: "3. Components/Abstract",
+    render,
+    argTypes: {
+        id: {
+            name: "id_field",
+            description: "Optional anchor ID applied to the wrapping section. Falls back to abstract-{assetid} when empty.",
+            control: { type: "text" },
+        },
+        content: {
+            description: "Rich-text (WYSIWYG) content displayed inside the abstract.",
+            control: { type: "text" },
+        },
+    },
+    args: {
+        id: "abstract-000",
+        content: dummyText,
+    },
+    parameters: {
+        ...parameters,
+        docs: {
+            ...parameters.docs,
+            description: {
+                component:
+                    "The Abstract component displays a short summary or introductory passage of rich-text content, " +
+                    "giving users a quick overview of a page before they read the full content.\n" +
+                    "\n" +
+                    "The content is authored as WYSIWYG markup and sits inside a styled `qld__body` section. The" +
+                    " wrapping section can be given an anchor `id` so it can be linked to directly; when none is " +
+                    "supplied it falls back to `abstract-{assetid}`.",
+            },
+        },
+    },
+};
+export default meta;
+
+export const Default = {};
+
+export const Empty = {
+    args: {
+        id: undefined,
+        content: undefined,
+    },
+    play: async ({ canvasElement }) => {
+        const section = canvasElement.querySelector(".qld__abstract--wrapper");
+        await expect(section).toHaveAttribute("id", "abstract-123");
+    },
+};

package/src/stories/BackToTop/BackToTop.stories.js

@@ -1,28 +1,18 @@
-import { BackToTop } from "./BackToTop";
-import { figmaLinks } from "../../../.storybook/globals";
-
-const backtotopArgs = {
-    text: "Back to top",
-};
+import { storyParams } from "../../../.storybook/globals";
 
 export default {
-    title: "3. Components/BackToTop",
-    render: (args) => BackToTop(args), // calls the function
-    argTypes: {
-        text: { control: "text", description: "Back to top" },
-    },
+    title: "3. Components/Back to Top",
+    render: ({ text }) => `
+          <div class="qld__widgets__back_to_top">
+              <a href="#content" class="qld__direction-link qld__direction-link--up" aria-label="Back to top">
+                  ${text}
+              </a>
+          </div>
+      `,
     args: {
-        ...backtotopArgs,
-    },
-    parameters: {
-        design: {
-            type: "figma",
-            url: figmaLinks.backToTop.design,
-        },
+        text: "Back to top",
     },
+    parameters: storyParams("backToTop"),
 };
 
-// Named story
-export const Default = {
-    args: { ...backtotopArgs },
-};
+export const Default = {};

package/src/stories/Banner/banner.stories.js

@@ -0,0 +1,76 @@
+import Template from "../../components/banner/html/component.hbs";
+import { storyParams } from "../../../.storybook/globals";
+
+const mockLineage = [
+    { asset_url: "#", asset_short_name: "Home", asset_type_code: "page", asset_is_site_asset: "1" },
+    { asset_url: "#", asset_short_name: "Section", asset_type_code: "page", asset_is_site_asset: "0" },
+    { asset_url: "#", asset_short_name: "Current page", asset_type_code: "page", asset_is_site_asset: "0" },
+];
+
+function render(args) {
+    const { pageTitle, bannerColour, showBreadcrumbs } = args;
+    return Template({
+        site: {
+            metadata: {
+                ...args.site.metadata,
+                defaultBannerColour: { value: bannerColour },
+            },
+        },
+        current: {
+            data: {
+                name: pageTitle,
+                metadata: {
+                    displayBreadcrumbs: { value: showBreadcrumbs ? "true" : "false" },
+                },
+            },
+            lineage: showBreadcrumbs ? mockLineage : [],
+        },
+        metadata: {
+            breadcrumbs_display: { value: showBreadcrumbs ? "yes" : "" },
+            background_colour: { value: bannerColour },
+        },
+    });
+}
+
+const meta = {
+    title: "3. Components/Banner",
+    render,
+    argTypes: {
+        pageTitle: {
+            description: "The page title displayed in the banner.",
+            control: { type: "text" },
+        },
+        bannerColour: {
+            description: "Background colour theme of the banner.",
+            control: {
+                type: "select",
+                labels: {
+                    "": "White (default)",
+                    light: "Light",
+                    alternate: "Alternate",
+                    dark: "Dark",
+                    "dark-alternate": "Dark Alternate",
+                },
+            },
+            options: ["", "light", "alternate", "dark", "dark-alternate"],
+        },
+        showBreadcrumbs: {
+            description: "Display breadcrumb navigation in the banner.",
+            control: { type: "boolean" },
+        },
+    },
+    args: {
+        pageTitle: "Default Banner",
+        bannerColour: "alternate",
+        showBreadcrumbs: true,
+    },
+    parameters: storyParams("banner"),
+};
+
+export default meta;
+
+export const Default = {};
+
+export const WithoutBreadcrumbs = {
+    args: { showBreadcrumbs: false },
+};