@qhealth-design-system/core 1.16.4 → 1.17.0

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

@@ -2,131 +2,126 @@
  * @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');
+    var searchToggle = document.querySelector(".qld__main-nav__toggle-search");
+    var searchForm = document.querySelector(".qld__header__search .qld__search-form");
 
     // Global events object
     var headerSearchEvents = {};
 
     // Add action so the search works only if JS is enabled
     if (searchForm) {
-        searchForm.querySelector('.qld__btn--search').setAttribute('type', 'submit');
-        searchForm.querySelectorAll('.qld__btn--search, .qld__text-input').forEach((el) => {
-            el.removeAttribute('disabled');
+        searchForm.querySelector(".qld__btn--search").setAttribute("type", "submit");
+        searchForm.querySelectorAll(".qld__btn--search, .qld__text-input").forEach((el) => {
+            el.removeAttribute("disabled");
         });
         checkHoneypot();
     }
 
     // Add event listener to search toggle button
     if (searchToggle) {
-        searchToggle.addEventListener('click', toggleHeaderSearch);
+        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 = '';
+        var honeypot = searchForm.querySelector(".qld__text-input--validation");
+        honeypot.value = "";
 
-        searchForm.addEventListener('submit', function(event) {
+        searchForm.addEventListener("submit", function (event) {
             // Prevent form submission if the honeypot field is filled
-            if (honeypot.value !== '') {
+            if (honeypot.value !== "") {
                 event.preventDefault(); // Stop the form submission
             } else {
-                honeypot.removeAttribute('name');
+                honeypot.removeAttribute("name");
             }
         });
     }
     /**
      * Toggle the header search on mobile/tablet
-     * 
+     *
      * @memberof module:header
      * @instance
      * @private
      */
     function toggleHeaderSearch() {
-
-        var targetId = searchToggle.getAttribute('aria-controls');
+        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');
+        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').innerHTML = 'Close';
+            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();
+            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() {
+                headerSearchEvents.background = addEvent(document, "click", function () {
                     var event = event || window.event;
-    
+
                     if (!target.contains(event.target)) {
-                        console.log('toggling');
+                        console.log("toggling");
                         toggleHeaderSearch();
                     }
                 });
             }, 0);
 
             // Focus trap enabled
-            focustrapTop.setAttribute('tabindex', 0);
-            focustrapBottom.setAttribute('tabindex', 0);
+            focustrapTop.setAttribute("tabindex", 0);
+            focustrapBottom.setAttribute("tabindex", 0);
 
             // Add focus listeners
-            headerSearchEvents.focusTop = addEvent(focustrapTop, 'focus', function() {
-                target.querySelector('button').focus();
+            headerSearchEvents.focusTop = addEvent(focustrapTop, "focus", function () {
+                target.querySelector("button").focus();
             });
-            headerSearchEvents.focusBottom = addEvent(focustrapBottom, 'focus', function() {
-                target.querySelector('input').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() {
+            headerSearchEvents.menu = addEvent(menuToggle, "click", function () {
                 toggleHeaderSearch();
             });
-            
+
             // Add key listener
-            headerSearchEvents.escKey = addEvent(document, 'keyup', function() {
+            headerSearchEvents.escKey = addEvent(document, "keyup", function () {
                 var event = event || window.event;
 
                 // Check the menu is open and visible and the escape key is pressed
-                if (event.keyCode === 27 ) {
+                if (event.keyCode === 27) {
                     toggleHeaderSearch();
                 }
             });
-            
 
-        // Close menu
+            // 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').innerHTML = 'Search';
+            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.classList.remove("qld__main-nav__search--open");
             target.style.display = "none";
 
             // Remove the focus trap
-            focustrapTop.removeAttribute('tabindex');
-            focustrapBottom.removeAttribute('tabindex');
+            focustrapTop.removeAttribute("tabindex");
+            focustrapBottom.removeAttribute("tabindex");
 
             // Remove the event listeners
             removeEvent(headerSearchEvents.focusTop);
@@ -139,7 +134,7 @@
 
     /**
      * Object representing an event listener
-     * 
+     *
      * @typedef {Object} event
      * @property {Node} element             Element the event is attached to
      * @property {function} handler         Event handler function
@@ -148,11 +143,11 @@
 
     /**
      * 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
@@ -166,7 +161,7 @@
                 event.stopPropagation();
                 event.preventDefault();
             }
-            return (handler);
+            return handler;
         }
 
         // Make sure attachHandler is also going to work
@@ -176,7 +171,7 @@
                 window.event.returnValue = false;
                 window.event.cancelBubble = true;
             }
-            return (handler);
+            return handler;
         }
 
         // Return the token and add the correct listener
@@ -185,34 +180,32 @@
             return {
                 element: element,
                 handler: listenHandler,
-                event: event
+                event: event,
             };
         } else {
-            element.attachEvent('on' + event, attachHandler);
+            element.attachEvent("on" + event, attachHandler);
             return {
                 element: element,
                 handler: attachHandler,
-                event: event
+                event: event,
             };
         }
     }
 
-
     /**
      * 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);
+            token.element.detachEvent("on" + token.event, token.handler);
         }
     }
-    
-})();
+})();

package/src/components/in_page_navigation/js/global.js

@@ -1,5 +1,4 @@
-(function() {
-
+(function () {
     /**
      * @module inPageNav
      */
@@ -7,51 +6,55 @@
 
     /**
      * Create in page nav from headings
-     * 
+     *
      * @memberof module:inPageNav
      */
-    inPageNav.init = function() {
-        var navs = document.querySelectorAll('.qld__inpage-nav-links');
-        var mainEl = document.querySelector('main.main');
-        var isLandingPage = mainEl && mainEl.classList.contains('landing');
+    inPageNav.init = function () {
+        var navs = document.querySelectorAll(".qld__inpage-nav-links");
+        var mainEl = document.querySelector("main.main");
+        var isLandingPage = mainEl && mainEl.classList.contains("landing");
 
         // For all In-Page Nav components
-        navs.forEach(function(nav) {
-            
-            var headingSelector = nav.getAttribute('data-headingType') ? nav.getAttribute('data-headingType') : 'h2';
-            var pageContent = isLandingPage ? mainEl : document.getElementById('content');
+        navs.forEach(function (nav) {
+            var headingSelector = nav.getAttribute("data-headingType") ? nav.getAttribute("data-headingType") : "h2";
+            var pageContent = isLandingPage ? mainEl : document.getElementById("content");
             // Exclude Code CT, and accordion h3, h4, h5, h6
             var headings = pageContent.querySelectorAll(
-                headingSelector +
-                ':not(.qld__inpage-nav-links__heading):not(.banner__heading):not(.qld__code *):not(.qld__accordion h3):not(.qld__accordion h4):not(.qld__accordion h5):not(.qld__accordion h6)'
-              );
-              
+                headingSelector + ":not(.qld__inpage-nav-links__heading):not(.banner__heading):not(.qld__code *):not(.qld__accordion h3):not(.qld__accordion h4):not(.qld__accordion h5):not(.qld__accordion h6)",
+            );
 
-            var list = nav.querySelector('.qld__link-list');
-            list.innerHTML = '';
+            // Get list element and clear existing children
+            var list = nav.querySelector(".qld__link-list");
+            list.replaceChildren();
 
             if (headings.length === 0) {
-                nav.style.display = 'none';
+                nav.style.display = "none";
             }
-        
+
             // For all headings (with matching data-headingType) in page content
-            headings.forEach(function(heading) {
+            headings.forEach(function (heading) {
                 var title = heading.innerText;
-                var id = 'section__' + title.toLowerCase().replace(/\s+/g, '-');
-                heading.setAttribute('id', id);
-                heading.setAttribute('tabindex', -1);
-                var link = '<li><a href="#' + id + '">' + title + '</a></li>';
-                
-                // Append link item if it doesn't already exist in list
-                if (list.querySelector('a[href="#' + id + '"') === null) {
-                    list.insertAdjacentHTML('beforeend', link);
+                var id = "section__" + title.toLowerCase().replace(/\s+/g, "-");
+                heading.setAttribute("id", id);
+                heading.setAttribute("tabindex", -1);
+
+                // Create link and anchor items to be added to the list
+                var link = document.createElement("li");
+                var anchor = document.createElement("a");
+                anchor.setAttribute("href", `#${id}`);
+                anchor.textContent = title;
+                link.appendChild(anchor);
+
+                // Append link item if it doesn't already exist in the list
+                if (list.querySelector(`a[href="#${id}"]`) === null) {
+                    list.appendChild(link);
                 }
             });
         });
-    }
+    };
 
     QLD.inPageNav = inPageNav;
 
     // Init In Page Nav on document load
-    document.addEventListener('DOMContentLoaded', QLD.inPageNav.init);
-})();
+    document.addEventListener("DOMContentLoaded", QLD.inPageNav.init);
+})();

package/src/components/internal_navigation/js/global.js

@@ -12,14 +12,24 @@
 
         if (svgSelector) {
             const svgPath = svgSelector.getAttribute("data-path");
-            const svgIcon = `<svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${svgPath}#tick"></use></svg>`;
-
             const thirdLevelLinks = document.querySelectorAll("ul ul ul a, ul ul ul span");
 
             // Loop through each matching element and apply the style
             thirdLevelLinks.forEach((link) => {
                 if (!link.querySelector("svg")) {
-                    link.insertAdjacentHTML("afterbegin", svgIcon);
+                    // Create <svg>
+                    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                    svg.setAttribute("class", "qld__icon");
+                    svg.setAttribute("aria-hidden", "true");
+                    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+                    // Create <use>
+                    const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+                    use.setAttributeNS(null, "href", `${svgPath}#tick`);
+
+                    // Append <use> to <svg>
+                    svg.appendChild(use);
+                    link.insertBefore(svg, link.firstChild);
                 }
                 link.parentElement.style.borderTopColor = "transparent";
             });

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

@@ -113,18 +113,6 @@ $QLD-header-md: 72px;
                 &--open {
                     color: var(--QLD-color-light__heading);
                 }
-
-                &.qld__main-nav__item-link--open {
-                    &:visited {
-                        color: var(--QLD-color-light__link);
-                    }
-                }
-            }
-
-            .qld__main-nav__item-link.qld__main-nav__item-link--open {
-                &:visited {
-                    color: var(--QLD-color-light__link);
-                }
             }
         }
 
@@ -173,6 +161,10 @@ $QLD-header-md: 72px;
             @include QLD-fontgrid(sm, heading);
             height: 100%;
 
+            > a.qld__main-nav__item-link.qld__main-nav__item-link--open {
+                color: var(--QLD-color-light__heading);
+            }
+
             &::before {
                 content: "";
                 display: block;
@@ -491,7 +483,6 @@ $QLD-header-md: 72px;
         cursor: pointer;
         align-items: center;
         color: var(--QLD-color-light__link);
-        @include QLD-focus("light", false);
         border-left: solid $QLD-border-width-thin $QLD-color-neutral--lighter;
 
         &:hover {
@@ -585,6 +576,13 @@ $QLD-header-md: 72px;
         @include QLD-media(lg) {
             @include QLD-space(padding-bottom, 0unit);
         }
+
+        // Reset the padding on list items in mobile as there is no arrow to obscure
+        li > a {
+            @include QLD-media(lg, "down") {
+                padding-right: 0;
+            }
+        }
     }
 
     .qld__main-nav__cta-wrapper .qld__link-list {
@@ -598,6 +596,9 @@ $QLD-header-md: 72px;
             background-color: var(--QLD-color-dark__background--shade);
         }
         .qld__main-nav__menu {
+            .qld__main-nav__item-title a.qld__main-nav__item-link.qld__main-nav__item-link--open {
+                color: var(--QLD-color-dark__heading);
+            }
             .qld__main-nav__item-title::before {
                 background-color: var(--QLD-color-dark__border);
             }
@@ -649,6 +650,71 @@ $QLD-header-md: 72px;
             }
         }
     }
+
+    // Focus styles
+    .qld__main-nav__menu {
+        .qld__main-nav__menu-inner {
+            .qld__main-nav__item-link {
+                @include QLD-focus("light", false, -2px);
+                border-radius: 0;
+
+                @include QLD-media(lg, "down") {
+                    @include QLD-focus("light", false, -3px);
+                }
+            }
+
+            .qld__main-nav__item-title:has(button.qld__main-nav__item-toggle) .qld__main-nav__item-link {
+                border-top-right-radius: 1rem;
+            }
+
+            .qld__main-nav__item-toggle {
+                @include QLD-focus("light", false, -2px);
+
+                @include QLD-media(lg, "down") {
+                    @include QLD-focus("light", false, 2px);
+                }
+            }
+
+            .qld__main-nav__toggle {
+                @include QLD-focus("dark", false, -3px);
+            }
+
+            .qld__main-nav__cta-wrapper {
+                .qld__main-nav__item-link {
+                    @include QLD-focus("dark", false, -3px);
+                }
+            }
+        }
+        .qld__main-nav__menu-sub-inner {
+            li > a,
+            div.qld__main-nav__sub-footer a {
+                @include QLD-media(lg, "down") {
+                    @include QLD-focus("light", false, -3px);
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+
+    // Dark mode focus styles
+    &.qld__main-nav--dark,
+    &.qld__main-nav--dark--alt {
+        .qld__main-nav__menu-inner {
+            .qld__main-nav__item-link,
+            .qld__main-nav__item-toggle {
+                &:focus {
+                    outline-color: var(--QLD-color-dark__focus);
+                }
+            }
+        }
+        .qld__link-list {
+            a:focus,
+            li > a:focus,
+            div.qld__main-nav__sub-footer a:focus {
+                outline-color: var(--QLD-color-dark__focus);
+            }
+        }
+    }
 }
 
 // Lock the scroll on the whole page when the menu is open

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

@@ -29,7 +29,7 @@
                         {{#each site.children}}
                         <li class="qld__main-nav__item {{#ifCond asset_assetid '==' ../current.data.assetid}}active{{/ifCond}}{{#ifCond asset_assetid '==' ../current.top.asset_assetid}}active{{/ifCond}}">
                             <div class="qld__main-nav__item-title">
-                                <a class="qld__main-nav__item-link" {{#ifCond asset_assetid '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{asset_assetid}}" >
+                                <a class="qld__main-nav__item-link" {{#ifCond asset_assetid '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{asset_assetid}}">
                                     <span class="qld__main-nav__item-text" data-name="{{{asset_short_name}}}">{{{asset_short_name}}}</span>
                                 </a>
                             </div>
@@ -50,9 +50,9 @@
                         {{#if site.metadata.mainNavCtaOne.value}}
                             <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}active{{/ifCond}}">
                                 <div class="qld__main-nav__item-title">
-                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaOne.value}}" >
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaOne.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaOne.value}}">
                                         {{#if site.metadata.mainNavCtaOneIcon.value}}
-                                            <i class="qld__icon qld__icon--sm {{site.metadata.mainNavCtaOneIcon.value}}"></i>
+                                            <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{site.metadata.mainNavCtaOneIcon.value}}"></use></svg>
                                         {{/if}}
                                         <span class="qld__main-nav__item-text" data-name="{{{site.metadata.mainNavCtaOneText.value}}}">{{{site.metadata.mainNavCtaOneText.value}}}</span>
                                     </a>
@@ -62,9 +62,9 @@
                             {{#if site.metadata.mainNavCtaTwo.value}}
                             <li class="qld__main-nav__item qld__main-nav__item--cta {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}active{{/ifCond}}">
                                 <div class="qld__main-nav__item-title">
-                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaTwo.value}}" >
+                                    <a class="qld__main-nav__item-link" {{#ifCond site.metadata.mainNavCtaTwo.value '==' ../current.data.assetid}}aria-current="page"{{/ifCond}} href="./?a={{site.metadata.mainNavCtaTwo.value}}">
                                         {{#if site.metadata.mainNavCtaTwoIcon.value}}
-                                            <i class="qld__icon qld__icon--sm {{site.metadata.mainNavCtaTwoIcon.value}}"></i>
+                                            <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{site.metadata.mainNavCtaTwoIcon.value}}"></use></svg>
                                         {{/if}}
                                         <span class="qld__main-nav__item-text" data-name="{{{site.metadata.mainNavCtaTwoText.value}}}">{{{site.metadata.mainNavCtaTwoText.value}}}</span>
                                     </a>