@qhealth-design-system/core 1.16.5 → 1.17.0

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

@@ -1,6 +1,6 @@
-(function(QLD) {
+(function (QLD) {
     "use strict";
-    
+
     /**
      * The main namespace for all QLDDS functions and variables
      * @module _global
@@ -9,30 +9,30 @@
     QLD.utils = {
         /**
          * Add 'js' body class if JS is enabled on the page
-         * 
+         *
          * @memberof module:_global
          */
-        'browserJS': function() {
+        browserJS: function () {
             document.querySelector("html").classList.remove("no-js");
             document.querySelector("html").classList.add("js");
         },
-        
+
         /**
-        * Returns a function, that, as long as it continues to be invoked, will not 
-        * be triggered. The function will be called after it stops being called for 
-        * N milliseconds. If `immediate` is passed, trigger the function on the 
-        * leading edge, instead of the trailing.
-        * https://davidwalsh.name/javascript-debounce-function
-        * 
-        * @memberof module:_global
-        * 
-        * @param {function} func 
-        * @param {number} wait 
-        * @param {boolean} immediate 
-        * 
-        * @returns {function}
-        */
-        'debounce': function (func, wait, immediate) {
+         * Returns a function, that, as long as it continues to be invoked, will not
+         * be triggered. The function will be called after it stops being called for
+         * N milliseconds. If `immediate` is passed, trigger the function on the
+         * leading edge, instead of the trailing.
+         * https://davidwalsh.name/javascript-debounce-function
+         *
+         * @memberof module:_global
+         *
+         * @param {function} func
+         * @param {number} wait
+         * @param {boolean} immediate
+         *
+         * @returns {function}
+         */
+        debounce: function (func, wait, immediate) {
             var timeout;
             return function () {
                 var context = this,
@@ -50,158 +50,161 @@
 
         /**
          * Convert nodeList to Array (for IE11)
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {*} node_list 
-         * 
+         *
+         * @param {*} node_list
+         *
          * @returns {Node[]}
          */
-        'listToArray': function(node_list) {
+        listToArray: function (node_list) {
             return Array.prototype.slice.call(node_list);
         },
 
         /**
          * Set browser cookie
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {string} cookie_name 
-         * @param {string} cookie_value 
+         *
+         * @param {string} cookie_name
+         * @param {string} cookie_value
          */
-        'setCookie': function(cookie_name, cookie_value) {
-            var cookie_entry = cookie_name + '=' + encodeURIComponent(cookie_value) + ';';
-            document.cookie = cookie_entry + '; path=/;';
+        setCookie: function (cookie_name, cookie_value) {
+            var cookie_entry = cookie_name + "=" + encodeURIComponent(cookie_value) + ";";
+            document.cookie = cookie_entry + "; path=/;";
         },
         /**
          * Get browser cookie
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {string} cookie_name 
-         * 
+         *
+         * @param {string} cookie_name
+         *
          * @returns {c_value}
          */
-        'getCookie': function(cookie_name) {
+        getCookie: function (cookie_name) {
             var c_value = " " + document.cookie;
             var c_start = c_value.indexOf(" " + cookie_name + "=");
             if (c_start == -1) {
                 c_value = null;
-            }
-            else {
+            } else {
                 c_start = c_value.indexOf("=", c_start) + 1;
                 var c_end = c_value.indexOf(";", c_start);
                 if (c_end == -1) {
                     c_end = c_value.length;
                 }
-                c_value = unescape(c_value.substring(c_start,c_end));
+                c_value = unescape(c_value.substring(c_start, c_end));
             }
             return c_value;
         },
         /**
          * Set browser local storage
-         * 
+         *
          * @memberof module:_global
-         * 
+         *
          * @param {string} storage_key
-         * @param {string} storage_value 
+         * @param {string} storage_value
          */
-        'setLocalStorage': function(storage_key, storage_value) {
-            if (typeof(storage_value) !== 'string') {
+        setLocalStorage: function (storage_key, storage_value) {
+            if (typeof storage_value !== "string") {
                 storage_value = JSON.stringify(storage_value);
             }
-        
+
             localStorage.setItem(storage_key, storage_value);
         },
         /**
          * Get browser local storage from key
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {string} storage_key 
-         * 
+         *
+         * @param {string} storage_key
+         *
          * @returns {localStorage.getItem(storage_key)}
          */
-        'getLocalStorage': function(storage_key) {
+        getLocalStorage: function (storage_key) {
             return localStorage.getItem(storage_key);
         },
         /**
          * Remove browser local storage item by key
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {string} storage_key 
+         *
+         * @param {string} storage_key
          */
-        'removeLocalStorage': function(storage_key) {
+        removeLocalStorage: function (storage_key) {
             localStorage.removeItem(storage_key);
         },
         /**
          * Determine the location of the user using HTML5 geolocation
-         * 
+         *
          * @memberof module:_global
-         * 
+         *
          * @param {Boolean} override
          * @param {function} errorCallback
          */
-        'geolocateUser': function(override, errorCallback) {
-            
-            var userLocationStorage = QLD.utils.getLocalStorage('qld_user_location');
-            if(userLocationStorage !== null && !override) {
+        geolocateUser: function (override, errorCallback) {
+            var userLocationStorage = QLD.utils.getLocalStorage("qld_user_location");
+            if (userLocationStorage !== null && !override) {
                 return JSON.parse(userLocationStorage);
             }
 
             if (navigator.geolocation) {
-
                 QLD.utils.setLoadingState(true);
-                navigator.geolocation.getCurrentPosition(function(position) {
-                    var location = {
-                        "latitude": position.coords.latitude,
-                        "longitude": position.coords.longitude,
-                        "isGeolocated": true,
-                        "location": ''
-                    };
-
-                    QLD.utils.setUserLocation(location);
-                    QLD.utils.removeLocalStorage('deny-location');
-                    return `${position.coords.latitude},${position.coords.longitude}`;
-                }, function(error) {
-                    console.log(error);
-                    QLD.utils.setLoadingState(false);
-                    if (errorCallback) {
-                        errorCallback();
-                    }
-                    return false;
-                }, { timeout: 10000 });
+                navigator.geolocation.getCurrentPosition(
+                    function (position) {
+                        var location = {
+                            latitude: position.coords.latitude,
+                            longitude: position.coords.longitude,
+                            isGeolocated: true,
+                            location: "",
+                        };
 
+                        QLD.utils.setUserLocation(location);
+                        QLD.utils.removeLocalStorage("deny-location");
+                        return `${position.coords.latitude},${position.coords.longitude}`;
+                    },
+                    function (error) {
+                        console.log(error);
+                        QLD.utils.setLoadingState(false);
+                        if (errorCallback) {
+                            errorCallback();
+                        }
+                        return false;
+                    },
+                    { timeout: 10000 },
+                );
             } else {
-                console.log('Unable to locate');
+                console.log("Unable to locate");
                 if (errorCallback) {
-                        errorCallback();
-                    }
+                    errorCallback();
+                }
                 return false;
             }
         },
 
         /**
          * Set the user location, including the HHS
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {object} location 
+         *
+         * @param {object} location
          */
-        'setUserLocation': function(location, refresh = true) {
+        setUserLocation: function (location, refresh = true) {
             // If there is a site-wide HHS configured
-            var hhsDiv = document.getElementById('qld__hhs');
+            var hhsDiv = document.getElementById("qld__hhs");
 
-            if (hhsDiv !== null && typeof(serviceFinderData) !== 'undefined') {
-                var hhsId = hhsDiv.getAttribute('data-hhs');
-                serviceFinderData.collection('hhs').doc(hhsId).get().then((response) => {
-                    location.hhs_id = hhsId;
-                    location.hhs_name = response.name;
+            if (hhsDiv !== null && typeof serviceFinderData !== "undefined") {
+                var hhsId = hhsDiv.getAttribute("data-hhs");
+                serviceFinderData
+                    .collection("hhs")
+                    .doc(hhsId)
+                    .get()
+                    .then((response) => {
+                        location.hhs_id = hhsId;
+                        location.hhs_name = response.name;
 
-                    QLD.utils.setUserLocationInStorage(location, refresh);
-                });
-                
+                        QLD.utils.setUserLocationInStorage(location, refresh);
+                    });
             } else {
                 QLD.utils.setUserLocationInStorage(location, refresh);
             }
@@ -209,17 +212,17 @@
 
         /**
          * Set the 'qld_user_location' cookie based on a provided location object
-         * 
+         *
          * @memberof module:_global
-         * 
+         *
          */
-        'setUserLocationInStorage': function(newLocation, refresh) {
-            QLD.utils.setLocalStorage('qld_user_location', JSON.stringify(newLocation));
+        setUserLocationInStorage: function (newLocation, refresh) {
+            QLD.utils.setLocalStorage("qld_user_location", JSON.stringify(newLocation));
 
-            if(refresh) {
+            if (refresh) {
                 QLD.utils.setLoadingState(true);
-                
-                setTimeout(function() {
+
+                setTimeout(function () {
                     window.location.reload(false);
                 }, 300);
             }
@@ -227,22 +230,21 @@
         /**
          * Check the 'qld_user_location' cookie to determine
          * whether the user is geolocated
-         * 
+         *
          * @memberof module:_global
-         * 
+         *
          * @return {boolean}
-         * 
+         *
          */
-        'isGeolocated': function() {
-            var userLocationStorage = QLD.utils.getLocalStorage('qld_user_location');
+        isGeolocated: function () {
+            var userLocationStorage = QLD.utils.getLocalStorage("qld_user_location");
             var userLocationData = {};
 
-            if(userLocationStorage !== null) {
+            if (userLocationStorage !== null) {
                 userLocationData = JSON.parse(userLocationStorage);
             }
 
-            if(Object.keys(userLocationData).length > 0) {
-
+            if (Object.keys(userLocationData).length > 0) {
                 return userLocationData.isGeolocated;
             }
 
@@ -253,50 +255,85 @@
          * this will show a loader animation overlay over
          * the entire page. Use 'false' to remove this
          * same animation
-         * 
+         *
          * @memberof module:_global
-         * 
-         * @param {Boolean} isLoading 
+         *
+         * @param {Boolean} isLoading
          */
-        'setLoadingState': function(isLoading) {
-            var loader = document.querySelector('.loader');
-            
+        setLoadingState: function (isLoading) {
+            var loader = document.querySelector(".loader");
+
             if (loader === null) {
-                loader = document.createElement('div');
-                loader.classList.add('loader');
-                var parentNode = document.querySelector('.main');
+                loader = document.createElement("div");
+                loader.classList.add("loader");
+                var parentNode = document.querySelector(".main");
                 parentNode.insertBefore(loader, parentNode.firstChild);
             }
 
             if (isLoading) {
-                loader.parentNode.classList.add('loading');
+                loader.parentNode.classList.add("loading");
             } else {
-                document.querySelector('.loading').classList.remove('loading');
+                document.querySelector(".loading").classList.remove("loading");
             }
         },
         /**
          * Get Paramater from URL by name
-         * 
+         *
          * @memberof module:_global
-         * 
+         *
          * @param {*} name
          */
-        'getParamaterByName': function(name){
-            name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
-            var regexS = "[\\?&]"+name+"=([^&#]*)";
-            var regex = new RegExp( regexS );
-            var results = regex.exec( window.location.href );
-            if( results == null )
-              return "";
-            else
-              return decodeURIComponent(results[1].replace(/\+/g, " "));
-          }
+        getParamaterByName: function (name) {
+            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+            var regexS = "[\\?&]" + name + "=([^&#]*)";
+            var regex = new RegExp(regexS);
+            var results = regex.exec(window.location.href);
+            if (results == null) return "";
+            else return decodeURIComponent(results[1].replace(/\+/g, " "));
+        },
+        /**
+         * Update the href path for SVG icons, depending on the spritesheeet source (core vs health)
+         *
+         * @memberof module:_global
+         *
+         * String selector to that targets the "use" element within the SVG icon
+         * @param {string} selector
+         */
+        updateSvgIconPath: function (selector) {
+            const ctaNavIcons = document.querySelectorAll(selector);
+            if (ctaNavIcons.length > 0) {
+                // Check each icon found
+                ctaNavIcons.forEach((icon) => {
+                    const href = icon.getAttribute("href");
+
+                    if (href) {
+                        const splitArray = href.split("#");
+                        let iconName = splitArray.pop();
+                        let isHealthIcon = iconName.startsWith("extended_");
+
+                        // Remove the "extended_" prefix from the iconName if it's a health icon
+                        if (isHealthIcon) {
+                            iconName = iconName.replace(/extended_/gi, "");
+                        }
+
+                        // Recreate the href path for the SVG
+                        splitArray.push(iconName);
+                        let updatedHref = splitArray.join("#");
+
+                        // Update the path to the health spreadsheet if required
+                        if (isHealthIcon) {
+                            updatedHref = updatedHref.replace("QLD-icons", "QLD-Health-icons");
+                        }
+
+                        icon.setAttribute("href", updatedHref);
+                    }
+                });
+            }
+        },
     };
 
     // Make QLD variable available to the console for debugging
     window.QLD = QLD;
 
     QLD.utils.browserJS();
-    
-
-})(window.QLD);
+})(window.QLD);

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

@@ -65,7 +65,10 @@
     };
 
     /**
-     * When a tab is clicked, activateTab is fired to activate it
+     * When a tab is clicked, activateTab is fired to activate it.
+     * Always retrieve the closest tab button to ensure the event is
+     * triggered on the correct element as we reference specific data
+     * attributes on the button.
      * 
      * @memberof module:tabs
      * @instance
@@ -74,7 +77,7 @@
      * @param {Document.event} event 
      */
     function clickEventListener(event) {
-        var tab = event.target;
+        var tab = event.target.closest('[role="tab"]');
         activateTab(tab, false);
     };
 
@@ -217,6 +220,7 @@
      */
     function activateTab(tab, setFocus) {
         setFocus = setFocus || true;
+
         // Deactivate all other tabs
         deactivatetabs(tab);
 

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

@@ -221,7 +221,7 @@
                                                     {{/if}}
                                                 </h2> 
                                             </div>
-                                            <div class="qld__card__arrow"></div>
+                                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
                                         </div>
                                     </div>
                                 </div>

package/src/components/breadcrumbs/js/global.js

@@ -24,7 +24,8 @@
             }
 
             if (resized) {
-                bannerBreadCrumb.querySelector("ol.qld__link-list").innerHTML = originalBreadCrumbUl.innerHTML;
+                const originalList = originalBreadCrumbUl.cloneNode(true);
+                bannerBreadCrumb.querySelector("ol.qld__link-list").replaceChildren(...originalList.children);
             }
 
             const breadCrumbsUl = bannerBreadCrumb.querySelector("ol.qld__link-list");
@@ -65,7 +66,19 @@
         button.setAttribute("aria-expanded", "false");
 
         if (svgPath) {
-            button.innerHTML = `<svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${svgPath}#more-horizontal"></use></svg>`;
+            // Create <svg>
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("class", "qld__icon qld__icon--lg");
+            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}#more-horizontal`);
+
+            // Append <use> to <svg>
+            svg.appendChild(use);
+            button.appendChild(svg);
         }
 
         overFlowWrapper.appendChild(button);
@@ -106,8 +119,8 @@
         breadCrumbsUlLis[breadCrumbsUlLis.length - 1].style.overflow = "hidden";
     }
 
-    function appendOverflow(breadCrumbsUlLis, overflowMenu, breadcrumbUL) {
-        breadCrumbsUlLis[1].innerHTML = "";
+    function appendOverflow(breadCrumbsUlLis, overflowMenu) {
+        breadCrumbsUlLis[1].replaceChildren();
         breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
         breadCrumbsUlLis[1].appendChild(overflowMenu);
         breadCrumbsUlLis[1].style.display = "flex";

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

@@ -62,7 +62,7 @@
                                     {{/if}}
                                 </div>
                                 {{#ifCond metadata.show_arrow.value '==' 'true'}}
-                                <div class="qld__card__arrow"></div>
+                                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
                                 {{/ifCond}}
                             </div>
                             {{#ifCond metadata.show_card_footer.value '==' 'true'}}

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

@@ -126,7 +126,7 @@
                                         {{/if}}
                                     </div>
                                     {{#ifCond ../component.data.metadata.show_arrow.value '==' 'true'}}
-                                    <div class="qld__card__arrow"></div>
+                                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
                                     {{/ifCond}}
                                 </div>
                                 {{#ifCond metadata.cardDisplayFooter.value '==' 'true'}}