@qhealth-design-system/core 1.22.2 → 1.23.0

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

@@ -17,6 +17,7 @@
     text-decoration: none;
     padding: 4px;
     min-width: 0;
+    min-height: 0;
     width: 32px;
     height: 32px;
 

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

@@ -95,7 +95,6 @@
       border-top-left-radius: 0;
       margin: 0;
       width: 100%;
-      line-height: 24px;
       font-size: 1rem;
     }
   }

package/src/components/tab/js/global.js

@@ -10,6 +10,8 @@
  * the tablist, and the focused tab is activated on click or Enter/Space.
  */
 
+import utils from "../../_global/js/global.js";
+
 // Distance in px the tab list scrolls each time an overflow arrow is clicked.
 const SCROLL_AMOUNT = 500;
 
@@ -31,11 +33,9 @@ export default function initTab(root = document) {
   });
 
   // In the Matrix build this rewrites icon sprite paths (core vs health
-  // sprite). QLD.utils only exists once the global bundle has loaded, so guard
-  // it — in Storybook it's absent and the icons use their authored href as-is.
-  window.QLD?.utils?.updateSvgIconPath?.(
-    ".qld__tab-container .qld__tabs svg.qld__icon > use",
-  );
+  // sprite). It's a no-op for the core overflow-arrow icons used here, so it's
+  // safe to run everywhere including Storybook.
+  utils.updateSvgIconPath(".qld__tab-container .qld__tabs svg.qld__icon > use");
 
   return () => controller.abort();
 }
@@ -197,8 +197,3 @@ function debounce(fn, wait) {
     timeout = setTimeout(() => fn(...args), wait);
   };
 }
-
-// Expose on window.QLD for backwards compatibility (legacy callers used
-// `QLD.tab.init()`). New code should import `initTab` directly.
-window.QLD = window.QLD || {};
-window.QLD.tab = { init: () => initTab(document), initTab };

package/src/components/toggle_tip/js/global.js

@@ -129,9 +129,3 @@ function wireDocument(root, closeAll, getLastOpened, signal) {
     { signal },
   );
 }
-
-// Back-compat: expose on window.QLD for any legacy callers (QLD.toggleTip.init()).
-// Initialisation in the app is driven by component-loader.js; new code should
-// import initToggleTip directly.
-window.QLD = window.QLD || {};
-window.QLD.toggleTip = { init: () => initToggleTip(document), initToggleTip };

package/src/components/tool_tip/js/global.js

@@ -88,9 +88,3 @@ function wireTrigger(tip, closeAll, signal) {
 
   content.addEventListener("mouseleave", () => close(), { signal });
 }
-
-// Back-compat: expose on window.QLD for any legacy callers (QLD.toolTip.init()).
-// Initialisation in the app is driven by component-loader.js; new code should
-// import initToolTip directly.
-window.QLD = window.QLD || {};
-window.QLD.toolTip = { init: () => initToolTip(document), initToolTip };

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

@@ -21,6 +21,12 @@
         text-decoration: underline;
       }
 
