@qhealth-design-system/core 1.17.1 → 1.18.0

package/src/components/header/js/global.js

@@ -1,14 +1,23 @@
 /**
  * @module header
  */
-(function () {
-    // Search toggle button
-    var searchToggle = document.querySelector(".qld__main-nav__toggle-search");
-    var searchForm = document.querySelector(".qld__header__search .qld__search-form");
-
-    // Global events object
-    var headerSearchEvents = {};
 
+// Search toggle button
+const searchToggle = document.querySelector(".qld__main-nav__toggle-search");
+const searchForm = document.querySelector(".qld__header__search .qld__search-form");
+const targetId = searchToggle.getAttribute("aria-controls");
+const target = document.getElementById(targetId);
+const focustrapTop = target.querySelector(".qld__main-nav__focus-trap-top");
+const focustrapBottom = target.querySelector(".qld__main-nav__focus-trap-bottom");
+const searchToggleText = searchToggle.querySelector(".qld__main-nav__toggle-text");
+// Hold state of the header (open vs close)
+let isHeaderOpen = false;
+// Global events object
+let headerSearchEvents = {};
+// Breakpoint for mobile mode
+const mobileBreakpoint = 992;
+
+export default function initHeader(document = document) {
     // Add action so the search works only if JS is enabled
     if (searchForm) {
         searchForm.querySelector(".qld__btn--search").setAttribute("type", "submit");
@@ -23,189 +32,188 @@
         searchToggle.addEventListener("click", toggleHeaderSearch);
     }
 
-    /**
-     * Check if honeypot field is empty
-     *
-     * @memberof module:header
-     * @instance
-     * @private
-     */
-    function checkHoneypot() {
-        var honeypot = searchForm.querySelector(".qld__text-input--validation");
-        honeypot.value = "";
-
-        searchForm.addEventListener("submit", function (event) {
-            // Prevent form submission if the honeypot field is filled
-            if (honeypot.value !== "") {
-                event.preventDefault(); // Stop the form submission
-            } else {
-                honeypot.removeAttribute("name");
-            }
-        });
+    // We want to ensure the search input is visible on desktop at all times
+    window.addEventListener("resize", () => {
+        if (window.innerWidth >= mobileBreakpoint && !isHeaderOpen) {
+            openHeader();
+            // Disable focus trap as it's not needed on desktop
+            disableFocusTrap();
+        } else if (window.innerWidth < mobileBreakpoint && isHeaderOpen) {
+            closeHeader();
+        }
+    });
+}
+
+/**
+ * Check if honeypot field is empty
+ *
+ * @memberof module:header
+ * @instance
+ * @private
+ */
+function checkHoneypot() {
+    const honeypot = searchForm.querySelector(".qld__text-input--validation");
+    honeypot.value = "";
+
+    searchForm.addEventListener("submit", function (event) {
+        // Prevent form submission if the honeypot field is filled
+        if (honeypot.value !== "") {
+            event.preventDefault(); // Stop the form submission
+        } else {
+            honeypot.removeAttribute("name");
+        }
+    });
+}
+
+/**
+ * Toggle the header search on mobile/tablet
+ *
+ * @memberof module:header
+ * @instance
+ * @private
+ */
+function toggleHeaderSearch() {
+    // Open menu
+    if (!isHeaderOpen) {
+        openHeader();
+        // Close menu
+    } else {
+        closeHeader();
     }
-    /**
-     * Toggle the header search on mobile/tablet
-     *
-     * @memberof module:header
-     * @instance
-     * @private
-     */
-    function toggleHeaderSearch() {
-        var targetId = searchToggle.getAttribute("aria-controls");
-        var target = document.getElementById(targetId);
-        var focustrapTop = target.querySelector(".qld__main-nav__focus-trap-top");
-        var focustrapBottom = target.querySelector(".qld__main-nav__focus-trap-bottom");
-        var isExpanded = searchToggle.getAttribute("aria-expanded");
-
-        // Open menu
-        if (isExpanded === "false") {
-            searchToggle.setAttribute("aria-expanded", true);
-            searchToggle.classList.remove("qld__main-nav__toggle-search--open");
-            searchToggle.classList.add("qld__main-nav__toggle-search--close");
-            searchToggle.querySelector(".qld__main-nav__toggle-text").textContent = "Close";
-            target.style.display = "block";
-
-            // Wait for display: block, and then add class to open smoothly
-            setTimeout(function () {
-                target.classList.add("qld__main-nav__search--open");
-                target.querySelector(".qld__text-input").focus();
-
-                // Close header search on click outside
-                headerSearchEvents.background = addEvent(document, "click", function () {
-                    var event = event || window.event;
-
-                    if (!target.contains(event.target)) {
-                        console.log("toggling");
-                        toggleHeaderSearch();
-                    }
-                });
-            }, 0);
-
-            // Focus trap enabled
-            focustrapTop.setAttribute("tabindex", 0);
-            focustrapBottom.setAttribute("tabindex", 0);
-
-            // Add focus listeners
-            headerSearchEvents.focusTop = addEvent(focustrapTop, "focus", function () {
-                target.querySelector("button").focus();
-            });
-            headerSearchEvents.focusBottom = addEvent(focustrapBottom, "focus", function () {
-                target.querySelector("input").focus();
-            });
-
-            // Close header search if burger menu opened
-            var menuToggle = document.querySelector('button[aria-controls="main-nav"]');
-            headerSearchEvents.menu = addEvent(menuToggle, "click", function () {
+}
+
+function openHeader() {
+    isHeaderOpen = true;
+    searchToggle.setAttribute("aria-expanded", true);
+    searchToggle.classList.remove("qld__main-nav__toggle-search--open");
+    searchToggle.classList.add("qld__main-nav__toggle-search--close");
+    searchToggleText.textContent = "Close";
+    target.style.display = "block";
+
+    // Wait for display: block, and then add class to open smoothly
+    setTimeout(function () {
+        target.classList.add("qld__main-nav__search--open");
+        target.querySelector(".qld__text-input").focus();
+
+        // Close header search on click outside
+        headerSearchEvents.background = addEvent(document, "click", function () {
+            if (!target.contains(event.target) && window.innerWidth < mobileBreakpoint) {
                 toggleHeaderSearch();
-            });
-
-            // Add key listener
-            headerSearchEvents.escKey = addEvent(document, "keyup", function () {
-                var event = event || window.event;
+            }
+        });
+    }, 0);
 
-                // Check the menu is open and visible and the escape key is pressed
-                if (event.keyCode === 27) {
-                    toggleHeaderSearch();
-                }
-            });
+    enableFocusTrap();
 
-            // Close menu
-        } else {
-            searchToggle.setAttribute("aria-expanded", false);
-            searchToggle.classList.remove("qld__main-nav__toggle-search--close");
-            searchToggle.classList.add("qld__main-nav__toggle-search--open");
-            searchToggle.querySelector(".qld__main-nav__toggle-text").textContent = "Search";
-            searchToggle.focus();
-            target.classList.remove("qld__main-nav__search--open");
-            target.style.display = "none";
-
-            // Remove the focus trap
-            focustrapTop.removeAttribute("tabindex");
-            focustrapBottom.removeAttribute("tabindex");
-
-            // Remove the event listeners
-            removeEvent(headerSearchEvents.focusTop);
-            removeEvent(headerSearchEvents.focusBottom);
-            removeEvent(headerSearchEvents.background);
-            removeEvent(headerSearchEvents.menu);
-            removeEvent(headerSearchEvents.escKey);
-        }
+    // Close header search if burger menu opened
+    const menuToggle = document.querySelector('button[aria-controls="main-nav"]');
+    if (menuToggle) {
+        headerSearchEvents.menu = addEvent(menuToggle, "click", function () {
+            toggleHeaderSearch();
+        });
     }
 
-    /**
-     * Object representing an event listener
-     *
-     * @typedef {Object} event
-     * @property {Node} element             Element the event is attached to
-     * @property {function} handler         Event handler function
-     * @property {document#event} event     DOM event to listen for
-     */
-
-    /**
-     * Add event listener
-     *
-     * @memberof module:header
-     * @instance
-     * @private
-     *
-     * @param {Node} element            DOM element to add event to
-     * @param {document#event} event    The event to listen for
-     * @param {function} rawHandler     The raw handler function
-     * @return {event}
-     */
-    function addEvent(element, event, rawHandler) {
-        // Using local functions instead of anonymous for event handler
-        function listenHandler(event) {
-            var handler = rawHandler.apply(this, arguments);
-            if (handler === false) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-            return handler;
+    // Add key listener
+    headerSearchEvents.escKey = addEvent(document, "keydown", function (event) {
+        // Check the menu is open and visible and the escape key is pressed
+        if (event.key === "Escape") {
+            toggleHeaderSearch();
         }
+    });
+}
+
+function closeHeader() {
+    isHeaderOpen = false;
+    searchToggle.setAttribute("aria-expanded", false);
+    searchToggle.classList.remove("qld__main-nav__toggle-search--close");
+    searchToggle.classList.add("qld__main-nav__toggle-search--open");
+    searchToggleText.textContent = "Search";
+    searchToggle.focus();
+    target.classList.remove("qld__main-nav__search--open");
+    target.style.display = "none";
+
+    disableFocusTrap();
+
+    // Remove the event listeners
+    removeEvent(headerSearchEvents.background);
+    removeEvent(headerSearchEvents.menu);
+    removeEvent(headerSearchEvents.escKey);
+    // Clear events object
+    headerSearchEvents = {};
+}
+// Enable trap enabled
+function enableFocusTrap() {
+    focustrapTop.setAttribute("tabindex", 0);
+    focustrapBottom.setAttribute("tabindex", 0);
+
+    // Add focus listeners
+    headerSearchEvents.focusTop = addEvent(focustrapTop, "focus", function () {
+        target.querySelector("button").focus();
+    });
+
+    headerSearchEvents.focusBottom = addEvent(focustrapBottom, "focus", function () {
+        target.querySelector("input").focus();
+    });
+}
+// Remove the focus trap
+function disableFocusTrap() {
+    focustrapTop.removeAttribute("tabindex");
+    focustrapBottom.removeAttribute("tabindex");
+
+    // Remove focus listeners
+    removeEvent(headerSearchEvents.focusTop);
+    removeEvent(headerSearchEvents.focusBottom);
+}
 
-        // Make sure attachHandler is also going to work
-        function attachHandler() {
-            var handler = rawHandler.call(element, window.event);
-            if (handler === false) {
-                window.event.returnValue = false;
-                window.event.cancelBubble = true;
-            }
-            return handler;
-        }
+/**
+ * Object representing an event listener
+ *
+ * @typedef {Object} event
+ * @property {Node} element             Element the event is attached to
+ * @property {function} handler         Event handler function
+ * @property {document#event} event     DOM event to listen for
+ */
 
-        // Return the token and add the correct listener
-        if (element.addEventListener) {
-            element.addEventListener(event, listenHandler, false);
-            return {
-                element: element,
-                handler: listenHandler,
-                event: event,
-            };
-        } else {
-            element.attachEvent("on" + event, attachHandler);
-            return {
-                element: element,
-                handler: attachHandler,
-                event: event,
-            };
+/**
+ * Add event listener
+ *
+ * @memberof module:header
+ * @instance
+ * @private
+ *
+ * @param {Node} element            DOM element to add event to
+ * @param {document#event} event    The event to listen for
+ * @param {function} rawHandler     The raw handler function
+ * @return {event}
+ */
+function addEvent(element, event, rawHandler) {
+    // Using local functions instead of anonymous for event handler
+    function listenHandler(event) {
+        const handler = rawHandler.apply(this, arguments);
+        if (handler === false) {
+            event.stopPropagation();
+            event.preventDefault();
         }
+        return handler;
     }
 
-    /**
-     * Remove event listener
-     *
-     * @memberof module:header
-     * @instance
-     * @private
-     *
-     * @param {event} token     The event to remove
-     */
-    function removeEvent(token) {
-        if (token.element.removeEventListener) {
-            token.element.removeEventListener(token.event, token.handler);
-        } else {
-            token.element.detachEvent("on" + token.event, token.handler);
-        }
-    }
-})();
+    element.addEventListener(event, listenHandler, false);
+    return {
+        element: element,
+        handler: listenHandler,
+        event: event,
+    };
+}
+
+/**
+ * Remove event listener
+ *
+ * @memberof module:header
+ * @instance
+ * @private
+ *
+ * @param {event} token     The event to remove
+ */
+function removeEvent(token) {
+    token.element.removeEventListener(token.event, token.handler);
+}

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

@@ -1,5 +1,5 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// {{Left Hand Navigation}}
+// Left Hand Navigation
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__left-nav {
@@ -54,9 +54,8 @@
                 @include QLD-space(width, 1.5unit);
                 @include QLD-space(margin-right, 0.75unit);
 
-                * {
-                    fill: var(--QLD-color-light__action--secondary);
-                }
+                color: var(--QLD-color-light__action--secondary);
+                fill: var(--QLD-color-light__action--secondary);
             }
         }
 
@@ -94,9 +93,9 @@
                 }
 
                 &.active {
-                    > .qld__left-nav__item-link .qld__left-nav__item-icon svg * {
+                    > .qld__left-nav__item-link .qld__left-nav__item-icon svg {
+                        color: var(--QLD-color-light__heading);
                         fill: var(--QLD-color-light__heading);
-                        stroke-width: 10px;
                     }
 
                     > .qld__left-nav__item-link .qld__left-nav__item-text {
@@ -113,7 +112,8 @@
                             background-color: $QLD-color-neutral--white;
                         }
 
-                        .qld__left-nav__item-icon svg * {
+                        .qld__left-nav__item-icon svg {
+                            color: var(--QLD-color-light__link);
                             fill: var(--QLD-color-light__link);
                         }
                     }
@@ -131,7 +131,8 @@
                     }
                 }
 
-                &:hover {
+                // Hover over the full nav link only if the children are not expanded
+                &:not(:has(.qld__left-nav__item-link--open)):hover {
                     background-color: var(--QLD-color-light__background--alt);
                 }
 
@@ -139,7 +140,8 @@
                     background-color: var(--QLD-color-light__background--alt);
                     color: var(--QLD-color-light__link);
 
-                    .qld__left-nav__item-icon svg * {
+                    .qld__left-nav__item-icon svg {
+                        color: var(--QLD-color-light__action--primary-hover);
                         fill: var(--QLD-color-light__action--primary-hover);
                     }
 
@@ -148,6 +150,12 @@
                     }
                 }
 
+                // Override hover styles for nested lists
+                ul li:hover,
+                ul a.qld__left-nav__item-link:hover {
+                    background-color: transparent;
+                }
+
                 .qld__left-nav__item-link {
                     @include QLD-space(padding, 1.25unit 1.25unit 1.25unit 1.25unit);
                     display: flex;
@@ -170,7 +178,8 @@
                             background-color: $QLD-color-neutral--white;
                         }
 
-                        .qld__left-nav__item-icon svg * {
+                        .qld__left-nav__item-icon svg {
+                            color: var(--QLD-color-light__link);
                             fill: var(--QLD-color-light__link);
                         }
                     }
@@ -195,31 +204,21 @@
                         @include QLD-box-shadow(3);
                     }
 
-                    &:after {
-                        content: " ";
+                    svg {
                         position: absolute;
                         @include QLD-space(margin-top, -0.5unit); // Pull it up half of it's height
+                        @include QLD-space(border-radius, 50%);
                         left: 0;
                         right: 0;
                         top: 0;
                         bottom: 0;
                         margin: auto;
-                        @include QLD-space(height, 2unit);
-                        @include QLD-space(width, 2unit);
-                        @include QLD-space(border-radius, 50%);
-                        background-color: var(--QLD-color-light__background);
-                        mask-image: QLD-svguri($QLD-icon-chevron-up);
-                        mask-size: 1rem;
-                        mask-repeat: no-repeat;
-                        mask-position: center;
-                        background-color: var(--QLD-color-light__action--secondary);
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        @include QLD-space(background-size, 1unit);
                         transition: transform 0.25s ease-in;
+                        color: var(--QLD-color-light__action--secondary);
+                        fill: var(--QLD-color-light__action--secondary);
                     }
 
-                    &.qld__accordion--closed:after {
+                    &.qld__accordion--closed svg {
                         transform: rotate(-180deg);
                     }
                 }
@@ -244,7 +243,8 @@
             background-color: var(--QLD-color-dark__background--shade);
             border-color: var(--QLD-color-dark__border);
 
-            .qld__left-nav__item-icon svg * {
+            .qld__left-nav__item-icon svg {
+                color: var(--QLD-color-dark__action--secondary);
                 fill: var(--QLD-color-dark__action--secondary);
             }
 
@@ -267,7 +267,8 @@
                 }
 
                 &.active {
-                    .qld__left-nav__item-icon svg * {
+                    .qld__left-nav__item-icon svg {
+                        color: var(--QLD-color-dark__heading);
                         fill: var(--QLD-color-dark__heading);
                     }
 
@@ -287,7 +288,8 @@
                 a.qld__left-nav__item-link:hover {
                     background-color: var(--QLD-color-dark__background--alt);
 
-                    .qld__left-nav__item-icon svg * {
+                    .qld__left-nav__item-icon svg {
+                        color: var(--QLD-color-dark__action--primary-hover);
                         fill: var(--QLD-color-dark__action--primary-hover);
                     }
 
@@ -307,7 +309,8 @@
                             background-color: var(--QLD-color-dark__background);
                         }
 
-                        .qld__left-nav__item-icon svg * {
+                        .qld__left-nav__item-icon svg {
+                            color: var(--QLD-color-dark__link);
                             fill: var(--QLD-color-dark__link);
                         }
                     }

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

@@ -6,7 +6,7 @@
                 <a class="qld__left-nav__item-link" href="./?a={{site.data.assetid}}">
                     {{#if site.metadata.mainNavHomeIconShow.value}}
                     <span class="qld__left-nav__item-icon">
-                        <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32" width="32"><path fill="currentColor" d="M277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L384 79.37V56C384 42.75 394.7 31.1 408 31.1H488C501.3 31.1 512 42.75 512 56V192.3L570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002zM480 164.1V64H416V107.6L480 164.1zM96 206.7V432C96 458.5 117.5 480 144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7zM240 320V480H336V320H240z"/></svg> 
+                        <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#home"></use></svg>
                     </span>
                     {{/if}}
                     <span class="qld__left-nav__item-text" data-name="{{{asset_short_name}}}">Home</span>
@@ -17,7 +17,7 @@
                 <span class="qld__left-nav__item-link">
                     {{#if site.metadata.mainNavHomeIconShow.value}}
                         <span class="qld__left-nav__item-icon">
-                            <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="32" width="32"><path fill="currentColor" d="M277.4 4.002C283.5-1.334 292.5-1.334 298.6 4.002L384 79.37V56C384 42.75 394.7 31.1 408 31.1H488C501.3 31.1 512 42.75 512 56V192.3L570.6 244C577.2 249.8 577.8 259.1 571.1 266.6C566.2 273.2 556 273.8 549.4 267.1L512 234.1V432C512 476.2 476.2 512 432 512H144C99.82 512 64 476.2 64 432V234.1L26.59 267.1C19.96 273.8 9.849 273.2 4.003 266.6C-1.844 259.1-1.212 249.8 5.414 244L277.4 4.002zM480 164.1V64H416V107.6L480 164.1zM96 206.7V432C96 458.5 117.5 480 144 480H208V320C208 302.3 222.3 288 240 288H336C353.7 288 368 302.3 368 320V480H432C458.5 480 480 458.5 480 432V206.7L288 37.34L96 206.7zM240 320V480H336V320H240z"/></svg> 
+                            <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#home"></use></svg> 
                         </span>
                     {{/if}}
                     <span class="qld__left-nav__item-text" data-name="{{{asset_short_name}}}">Home</span>
@@ -44,11 +44,15 @@
                 {{#ifCond ../site.metadata.mainNavMegaMenuShow.value '==' 'true'}}
                     {{#arrayWith children 'asset_metadata_showInMegaNav' 'true'}}
                         {{#if this}}
-                            {{#inArray @root.current.lineage 'asset_assetid' ../this.asset_assetid}}
-                                <button class="qld__left-nav__item-toggle qld__accordion--open" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="true" aria-selected="true" aria-label="Toggle navigation, {{{../asset_short_name}}}"  ></button>
+                            {{#inArray this 'asset_assetid' @root.current.data.assetid}}
+                                <button class="qld__left-nav__item-toggle qld__accordion--open" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="true" aria-selected="true" aria-label="Toggle navigation, {{{../asset_short_name}}}">
+                                    <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-up"></use></svg>
+                                </button>
                                 <ul id="internal-nav-{{../this.asset_assetid}}" class="qld__link-list qld__accordion--open qld__accordion__body">
                             {{else}}
-                                <button class="qld__left-nav__item-toggle qld__accordion--closed" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, {{{../asset_short_name}}}"  ></button>
+                                <button class="qld__left-nav__item-toggle qld__accordion--closed" aria-controls="internal-nav-{{../this.asset_assetid}}" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation, {{{../asset_short_name}}}">
+                                    <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-up"></use></svg>
+                                </button>
                                 <ul id="internal-nav-{{../this.asset_assetid}}" class="qld__link-list qld__accordion--closed qld__accordion__body">
                             {{/inArray}}
                             {{#each this}}
@@ -70,7 +74,7 @@
                                 {{/ifCond}}
                                 </li>
                             {{/each}}
-                            </ul>  
+                            </ul>
                         {{/if}}
                     {{/arrayWith}}
                 {{/ifCond}}