@qhealth-design-system/core 1.18.3 → 1.19.0

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

@@ -1,5 +1,5 @@
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// {{component_name}}
+// File Upload
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__form-file-wrapper {
@@ -15,7 +15,7 @@
         }
 
         p {
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
             font-size: pxToRem(14);
             line-height: pxToRem(16);
             max-width: none;
@@ -31,7 +31,7 @@
 
     p.qld__file-input-title {
         color: var(--QLD-color-light__heading);
-        font-weight: 600;
+        font-weight: $QLD-font-weight-semibold;
         font-size: pxToRem(20);
         line-height: pxToRem(24);
         margin: 0 auto pxToRem(24);
@@ -71,7 +71,7 @@
     }
 
     .qld__file-input-label {
-        font-weight: 400;
+        font-weight: $QLD-font-weight-regular;
     }
 
     .qld__form-file-dropzone {
@@ -426,7 +426,7 @@
     align-content: center;
     color: var(--QLD-color-light__text--lighter);
     display: flex;
-    font-weight: 400;
+    font-weight: $QLD-font-weight-regular;
     font-size: pxToRem(14);
     line-height: pxToRem(20);
 

package/src/components/file_upload/js/global.js

@@ -19,16 +19,17 @@
 
         fileTemplate.classList.add("qld__form-file");
 
-        fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
-                            <div class="qld__loading_spinner qld__loading_spinner--landscape" role="status">
-                                <span class="qld__loading_spinner-wheel"></span>
-                            </div>
-                        </div>
-                        <div class="qld__form-file-info">
-                            <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
-                            <span class="qld__form-file-info-status">Uploading...</span>
-                        </div></div>
-                        <div class="qld__form-file-actions"></div>`;
+        // TODO: Do not build html elements using innerHTML, build properly to prevent XSS
+        // fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
+        //                     <div class="qld__loading_spinner qld__loading_spinner--landscape" role="status">
+        //                         <span class="qld__loading_spinner-wheel"></span>
+        //                     </div>
+        //                 </div>
+        //                 <div class="qld__form-file-info">
+        //                     <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
+        //                     <span class="qld__form-file-info-status">Uploading...</span>
+        //                 </div></div>
+        //                 <div class="qld__form-file-actions"></div>`;
         return fileTemplate;
     };
 
@@ -50,22 +51,23 @@
 
         fileTemplate.classList.add("qld__form-file", "qld__form-file--success");
 
-        fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
-                                        <svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#${fileType !== "" ? fileType.iconClass : ""}"></use></svg>
-                                    </div>
-                                    <div class="qld__form-file-info">
-                                        <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
-                                        <span class="qld__form-file-info-status">
-                                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#status-success"></use></svg>
-                                            Upload successful${fileSize !== null ? `, ${fileSize}KB` : ""}
-                                        </span>
-                                    </div></div>
-                                    <div class="qld__form-file-actions">
-                                        <button class="qld__btn qld__btn--tertiary qld__btn--icon-lead qld__form-file-delete-btn" data-file-id="${fileId}">
-                                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#delete"></use></svg>
-                                            <span class="qld__form-file-delete-btn-remove">Remove</span>
-                                        </button>
-                                    </div>`;
+        // TODO: Do not build html elements using innerHTML, build properly to prevent XSS
+        // fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
+        //                                 <svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#${fileType !== "" ? fileType.iconClass : ""}"></use></svg>
+        //                             </div>
+        //                             <div class="qld__form-file-info">
+        //                                 <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
+        //                                 <span class="qld__form-file-info-status">
+        //                                     <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#status-success"></use></svg>
+        //                                     Upload successful${fileSize !== null ? `, ${fileSize}KB` : ""}
+        //                                 </span>
+        //                             </div></div>
+        //                             <div class="qld__form-file-actions">
+        //                                 <button class="qld__btn qld__btn--tertiary qld__btn--icon-lead qld__form-file-delete-btn" data-file-id="${fileId}">
+        //                                     <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#delete"></use></svg>
+        //                                     <span class="qld__form-file-delete-btn-remove">Remove</span>
+        //                                 </button>
+        //                             </div>`;
 
         return fileTemplate;
     };