+      // the icon + text group is a layout wrapper; only its inner text
+      // should carry the underline
+      .qld__video__player__transcript-label {
+        text-decoration: none;
+      }
+
       &:hover {
         span {
           text-decoration-thickness: var(--QLD-underline__thickness-thick);
@@ -118,10 +124,6 @@
       .qld__video__player__transcript {
         .qld__accordion__title {
           color: var(--QLD-color-dark__link);
-
-          &::after {
-            background-color: var(--QLD-color-dark__action--secondary);
-          }
         }
 
         .qld__icon {
@@ -192,25 +194,41 @@
     }
     .qld__accordion__title {
       font-size: pxToRem(16);
+      // label group on the left, chevron on the right
+      justify-content: space-between;
       transition: transform 0.25s ease-in;
       border-bottom-left-radius: $QLD-border-radius-xs;
       border-bottom-right-radius: $QLD-border-radius-xs;
+
+      @include QLD-space(padding, 1unit);
+
       .qld__icon {
         font-size: pxToRem(20);
-        margin-right: pxToRem(8);
+      }
+      // chevron sits inline at the end of the row, not absolutely
+      // positioned like in the base accordion
+      .qld__accordion__icon {
+        margin-top: 0;
       }
       &:hover {
         background-color: transparent;
       }
     }
+
+    // groups the transcript icon and its text so space-between keeps them
+    // together at the start of the row
+    &-label {
+      display: flex;
+      align-items: center;
+      gap: pxToRem(8);
+    }
     &-link {
-      padding: pxToRem(16) pxToRem(12);
+      align-items: center;
+      gap: pxToRem(8);
       border-bottom-left-radius: $QLD-border-radius-xs;
       border-bottom-right-radius: $QLD-border-radius-xs;
 
-      .qld__icon {
-        margin-right: pxToRem(8);
-      }
+      @include QLD-space(padding, 1unit);
     }
   }
 }

package/src/components/video_player/html/component.hbs

@@ -130,16 +130,29 @@
                             aria-controls="accordion-group-{{ assetid }}"
                             aria-expanded="false"
                           >
+                            <span class="qld__video__player__transcript-label">
+                              <svg
+                                class="qld__icon qld__icon--md"
+                                aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <use
+                                  href="{{ @root.site.metadata.coreSiteIcons.value }}#transcript"
+                                ></use>
+                              </svg>
+                              <span class="qld__video__player__transcript-text">
+                                Show transcript
+                              </span>
+                            </span>
                             <svg
-                              class="qld__icon qld__icon--md"
+                              class="qld__icon qld__icon--md qld__accordion__icon"
                               aria-hidden="true"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <use
-                                href="{{ @root.site.metadata.coreSiteIcons.value }}#transcript"
+                                href="{{ @root.site.metadata.coreSiteIcons.value }}#chevron-up"
                               ></use>
                             </svg>
-                            <span>Show transcript</span>
                           </button>
                           <div
                             id="accordion-group-{{ assetid }}"
@@ -241,16 +254,29 @@
                             aria-controls="accordion-group-{{ assetid }}"
                             aria-expanded="false"
                           >
+                            <span class="qld__video__player__transcript-label">
+                              <svg
+                                class="qld__icon qld__icon--sm"
+                                aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <use
+                                  href="{{ @root.site.metadata.coreSiteIcons.value }}#transcript"
+                                ></use>
+                              </svg>
+                              <span class="qld__video__player__transcript-text">
+                                Show transcript
+                              </span>
+                            </span>
                             <svg
-                              class="qld__icon qld__icon--sm"
+                              class="qld__icon qld__icon--md qld__accordion__icon"
                               aria-hidden="true"
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <use
-                                href="{{ @root.site.metadata.coreSiteIcons.value }}#transcript"
+                                href="{{ @root.site.metadata.coreSiteIcons.value }}#chevron-up"
                               ></use>
                             </svg>
-                            <span>Show transcript</span>
                           </button>
                           <div
                             id="accordion-group-{{ assetid }}"

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

@@ -30,7 +30,14 @@ export default function initVideoPlayer(root = document) {
  *                              `.qld__accordion__title` trigger
  */
 function syncTranscriptLabel(event) {
-  const label = event.target.querySelector("span");
+  // Target the text span explicitly. The label is wrapped alongside the
+  // transcript icon, so writing textContent to an ancestor span would destroy
+  // that icon. The fallback covers legacy markup where the button's first
+  // span is the text itself.
+  const label =
+    event.target.querySelector(".qld__video__player__transcript-text") ??
+    event.target.querySelector("span");
+
   if (label) {
     label.textContent = event.detail.open
       ? "Hide transcript"

package/src/index.js

@@ -1,8 +1,12 @@
 // JS
+import utils from "./components/_global/js/global.js";
 import initComponents from "./component-loader.js";
 import "../src/helpers/global-helpers.js";
 import "prismjs";
 
+// Swap the `no-js` html class for `js` as early as possible.
+utils.browserJS();
+
 // Adding ES module initialisation for components
 initComponents();
 

package/src/stories/Accordion/accordion.stories.js

@@ -42,6 +42,7 @@ function render(args) {
         metadata: buildMetadata(args),
       },
     },
+    ...args,
   });
 }
 

package/src/stories/Banner/bannerContained.stories.js

