@qhealth-design-system/core 1.18.4 → 1.19.0

package/src/stories/PromoPanel/PromoPanel.stories.js

@@ -0,0 +1,219 @@
+import Handlebars from "handlebars";
+import Template from "../../components/promo_panel/html/component.hbs?raw";
+import { figmaLinks, themes } from "../../../.storybook/globals";
+
+const renderPromoPanel = ({ id, type, title, abstract, body, promoImage, bodyBackground, imageAlignment, promoPanelIcon, linkType, ctaLinkTitle, ctaLink, primaryLinkTitle, primaryLink, secondaryLinkTitle, secondaryLink, ...args }) => {
+    const html = Handlebars.compile(Template)({
+        component: {
+            data: {
+                metadata: {
+                    id_field: { value: id },
+                    type: { value: type },
+                    title: { value: title },
+                    abstract: { value: abstract },
+                    body: { value: body },
+                    promo_image: { value: promoImage },
+                    body_background: { value: bodyBackground },
+                    image_alignment: { value: imageAlignment },
+                    promo_panel_icon: { value: promoPanelIcon },
+                    link_type: { value: linkType },
+                    cta_link_title: { value: ctaLinkTitle },
+                    cta_link: { value: ctaLink },
+                    primary_link_title: { value: primaryLinkTitle },
+                    primary_link: { value: primaryLink },
+                    secondary_link_title: { value: secondaryLinkTitle },
+                    secondary_link: { value: secondaryLink },
+                },
+            },
+        },
+        ...args,
+    });
+
+    // Custom code that is NOT part of the component template. Only used so that promo image can be displayed.
+    const container = document.createElement("div");
+    container.innerHTML = html;
+
+    const imgElement = type === "qld__body--full-image" ? container.querySelector(".qld__promo-panel__container") : container.querySelector(".qld__promo-panel__image");
+    if (imgElement && imgElement.style.backgroundImage) {
+        imgElement.style.backgroundImage = `url(${promoImage})`;
+    }
+
+    return container;
+};
+
+const promoPanelArgs = {
+    id: "promo-panel-1",
+    type: "",
+    title: "Promotional Panel Title",
+    abstract: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
+    body: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur",
+    promoImage: "https://www.cq.health.qld.gov.au/__data/assets/image/0025/139534/Woorabinda.jpg",
+    bodyBackground: "qld__body--light",
+    imageAlignment: "qld__promo-panel--image-left",
+    promoPanelIcon: "zoom",
+    linkType: "cta",
+    ctaLinkTitle: "Call to Action Link",
+    ctaLink: "#",
+    primaryLinkTitle: "Primary Link",
+    primaryLink: "#",
+    secondaryLinkTitle: "Secondary Link",
+    secondaryLink: "#",
+};
+
+export default {
+    title: "Components/Promo Panel",
+    render: renderPromoPanel,
+    argTypes: {
+        id: { description: "The unique identifier of the component.", control: "text" },
+        type: {
+            description: "The style of the component.",
+            control: {
+                type: "radio",
+                labels: {
+                    "": "Large image",
+                    "qld__body--large-text": "Large text",
+                    "qld__body--contained": "Contained",
+                    "qld__body--full-image": "Full image",
+                },
+            },
+            options: ["", "qld__body--large-text", "qld__body--contained", "qld__body--full-image"],
+            default: "",
+        },
+        title: { description: "The title of the component", control: "text" },
+        abstract: { description: "The abstract of the component.", control: "text" },
+        body: { description: "The body text.", control: "text" },
+        promoImage: { description: "The image on this component.", control: "text" },
+        bodyBackground: {
+            description: "The colour theme of the component.",
+            control: {
+                type: "radio",
+                labels: {
+                    "": "White",
+                    "qld__body--light": "Light",
+                    "qld__body--alt": "Alternate",
+                    "qld__body--dark": "Dark",
+                    "qld__body--dark-alt": "Dark Alternate",
+                },
+            },
+            options: ["", "qld__body--light", "qld__body--alt", "qld__body--dark", "qld__body--dark-alt"],
+            default: "",
+        },
+        imageAlignment: {
+            description: "The alignment of the image relative to the text.",
+            control: {
+                type: "radio",
+                labels: {
+                    "qld__promo-panel--image-left": "Left",
+                    "qld__promo-panel--image-right": "Right",
+                },
+            },
+            options: ["qld__promo-panel--image-left", "qld__promo-panel--image-right"],
+            default: "qld__promo-panel--image-left",
+        },
+        promoPanelIcon: { description: "The icon displayed", control: "text" },
+        linkType: {
+            description: "Whether the link should be of type CTA or Button.",
+            control: {
+                type: "radio",
+                labels: {
+                    cta: "CTA",
+                    button: "Button",
+                },
+            },
+            options: ["cta", "button"],
+            default: "cta",
+        },
+        ctaLinkTitle: { description: "CTA link title.", control: "text" },
+        ctaLink: { description: "CTA link link.", control: "text" },
+        primaryLinkTitle: { description: "Primary button title.", control: "text" },
+        primaryLink: { description: "Primary button link.", control: "text" },
+        secondaryLinkTitle: { description: "Secondary button title.", control: "text" },
+        secondaryLink: { description: "Secondary button link.", control: "text" },
+    },
+    args: { ...promoPanelArgs },
+    parameters: {
+        design: {
+            type: "figma",
+            url: figmaLinks.promoPanel.design,
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        ...promoPanelArgs,
+    },
+};
+
+export const defaultVariant = (promoPanelArgs) => renderPromoPanel({ ...promoPanelArgs, bodyBackground: "" });
+defaultVariant.tags = ["!dev"];
+
+export const largeText = {
+    args: {
+        ...promoPanelArgs,
+        type: "qld__body--large-text",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};
+
+export const contained = {
+    args: {
+        ...promoPanelArgs,
+        type: "qld__body--contained",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};
+
+export const fullImage = {
+    args: {
+        ...promoPanelArgs,
+        type: "qld__body--full-image",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};
+
+export const light = {
+    args: {
+        ...promoPanelArgs,
+        bodyBackground: "qld__body--light",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};
+
+export const lightAlt = {
+    args: {
+        ...promoPanelArgs,
+        bodyBackground: "qld__body--alt",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};
+
+export const dark = {
+    args: {
+        ...promoPanelArgs,
+        bodyBackground: "qld__body--dark",
+    },
+    render: (args) => {
+        return renderPromoPanel(args, themes["dark"]);
+    },
+};
+
+export const darkAlt = {
+    args: {
+        ...promoPanelArgs,
+        bodyBackground: "qld__body--dark-alt",
+    },
+    render: (args) => {
+        return renderPromoPanel(args);
+    },
+};

package/src/stories/RadioButtons/RadioButtons.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 radioButtonsStories from "./RadioButtons.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.radioButtons.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.radioButtons.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.radioButtons.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/SelectBox/SelectBox.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 selectBoxStories from "./SelectBox.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -113,9 +113,6 @@ We currently only have one style of select box but like other forms components i
 -   <a className="figma-link" href={figmaLinks.selectBox.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.selectBox.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.selectBox.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/Tags/Tags.js

@@ -21,7 +21,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
         case "filter":
             tagListContent = `
                 <li>
-                    <div class="qld__tag qld__tag--filter" tabindex="-1">
+                    <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
                             <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="/QLD-icons.svg#close"></use></svg>
@@ -30,7 +30,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
                     </div>
                 </li>
                 <li>
-                    <div class="qld__tag qld__tag--filter" tabindex="-1">
+                    <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
                             <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="/QLD-icons.svg#close"></use></svg>
@@ -39,7 +39,7 @@ export const Tags = ({ type, leadingText, text, isLargeTag, action }) => {
                     </div>
                 </li>
                 <li>
-                    <div class="qld__tag qld__tag--filter" tabindex="-1">
+                    <div class="qld__tag qld__tag--filter">
                         ${text}
                         <button class="qld__tag--filter-close" data-toggleUrl="{{toggleUrl}}">
                             <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="/QLD-icons.svg#close"></use></svg>

package/src/stories/Tags/Tags.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 TagsStories from "./Tags.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -58,9 +58,6 @@ Applied filter tags are a unique variant of large clickable tags that are used t
 -   <a className="figma-link" href={figmaLinks.tags.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a className="figma-link" href={figmaLinks.tags.file} target="_blank" rel="noopener noreferrer">
-        Component file (Figma)
-    </a>
 -   <a className="figma-link" href={figmaLinks.tags.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/VideoPlayer/VideoPlayer.mdx

@@ -1,11 +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 VideoPlayerStories from "./VideoPlayer.stories";
 import { figmaLinks } from "../../../.storybook/globals";
 
@@ -25,27 +18,9 @@ The Video Player component supports embedding videos from platforms such as Vime
 
 ## Design resources
 
--   <a
-        className="figma-link"
-        href={figmaLinks.videoPlayer.design}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
+-   <a className="figma-link" href={figmaLinks.videoPlayer.design} target="_blank" rel="noopener noreferrer">
         Component design view (Figma)
     </a>
--   <a
-        className="figma-link"
-        href={figmaLinks.videoPlayer.file}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
-        Component file (Figma)
-    </a>
--   <a
-        className="figma-link"
-        href={figmaLinks.videoPlayer.ds}
-        target="_blank"
-        rel="noopener noreferrer"
-    >
+-   <a className="figma-link" href={figmaLinks.videoPlayer.ds} target="_blank" rel="noopener noreferrer">
         Design System website
     </a>

package/src/stories/VideoPlayer/VideoPlayer.stories.js

@@ -1,6 +1,6 @@
 import Handlebars from "handlebars";
 import Template from "../../components/video_player/html/component.hbs?raw";
-import { figmaLinks, themes } from "../../../.storybook/globals";
+import { figmaLinks } from "../../../.storybook/globals";
 
 const videoPlayerArgs = {
     videoType: "vimeo",
@@ -10,31 +10,15 @@ const videoPlayerArgs = {
     videoId: "1001805640?h=414b9bb286",
     videoSize: "fill_grid",
     videoDuration: "2:30",
-    videoCaption:
-        "Living in Brisbane offers a vibrant city life with beautiful weather, diverse culture, stunning parks, and a thriving food scene",
-    transcriptOptions: "link",
+    videoCaption: "Living in Brisbane offers a vibrant city life with beautiful weather, diverse culture, stunning parks, and a thriving food scene",
+    transcriptOptions: "accordion",
     transcriptLink: "https://example.com/transcript",
     transcriptText: "Full transcript available here.",
     videoDescription:
         "<h2>Optional Heading</h2><p>psum vulputate faucibus commodo laoreet tincidunt amet suspendisse urna. Turpis elementum eget dis senectus in enim varius aliquam. Vel amet odio nibh at sollicitudin. Nullam condimentum lectus.</p>",
 };
 
-const renderVideoPlayer = ({
-    videoType,
-    videoLayout,
-    stackOptions,
-    videoAlignItems,
-    videoId,
-    videoSize,
-    videoDuration,
-    videoCaption,
-    transcriptOptions,
-    transcriptLink,
-    transcriptText,
-    videoDescription,
-    bodyBackground,
-    ...args
-}) => {
+const renderVideoPlayer = ({ videoType, videoLayout, stackOptions, videoAlignItems, videoId, videoSize, videoDuration, videoCaption, transcriptOptions, transcriptLink, transcriptText, videoDescription, bodyBackground, ...args }) => {
     return Handlebars.compile(Template)({
         component: {
             data: {
@@ -66,8 +50,7 @@ export default {
         videoType: {
             control: { type: "radio" },
             options: ["youtube", "vimeo"],
-            description:
-                "The platform hosting the video. Choose between YouTube or Vimeo.",
+            description: "The platform hosting the video. Choose between YouTube or Vimeo.",
         },
         videoLayout: {
             control: { type: "radio" },
@@ -78,20 +61,17 @@ export default {
             control: { type: "radio" },
             options: ["left_aligned", "centered"],
             if: { arg: "videoLayout", eq: "stack" },
-            description:
-                "Alignment of stacked elements. Only applicable when the layout is set to 'stack'.",
+            description: "Alignment of stacked elements. Only applicable when the layout is set to 'stack'.",
         },
         videoAlignItems: {
             control: { type: "radio" },
             options: ["top", "centered_vertically"],
             if: { arg: "videoLayout", neq: "stack" },
-            description:
-                "Vertical alignment of the video when not using a 'stack' layout.",
+            description: "Vertical alignment of the video when not using a 'stack' layout.",
         },
         videoId: {
             control: "text",
-            description:
-                "Unique identifier for the video. This can be a YouTube or Vimeo video ID.",
+            description: "Unique identifier for the video. This can be a YouTube or Vimeo video ID.",
         },
         videoSize: {
             control: { type: "radio" },
@@ -101,8 +81,7 @@ export default {
         },
         videoDuration: {
             control: "text",
-            description:
-                "The duration of the video in a readable format, e.g., '2:30'.",
+            description: "The duration of the video in a readable format, e.g., '2:30'.",
         },
         videoCaption: {
             control: "text",
@@ -117,25 +96,21 @@ export default {
                 },
             },
             options: ["link", "accordion"],
-            description:
-                "How the transcript is presented—either as a link or within an accordion.",
+            description: "How the transcript is presented—either as a link or within an accordion.",
         },
         transcriptLink: {
             control: { type: "text" },
             if: { arg: "transcriptOptions", eq: "link" },
-            description:
-                "The URL for the transcript link. Required if 'transcriptOptions' is set to 'link'.",
+            description: "The URL for the transcript link. Required if 'transcriptOptions' is set to 'link'.",
         },
         transcriptText: {
             control: { type: "text" },
             if: { arg: "transcriptOptions", eq: "accordion" },
-            description:
-                "The full transcript text. Required if 'transcriptOptions' is set to 'accordion'.",
+            description: "The full transcript text. Required if 'transcriptOptions' is set to 'accordion'.",
         },
         videoDescription: {
             control: "text",
-            description:
-                "An optional description providing additional details about the video content.",
+            description: "An optional description providing additional details about the video content.",
         },
         bodyBackground: {
             control: { type: "radio" },
@@ -150,7 +125,6 @@ export default {
             description: "The background theme for the video player.",
         },
     },
-
     args: { ...videoPlayerArgs },
     parameters: {
         design: {
@@ -166,16 +140,15 @@ export const Default = {
     },
 };
 
-export const defaultVariant = (videoPlayerArgs) =>
-    renderVideoPlayer({ ...videoPlayerArgs, videoType: "vimeo" });
+export const defaultVariant = (videoPlayerArgs) => renderVideoPlayer({ ...videoPlayerArgs, videoType: "vimeo" });
 defaultVariant.tags = ["!dev"];
 
-export const Light = {
+export const light = {
     args: {
         ...videoPlayerArgs,
         bodyBackground: "light",
     },
-    render: (args) => renderVideoPlayer(args, themes["light"]),
+    render: (args) => renderVideoPlayer(args),
 };
 
 export const lightAlt = {
@@ -183,7 +156,7 @@ export const lightAlt = {
         ...videoPlayerArgs,
         bodyBackground: "alt",
     },
-    render: (args) => renderVideoPlayer(args, themes["light alt"]),
+    render: (args) => renderVideoPlayer(args),
 };
 
 export const dark = {
@@ -191,7 +164,7 @@ export const dark = {
         ...videoPlayerArgs,
         bodyBackground: "dark",
     },
-    render: (args) => renderVideoPlayer(args, themes["dark"]),
+    render: (args) => renderVideoPlayer(args),
 };
 
 export const darkAlt = {
@@ -199,5 +172,5 @@ export const darkAlt = {
         ...videoPlayerArgs,
         bodyBackground: "dark-alt",
     },
-    render: (args) => renderVideoPlayer(args, themes["dark alt"]),
+    render: (args) => renderVideoPlayer(args),
 };

package/src/styles/imports/utilities.scss

@@ -99,11 +99,11 @@ img.pull-right {
 }
 
 .qld__text-bold {
-    font-weight: 700;
+    font-weight: $QLD-font-weight-bold;
 }
 
 .qld__text-normal {
-    font-weight: 400;
+    font-weight: $QLD-font-weight-regular;
 }
 
 .qld__text-italic {
@@ -172,7 +172,7 @@ a.qld__max-width {
     .qld__default-xl,
     .qld__default-xxl,
     .qld__default-xxxl {
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
     }
 
     .qld__no-space {

package/src/styles/imports/variables.scss

@@ -38,6 +38,11 @@ $QLD-font-display: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", H
 
 $QLD-font-monospace: "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
 
+// Font weights
+$QLD-font-weight-regular: 400;
+$QLD-font-weight-semibold: 600;
+$QLD-font-weight-bold: 700;
+
 /**
   * QLD-fontsize-map
   *