@@ -82,22 +84,23 @@
         console.log("error:", file.name);
         fileTemplate.classList.add("qld__form-file", "qld__form-file--error");
 
-        fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
-                                        <svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#document-error"></use></svg>
-                                    </div>
-                                    <div class="qld__form-file-info">
-                                        <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
-                                        <span class="qld__form-file-info-status">
-                                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#status-error"></use></svg>
-                                            ${error}
-                                        </span>
-                                    </div></div>
-                                    <div class="qld__form-file-actions">
-                                        <button class="qld__btn qld__btn--tertiary qld__btn--icon-lead qld__form-file-delete-btn" data-file-id="${fileId}">
-                                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#delete"></use></svg>
-                                            <span class="qld__form-file-delete-btn-remove">Remove</span>
-                                        </button>
-                                    </div>`;
+        // TODO: Do not build html elements using innerHTML, build properly to prevent XSS
+        // fileTemplate.innerHTML = `<div class="qld__form-file-info-wrapper"><div class="qld__form-file-loader">
+        //                                 <svg class="qld__icon qld__icon--lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#document-error"></use></svg>
+        //                             </div>
+        //                             <div class="qld__form-file-info">
+        //                                 <p class="qld__display-xs qld__form-file-info-name">${fileName}</p>
+        //                                 <span class="qld__form-file-info-status">
+        //                                     <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#status-error"></use></svg>
+        //                                     ${error}
+        //                                 </span>
+        //                             </div></div>
+        //                             <div class="qld__form-file-actions">
+        //                                 <button class="qld__btn qld__btn--tertiary qld__btn--icon-lead qld__form-file-delete-btn" data-file-id="${fileId}">
+        //                                     <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="${fileUploads.iconDataPath}#delete"></use></svg>
+        //                                     <span class="qld__form-file-delete-btn-remove">Remove</span>
+        //                                 </button>
+        //                             </div>`;
 
         return fileTemplate;
     };
@@ -269,7 +272,7 @@
                         return value.trim() !== "";
                     }
                 },
-                "This field is required."
+                "This field is required.",
             );
         }
 

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

@@ -63,7 +63,7 @@
         // double & & to increase specificity because of clash
         color: var(--QLD-color-light__heading);
         @include QLD-fontgrid(sm, heading);
