@qhealth-design-system/core 1.17.2 → 1.18.0

package/src/components/left_hand_navigation/js/global.js

@@ -1,34 +1,57 @@
 /**
  * The left hand nav module
- * 
+ *
  * @module leftHandNav
  */
- (function () {
-    'use strict';
 
+const navLinkToggleClass = "qld__left-nav__item-toggle";
+const accordionClosedClass = "qld__accordion--closed";
+const accordionOpenClass = "qld__accordion--open";
+const accordionChildClass = "qld__accordion__body";
+const navLinkClass = "qld__left-nav__item-link";
 
-    window.addEventListener('DOMContentLoaded', function () {
+export default function initLeftHandNav(document = document) {
+    // Add toggle event listeners to accordion buttons
+    var itemToggles = document.querySelectorAll("." + navLinkToggleClass);
 
-         // Add toggle event listeners to accordion buttons
-        var itemToggles = document.querySelectorAll('.qld__left-nav__item-toggle');
-        itemToggles.forEach(function(button) {
-            button.addEventListener('click', function () {
-
-                if(button.className.split(' ').indexOf('qld__accordion--closed')>=0){
-                    button.classList.replace('qld__accordion--closed','qld__accordion--open');
-                    button.parentNode.querySelector('.qld__left-nav__item-link').classList.add('qld__left-nav__item-link--open');
-                    
-                    button.parentNode.querySelector('.qld__accordion__body').classList.replace('qld__accordion--closed','qld__accordion--open');
-
-                } else{
-                    button.classList.replace('qld__accordion--open','qld__accordion--closed');
-                    button.parentNode.querySelector('.qld__left-nav__item-link').classList.remove('qld__left-nav__item-link--open');
-                    button.parentNode.querySelector('.qld__accordion__body').classList.replace('qld__accordion--open','qld__accordion--closed');
-
-                }
-
-            });
-        });
+    // On init, check for falsly triggered accordions and correct them
+    itemToggles.forEach((button) => {
+        checkAccordions(button);
     });
-
-}());
+    // Loop through all toggles and add click event listener
+    itemToggles.forEach((button) => button.addEventListener("click", () => handleClick(button)));
+}
+
+function checkAccordions(button) {
+    if (button.parentNode.querySelector("." + navLinkClass).classList.contains(navLinkClass + "--open")) {
+        openNavLink(button);
+    } else {
+        closeNavLink(button);
+    }
+}
+
+function openNavLink(button) {
+    // Open the chevron icon
+    button.classList.replace(accordionClosedClass, accordionOpenClass);
+    // Open the nav link element
+    button.parentNode.querySelector("." + navLinkClass).classList.add(navLinkClass + "--open");
+    // Open the child element
+    button.parentNode.querySelector("." + accordionChildClass).classList.replace(accordionClosedClass, accordionOpenClass);
+}
+
+function closeNavLink(button) {
+    // Close the chevron icon
+    button.classList.replace(accordionOpenClass, accordionClosedClass);
+    // Close the nav link element
+    button.parentNode.querySelector("." + navLinkClass).classList.remove(navLinkClass + "--open");
+    // Close the child element
+    button.parentNode.querySelector("." + accordionChildClass).classList.replace(accordionOpenClass, accordionClosedClass);
+}
+
+function handleClick(button) {
+    if (button.classList.contains(accordionClosedClass)) {
+        openNavLink(button);
+    } else {
+        closeNavLink(button);
+    }
+}

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

@@ -53,7 +53,6 @@ $QLD-header-md: 72px;
             position: fixed;
             top: 0;
             bottom: 0;
-            // right: 0;
             right: -1 * $QLD-main-nav-width;
             width: $QLD-main-nav-width;
             z-index: $QLD-main-nav-z-index;
@@ -117,6 +116,7 @@ $QLD-header-md: 72px;
         }
 
         & .qld__main-nav__cta-wrapper {
+            z-index: 1;
             .qld__main-nav__item--cta {
                 .qld__main-nav__item-title::before {
                     background-color: $QLD-color-neutral--lighter;
@@ -126,13 +126,11 @@ $QLD-header-md: 72px;
                 }
 
                 .qld__main-nav__item-link {
+                    @include QLD-underline("light", "noUnderline", "default", "noVisited");
+
                     color: var(--QLD-color-light__link);
                     border: none;
 
-                    a {
-                        @include QLD-underline("light", "noUnderline", "default", "noVisited");
-                    }
-
                     &:hover {
                         background-color: $QLD-color-neutral--white;
 
@@ -161,6 +159,11 @@ $QLD-header-md: 72px;
             @include QLD-fontgrid(sm, heading);
             height: 100%;
 
+            // Selector ensures the hover only applies when the item is not open
+            &:has(.qld__main-nav__item-toggle):not(:has(.qld__main-nav__item-link--open)):hover {
+                background-color: var(--QLD-color-light__background--alt);
+            }
+
             > a.qld__main-nav__item-link.qld__main-nav__item-link--open {
                 color: var(--QLD-color-light__heading);
             }
@@ -274,19 +277,12 @@ $QLD-header-md: 72px;
             .qld__main-nav__menu-heading {
                 color: var(--QLD-color-dark__heading);
             }
+
             .qld__main-nav__toggle {
-                color: var(--QLD-color-dark__link);
                 border-color: var(--QLD-color-dark__border);
 
-                .qld__icon {
-                    color: var(--QLD-color-dark__action--secondary);
-                }
                 &:hover {
                     background-color: var(--QLD-color-dark__background--shade);
-
-                    .qld__icon {
-                        color: var(--QLD-color-dark__action--secondary-hover);
-                    }
                 }
             }
 
@@ -300,20 +296,8 @@ $QLD-header-md: 72px;
                 }
 
                 .qld__main-nav__item--cta {
-                    .qld__main-nav__item-link {
-                        color: var(--QLD-color-dark__link);
-
-                        &:hover {
-                            background-color: var(--QLD-color-dark__background);
-
-                            .qld__icon {
-                                color: var(--QLD-color-dark__action--secondary-hover);
-                            }
-                        }
-                    }
-
-                    .qld__icon {
-                        color: var(--QLD-color-dark__action--secondary);
+                    .qld__main-nav__item-link:hover {
+                        background-color: var(--QLD-color-dark__background);
                     }
                 }
             }
@@ -330,19 +314,10 @@ $QLD-header-md: 72px;
             }
 
             .qld__main-nav__toggle {
-                color: var(--QLD-color-dark__link);
                 border-color: var(--QLD-color-dark__border--alt);
 
-                .qld__icon {
-                    color: var(--QLD-color-dark__action--secondary);
-                }
-
                 &:hover {
                     background-color: var(--QLD-color-dark__background--alt-shade);
-
-                    .qld__icon {
-                        color: var(--QLD-color-dark__action--secondary-hover);
-                    }
                 }
             }
 
@@ -356,22 +331,8 @@ $QLD-header-md: 72px;
                 }
 
                 .qld__main-nav__item--cta {
-                    .qld__main-nav__item-link {
-                        color: var(--QLD-color-dark__link);
-
-                        @include QLD-underline("dark", "noUnderline", "default", "noVisited");
-
-                        &:hover {
-                            background-color: var(--QLD-color-dark__background--alt);
-
-                            .qld__icon {
-                                color: var(--QLD-color-dark__action--secondary-hover);
-                            }
-                        }
-                    }
-
-                    .qld__icon {
-                        color: var(--QLD-color-dark__action--secondary);
+                    .qld__main-nav__item-link:hover {
+                        background-color: var(--QLD-color-dark__background--alt);
                     }
                 }
             }
@@ -453,7 +414,6 @@ $QLD-header-md: 72px;
     & &__menu-heading {
         @include QLD-fontgrid(xs);
         @include QLD-space(margin, 0unit 1unit);
-        // @include QLD-space(padding, 1unit 0unit);
         font-weight: normal;
         color: var(--QLD-color-light__heading);
 
@@ -531,10 +491,6 @@ $QLD-header-md: 72px;
         &--open {
             color: var(--QLD-color-dark__text);
             background-color: transparent;
-
-            &:active {
-                background-color: var(--QLD-color-dark__background--alt);
-            }
         }
 
         // Close icon
@@ -543,10 +499,6 @@ $QLD-header-md: 72px;
             @include QLD-media(md) {
                 border-width: $QLD-border-width-default;
             }
-
-            &:active {
-                background-color: var(--QLD-color-dark__background--alt);
-            }
         }
     }
 
@@ -595,6 +547,7 @@ $QLD-header-md: 72px;
         .qld__link-list {
             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);
@@ -644,10 +597,6 @@ $QLD-header-md: 72px;
                     color: var(--QLD-color-dark__link);
                 }
             }
