@qhealth-design-system/core 1.22.2 → 1.23.0

package/src/stories/Templates/LandingPage.stories.js

@@ -0,0 +1,193 @@
+import { initComponents } from "../../../.storybook/decorators";
+import { initMegaMenu } from "../../components/mega_main_navigation/js/global";
+import initCtaLinks from "../../components/_global/js/cta_links/global";
+import initCards from "../../components/card_no_action/js/global";
+import initBannerAdvanced from "../../components/banner_advanced/js/global";
+import initPromoPanel from "../../components/promo_panel/js/global";
+import CardSingleActionMeta from "../Cards/CardSingleAction.stories.js";
+import ToowoombaImage from "../Cards/Toowoomba-web.jpeg";
+import {
+  renderSiteHeader,
+  renderSiteFooter,
+  renderPrefooter,
+  renderAdvancedBanner,
+  renderPromoPanel,
+  icon,
+} from "./templateHelpers.js";
+
+// "Our facilities": a feature card (image on the right) beside a link list of
+// related facilities. The card mirrors the card_feature component's markup so it
+// sits cleanly in a grid column, with contact links in its footer.
+const facilitiesSection = () => {
+  const contact = (iconName, text, href) =>
+    `<li><a class="qld__card__footer-link" href="${href}">${icon(iconName, "qld__card__footer-link-icon")}<span>${text}</span></a></li>`;
+
+  const facilityLink = (text) => `<li><a href="#">${text}</a></li>`;
+
+  return `
+    <section class="qld__body">
+      <div class="container-fluid">
+        <h2>Our facilities</h2>
+        <div class="row">
+          <div class="col-xs-12 col-lg-8">
+            <div class="qld__card qld__card__multi-action qld__card--image qld__card__multi-action--feature qld__card__multi-action--image-right">
+              <div class="qld__card__image-wrapper">
+                <div
+                  class="qld__responsive-media-img--bg"
+                  style="background-image: url('${ToowoombaImage}');"
+                  role="img"
+                  aria-label="Toowoomba Hospital"
+                ></div>
+              </div>
+              <div class="qld__card__inner">
+                <div class="qld__card__content">
+                  <div class="qld__card__content-inner">
+                    <h3 class="qld__card__title">
+                      <a class="qld__card--clickable__link" href="#">Toowoomba Hospital</a>
+                    </h3>
+                    <p class="qld__card__description">Address: Pechey St, Toowoomba QLD 4350</p>
+                  </div>
+                </div>
+                <div class="qld__card__footer">
+                  <hr class="qld__horizontal-rule" aria-hidden="true" />
+                  <div class="qld__card__footer-inner">
+                    <ul class="qld__link-list">
+                      ${contact("phone", "Phone 07 4616 6000", "tel:0746166000")}
+                      ${contact("alert-warning", "For emergencies call 000", "tel:000")}
+                      ${contact("phone", "For non-urgent health advice call 13 HEALTH (13 43 25 84)", "tel:134325")}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-12 col-lg-4">
+            <h3>Hospitals and health centres</h3>
+            <ul aria-label="Hospitals and health centres" class="qld__link-columns">
+              ${facilityLink("Baillie Henderson Hospital")}
+              ${facilityLink("Warwick Hospital")}
+              ${facilityLink("Kingaroy Hospital")}
+              ${facilityLink("Dalby Hospital")}
+              <li class="qld__link-columns__all-link">
+                <a href="#" class="qld__cta-link qld__cta-link--view-all">All hospitals and facilities</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  `;
+};
+
+// "Our services": a grid of icon cards. Reuses the Card (single action) story so
+// the grid stays in sync with the component; only the section content differs.
+const serviceCard = (id, name, iconName) => ({
+  assetid: String(id),
+  type_code: "page_standard",
+  name,
+  metadata: {
+    shortDescription: { value: "" },
+    cardIcon: { value: iconName },
+    redirect_url: { value: "#" },
+    cardDisplayFooter: { value: "false" },
+    cardFooterContent: { value: "" },
+  },
+});
+
+const servicesSection = () => {
+  const result = CardSingleActionMeta.render({
+    ...CardSingleActionMeta.args,
+    cardType: "icon",
+    iconAlign: "",
+    colWidth: "col-md-6 col-lg-4",
+    showArrow: false,
+    showViewAll: true,
+    introHeading: "Our services",
+    bodyBackground: "qld__body--light",
+    // Card icons render through `iconSwitch` as Material Symbols ligatures
+    // (the font is loaded in .storybook/preview-head.html), so these are
+    // Material Symbols Rounded names.
+    children: [
+      serviceCard(1, "Community health", "groups"),
+      serviceCard(2, "Sexual health", "favorite"),
+      serviceCard(3, "Dental", "dentistry"),
+      serviceCard(4, "Maternity", "pregnant_woman"),
+      serviceCard(5, "Mental health", "psychology"),
+      serviceCard(6, "Emergency", "emergency"),
+    ],
+  });
+  return typeof result === "string" ? result : result.innerHTML;
+};
+
+/**
+ * A full landing page: header + mega main nav, an advanced hero banner (with a
+ * link list and image), an "Our facilities" section (feature card + link list)
+ * and an "Our services" grid of cards, then the pre-footer and footer.
+ */
+function renderLandingPage(args) {
+  const { site } = args;
+
+  return `
+    ${renderSiteHeader(site)}
+    <main class="main landing" role="main">
+      ${renderAdvancedBanner({
+        headingPrimary: "Darling Downs Health",
+        showHeadingBackground: true,
+        abstract:
+          "Hospitals, health services and support for the Darling Downs and South West communities.",
+        backgroundColour: "dark",
+        backgroundType: "colour",
+        showBreadcrumbs: true,
+        heroImage: "https://placehold.co/782x520",
+        heroImageAlt: "Toowoomba Hospital",
+        heroImageTreatment: "crop",
+        heroImageAlignment: "grid",
+        ctaType: "link-list",
+      })}
+      ${facilitiesSection()}
+      ${servicesSection()}
+      ${renderPromoPanel(site, {
+        title: "Find a health service near you",
+        abstract:
+          "Search our directory of hospitals, community health centres and support services across the Darling Downs and South West.",
+        imageAlignment: "qld__promo-panel--image-right",
+        bodyBackground: "qld__body--dark",
+        promoPanelIcon: undefined,
+      })}
+      ${renderPrefooter(site, { pageType: "landing" })}
+    </main>
+    ${renderSiteFooter(site)}
+  `;
+}
+
+export default {
+  title: "4. Templates/Landing page",
+  render: renderLandingPage,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A representative landing page assembled from the design system's " +
+          "layout and component stories: header with the horizontal mega " +
+          "navigation, an advanced hero banner with a link list, an 'Our " +
+          "facilities' section pairing a feature card with a link list, an " +
+          "'Our services' grid of cards, then the pre-footer and footer.",
+      },
+    },
+  },
+  decorators: [
+    initComponents([
+      initMegaMenu,
+      initCtaLinks,
+      initCards,
+      initBannerAdvanced,
+      initPromoPanel,
+    ]),
+  ],
+  argTypes: {
+    site: { table: { disable: true } },
+  },
+};
+
+export const Default = {};