-        font-weight: 700;
+        font-weight: $QLD-font-weight-semibold;
 
         @include QLD-media(md) {
             @include QLD-fontgrid(md, heading);
@@ -219,7 +219,7 @@
                     display: inline-block;
                     font-size: 0.875rem;
                     line-height: 1.4;
-                    font-weight: 400;
+                    font-weight: $QLD-font-weight-regular;
 
                     &:hover {
                         svg {
@@ -429,7 +429,7 @@
 
         a.qld__footer__copyright-link {
             display: block;
-            font-weight: 900;
+            font-weight: $QLD-font-weight-semibold;
             @include QLD-space(margin-top, 1.25unit);
 
             @include QLD-media(md) {

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

@@ -60,10 +60,6 @@
         .qld__icon,
         .qld__icon:hover {
             color: $QLD-color-neutral--white;
-
-            @media (prefers-contrast: more) {
-                color: revert;
-            }
         }
     }
 
@@ -100,10 +96,6 @@
         .qld__icon,
         .qld__icon:hover {
             color: $QLD-color-neutral--darkest;
-
-            @media (prefers-contrast: more) {
-                color: revert;
-            }
         }
     }
 
@@ -143,10 +135,13 @@
         .qld__icon,
         .qld__icon:hover {
             color: $QLD-color-neutral--darkest;
+        }
+    }
 
-            @media (prefers-contrast: more) {
-                color: revert;
-            }
+    // Situation where vertical navigation is enabled
+    &.qld__global-alert-with-vertical-nav {
+        div.container-fluid {
+            max-width: 100%;
         }
     }
 
@@ -170,7 +165,7 @@
 
     .qld__global-alert__message {
         strong {
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
         }
     }
 
@@ -187,7 +182,7 @@
 
     .qld__global-alert__action {
         flex-shrink: 0;
-        font-weight: 600;
+        font-weight: $QLD-font-weight-semibold;
         margin-top: 0.75rem;
         &:first-child {
             margin: 0;
@@ -226,7 +221,6 @@
         position: relative;
         line-height: 1;
         display: flex;
-        // align-items: center;
         text-align: center;
         justify-content: center;
 

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

@@ -2,7 +2,7 @@
     <div 
     role="region" 
     aria-label="{{#ifCond site.metadata.alertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.alertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.alertLevel.value '==' 'general'}}Information{{/ifCond}}" 
-    class="qld__global-alert qld__global-alert--{{site.metadata.alertLevel.value}}">
+    class="qld__global-alert qld__global-alert--{{site.metadata.alertLevel.value}}{{#ifCond @root.site.metadata.mainNavVerticalNav.value '==' 'vertical-nav'}} qld__global-alert-with-vertical-nav{{/ifCond}}">
  
         <div class="container-fluid">
             <div class="qld__global-alert__main">
@@ -48,7 +48,7 @@
         <div 
         role="region" 
         aria-label="{{#ifCond site.metadata.secondAlertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.secondAlertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.secondAlertLevel.value '==' 'general'}}Information{{/ifCond}}"
-        class="qld__global-alert qld__global-alert--{{site.metadata.secondAlertLevel.value}}">
+        class="qld__global-alert qld__global-alert--{{site.metadata.secondAlertLevel.value}}{{#ifCond @root.site.metadata.mainNavVerticalNav.value '==' 'vertical-nav'}} qld__global-alert-with-vertical-nav{{/ifCond}}">
         <div class="container-fluid">
             <div class="qld__global-alert__main">
                 <div class="qld__global-alert__icon">
@@ -93,7 +93,7 @@
     <div 
         role="region" 
         aria-label="{{#ifCond site.metadata.thirdAlertLevel.value '==' 'default'}}Warning{{/ifCond}}{{#ifCond site.metadata.thirdAlertLevel.value '==' 'critical'}}Alert{{/ifCond}}{{#ifCond site.metadata.thirdAlertLevel.value '==' 'general'}}Information{{/ifCond}}"
-        class="qld__global-alert qld__global-alert--{{site.metadata.thirdAlertLevel.value}}">
+        class="qld__global-alert qld__global-alert--{{site.metadata.thirdAlertLevel.value}}{{#ifCond @root.site.metadata.mainNavVerticalNav.value '==' 'vertical-nav'}} qld__global-alert-with-vertical-nav{{/ifCond}}">
         <div class="container-fluid">
             <div class="qld__global-alert__main">
                 <div class="qld__global-alert__icon">

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

@@ -1,6 +1,6 @@
-// //--------------------------------------------------------------------------------------------------------------------------------------------------------------
-// // Header
-// //--------------------------------------------------------------------------------------------------------------------------------------------------------------
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Header
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
 .qld__header {
     @include QLD-fontgrid(sm);
@@ -43,6 +43,18 @@
                 z-index: 600;
             }
         }
+
+        &__link-mobile {
+            @include QLD-media(md) {
+                display: none;
+            }
+        }
+
+        &__link-desktop {
+            @include QLD-media(md, "down") {
+                display: none;
+            }
+        }
     }
 
     /**
@@ -395,7 +407,7 @@
                 @include QLD-fontgrid(sm, heading);
                 font-family: $QLD-font-sitename;
                 color: var(--QLD-color-light__site-title);
-                font-weight: 700;
+                font-weight: $QLD-font-weight-bold;
                 margin: 0;
                 padding: 0;
 

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

@@ -6,7 +6,8 @@
 <header class="qld__header" role="banner">
     <nav class="qld__skip-link" aria-label="skip links" tabindex="-1">
         <a class="qld__skip-link__link" href="#content">Skip to main content</a>
-        <a class="qld__skip-link__link" href="#main-nav">Skip to main navigation</a>
+        <a class="qld__skip-link__link qld__skip-link__link-desktop" href="#main-nav">Skip to main navigation</a>
+        <a class="qld__skip-link__link qld__skip-link__link-mobile" href="#main-nav-mobile">Skip to main navigation</a>
     </nav>
     <div class="qld__header__pre-header {{site.metadata.sitePreHeaderTheme.value}}">
         <div class="container-fluid">
@@ -55,7 +56,7 @@
                     <span class="qld__main-nav__toggle-text">Search</span>
                 </button>
                 {{/if}}
-                <button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open">
+                <button id="main-nav-mobile" aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open">
                     <svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#menu"></use></svg>
                     <span class="qld__main-nav__toggle-text">Menu</span>
                 </button>

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

@@ -22,6 +22,8 @@ let isHeaderOpen = false;
 let headerSearchEvents = {};
 // Breakpoint for mobile mode
 const mobileBreakpoint = 992;
+// Hold width value to detect resize
+let lastWidth = window.innerWidth;
 
 export default function initHeader(document = document) {
     // Add action so the search works only if JS is enabled
@@ -40,6 +42,11 @@ export default function initHeader(document = document) {
 
     // We want to ensure the search input is visible on desktop at all times
     window.addEventListener("resize", () => {
+        const currentWidth = window.innerWidth;
+        // Ignore resize events that do not change the viewport size. Required for Android devices
+        if (currentWidth === lastWidth) return;
+        else lastWidth = currentWidth;
+
         if (window.innerWidth >= mobileBreakpoint && !isHeaderOpen) {
             openHeader(false);
             // Disable focus trap as it's not needed on desktop
@@ -225,5 +232,5 @@ function addEvent(element, event, rawHandler) {
  * @param {event} token     The event to remove
  */
 function removeEvent(token) {
-    token.element.removeEventListener(token.event, token.handler);
+    if (token && token.element) token.element.removeEventListener(token.event, token.handler);
 }

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

@@ -7,46 +7,44 @@
     @include QLD-space(padding-left, 1.5unit);
     border-left: $QLD-border-width-thick solid var(--QLD-color-light__link);
 
-    & &__heading{
+    & &__heading {
         @include QLD-fontgrid(sm, heading);
     }
-    
+
     * + & {
         @include QLD-space(margin-top, 2.3125unit);
     }
-    a{
-        @include QLD-underline('light','underline','default','noVisited');
+    a {
+        @include QLD-underline("light", "underline", "default", "noVisited");
     }
-    
+
     .qld__body & > ul,
     .qld__body & > ol {
         @include QLD-space(margin-top, 0.75unit);
         list-style-type: none;
         padding: 0;
-        
+
         li {
             margin: 0;
         }
-        
+
         * + li {
             margin-left: 0;
         }
-        li + li{
+        li + li {
             @include QLD-space(margin-top, 0.5unit);
         }
     }
-    
+
     .qld__body--dark &,
-    .qld__body--dark-alt &{
+    .qld__body--dark-alt & {
         border-color: var(--QLD-color-dark__action--primary);
-        a{
-            @include QLD-underline('dark','underline','default','noVisited');
+        a {
+            @include QLD-underline("dark", "underline", "default", "noVisited");
         }
     }
-    
 }
 
-
 .qld__inpage-nav-section {
     position: relative;
     @include QLD-space(padding-right, 8unit);
@@ -57,7 +55,7 @@
     @include QLD-space(top, 0.25unit);
     position: absolute;
     right: 0;
-    font-weight: normal;
+    font-weight: $QLD-font-weight-regular;
 }
 
 // Print styles
@@ -65,4 +63,4 @@
     .qld__inpage-nav-links {
         display: none !important;
     }
-}
+}

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

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

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

@@ -147,7 +147,7 @@ $QLD-side-nav-breakpoint: lg !default;
     .qld__accordion__title {
         @include QLD-fontgrid(md, heading);
         color: var(--QLD-color-light__link);
-        font-weight: normal;
+        font-weight: $QLD-font-weight-regular;
         background-color: inherit;
 
         &.qld__side-nav__toggle {
@@ -227,7 +227,7 @@ $QLD-side-nav-breakpoint: lg !default;
     }
 
     .active > span {
-        font-weight: bold;
+        font-weight: $QLD-font-weight-semibold;
         color: var(--QLD-color-light__heading);
     }
 
@@ -253,7 +253,7 @@ $QLD-side-nav-breakpoint: lg !default;
         @include QLD-underline("light", "noUnderline", "default", "noVisited");
 
         @include QLD-media(md) {
-            font-weight: bold;
+            font-weight: $QLD-font-weight-semibold;
         }
 
         &:hover,