@@ -0,0 +1,123 @@
+// The contained (curved) banner is a page-level *layout*, not a standalone
+// component. It is switched on by adding the `qld__banner_contained` class to
+// the page body, which then restyles the header, main navigation and banner
+// together — constraining their width, adding curved edges + drop shadows and
+// filling the negative space with a background colour. The effect only applies
+// above 1600px, so these stories force a wide viewport.
+//
+// Unlike most component stories, the contained styles live in their own webpack
+// entry (src/styles/banner_contained/globals.scss → dist/banner_contained.css)
+// and are NOT part of the Storybook bundle, so we import them explicitly here.
+import "../../styles/banner_contained/globals.scss";
+
+import { renderHeader, headerArgs } from "../Header/Header.js";
+import BannerAdvancedMeta from "./bannerAdvanced.stories";
+import { storyParams } from "../../../.storybook/globals";
+import { initComponents } from "../../../.storybook/decorators";
+import initBannerAdvanced from "../../components/banner_advanced/js/global";
+import initCtaLinks from "../../components/_global/js/cta_links/global";
+import { initMegaMenu } from "../../components/mega_main_navigation/js/global";
+
+// The curved styling activates at 1600px, so demonstrate at an extra-large width.
+const containedViewport = {
+  name: "Contained banner (1680px)",
+  styles: { width: "1680px", height: "1200px" },
+};
+
+function render(args) {
+  // The whole page carries the `qld__banner_contained` body class — that is the
+  // hook every selector in banner_contained/globals.scss keys off.
+  const page = document.createElement("div");
+  page.className = "qld__banner_contained qld__body qld__grid js";
+
+  // Header + main navigation. renderHeader also emits the
+  // `.qld__header__contained-banner` backdrop when the contained class is set.
+  page.innerHTML = renderHeader({
+    ...args,
+    defaultBannerContainedBanner: "qld__banner_contained",
+  });
+
+  // The banner itself, reusing the Advanced banner (heading block, abstract,
+  // CTA buttons and hero image — matching the contained banner design).
+  const bannerEl = BannerAdvancedMeta.render(args);
+
+  // `main.landing` + `#content > section` is the structure the contained
+  // styles key off to pull the first section up behind the banner's curved
+  // bottom edge, so the banner overlaps into the section's white space.
+  const main = document.createElement("main");
+  main.className = "main landing";
+  main.appendChild(bannerEl);
+
+  // The min-height stands in for real page content: the section must extend
+  // past the 800px header backdrop or its background colour shows below.
+  const content = document.createElement("div");
+  content.id = "content";
+  content.innerHTML = `
+    <section class="qld__body" style="min-height: 500px">
+      <div class="container-fluid">
+        <h2>Section Heading (H2)</h2>
+      </div>
+    </section>
+  `;
+  main.appendChild(content);
+  page.appendChild(main);
+
+  return page;
+}
+
+const meta = {
+  title: "3. Components/Banner/Contained",
+  render,
+  decorators: [
+    initComponents([initMegaMenu, initCtaLinks, initBannerAdvanced]),
+  ],
+  // Reuse the Header and Advanced banner controls so the composed page is fully
+  // configurable, then narrow the notable ones below.
+  argTypes: {
+    ...BannerAdvancedMeta.argTypes,
+  },
+  args: {
+    ...headerArgs,
+    ...BannerAdvancedMeta.args,
+    // Match the design mock: dark banner with block headings and abstract, hero
+    // image aligned to the page edge, no breadcrumbs and no CTA buttons.
+    headingPrimary: "Heading 1 Heading 1",
+    headingSecondary: "Subheading heading 1",
+    showHeadingBackground: true,
+    abstract:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum " +
+      "purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel " +
+      "semper enim. In turpis.",
+    backgroundColour: "dark",
+    showBreadcrumbs: false,
+    heroImageAlignment: "page",
+    heroImageTreatment: "crop",
+    ctaPrimaryText: "",
+    ctaSecondaryText: "",
+  },
+  parameters: {
+    layout: "fullscreen",
+    viewport: {
+      defaultViewport: "containedBanner",
+      options: { containedBanner: containedViewport },
+    },
+    ...storyParams(
+      "banner",
+      "The **contained banner** is a page-level layout enabled by adding the " +
+        "`qld__banner_contained` class to the `<body>` element. It constrains " +
+        "the header, navigation and banner to a maximum width and applies curved " +
+        "edges and drop shadows. It only takes effect on viewports above 1600px.",
+    ),
+  },
+};
+
+export default meta;
+
+export const Default = {};
+
+// A plain colour background instead of a hero image.
+export const WithoutHeroImage = {
+  args: {
+    heroImage: "",
+  },
+};