package/src/stories/Templates/templateHelpers.js

@@ -0,0 +1,102 @@
+// Shared building blocks for the page-template demo stories.
+//
+// These templates don't introduce any new markup of their own — they stitch
+// together the existing component stories so the demos stay in sync with the
+// components they showcase. Each helper calls the relevant story's own `render`
+// (exported as `meta.render`) with that story's default args, letting callers
+// override only what a page needs. This is the same approach Header.js uses to
+// embed the mega nav.
+
+import { renderHeader, headerArgs } from "../Header/Header.js";
+import FooterMeta from "../Footer/Footer.stories.js";
+import PrefooterMeta from "../Prefooter/Prefooter.stories.js";
+import BannerBasicMeta from "../Banner/bannerBasic.stories.js";
+import BannerAdvancedMeta from "../Banner/bannerAdvanced.stories.js";
+import SideNavMeta from "../Navigation/InternalNavigation/InternalNavigation.stories.js";
+import InPageNavMeta from "../Navigation/InPageNavigation/InPageNavigation.stories.js";
+import PromoPanelMeta from "../PromoPanel/PromoPanel.stories.js";
+import { dummyText, iconSpritePath } from "../../../.storybook/globals";
+
+/** An inline SVG icon referencing the shared sprite (as `iconSwitch` produces). */
+export const icon = (name, extraClass = "") =>
+  `<svg class="qld__icon ${extraClass}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${iconSpritePath}#${name}"></use></svg>`;
+
+/** Header chrome (pre-header, logo, search) plus the horizontal mega nav. */
+export const renderSiteHeader = (site) => renderHeader({ ...headerArgs, site });
+
+/** Footer. `site` carries the shared `coreSiteIcons` metadata the SVGs need. */
+export const renderSiteFooter = (site) =>
+  FooterMeta.render({ ...FooterMeta.args, site });
+
+/** Pre-footer ("Last updated" + "Back to top"). */
+export const renderPrefooter = (site, overrides = {}) =>
+  PrefooterMeta.render({ ...PrefooterMeta.args, site, ...overrides });
+
+/**
+ * Page banner. The basic banner story renders into a detached container (so it
+ * can swap in the bundled texture image), so unwrap it to a markup string.
+ */
+export const renderBanner = (overrides = {}) => {
+  const result = BannerBasicMeta.render({
+    ...BannerBasicMeta.args,
+    ...overrides,
+  });
+  return typeof result === "string" ? result : result.innerHTML;
+};
+
+/**
+ * Advanced banner (hero image + a link-list, icon-tile or button CTA). Like the
+ * basic banner it renders into a detached container so it can swap in a bundled
+ * hero image, so unwrap it to a markup string.
+ */
+export const renderAdvancedBanner = (overrides = {}) => {
+  const result = BannerAdvancedMeta.render({
+    ...BannerAdvancedMeta.args,
+    ...overrides,
+  });
+  return typeof result === "string" ? result : result.innerHTML;
+};
+
+/** Side (internal) navigation for the current section. */
+export const renderSideNav = (overrides = {}) =>
+  SideNavMeta.render({ ...SideNavMeta.args, ...overrides });
+
+/** "On this page" in-page navigation. It scans `#content` for headings at run time. */
+export const renderInPageNav = (overrides = {}) =>
+  InPageNavMeta.render({ ...InPageNavMeta.args, ...overrides });
+
+/**
+ * Promo panel. Like the banners it renders into a detached container (so it can
+ * swap in the bundled promo image), so unwrap it to a markup string. `site`
+ * carries the `coreSiteIcons` metadata the panel's icon SVG references — the
+ * template stories render children directly, bypassing the global `site` arg.
+ */
+export const renderPromoPanel = (site, overrides = {}) => {
+  const result = PromoPanelMeta.render({
+    ...PromoPanelMeta.args,
+    site,
+    ...overrides,
+  });
+  return typeof result === "string" ? result : result.innerHTML;
+};
+
+/**
+ * A block of representative page copy: a handful of `h2` sections (each with a
+ * short `h3` sub-section) so the in-page nav has real anchors to list.
+ */
+export const contentBody = () => {
+  const section = (heading, sub) => `
+    <h2>${heading}</h2>
+    <p>${dummyText}</p>
+    <p>${dummyText}</p>
+    <h3>${sub}</h3>
+    <p>${dummyText}</p>
+  `;
+
+  return [
+    section("Overview", "Who this is for"),
+    section("Eligibility", "What you need"),
+    section("How to apply", "Step by step"),
+    section("After you apply", "What happens next"),
+  ].join("");
+};

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

