@qhealth-design-system/core 1.22.1 → 1.23.0

package/src/components/a-z_listing/js/global.js

@@ -1,99 +1,113 @@
-(function () {
-  "use strict";
-
-  window.addEventListener("DOMContentLoaded", function () {
-    function checkIfAzSelected() {
-      var hash = window.location.hash;
-
-      if (hash) {
-        setTimeout(function () {
-          var servicesAZOptions = document.querySelectorAll(
-            ".qld__a-z_listing__options__item__link",
-          );
-          var servicesAZHeaders = document.querySelectorAll(
-            ".qld__a-z_listing__list__item__header",
-          );
-
-          servicesAZOptions.forEach(function (option) {
-            option.classList.remove("active");
-          });
-
-          servicesAZHeaders.forEach(function (header) {
-            header.classList.remove("active");
-          });
-
-          var activeOption = document.querySelector(
-            `a[href^="${hash}"].qld__a-z_listing__options__item__link`,
-          );
-          if (activeOption) {
-            activeOption.classList.add("active");
-          }
-
-          var activeHeader = document.querySelector(
-            `.qld__a-z_listing__list__item__header ${hash}`,
-          );
-          if (activeHeader) {
-            activeHeader.parentElement.classList.add("active");
-          }
-
-          var targetElement = document.querySelector(hash);
-          if (targetElement) {
-            window.scrollTo({
-              top:
-                targetElement.getBoundingClientRect().top + window.scrollY - 20,
-              behavior: "smooth",
-            });
-          }
-        }, 100);
+/**
+ * @module aZListing
+ */
+
+/**
+ * On load, if the URL has a hash, highlight the matching letter option/header
+ * and smooth-scroll to the target.
+ */
+function checkIfAzSelected() {
+  var hash = window.location.hash;
+
+  if (hash) {
+    setTimeout(function () {
+      var servicesAZOptions = document.querySelectorAll(
+        ".qld__a-z_listing__options__item__link",
+      );
+      var servicesAZHeaders = document.querySelectorAll(
+        ".qld__a-z_listing__list__item__header",
+      );
+
+      servicesAZOptions.forEach(function (option) {
+        option.classList.remove("active");
+      });
+
+      servicesAZHeaders.forEach(function (header) {
+        header.classList.remove("active");
+      });
+
+      var activeOption = document.querySelector(
+        `a[href^="${hash}"].qld__a-z_listing__options__item__link`,
+      );
+      if (activeOption) {
+        activeOption.classList.add("active");
       }
-    }
-
-    document.addEventListener("click", function (event) {
-      var target = event.target;
-
-      if (
-        target.matches('a[href^="#"].qld__a-z_listing__options__item__link')
-      ) {
-        event.preventDefault();
-
-        var servicesAZOptions = document.querySelectorAll(
-          ".qld__a-z_listing__options__item__link",
-        );
-        var servicesAZHeaders = document.querySelectorAll(
-          ".qld__a-z_listing__list__item__header",
-        );
 
-        servicesAZOptions.forEach(function (option) {
-          option.classList.remove("active");
-        });
+      var activeHeader = document.querySelector(
+        `.qld__a-z_listing__list__item__header ${hash}`,
+      );
+      if (activeHeader) {
+        activeHeader.parentElement.classList.add("active");
+      }
 
-        servicesAZHeaders.forEach(function (header) {
-          header.classList.remove("active");
+      var targetElement = document.querySelector(hash);
+      if (targetElement) {
+        window.scrollTo({
+          top: targetElement.getBoundingClientRect().top + window.scrollY - 20,
+          behavior: "smooth",
         });
-
-        target.classList.add("active");
-        var targetHeader = document.querySelector(
-          `.qld__a-z_listing__list__item__header ${target.getAttribute("href")}`,
-        );
-        if (targetHeader) {
-          targetHeader.parentElement.classList.add("active");
-        }
-
-        var targetElement = document.querySelector(target.getAttribute("href"));
-        if (targetElement) {
-          window.scrollTo({
-            top:
-              targetElement.getBoundingClientRect().top + window.scrollY - 20,
-            behavior: "smooth",
-          });
-        }
-
-        setTimeout(() => {
-          window.location.hash = target.getAttribute("href");
-        }, 500);
       }
+    }, 100);
+  }
+}
+
+/**
+ * Delegated click handler: when an A-Z letter link is clicked, highlight it,
+ * smooth-scroll to its section, and update the URL hash.
+ *
+ * @param {MouseEvent} event
+ */
+function handleAZClick(event) {
+  var target = event.target;
+
+  if (target.matches('a[href^="#"].qld__a-z_listing__options__item__link')) {
+    event.preventDefault();
+
+    var servicesAZOptions = document.querySelectorAll(
+      ".qld__a-z_listing__options__item__link",
+    );
+    var servicesAZHeaders = document.querySelectorAll(
+      ".qld__a-z_listing__list__item__header",
+    );
+
+    servicesAZOptions.forEach(function (option) {
+      option.classList.remove("active");
     });
 
-    checkIfAzSelected();
-  });
-})();
+    servicesAZHeaders.forEach(function (header) {
+      header.classList.remove("active");
+    });
+
+    target.classList.add("active");
+    var targetHeader = document.querySelector(
+      `.qld__a-z_listing__list__item__header ${target.getAttribute("href")}`,
+    );
+    if (targetHeader) {
+      targetHeader.parentElement.classList.add("active");
+    }
+
+    var targetElement = document.querySelector(target.getAttribute("href"));
+    if (targetElement) {
+      window.scrollTo({
+        top: targetElement.getBoundingClientRect().top + window.scrollY - 20,
+        behavior: "smooth",
+      });
+    }
+
+    setTimeout(() => {
+      window.location.hash = target.getAttribute("href");
+    }, 500);
+  }
+}
+
+/**
+ * Initialise the A-Z listing behaviour: wire the delegated click handler and
+ * apply any hash selection already present in the URL.
+ *
+ * The click listener is attached to `document` (event delegation), so re-invoking
+ * this is a no-op — `addEventListener` dedupes the identical handler reference.
+ */
+export default function initAZListing() {
+  document.addEventListener("click", handleAZClick);
+  checkIfAzSelected();
+}

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

@@ -46,26 +46,14 @@
       transition: transform 0.25s ease-in;
     }
 
-    &:after {
-      content: " ";
-      position: absolute;
+    // the chevron indicator only — other icons (e.g. the video player
+    // transcript icon) share .qld__icon but must not centre/rotate
+    .qld__accordion__icon {
       top: 50%;
-      @include QLD-space(margin-top, -10px); // Pull it up 10px
-      @include QLD-space(right, 1unit);
-      @include QLD-space(width, 1.5unit);
-      @include QLD-space(height, 1.5unit);
-      // background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary));
-      // background-repeat: no-repeat;
-      // background-position: center;
-      z-index: 1;
-      transition: transform 0.25s ease-in;
-      mask-image: QLD-svguri($QLD-icon-chevron-up);
-      mask-repeat: no-repeat;
-      mask-position: center;
-      background-color: var(--QLD-color-light__action--secondary);
+      @include QLD-space(margin-top, -0.75unit); // Pull it up half its height
     }
 
-    &.qld__accordion--closed::after {
+    &.qld__accordion--closed .qld__accordion__icon {
       transform: rotate(-180deg);
     }
   }
@@ -107,6 +95,7 @@
     @include QLD-space(font-size, 0.75unit);
 
     &-btn {
+      display: inline-flex;
       @include QLD-underline("light");
       background-color: transparent;
       color: var(--QLD-color-light__link);
@@ -114,27 +103,15 @@
       cursor: pointer;
       position: relative;
       @include QLD-space(margin-right, 0.5unit);
-      &::after {
-        content: " ";
-        position: absolute;
-        top: 50%;
-        @include QLD-space(
-          margin-top,
-          -0.5unit
-        ); // Pull it up half of it's height
-        @include QLD-space(right, -0.5unit);
-        @include QLD-space(width, 0.5unit);
-        @include QLD-space(height, 1unit);
-        z-index: 101;
+      @include QLD-space("gap", 0.5unit);
+
+      .qld__icon {
+        color: var(--QLD-color-light__action--secondary);
         transition: transform 0.25s ease-in;
-        mask-image: QLD-svguri($QLD-icon-chevron-up);
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: var(--QLD-color-light__action--secondary);
       }
 
       &--closed {
-        &::after {
+        .qld__icon {
           transform: rotate(-180deg);
         }
       }
@@ -171,6 +148,12 @@
   padding: 0;
   @include QLD-space(max-width, 47unit);
 
+  // Accordions stack flush inside a group; the owl spacing on `* + &` only
+  // ever hits the first accordion (preceded by the "Open all" toggle row)
+  * + .qld__accordion {
+    margin-top: 0;
+  }
+
   &:last-child {
     @include QLD-space(margin-bottom, 0unit);
   }
@@ -187,8 +170,8 @@
       color: var(--QLD-color-dark__link);
       @include QLD-underline("dark");
 
-      &::after {
-        background-color: var(--QLD-color-dark__action--secondary);
+      .qld__icon {
+        color: var(--QLD-color-dark__action--secondary);
       }
     }
   }
@@ -233,8 +216,8 @@
       background-color: var(--QLD-color-dark__background--shade);
       color: var(--QLD-color-dark__link);
 
-      &::after {
-        background-color: var(--QLD-color-dark__action--secondary);
+      .qld__icon {
+        color: var(--QLD-color-dark__action--secondary);
       }
     }
 
@@ -260,8 +243,8 @@
       background-color: var(--QLD-color-dark__background--alt-shade);
       color: var(--QLD-color-dark__link);
 
-      &::after {
-        background-color: var(--QLD-color-dark__action--secondary);
+      .qld__icon {
+        color: var(--QLD-color-dark__action--secondary);
       }
     }
 
@@ -298,7 +281,7 @@ li + li .qld__accordion {
     color: #000 !important;
     border: 1px !important;
 
-    &:after {
+    .qld__accordion__icon {
       display: none;
     }
   }

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

@@ -22,7 +22,16 @@
               type="button"
               aria-expanded="false"
             >
-              Open all
+              <span>Open all</span>
+              <svg
+                class="qld__icon qld__icon--xs"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <use
+                  href="{{ @root.site.metadata.coreSiteIcons.value }}#chevron-up"
+                ></use>
+              </svg>
             </button>
           </div>
         {{/ifCond}}
@@ -30,10 +39,19 @@
           {{#ifCond this.content '!=' ''}}
             <div class="qld__accordion">
               <{{../metadata.title_level.value}}>
-                            <button class="qld__accordion__title js-qld__accordion qld__accordion--closed" aria-controls="accordion-group-{{../assetid}}-{{this.fieldid}}" aria-expanded="false" type="button">
-                                {{this.title}}
-                            </button>
-                        </{{../metadata.title_level.value}}>
+                  <button class="qld__accordion__title js-qld__accordion qld__accordion--closed" aria-controls="accordion-group-{{../assetid}}-{{this.fieldid}}" aria-expanded="false" type="button">
+                      {{this.title}}
+                      <svg
+                        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 }}#chevron-up"
+                        ></use>
+                      </svg>
+                  </button>
+              </{{../metadata.title_level.value}}>
               <div
                 id="accordion-group-{{ ../assetid }}-{{ this.fieldid }}"
                 class="qld__accordion__body qld__accordion--closed"

package/src/components/accordion/js/global.js

@@ -82,7 +82,11 @@ function setToggleAllState(toggleAllBtn, isOpen) {
   toggleAllBtn.classList.toggle("qld__accordion__toggle-btn--open", isOpen);
   toggleAllBtn.classList.toggle("qld__accordion__toggle-btn--closed", !isOpen);
   setExpanded(toggleAllBtn, isOpen);
-  toggleAllBtn.textContent = isOpen ? "Close all" : "Open all";
+
+  // Only update the label so the inline chevron svg is preserved; fall back
+  // to the whole button for legacy markup without the <span> wrapper
+  const labelEl = toggleAllBtn.querySelector("span") ?? toggleAllBtn;
+  labelEl.textContent = isOpen ? "Close all" : "Open all";
 }
 
 /**
@@ -182,12 +186,3 @@ export function Open(elements, speed, root = document, callbacks) {
 export function Close(elements, speed, root = document, callbacks) {
   collapsible.close(elements, speed, root, callbacks);
 }
-
-// Make accordion public for backwards compatibility (window.QLD.accordion.*)
-const accordion = { Toggle, ToggleAll, Open, Close, initAccordion };
-window.QLD = window.QLD || {};
-window.QLD.accordion = accordion;
-
-// Note: accordion groups are initialised via initAccordion() from component-loader.js.
-
-export { accordion };

package/src/components/basic_search/js/global.js

@@ -81,10 +81,3 @@ function checkHoneypot(searchForm, signal) {
     { signal },
   );
 }
-
-// Make basic search public for backwards compatibility (window.QLD.basicSearch.init)
-const basicSearch = { init: initBasicSearch };
-window.QLD = window.QLD || {};
-window.QLD.basicSearch = basicSearch;
-
-export { basicSearch };

package/src/components/code/js/global.js

@@ -6,16 +6,17 @@ import {
   validateInternalSvgPath,
   buildIconPath,
 } from "../../../helpers/global-helpers.js";
+import * as animate from "../../_global/js/animate/global.js";
 
 /**
  * Initialise the code component: syntax-highlight snippets, wire the copy
  * buttons and the inline-code copy affordance, the "Show more" toggle, and the
  * preview theme-palette switcher.
  *
- * `Prism` (syntax highlighting) and `QLD.animate` (the toggle animation) are
- * provided globally at runtime by `index.js` / the global bundle; both are
- * accessed defensively so the component degrades gracefully where they are
- * absent (e.g. Storybook).
+ * `Prism` (syntax highlighting) is provided globally at runtime by `index.js` /
+ * the global bundle and accessed defensively so the component degrades
+ * gracefully where it is absent (e.g. Storybook). The toggle animation is
+ * imported directly from the `animate` module.
  *
  * @param {Document|Element} root - The root element to scope DOM queries to.
  * @returns {function} Cleanup function that removes the listeners added here.
@@ -128,7 +129,7 @@ export default function initCode(root = document) {
           svg.appendChild(use);
           this.appendChild(svg);
 
-          window.QLD?.animate?.Toggle?.({
+          animate.Toggle({
             element: target,
             property: "height",
             speed: 250,
@@ -240,10 +241,3 @@ function copyTextToClipboard(text) {
     },
   );
 }
-
-// Make code public for backwards compatibility (window.QLD.code.init)
-const code = { init: initCode };
-window.QLD = window.QLD || {};
-window.QLD.code = code;
-
-export { code };

package/src/components/file_upload/js/global.js

@@ -969,9 +969,5 @@ const setFilesDataAttribute = function (
   input_field_settings.input_element.dataset["files"] = JSON.stringify(files);
 };
 
-// Store fileUploads object globally for backwards compatibility (window.QLD.fileUploads.*)
-window.QLD = window.QLD || {};
-window.QLD.fileUploads = fileUploads;
-
-// Note: file inputs are initialised via initFileUpload() from component-loader.js.
 export const initFileUpload = fileUploads.init;
+export { fileUploads };

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

@@ -296,8 +296,8 @@ $QLD-side-nav-breakpoint: lg !default;
       text-decoration-color: var(--QLD-color-dark__heading);
       background-color: inherit;
 
-      &:after {
-        background-color: var(--QLD-color-dark__action--secondary);
+      .qld__icon {
+        color: var(--QLD-color-dark__action--secondary);
       }
     }
 

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

@@ -2,7 +2,22 @@
   class="qld__side-nav qld__accordion"
   data-path="{{ @root.site.metadata.coreSiteIcons.value }}"
 >
-  <button class="qld__side-nav__toggle qld__accordion__title qld__accordion--closed" aria-controls="nav-default" aria-expanded="false">In {{{ current.top.asset_name }}}</button>
+  <button
+    class="qld__side-nav__toggle qld__accordion__title qld__accordion--closed"
+    aria-controls="nav-default"
+    aria-expanded="false"
+  >
+    In
+    {{{ current.top.asset_name }}}
+    <svg
+      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 }}#chevron-up"
+      ></use>
+    </svg>
+  </button>
   <nav
     id="nav-default"
     class="qld__side-nav__content qld__accordion--closed qld__accordion__body"