@qhealth-design-system/core 1.16.5 → 1.17.1

package/src/components/main_navigation/js/global.js

@@ -1,17 +1,16 @@
 /**
  * The mobile nav module
- * 
+ *
  * @module mobileNav
  */
 (function () {
-
     var mobileNav = {};
     var mobileNavEvents = {};
     var mobileNavAnimating = false;
 
     /**
      * IE8 compatible function for replacing classes on a DOM node
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -22,22 +21,21 @@
      * @param  {string} closingClass - The secondClass you want to toggle on the DOM node
      */
     function toggleClasses(element, state, openingClass, closingClass) {
-        if (state === 'opening' || state === 'open') {
-            var oldClass = openingClass || 'qld__main-nav__content--closed';
-            var newClass = closingClass || 'qld__main-nav__content--open';
+        if (state === "opening" || state === "open") {
+            var oldClass = openingClass || "qld__main-nav__content--closed";
+            var newClass = closingClass || "qld__main-nav__content--open";
         } else {
-            var oldClass = closingClass || 'qld__main-nav__content--open';
-            var newClass = openingClass || 'qld__main-nav__content--closed';
+            var oldClass = closingClass || "qld__main-nav__content--open";
+            var newClass = openingClass || "qld__main-nav__content--closed";
         }
 
         removeClass(element, oldClass);
         addClass(element, newClass);
     }
 
-
     /**
      * IE8 compatible function for removing a class
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -49,14 +47,13 @@
         if (element.classList) {
             element.classList.remove(className);
         } else {
-            element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+            element.className = element.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
         }
     }
 
-
     /**
      * IE8 compatible function for adding a class
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -68,15 +65,14 @@
         if (element.classList) {
             element.classList.add(className);
         } else {
-            element.className = element.className + ' ' + className;
+            element.className = element.className + " " + className;
         }
     }
 
-
     /**
      * IE8 compatible function for adding an event
      * https://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -95,7 +91,7 @@
                 event.stopPropagation();
                 event.preventDefault();
             }
-            return (handler);
+            return handler;
         }
 
         // Make sure attachHandler is also going to work
@@ -105,7 +101,7 @@
                 window.event.returnValue = false;
                 window.event.cancelBubble = true;
             }
-            return (handler);
+            return handler;
         }
 
         // Return the token and add the correct listener
@@ -114,22 +110,21 @@
             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,
             };
         }
     }
 
-
     /**
      * IE8 compatible function for removing an event
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -140,14 +135,13 @@
         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);
         }
     }
 
-
     /**
      * IE8 compatible function for getting elements style
-     * 
+     *
      * @memberof module:mobileNav
      * @instance
      * @private
@@ -156,17 +150,12 @@
      * @param  {object} property - property to return value
      */
     function getStyle(element, property) {
-        return (
-            typeof getComputedStyle !== 'undefined' ?
-            getComputedStyle(element, null) :
-            element.currentStyle
-        )[property]; // avoid getPropertyValue altogether
+        return (typeof getComputedStyle !== "undefined" ? getComputedStyle(element, null) : element.currentStyle)[property]; // avoid getPropertyValue altogether
     }
 
-
     /**
      * Toggle a mobileNav element
-     * 
+     *
      * @memberof module:mobileNav
      *
      * @param  {string}  element   - The toggle for the main nav
@@ -188,187 +177,177 @@
             event.stopPropagation();
         } catch (error) {}
 
-
         // check this once
-        if (typeof callbacks != 'object') {
+        if (typeof callbacks != "object") {
             callbacks = {};
         }
 
-
         // Elements we modify
-        var targetId = element.getAttribute('aria-controls');
+        var targetId = element.getAttribute("aria-controls");
         var target = document.getElementById(targetId);
-        var menu = target.querySelector('.qld__main-nav__menu');
-        var overlay = target.querySelector('.qld__main-nav__overlay');
-        var closeButton = target.querySelector('.qld__main-nav__toggle--close');
-        var openButton = document.querySelector('.qld__main-nav__toggle--open');
-        var focustrapTop = menu.querySelector('.qld__main-nav__focus-trap-top');
-        var focustrapBottom = menu.querySelector('.qld__main-nav__focus-trap-bottom');
+        var menu = target.querySelector(".qld__main-nav__menu");
+        var overlay = target.querySelector(".qld__main-nav__overlay");
+        var closeButton = target.querySelector(".qld__main-nav__toggle--close");
+        var openButton = document.querySelector(".qld__main-nav__toggle--open");
+        var focustrapTop = menu.querySelector(".qld__main-nav__focus-trap-top");
+        var focustrapBottom = menu.querySelector(".qld__main-nav__focus-trap-bottom");
         var menuHeading = document.querySelector(".qld__main-nav__menu-heading");
-        var focusContent = menu.querySelectorAll('a, .qld__main-nav__toggle');
-        var closed = target.className.indexOf('qld__main-nav__content--open') === -1;
-        var header = document.querySelector('.qld__header');
-        var body = document.querySelector('.main');
-        var footer = document.querySelector('.qld__footer');
+        var focusContent = menu.querySelectorAll("a, .qld__main-nav__toggle");
+        var closed = target.className.indexOf("qld__main-nav__content--open") === -1;
+        var header = document.querySelector(".qld__header");
+        var body = document.querySelector(".main");
+        var footer = document.querySelector(".qld__footer");
 
         var menuWidth = menu.offsetWidth;
-        var state = closed ? 'opening' : '';
-
-        overlay.style.display = 'block';
+        var state = closed ? "opening" : "";
 
+        overlay.style.display = "block";
 
         (function (target, speed) {
             QLD.animate.Toggle({
                 element: menu,
-                property: 'right',
+                property: "right",
                 openSize: 0,
                 closeSize: -1 * menuWidth,
                 speed: speed || 250,
                 prefunction: function () {
                     // Set these values immediately for transitions
-                    if (state === 'opening') {
-                        menu.style.display = 'block';
+                    if (state === "opening") {
+                        menu.style.display = "block";
                         overlay.style.right = 0;
                         overlay.style.opacity = 0.5;
 
                         // run when opening
-                        if (typeof callbacks.onOpen === 'function') {
+                        if (typeof callbacks.onOpen === "function") {
                             callbacks.onOpen();
                         }
                     } else {
-                        overlay.style.opacity = '0';
+                        overlay.style.opacity = "0";
 
                         // run when closing
-                        if (typeof callbacks.onClose === 'function') {
+                        if (typeof callbacks.onClose === "function") {
                             callbacks.onClose();
                         }
                     }
                 },
                 postfunction: function () {
-                    if (state === 'opening' ) {
-
+                    if (state === "opening") {
                         // Move the focus to the close button
                         menuHeading.focus();
-                        openButton.setAttribute('aria-expanded', true);
-                        closeButton.setAttribute('aria-expanded', true);
+                        openButton.setAttribute("aria-expanded", true);
+                        closeButton.setAttribute("aria-expanded", true);
 
                         // Focus trap enabled
-                        focustrapTop.setAttribute('tabindex', 0);
-                        focustrapBottom.setAttribute('tabindex', 0);
+                        focustrapTop.setAttribute("tabindex", 0);
+                        focustrapBottom.setAttribute("tabindex", 0);
 
                         // header.setAttribute('aria-hidden', true);
-                        body.setAttribute('aria-hidden', true);
-                        footer.setAttribute('aria-hidden', true);
+                        body.setAttribute("aria-hidden", true);
+                        footer.setAttribute("aria-hidden", true);
 
                         // Add event listeners
-                        mobileNavEvents.focusTop = addEvent(focustrapTop, 'focus', function () {
+                        mobileNavEvents.focusTop = addEvent(focustrapTop, "focus", function () {
                             focusContent[focusContent.length - 1].focus();
                         });
 
-                        mobileNavEvents.focusBottom = addEvent(focustrapBottom, 'focus', function () {
+                        mobileNavEvents.focusBottom = addEvent(focustrapBottom, "focus", function () {
                             focusContent[0].focus();
                         });
 
                         // Add key listener
-                        mobileNavEvents.escKey = addEvent(document, 'keyup', function () {
+                        mobileNavEvents.escKey = addEvent(document, "keyup", function () {
                             var event = event || window.event;
-                            var overlayOpen = getStyle(overlay, 'display');
+                            var overlayOpen = getStyle(overlay, "display");
 
                             // Check the menu is open and visible and the escape key is pressed
-                            if (event.keyCode === 27 && overlayOpen === 'block') {
+                            if (event.keyCode === 27 && overlayOpen === "block") {
                                 mobileNav.Toggle(element, speed, callbacks);
                             }
                         });
 
-
-                        if (typeof callbacks.afterOpen === 'function') {
+                        if (typeof callbacks.afterOpen === "function") {
                             callbacks.afterOpen();
                         }
+
+                        // Adjust the size of the cta wrapper in mobile view
+                        const mobileMenuWidth = document.querySelector(".qld__main-nav__menu-inner").offsetWidth;
+                        let ctaWrapper = document.querySelector(".qld__main-nav__cta-wrapper");
+                        if (mobileMenuWidth && ctaWrapper) {
+                            ctaWrapper.style.width = mobileMenuWidth + "px";
+                        }
                     } else {
                         // Move the focus back to the menu button
                         closeButton.focus();
-                        openButton.setAttribute('aria-expanded', false);
-                        closeButton.setAttribute('aria-expanded', false);
+                        openButton.setAttribute("aria-expanded", false);
+                        closeButton.setAttribute("aria-expanded", false);
 
                         // Remove the focus trap
-                        focustrapTop.removeAttribute('tabindex');
-                        focustrapBottom.removeAttribute('tabindex');
-
-                        header.removeAttribute('aria-hidden');
-                        body.removeAttribute('aria-hidden');
-                        footer.removeAttribute('aria-hidden');
+                        focustrapTop.removeAttribute("tabindex");
+                        focustrapBottom.removeAttribute("tabindex");
 
+                        header.removeAttribute("aria-hidden");
+                        body.removeAttribute("aria-hidden");
+                        footer.removeAttribute("aria-hidden");
 
                         // Remove the event listeners
                         removeEvent(mobileNavEvents.focusTop);
                         removeEvent(mobileNavEvents.focusBottom);
 
-
                         // Remove the event listener for the keypress
                         removeEvent(mobileNavEvents.escKey);
 
-                        if (typeof callbacks.afterClose === 'function') {
+                        if (typeof callbacks.afterClose === "function") {
                             callbacks.afterClose();
                         }
                     }
 
-
                     // Toggle classes
                     toggleClasses(target, state);
-                    toggleClasses(
-                        document.body,
-                        state,
-                        'qld__main-nav__scroll--unlocked',
-                        'qld__main-nav__scroll--locked'
-                    );
-
+                    toggleClasses(document.body, state, "qld__main-nav__scroll--unlocked", "qld__main-nav__scroll--locked");
 
                     // Reset inline styles
-                    menu.style.display = '';
-                    menu.style.right = '';
-                    overlay.style.display = '';
-                    overlay.style.right = '';
-                    overlay.style.opacity = '';
+                    menu.style.display = "";
+                    menu.style.right = "";
+                    overlay.style.display = "";
+                    overlay.style.right = "";
+                    overlay.style.opacity = "";
 
                     mobileNavAnimating = false;
                 },
             });
         })(target, speed);
-    }
+    };
 
-   
-    window.addEventListener('DOMContentLoaded', function () {
-        
+    window.addEventListener("DOMContentLoaded", function () {
         // Add toggle event to open mobile nav
         var navToggles = document.querySelectorAll('*[aria-controls="main-nav"]');
         navToggles.forEach(function (button) {
-            button.addEventListener('click', function () {
+            button.addEventListener("click", function () {
                 mobileNav.Toggle(button);
             });
         });
 
-         // Add toggle event listeners to accordion buttons
-        var itemToggles = document.querySelectorAll('.qld__main-nav__item-toggle');
-        itemToggles.forEach(function(button) {
-            button.addEventListener('click', function () {
-
-                if(button.className.split(' ').indexOf('qld__accordion--closed')>=0){
-
-                    button.parentNode.querySelector('.qld__main-nav__item-link').classList.add('qld__main-nav__item-link--open');
+        // Add toggle event listeners to accordion buttons
+        var itemToggles = document.querySelectorAll(".qld__main-nav__item-toggle");
+        itemToggles.forEach(function (button) {
+            button.addEventListener("click", function () {
+                if (button.className.split(" ").indexOf("qld__accordion--closed") >= 0) {
+                    button.parentNode.querySelector(".qld__main-nav__item-link").classList.add("qld__main-nav__item-link--open");
                     itemToggles.forEach(function (item) {
-                        if(item.className.split(' ').indexOf('qld__accordion--open')>=0){
-                            item.parentNode.querySelector('.qld__main-nav__item-link').classList.remove('qld__main-nav__item-link--open');
+                        if (item.className.split(" ").indexOf("qld__accordion--open") >= 0) {
+                            item.parentNode.querySelector(".qld__main-nav__item-link").classList.remove("qld__main-nav__item-link--open");
                             QLD.accordion.Close(item);
                         }
                     });
-                }else{
-                    button.parentNode.querySelector('.qld__main-nav__item-link').classList.remove('qld__main-nav__item-link--open');
+                } else {
+                    button.parentNode.querySelector(".qld__main-nav__item-link").classList.remove("qld__main-nav__item-link--open");
                 }
 
-
                 QLD.accordion.Toggle(button);
             });
         });
-    });
 
-}());
+        // Finds all the menu related icons in main nav, mega nav, and header.
+        QLD.utils.updateSvgIconPath(".qld__main-nav__cta-wrapper .qld__main-nav__item-link svg.qld__icon > use, .qld__header__cta-wrapper .qld__header__cta-link svg.qld__icon > use");
+    });
+})();

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

@@ -17,7 +17,6 @@
             border: none;
             cursor: pointer;
             @include QLD-space(border-radius, 50%);
-            @include QLD-focus("light", false);
 
             padding: 0;
             color: var(--QLD-color-light__text);
@@ -175,8 +174,6 @@
         a.qld__main-nav__sub-heading {
             display: none;
 
-            width: 85%;
-
             @include QLD-media(lg) {
                 display: inline-flex;
                 align-items: center;
@@ -323,7 +320,7 @@
 
                 &:hover {
                     border-color: var(--QLD-color-light__action--primary);
-                    background-color: $QLD-color-neutral--white;
+                    background-color: var(--QLD-color-dark__background);
 
                     @include QLD-media(lg) {
                         background-color: transparent;
@@ -377,15 +374,16 @@
                 &.qld__main-nav__item--has-desc {
                     box-shadow: none;
                     padding: 0;
-                    .qld__main-nav__sub-item-text {
-                        @include QLD-media(lg) {
+
+                    @include QLD-media(lg) {
+                        .qld__main-nav__sub-item-text {
                             @include QLD-space(padding, 1unit 0);
                         }
-                    }
 
-                    .qld__main-nav__sub-item-text {
-                        color: var(--QLD-color-light__link);
-                        border-bottom: solid $QLD-border-width-thin $QLD-color-neutral--lighter;
+                        a {
+                            color: var(--QLD-color-light__link);
+                            border-bottom: solid $QLD-border-width-thin $QLD-color-neutral--lighter;
+                        }
                     }
 
                     &::before {
@@ -415,6 +413,11 @@
                     @include QLD-space(line-height, 1.5unit);
                 }
 
+                @include QLD-media(lg, "down") {
+                    padding-top: 0.6rem;
+                    padding-bottom: 0.7rem;
+                }
+
                 &:hover {
                     color: var(--QLD-color-light__link);
                     border-color: var(--QLD-color-light__action--primary);
@@ -424,6 +427,10 @@
                 &:visited {
                     color: var(--QLD-color-light__link);
                 }
+
+                &.qld__cta-link--view-all {
+                    @include QLD-space(padding-right, 2.5rem);
+                }
             }
         }
     }
@@ -498,23 +505,27 @@
                             }
 
                             &:hover {
+                                border-color: var(--QLD-color-dark__action--primary-hover);
                                 background-color: var(--QLD-color-dark__background);
+                                border-color: var(--QLD-color-dark__action--primary-hover);
                             }
                         }
 
                         &.active {
-                            a {
-                                color: var(--QLD-color-dark__heading);
-                            }
-
+                            a,
                             span {
                                 color: var(--QLD-color-dark__heading);
+                                border-color: var(--QLD-color-dark__border);
                             }
                         }
 
                         .qld__main-nav__sub-item-text {
                             color: var(--QLD-color-dark__link);
                         }
+
+                        &.qld__main-nav__item--has-desc a {
+                            border-bottom-color: var(--QLD-color-dark__border);
+                        }
                     }
                 }
                 .qld__main-nav__sub-footer {
@@ -525,7 +536,9 @@
                         color: var(--QLD-color-dark__link);
 
                         &:hover {
+                            border-color: var(--QLD-color-dark__action--primary-hover);
                             background-color: var(--QLD-color-dark__background);
+                            border-color: var(--QLD-color-dark__action--primary-hover);
                         }
                     }
                 }

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

@@ -58,7 +58,7 @@
                                                     <div class="qld__main-nav__sub-head">
                                                         <a class="qld__main-nav__sub-heading " href="./?a={{../this.asset_assetid}}">
                                                             <span class="qld__main-nav__sub-item-text qld__display-lg">{{{../this.asset_name}}}</span>
-                                                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
+                                                            <svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
                                                         </a>
                                                         {{#ifCond @root.site.metadata.mainNavPageDescLevelOne.value '==' 'true'}}
                                                             {{#if ../this.asset_metadata_shortDescription}}
@@ -115,9 +115,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>
@@ -127,9 +127,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>