@@ -261,15 +261,31 @@ export const TranscriptToggle = {
     await new Promise((resolve) => setTimeout(resolve, 0));
 
     const button = canvasElement.querySelector(".qld__accordion__title");
+
+    // The label sync rewrites textContent on each toggle. Assert the icons
+    // sitting alongside the text survive it — writing to their wrapper
+    // instead of the text span would silently remove them.
+    const expectIconsIntact = async () => {
+      await expect(
+        button.querySelector("use[href$='#transcript']"),
+      ).toBeInTheDocument();
+      await expect(
+        button.querySelector("use[href$='#chevron-up']"),
+      ).toBeInTheDocument();
+    };
+
     await expect(button).toHaveTextContent("Show transcript");
     await expect(button).toHaveAttribute("aria-expanded", "false");
+    await expectIconsIntact();
 
     await userEvent.click(button);
     await expect(button).toHaveTextContent("Hide transcript");
     await expect(button).toHaveAttribute("aria-expanded", "true");
+    await expectIconsIntact();
 
     await userEvent.click(button);
     await expect(button).toHaveTextContent("Show transcript");
     await expect(button).toHaveAttribute("aria-expanded", "false");
+    await expectIconsIntact();
   },
 };

package/src/styles/imports/utilities.scss

@@ -319,31 +319,21 @@ a.qld__max-width {
   Border radius utility
 */
 
-.qld__border-radius--xs {
-  border-radius: $QLD-border-radius-xs;
-}
-
-.qld__border-radius--sm {
-  border-radius: $QLD-border-radius-sm;
-}
-
-.qld__border-radius--md {
-  border-radius: $QLD-border-radius-md;
-}
-
-.qld__border-radius--lg {
-  border-radius: $QLD-border-radius-md;
-
-  @include QLD-media(lg) {
-    border-radius: $QLD-border-radius-lg;
-  }
-}
-
-.qld__border-radius--lg {
-  border-radius: $QLD-border-radius-lg;
-
-  @include QLD-media(lg) {
-    border-radius: $QLD-border-radius-xl;
+/*
+ * The applied radius is also published as `--QLD-applied-border-radius` so
+ * neighbouring elements can match the shape — see the captioned image rules in
+ * `_global/css/img/images.scss`.
+ */
+@each $name, $radii in $QLD-border-radius-scale {
+  .qld__border-radius--#{$name} {
+    --QLD-applied-border-radius: #{nth($radii, 1)};
+    border-radius: var(--QLD-applied-border-radius);
+
+    @if nth($radii, 2) {
+      @include QLD-media(lg) {
+        --QLD-applied-border-radius: #{nth($radii, 2)};
+      }
+    }
   }
 }
 

package/src/styles/imports/variables.scss

@@ -262,6 +262,32 @@ $QLD-border-radius-lg: map-get($QLD-space-map, 7) + px;
 $QLD-border-radius-xl: map-get($QLD-space-map, 9) + px;
 $QLD-border-radius-xxl: map-get($QLD-space-map, 12) + px;
 
+/**
+* QLD border-radius utility scale
+*
+* Each step is (mobile radius, lg-breakpoint radius). A null second value means
+* the radius does not change at lg. Drives the `.qld__border-radius--*`
+* utilities and anything that has to match them.
+*/
+$QLD-border-radius-scale: (
+  "xs": (
+    $QLD-border-radius-xs,
+    null,
+  ),
+  "sm": (
+    $QLD-border-radius-sm,
+    null,
+  ),
+  "md": (
+    $QLD-border-radius-md,
+    null,
+  ),
+  "lg": (
+    $QLD-border-radius-lg,
+    $QLD-border-radius-xl,
+  ),
+);
+
 /**
 * QLD underline-thickness values
 */

package/src/components/_global/html/head.html

@@ -1,22 +0,0 @@
-<!-- Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<!-- Imports -->
-<link
-  href="https://fonts.googleapis.com/css?family=Noto Sans:wght@300;400;600;700;900&display=swap"
-  rel="stylesheet"
-/>
-
-<script
-  id="globals-loader"
-  data-current='${JSON.stringify(require("/src/data/current.json"))}'
-  data-site='${JSON.stringify(require("/src/data/site.json"))}'
->
-  var current = JSON.parse(
-    document.getElementById("globals-loader").getAttribute("data-current"),
-  );
-  var site = JSON.parse(
-    document.getElementById("globals-loader").getAttribute("data-site"),
-  );
-  var userData = { superAdmin: false, hhsGroup: "darling-downs" };
-</script>

package/src/components/_global/html/scripts.html

@@ -1,28 +0,0 @@
-<script src="https://sdk.datastore.squiz.cloud/js/sdk-simulator.js"></script>
-
-<script src="externals/handlebars.min-v4.7.8.js"></script>
-<script src="externals/componentPreview.js"></script>
-<script src="js/helpers.js"></script>
-<script>
-  const serviceFinderData = new Datastore({
-    // serviceURL: 'http://0.0.0.0:7001/hXL8Q1uq', // Matt
-    //serviceURL: 'http://0.0.0.0:7001/afMhajMG', // Tom
-    serviceURL: "http://0.0.0.0:7001/GbO0pTqv", // Julian
-    //serviceURL: 'https://au-a14fc409.datastore.squiz.cloud',
-    jwtURL: "http://0.0.0.0:7001/__JWT/issueToken",
-  });
-
-  serviceFinderData.setSetting("jwtPayload", {
-    username: "jdoe",
-    fullName: "John Doe",
-    dsAdmin: false,
-    hhsGroup: "sunshine-coast",
-    isPublic: false,
-    currentHHS: true,
-  });
-</script>
-
-<script src="externals/populateDatastoreSim.js"></script>
-
-<!-- Configure Default HHS -->
-<div id="qhealth__hhs" data-hhs="darling-downs"></div>

package/src/components/_global/js/_polyfills/global.js

@@ -1,19 +0,0 @@
-// IE 11 polyfill for .matches
-if (!Element.prototype.matches) {
-  Element.prototype.matches =
-    Element.prototype.msMatchesSelector ||
-    Element.prototype.webkitMatchesSelector;
-}
-
-// IE 11 polyfill for .closest
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function (s) {
-    var el = this;
-
-    do {
-      if (Element.prototype.matches.call(el, s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null && el.nodeType === 1);
-    return null;
-  };
-}

package/src/components/_template/html/component-page.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<!--[if lt IE 8]>
-        <html class="no-js lt-ie8 lt-ie9" lang="en">
-    <![endif]-->
-<!--[if IE 8]>
-        <html class="no-js lt-ie9 ie8" lang="en">
-    <![endif]-->
-<!--[if IE 9]>
-        <html class="no-js ie9" lang="en">
-    <![endif]-->
-<!--[if !(IE)]><!-->
-<html class="no-js" lang="en">
-  <!--<![endif]-->
-
-  <head>
-    <title>Queensland Design System</title>
-
-    ${require('../components/_global/html/head.html')}
-  </head>
-
-  <body class="qld__grid">
-    <!--noindex-->
-    ${require('../components/header/html/component.hbs')({
-    "site":require('/src/data/site.json') })}
-    <!--endnoindex-->
-    ${require('../components/mega_main_navigation/html/component.hbs')({
-    "site":require('/src/data/site.json') })}
-    <!-- MAIN BODY -->
-    <main class="main" role="main">
-      <section class="qld__body qld__body--breadcrumb">
-        <div class="container-fluid">
-          ${require('../components/breadcrumbs/html/component.hbs')({
-          "site":require('/src/data/site.json'),
-          "current":require('/src/data/current.json'), })}
-        </div>
-      </section>
-      <!--CONTENT-->
-      <div class="qld__body">
-        <div class="container-fluid">
-          <div class="row">
-            <div class="col-xs-12 col-md-4 col-lg-3">
-              <!-- INTERNAL NAVIGATION -->
-              ${require('../components/internal_navigation/html/component.hbs')({
-              "site":require('/src/data/site.json'),
-              "current":require('/src/data/current.json') })}
-            </div>
-            <div class="col-xs-12 col-md-8 col-lg-9" id="content">
-              ${require('../components/_global/html/component.hbs')({
-              "manifest":require('../components/[component_name]/js/manifest.json'),
-              "component":require('!url-loader!../components/[component_name]/html/component.hbs'),
-              "component_output":require('../components/[component_name]/html/component.hbs')({
-              "component":require('../components/[component_name]/js/manifest.json').component,
-              "site":require('/src/data/site.json'),
-              "current":require('/src/data/current.json'), "content":"Lorem
-              Ipsum" }) })}
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Page Footer Info -->
-      ${require('../components/prefooter/html/component.hbs')({
-      "site":require('/src/data/site.json'),
-      "current":require('/src/data/current.json') })}
-    </main>
-    <!-- END MAIN BODY -->
-
-    <!-- FOOTER-->
-    ${require('../components/footer/html/component.hbs')({
-    "site":require('/src/data/site.json') })}
-
-    <div class="footer-scripts" id="footer_js" style="display: none !important">
-      ${require('../components/_global/html/scripts.html')}
-    </div>
-  </body>
-</html>

package/src/components/_template/js/global.js

@@ -1,3 +0,0 @@
-(function () {
-  "use strict";
-})();