@qhealth-design-system/core 1.18.4 → 1.19.0

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

@@ -100,7 +100,7 @@
 
                     > .qld__left-nav__item-link .qld__left-nav__item-text {
                         color: var(--QLD-color-light__heading);
-                        font-weight: bold;
+                        font-weight: $QLD-font-weight-semibold;
                     }
 
                     > .qld__left-nav__item-link ~ .qld__accordion--closed {
@@ -281,12 +281,14 @@
                     background-color: var(--QLD-color-dark__design-accent);
                 }
 
-                &:hover {
+                // Hover over the full nav link only if the children are not expanded
+                &:not(:has(.qld__left-nav__item-link--open)):hover {
                     background-color: var(--QLD-color-dark__background--alt);
                 }
 
                 a.qld__left-nav__item-link:hover {
                     background-color: var(--QLD-color-dark__background--alt);
+                    color: var(--QLD-color-dark__link);
 
                     .qld__left-nav__item-icon svg {
                         color: var(--QLD-color-dark__action--primary-hover);
@@ -316,6 +318,10 @@
                     }
                 }
 
+                .qld__left-nav__item-toggle {
+                    @include QLD-focus("dark", false);
+                }
+
                 ul {
                     background-color: var(--QLD-color-dark__background);
 

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

@@ -1,6 +1,6 @@
-// //--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// // Main Navigation
-// //--------------------------------------------------------------------------------------------------------------------------------------------------------------
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Main Navigation
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 $QLD-main-nav-breakpoint: md !default;
 $QLD-main-nav-width: 320px !default;
@@ -95,7 +95,7 @@ $QLD-header-md: 72px;
             }
 
             &.active .qld__main-nav__item-link {
-                font-weight: bold;
+                font-weight: $QLD-font-weight-semibold;
                 color: var(--QLD-color-light__heading);
                 border-left-color: transparent;
 
@@ -228,7 +228,7 @@ $QLD-header-md: 72px;
                 color: var(--QLD-color-light__text);
                 background-color: $QLD-color-neutral--white;
                 border-left-color: $QLD-color-neutral--lightest;
-                font-weight: bold;
+                font-weight: $QLD-font-weight-semibold;
 
                 .qld__main-nav__item-icon {
                     stroke-width: 10px;
@@ -264,7 +264,7 @@ $QLD-header-md: 72px;
                 overflow: hidden;
                 user-select: none;
                 pointer-events: none;
-                font-weight: bold;
+                font-weight: $QLD-font-weight-semibold;
             }
         }
 
@@ -414,7 +414,7 @@ $QLD-header-md: 72px;
     & &__menu-heading {
         @include QLD-fontgrid(xs);
         @include QLD-space(margin, 0unit 1unit);
-        font-weight: normal;
+        font-weight: $QLD-font-weight-regular;
         color: var(--QLD-color-light__heading);
 
         @include QLD-media(md) {
@@ -747,6 +747,15 @@ $QLD-header-md: 72px;
 
         // CTA wrapper
         .qld__main-nav__cta-wrapper {
+            &.qld__main-nav__cta-wrapper--light {
+                .qld__main-nav__item-link {
+                    color: var(--QLD-color-light__link);
+
+                    &:hover {
+                        text-decoration-color: var(--QLD-color-light__underline--hover);
+                    }
+                }
+            }
             &.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 {

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

@@ -49,6 +49,7 @@
                     {{/ifCond}}
                     {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
                     <div class="qld__main-nav__cta-wrapper
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' ''}}qld__main-nav__cta-wrapper--light{{/ifCond}}
                     {{#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}}
                     ">

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

@@ -90,7 +90,7 @@
                         overflow: hidden;
                         user-select: none;
                         pointer-events: none;
-                        font-weight: bold;
+                        font-weight: $QLD-font-weight-semibold;
                     }
                 }
 
@@ -301,7 +301,7 @@
                     @include QLD-media(lg) {
                         padding: 0;
                         border-bottom: none;
-                        font-weight: bold;
+                        font-weight: $QLD-font-weight-semibold;
                     }
 
                     .qld__icon {
@@ -339,7 +339,7 @@
                 .qld__main-nav__item-desc {
                     color: var(--QLD-color-light__text--lighter);
                     @include QLD-fontgrid(xs);
-                    font-weight: normal;
+                    font-weight: $QLD-font-weight-regular;
                 }
 
                 &.active {
@@ -347,7 +347,7 @@
                         color: var(--QLD-color-light__heading);
                         width: 100%;
                         display: block;
-                        font-weight: bold;
+                        font-weight: $QLD-font-weight-semibold;
                         border-left: solid 4px transparent;
 
                         @include QLD-media(lg) {
@@ -366,7 +366,7 @@
                 }
 
                 &:not(.active) {
-                    font-weight: normal;
+                    font-weight: $QLD-font-weight-regular;
                 }
 
                 &.qld__main-nav__item--has-desc {

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

@@ -114,6 +114,7 @@
                     {{/ifCond}}
                     {{#ifCond site.metadata.mainNavCtaOne.value '||' site.metadata.mainNavCtaTwo.value}}
                     <div class="qld__main-nav__cta-wrapper
+                    {{#ifCond site.metadata.sitePreHeaderTheme.value '==' ''}}qld__main-nav__cta-wrapper--light{{/ifCond}}
                     {{#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}}
                     ">

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

@@ -9,7 +9,7 @@
         flex-wrap: wrap;
 
         li {
-            @include QLD-space(margin, .5unit .75unit .5unit 0);
+            @include QLD-space(margin, 0.5unit 0.75unit 0.5unit 0);
 
             &.ellipsis,
             &.first,
@@ -31,10 +31,9 @@
                 background-color: var(--QLD-color-light__action--primary);
                 box-shadow: inset 0 0 0 $QLD-border-width-thin var(--QLD-color-light__action--primary);
                 color: var(--QLD-color-light__link--on-action);
-                font-weight: bold;
+                font-weight: $QLD-font-weight-semibold;
 
-
-                &:hover{
+                &:hover {
                     background-color: var(--QLD-color-light__action--primary-hover);
                     color: var(--QLD-color-light__link--on-action);
                     box-shadow: inset 0 0 0 $QLD-border-width-default var(--QLD-color-light__action--primary-hover);
@@ -52,19 +51,20 @@
             }
 
             &.next,
-            &.prev{
-                @include QLD-underline('light','noUnderline');
+            &.prev {
+                @include QLD-underline("light", "noUnderline");
             }
 
             &.next,
             &.prev,
-            &.ellipsis{
-                a, button{
+            &.ellipsis {
+                a,
+                button {
                     box-shadow: none;
                     @include QLD-media(lg) {
                         width: auto;
                     }
-                    
+
                     &:hover span {
                         text-decoration-thickness: var(--QLD-underline__thickness-thick);
                         text-decoration: underline;
@@ -75,8 +75,8 @@
                         text-decoration: underline;
                     }
                 }
-                
-                span{
+
+                span {
                     @include QLD-sronly();
                     @include QLD-media(lg) {
                         position: relative;
@@ -88,21 +88,23 @@
             }
 
             @include QLD-media(lg) {
-                &.next span{
-                    @include QLD-space(margin-right, .5unit);
+                &.next span {
+                    @include QLD-space(margin-right, 0.5unit);
                 }
-                &.prev span{
-                    @include QLD-space(margin-left, .5unit);
+                &.prev span {
+                    @include QLD-space(margin-left, 0.5unit);
                 }
             }
 
-            &.ellipsis svg{
+            &.ellipsis svg {
                 vertical-align: middle;
             }
         }
 
-        .mid, .num {
-            a, button {
+        .mid,
+        .num {
+            a,
+            button {
                 &:active,
                 &:focus {
                     background-color: transparent;
@@ -111,7 +113,8 @@
             }
         }
 
-        a, button {
+        a,
+        button {
             text-decoration: none;
             @include QLD-space(height, 2unit);
             @include QLD-space(min-width, 2unit);
@@ -120,7 +123,6 @@
             background-color: transparent;
             border-radius: $QLD-border-radius-xs;
             color: var(--QLD-color-light__link);
-            background-color: $QLD-color-neutral--white;
             display: inline-flex;
             justify-content: center;
             @include QLD-space(line-height, 1.25unit);
@@ -158,7 +160,8 @@
         }
     }
 
-    .qld__body--dark & ul.qld__search-pagination__list {
+    .qld__body--dark & ul.qld__search-pagination__list,
+    .qld__body--dark-alt & ul.qld__search-pagination__list {
         li {
             & button {
                 outline: 3px solid var(--QLD-color-light__focus);
@@ -179,7 +182,7 @@
 
                 &:active,
                 &:focus {
-                    @include QLD-focus('dark');
+                    @include QLD-focus("dark");
                     background-color: var(--QLD-color-dark__action--primary-hover);
                     box-shadow: inset 0 0 0 $QLD-border-width-thin var(--QLD-color-dark__action--primary-hover) !important;
                     color: var(--QLD-color-dark__link--on-action);
@@ -188,11 +191,12 @@
 
             &.next,
             &.prev,
-            &.ellipsis{
-                a, button {
+            &.ellipsis {
+                a,
+                button {
                     box-shadow: none;
 
-                    &:hover{
+                    &:hover {
                         box-shadow: none;
                         color: var(--QLD-color-dark__link);
 
@@ -250,7 +254,7 @@
                     text-decoration-color: var(--QLD-color-dark__underline);
                     text-decoration-thickness: var(--QLD-underline__thickness-thin);
                 }
-                
+
                 &:focus span,
                 &:hover span {
                     text-decoration-color: var(--QLD-color-dark__link);
@@ -258,7 +262,7 @@
                 }
             }
         }
-        
+
         a,
         button {
             background-color: transparent;
@@ -283,4 +287,4 @@
             color: var(--QLD-color-dark__link);
         }
     }
-}
+}

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

@@ -1,44 +1,41 @@
-<div class="qld__body qld__body--dark">
-    <nav class="hidden-print qld__search-pagination" aria-label="pagination">
-        <h2 class="sr-only">Pagination</h2>
-        <ul class="qld__search-pagination__list">
-            {{#each pagination}}
-                {{#ifCond linkType '===' 'last'}}
-                    <li class="ellipsis">
-                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#more-horizontal"></use></svg>
-                    </li>
-                {{/ifCond}}
+<nav class="text-center hidden-print qld__search-pagination" aria-label="pagination">
+    <h2 class="sr-only">Pagination</h2> 
+    <ul class="qld__search-pagination__list">
+        {{#each pagination}}
+            {{#ifCond linkType '===' 'last'}}
+                <li class="ellipsis">
+                    <svg class="qld__icon qld__icon--lg" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><use href="{{@root.site.metadata.coreSiteIcons.value}}#more-horizontal"></use></svg>
+                </li>
+            {{/ifCond}}
 
+            {{#ifCond linkType '===' 'prev'}}
+            <li class="prev">
+                <a href="{{{url}}}" rel="prev" aria-label="Previous page of results">
+                    <svg class="qld__icon qld__icon--sm" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-left"></use></svg>
+                    <span>Back</span>
+                </a>
+            {{/ifCond}}
                 
-                    {{#ifCond linkType '===' 'prev'}}
-                    <li class="prev">
-                        <a href="{{url}}" rel="prev" aria-label="Previous page of results" class="qld__search-pagination_link">
-                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-left"></use></svg>
-                            <span>Back</span>
-                        </a>
-                    {{/ifCond}}
-                    
-                    {{#if label}}
-                    <li class="{{linkType}}{{#if isCurrent}} active{{/if}}">
-                        <a class="qld__search-pagination_link" href="{{url}}" aria-current="page">{{label}}</a>
-                    </li>
-                    {{/if}}
+            {{#if label}}
+            <li class="{{linkType}}{{#if isCurrent}} active{{/if}}">
+                <a href="{{{url}}}"{{#if isCurrent}} aria-current="page"{{/if}}>{{label}}</a>
+            </li>
+            {{/if}}
 
-                    {{#ifCond linkType '===' 'next'}}
-                    <li class="next">
-                        <a href="{{url}}" rel="next" aria-label="Next page of results" class="qld__search-pagination_link">
-                        <span>Next</span>
-                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
-                        </a>
-                    {{/ifCond}}
+            {{#ifCond linkType '===' 'next'}}
+            <li class="next">
+                <a href="{{{url}}}" rel="next" aria-label="Next page of results">
+                    <span>Next</span>
+                    <svg class="qld__icon qld__icon--sm" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><use href="{{@root.site.metadata.coreSiteIcons.value}}#arrow-right"></use></svg>
+                </a>
+            </li>
+            {{/ifCond}}
+        
+            {{#ifCond linkType '===' 'first'}}
+                <li class="ellipsis">
+                    <svg class="qld__icon qld__icon--sm" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><use href="{{@root.site.metadata.coreSiteIcons.value}}#more-horizontal"></use></svg>
                 </li>
-            
-                {{#ifCond linkType '===' 'first'}}
-                    <li class="ellipsis">
-                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#more-horizontal"></use></svg>
-                    </li>
-                {{/ifCond}}
-            {{/each}}
-        </ul>
-    </nav>
-</div>
+            {{/ifCond}}
+        {{/each}}
+    </ul>
+</nav>

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

@@ -390,10 +390,6 @@
             background: white;
             clip-path: none;
         }
-
-        // .qld__promo-panel__container-icon {
-        //     background: var(--QLD-color-light__background--shade);
-        // }
     }
 
     &.qld__body--light {
@@ -523,6 +519,7 @@
         .qld__promo-panel__icon {
             color: var(--QLD-color-dark__action--secondary);
         }
+
         .qld__promo-panel__container-icon {
             background: var(--QLD-color-dark__background--alt-shade);
         }

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

@@ -9,11 +9,17 @@
                     </div>
                     <div class="qld__promo-panel__container-content">
                         <div class="qld__promo-panel__container-inner">
-                            {{#if metadata.icon.value}}
-                            <div class="qld__promo-panel__container-icon">
-                                <i class="qld__promo-panel__icon {{metadata.icon.value}}"></i>
-                            </div>
-                            {{/if}}
+                            {{!-- TODO: Remove the icon metadata once all instances have been updated to use promo_panel_icon --}}
+                            {{#ifCond metadata.icon.value '||' metadata.promo_panel_icon.value}}
+                                <div class="qld__promo-panel__container-icon">
+                                    {{#if metadata.promo_panel_icon.value}}
+                                        <svg class="qld__icon qld__promo-panel__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{metadata.promo_panel_icon.value}}"></use></svg>
+                                    {{else}}
+                                        <i class="qld__promo-panel__icon {{metadata.icon.value}}"></i>
+                                    {{/if}}
+                                </div>
+                            {{/ifCond}}
+                            
                             {{#if metadata.title.value}}
                             <h2 class="qld__display-xl">{{metadata.title.value}}</h2>
                             {{/if}}

package/src/components/promo_panel/js/global.js

@@ -1,46 +1,31 @@
-(function () {
-    "use strict";
+/**
+ * @module initPromoPanel
+ */
 
-    /**
-     * @module initPromoPanel
-     */
-    var initPromoPanel = {};
+export default function initPromoPanel(document = document) {
+    let promoPanels = document.querySelectorAll(".qld__promo-panel");
 
-    /**
-     * Initialise Promo Panel
-     *
-     * @memberof module:initPromoPanel
-     */
-    initPromoPanel.init = function () {
-        let promoPanels = document.querySelectorAll(".qld__promo_panel");
+    if (promoPanels.length > 0) {
+        document.querySelectorAll("section").forEach(function (section) {
+            if (section.classList.contains("qld__promo-panel") && !section.classList.contains("qld__promo-panel--no-image")) {
+                let next = section.nextElementSibling;
 
-        if (promoPanels.length > 0) {
-            document.querySelectorAll("section").forEach(function (section) {
-                if (section.classList.contains("qld__promo_panel") && !section.classList.contains("qld__promo_panel--no-image")) {
-                    let next = section.nextElementSibling;
-
-                    if (next && next.tagName.toLowerCase() === "data") {
-                        next = next.nextElementSibling;
-                    }
-
-                    if (next && next.classList.contains("qld__body--alt")) {
-                        section.classList.add("qld__body--alt-half");
-                    }
-
-                    if (next && next.classList.contains("qld__body--dark")) {
-                        section.classList.add("qld__body--dark-half");
-                    }
+                if (next && next.tagName.toLowerCase() === "data") {
+                    next = next.nextElementSibling;
+                }
 
-                    if (next && next.classList.contains("qld__body--alt-dark")) {
-                        section.classList.add("qld__body--alt-dark-half");
-                    }
+                if (next && next.classList.contains("qld__body--alt")) {
+                    section.classList.add("qld__body--alt-half");
                 }
-            });
-        }
-    };
 
-    // Assign initPromoPanel to global QLD object of functions
-    QLD.initPromoPanel = initPromoPanel;
+                if (next && next.classList.contains("qld__body--dark")) {
+                    section.classList.add("qld__body--dark-half");
+                }
 
-    document.addEventListener("DOMContentLoaded", initPromoPanel.init);
-})();
+                if (next && next.classList.contains("qld__body--alt-dark")) {
+                    section.classList.add("qld__body--alt-dark-half");
+                }
+            }
+        });
+    }
+}

package/src/components/promo_panel/js/manifest.json

@@ -63,6 +63,14 @@
                     "required": false,
                     "editable": true
                 },
+                "promo_panel_icon": {
+                    "type": "metadata_field_text",
+                    "description": "",
+                    "friendly_name": "Promo panel icon",
+                    "value": "chevron-right",
+                    "required": false,
+                    "editable": true
+                },
                 "title": {
                     "type": "metadata_field_text",
                     "description": "",

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

@@ -105,7 +105,7 @@
             border-left: 1px solid var(--QLD-color-light__border--alt);
             border-right: 1px solid var(--QLD-color-light__border--alt);
             border-top: 1px solid var(--QLD-color-light__border--alt);
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
             z-index: 1;
             text-decoration: none;
 
@@ -266,7 +266,7 @@
                     border-left: 1px solid var(--QLD-color-dark__border--alt);
                     border-right: 1px solid var(--QLD-color-dark__border--alt);
                     border-top: 1px solid var(--QLD-color-dark__border--alt);
-                    font-weight: 600;
+                    font-weight: $QLD-font-weight-semibold;
                     z-index: 1;
                     text-decoration: none;
                     outline: none;
@@ -342,7 +342,7 @@
                     border-left: 1px solid var(--QLD-color-dark__border--alt);
                     border-right: 1px solid var(--QLD-color-dark__border--alt);
                     border-top: 1px solid var(--QLD-color-dark__border--alt);
-                    font-weight: 600;
+                    font-weight: $QLD-font-weight-semibold;
                     z-index: 1;
                     text-decoration: none;
                     outline: none;

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

@@ -1,5 +1,5 @@
 .qld__toggle-tip {
     &-content {
-        padding: #{map-get($QLD-space-map, 4)}px;
+        padding: 1rem;
     }
 }

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

@@ -1,5 +1,5 @@
 .qld__tool-tip {
     &-content {
-        padding: 2px #{map-get($QLD-space-map, 2)}px 2px #{map-get($QLD-space-map, 2)}px;
+        padding: 0.125rem 0.5rem 0.125rem 0.5rem;
     }
 }

package/src/components/video_player/js/global.js

@@ -1,19 +1,22 @@
-(function () {
-    'use strict';
+/**
+ * @module VideoPlayer
+ */
 
+export default function initVideoPlayer(document = document) {
     // Select all accordion title buttons
-    const accordionTitles = document.querySelectorAll('.qld__body qld__video__player--wrapper .qld__accordion__title');
-
+    const accordionTitles = document.querySelectorAll(".qld__body .qld__video__player--wrapper .qld__accordion__title");
     if (!accordionTitles.length) return;
 
-    accordionTitles.forEach(function (accordionTitle) {
-        accordionTitle.addEventListener('click', function () {
-            // Toggle the text content based on the accordion state
-            const buttonText = this.querySelector('i').nextSibling;
-
-            buttonText.textContent = accordionTitle.classList.contains('qld__accordion--open')
-            ? "Show transcript"
-            : "Hide transcript";
+    accordionTitles.forEach((accordionTitle) => {
+        accordionTitle.addEventListener("click", () => {
+            toggleButtonState(accordionTitle);
         });
     });
-})();
+}
+
+function toggleButtonState(accordionTitle) {
+    // Toggle the text content based on the accordion state
+    const buttonSpan = accordionTitle.querySelector("svg").nextElementSibling;
+    const isCurrentlyOpen = accordionTitle.classList.contains("qld__accordion--open");
+    buttonSpan.textContent = isCurrentlyOpen ? "Show transcript" : "Hide transcript";
+}