-
-            .qld__icon {
-                color: var(--QLD-color-dark__action--secondary);
-            }
         }
     }
 
@@ -660,6 +609,11 @@ $QLD-header-md: 72px;
 
                 @include QLD-media(lg, "down") {
                     @include QLD-focus("light", false, -3px);
+
+                    // Ensure the outline looks "full" compared to other tabs
+                    &:focus {
+                        z-index: 1;
+                    }
                 }
             }
 
@@ -676,13 +630,7 @@ $QLD-header-md: 72px;
             }
 
             .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);
-                }
+                @include QLD-focus("light", false, -3px);
             }
         }
         .qld__main-nav__menu-sub-inner {
@@ -693,27 +641,14 @@ $QLD-header-md: 72px;
                     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);
+            // Ensure focus outlines of list elements are visible
+            > .qld__link-columns.qld__link-list {
+                @include QLD-media(lg) {
+                    padding: 5px;
                 }
             }
         }
-        .qld__link-list {
-            a:focus,
-            li > a:focus,
-            div.qld__main-nav__sub-footer a:focus {
-                outline-color: var(--QLD-color-dark__focus);
-            }
-        }
     }
 }
 
@@ -758,6 +693,97 @@ $QLD-header-md: 72px;
     }
 }
 
+// Specific dark mode styling for individual menu parts
+.qld__main-nav {
+    .qld__main-nav__menu {
+        // Nav header
+        .qld__main-nav__header {
+            &.qld__main-nav__header--dark,
+            &.qld__main-nav__header--dark-alt {
+                button.qld__main-nav__toggle {
+                    @include QLD-focus("dark", false, -3px);
+
+                    color: var(--QLD-color-dark__link);
+
+                    &--open,
+                    &--close {
+                        &:active {
+                            background-color: var(--QLD-color-dark__background--alt);
+                        }
+                    }
+
+                    .qld__icon {
+                        color: var(--QLD-color-dark__action--secondary);
+                    }
+
+                    &:hover {
+                        .qld__icon {
+                            color: var(--QLD-color-dark__action--secondary-hover);
+                        }
+                    }
+                }
+            }
+        }
+
+        // Menu body
+        .qld__main-nav__body--dark.qld__link-list {
+            .qld__main-nav__item-toggle,
+            .qld__main-nav__item-link,
+            .qld__main-nav__item li > a,
+            .qld__main-nav__menu-sub-inner a {
+                &:focus {
+                    outline-color: var(--QLD-color-dark__focus);
+                }
+            }
+
+            // Menu body item title
+            .qld__main-nav__item-title {
+                // Selector ensures the hover only applies when the item is not open
+                &:has(.qld__main-nav__item-toggle):not(:has(.qld__main-nav__item-link--open)):hover {
+                    background-color: var(--QLD-color-dark__background--alt);
+                }
+            }
+        }
+
+        // CTA wrapper
+        .qld__main-nav__cta-wrapper {
+            &.qld__main-nav__cta-wrapper--dark,
+            &.qld__main-nav__cta-wrapper--dark-alt {
+                .qld__link-list .qld__main-nav__item .qld__main-nav__item-title a.qld__main-nav__item-link:hover {
+                    @include QLD-underline("dark", "noUnderline", "default", "noVisited");
+                }
+
+                .qld__main-nav__item-link {
+                    @include QLD-underline("dark", "noUnderline", "default", "noVisited");
+                    @include QLD-focus("dark", false, -3px);
+
+                    color: var(--QLD-color-dark__link);
+
+                    .qld__icon {
+                        color: var(--QLD-color-dark__action--secondary);
+                    }
+
+                    &:hover {
+                        .qld__icon {
+                            color: var(--QLD-color-dark__action--secondary-hover);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Menu home button
+    &.qld__main-nav--dark,
+    &.qld__main-nav--dark-alt {
+        .qld__main-nav__item-home {
+            .qld__icon {
+                color: var(--QLD-color-dark__action--secondary);
+            }
+        }
+    }
+}
+
 // Print styles
 @media print {
     .qld__main-nav {

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

@@ -8,14 +8,17 @@
             ">
                 <div class="qld__main-nav__menu-inner">
                     <div class="qld__main-nav__focus-trap-top"></div>
-                    <div class="qld__main-nav__header">
+                    <div class="qld__main-nav__header
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__header--dark{{/ifCond}}
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__header--dark-alt{{/ifCond}}
+                    ">
                         <h2 class="qld__main-nav__menu-heading" tabindex="-1">Menu</h2>
                         <button aria-controls="main-nav" class="qld__main-nav__toggle qld__main-nav__toggle--close">
                             <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#close"></use></svg>
                             <span class="qld__main-nav__toggle-text">Close</span>
                         </button>
                     </div>
-                    <ul class="qld__link-list qld__link-list--flex">
+                    <ul class="qld__link-list qld__link-list--flex {{#ifCond site.metadata.mainNavStyle.value '==' 'qld__main-nav--dark'}}qld__main-nav__body--dark{{/ifCond}}">
                         {{#if site.metadata.mainNavHomeIconShow.value}}
                         <li class="{{#if current.home}}active{{/if}} qld__main-nav__item">
                             <div class="qld__main-nav__item-title">
@@ -45,7 +48,10 @@
                         {{/ifCond}}
                     {{/ifCond}}
                     {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
-                    <div class="qld__main-nav__cta-wrapper">
+                    <div class="qld__main-nav__cta-wrapper
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__cta-wrapper--dark{{/ifCond}}
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__cta-wrapper--dark-alt{{/ifCond}}
+                    ">
                         <ul class="qld__link-list qld__link-list--flex">
                         {{#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}}">

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

@@ -255,7 +255,6 @@
                 }
 
                 &:hover {
-                    background-color: var(--QLD-color-light__background--alt);
                     @include QLD-media(lg) {
                         background-color: transparent;
                     }
@@ -280,7 +279,7 @@
 
                     &:hover {
                         border-color: var(--QLD-color-light__action--primary);
-                        background-color: $QLD-color-neutral--white;
+                        background-color: transparent;
 
                         .qld__main-nav__sub-item-text .qld__icon {
                             @include QLD-space(margin, 0 -4px 0 1unit);
@@ -320,7 +319,6 @@
 
                 &:hover {
                     border-color: var(--QLD-color-light__action--primary);
-                    background-color: var(--QLD-color-dark__background);
 
                     @include QLD-media(lg) {
                         background-color: transparent;
@@ -375,6 +373,11 @@
                     box-shadow: none;
                     padding: 0;
 
+                    > a,
+                    > .qld__main-nav__item-desc {
+                        padding-left: 0.25rem;
+                    }
+
                     @include QLD-media(lg) {
                         .qld__main-nav__sub-item-text {
                             @include QLD-space(padding, 1unit 0);
@@ -506,8 +509,6 @@
 
                             &: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);
                             }
                         }
 
@@ -538,7 +539,6 @@
                         &: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

@@ -8,7 +8,10 @@
             ">
                 <div class="qld__main-nav__menu-inner">
                     <div class="qld__main-nav__focus-trap-top"></div>
-                    <div class="qld__main-nav__header">
+                    <div class="qld__main-nav__header
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__header--dark{{/ifCond}}
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__header--dark-alt{{/ifCond}}
+                    ">
                         <h2 class="qld__main-nav__menu-heading" tabindex="-1">Menu</h2>
                         <button
                             aria-controls="main-nav"
@@ -18,7 +21,7 @@
                             <span class="qld__main-nav__toggle-text">Close</span>
                         </button>
                     </div>
-                    <ul class="qld__link-list qld__link-list--flex">
+                    <ul class="qld__link-list qld__link-list--flex {{#ifCond site.metadata.mainNavStyle.value '==' 'qld__main-nav--dark'}}qld__main-nav__body--dark{{/ifCond}}">
                         {{#if site.metadata.mainNavHomeIconShow.value}}
                         <li class="qld__main-nav__item {{#if current.home}}active{{/if}}">
                             <div class="qld__main-nav__item-title">
@@ -110,7 +113,10 @@
                         {{/ifCond}}
                     {{/ifCond}}
                     {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
-                    <div class="qld__main-nav__cta-wrapper">
+                    <div class="qld__main-nav__cta-wrapper
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark'}}qld__main-nav__cta-wrapper--dark{{/ifCond}}
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' 'qld__header__pre-header--dark-alt'}}qld__main-nav__cta-wrapper--dark-alt{{/ifCond}}
+                    ">
                         <ul class="qld__link-list qld__link-list--flex">
                         {{#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}}">

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

@@ -3,40 +3,10 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .text-columns {
-    h2, h3 {
+    h2,
+    h3 {
         &:first-child {
             @include QLD-space(margin-top, 3unit);
         }
     }
 }
-
-/* For text-element spacing */
-* + .qld__margin-t-text-element {
-    margin-top: 24px !important;
-}
-
-* + .qld__row-gap-text-element {
-    row-gap: 24px !important;
-}
-
-/* For paragraph spacing */
-* + .qld__margin-t-p {
-    margin-top: 16px !important;
-}
-
-* + .qld__row-gap-p {
-    row-gap: 16px !important;
-}
-
-/* For component spacing */
-* + .qld__margin-t-component {
-    margin-top: 32px !important;
-}
-
-* + .qld__row-gap-component {
-    row-gap: 32px !important;
-}
-
-
-  
-