@qhealth-design-system/core 1.7.5 → 1.8.0

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.8.0 - 2024-08-13
+
 ## 1.7.5 - 2024-07-03
 
 ## 1.7.4 - 2024-06-26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "",
   "licence": "MIT",
   "main": "index.js",

package/src/components/_global/css/body/component.scss

@@ -302,23 +302,18 @@ form {
         }
         //-----END:Reduce padding top if the following section has the same background----
     }
-    &.content {
-        .qld__body--breadcrumb {
-            @include QLD-space(padding-bottom, 3unit);
-        }
-        
-    }
+    
     .qld__body--breadcrumb {
         @include QLD-space(padding-top, 1unit);
-        @include QLD-space(padding-bottom, 1.5unit);
+        @include QLD-space(padding-bottom, 1unit);
         @include QLD-media(md) {
-            @include QLD-space(padding-top, 2.5unit);
+            @include QLD-space(padding-top, 1.5unit);
+            @include QLD-space(padding-bottom, 1.5unit);
         }
         @include QLD-media(lg) {
-            @include QLD-space(padding-top, 3unit);
+            @include QLD-space(padding-top, 2unit);
             @include QLD-space(padding-bottom, 2unit);
         }
-           
     }
 }
 

package/src/components/_global/css/forms/control_inputs/component.scss

@@ -27,7 +27,7 @@ input[type='checkbox'],
 			position: absolute;
 			box-sizing: border-box;
 			background-repeat: no-repeat;
-			z-index: 100;
+			z-index: 9;
 			@include QLD-space(left, 0unit);
 			border: $QLD-border-width-default solid transparent;
 			top: 0;

package/src/components/_global/css/global.scss

@@ -37,4 +37,47 @@ body {
     body {
         z-index: 3;
     }
-}
+}
+
+
+/*
+Written to address squiz forms' error state issues
+*/
+
+div.sq-form-question-tickbox-list.sq-form-question-error {
+    fieldset {
+        label::before {
+                box-shadow: 0 0 0 3px $QLD-color-status__error;
+        }
+    }
+}
+
+div.sq-form-question-option-list.sq-form-question-error {
+    fieldset {
+        label::before {
+            box-shadow: 0 0 0 3px $QLD-color-status__error;
+        }
+    }
+}
+
+div.sq-form-question-error {
+    input[type=text]:not(:focus),
+    input[type=email]:not(:focus),
+    input[type=date]:not(:focus),
+    textarea:not(:focus),
+    select:not(:focus) {
+        border-color: $QLD-color-status__error;
+        background-color: $QLD-color-status__error--lightest;
+    }
+}
+
+.qld__body--dark, .qld__body--dark-alt {
+    .sq-form-error {
+        color: $QLD-color-status__error--lightest;
+    }
+}
+
+.sq-form-error {
+    color: $QLD-color-status__error;
+    margin-top: 0.5rem !important;
+}

package/src/components/_global/css/headings/component.scss

@@ -200,7 +200,7 @@
             @include QLD-space(margin-top, 2unit);
 
             @include QLD-media(lg) {
-                @include QLD-space(margin-top, 2.5unit);
+                @include QLD-space(margin-top, 3unit);
             }
         }
 

package/src/components/_global/css/link_columns/component.scss

@@ -152,6 +152,11 @@
                 &::after{
                     background-color: var(--QLD-color-dark__action--secondary-hover);
                 }
+
+                a{
+                    @include QLD-underline('dark','noUnderline');
+                    color: var(--QLD-color-dark__link);
+                }
             }
 
             &::after{
@@ -183,6 +188,11 @@
                 &::after{
                     background-color: var(--QLD-color-dark__action--secondary-hover);
                 }
+
+                a{
+                    @include QLD-underline('dark','noUnderline');
+                    color: var(--QLD-color-dark__link);
+                }
             }
 
             &::after{

package/src/components/accordion/js/global.js

@@ -197,6 +197,19 @@
                             if (typeof callbacks.afterOpen === "function") {
                                 callbacks.afterOpen();
                             }
+
+                            if(target.classList.contains('qld__overflow_menu')) {
+                                
+                                var overFlowLinks = [];
+                                overFlowLinks = target.querySelectorAll('a.qld__overflow_menu_list-item-link');
+
+                                if(overFlowLinks[0]) {
+                                    setTimeout(function() {
+                                        overFlowLinks[0].focus();
+                                    }, 10);
+                                }
+                                
+                            }
                         }
 
                         toggleClasses(target, state);
@@ -217,7 +230,7 @@
 
                         if (state === "open" || state === "opening") {
                             //if it is a mega nav add an event listener to close it when document is clicked
-                            if (this.element.classList.contains("qld__main-nav__menu-sub")) {
+                            if (this.element.classList.contains("qld__main-nav__menu-sub") || this.element.classList.contains("qld__overflow_menu")) {
                                 document.addEventListener(
                                     "click",
                                     toggleNavOnDocumentClick,
@@ -225,7 +238,7 @@
                                 )
                             }
                         } else {
-                            if (this.element.classList.contains("qld__main-nav__menu-sub")) {
+                            if (this.element.classList.contains("qld__main-nav__menu-sub") || this.element.classList.contains("qld__overflow_menu")) {
                                 document.removeEventListener(
                                     "click",
                                     toggleNavOnDocumentClick,
@@ -419,21 +432,31 @@
      * 
      * @memberof module:accordion
      */
-    accordion.init = function() {
+    accordion.init = function(element) {
 
-        var accordionButtons = document.querySelectorAll('.qld__accordion__title');
-        accordionButtons.forEach(function (button) {
-            button.addEventListener('click', function () {
-                accordion.Toggle(button)
+        if(element == 'overflow') {
+            var overflowMenuButtons = document.querySelectorAll('.qld__overflow_menu__btn');
+            overflowMenuButtons.forEach(function (button) {
+                button.addEventListener('click', function () {
+                    accordion.Toggle(button)
+                });
             });
-        });
-
-        var accordionAllButtton = document.querySelectorAll('.qld__accordion__toggle-btn');
-        accordionAllButtton.forEach(function (button) {
-            button.addEventListener('click', function () {
-                accordion.ToggleAll(button)
+        } else {
+            var accordionButtons = document.querySelectorAll('.qld__accordion__title');
+            accordionButtons.forEach(function (button) {
+                button.addEventListener('click', function () {
+                    accordion.Toggle(button)
+                });
+            });
+    
+            var accordionAllButtton = document.querySelectorAll('.qld__accordion__toggle-btn');
+            accordionAllButtton.forEach(function (button) {
+                button.addEventListener('click', function () {
+                    accordion.ToggleAll(button)
+                });
             });
-        });
+        }
+
     }
 
     // Make accordion public

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

@@ -10,12 +10,18 @@
     }
     
     @include QLD-media(sm) {
-        display: inline-block;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
     }
     & &__list--desktop{
         display: none;
         @include QLD-media(md) {
-            display: inline-block;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
         }
     }
     & &__list--mobile{
@@ -23,7 +29,17 @@
             display: none;
         }
     }
-    
+    .qld__link-list.qld__link-list--inline:not(.qld__breadcrumbs .qld__breadcrumbs__list--mobile, .qld__banner__breadcrumbs--mobile ul) {
+        display: none;
+        @include QLD-media(md) {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            align-content: center;
+        }
+    }
+
     > .qld__link-list {
         margin: 0;
         padding: 0;
@@ -33,6 +49,15 @@
         @include QLD-media(lg) {
             @include QLD-fontgrid(sm);
         }
+
+        .qld__overflow_menu--breadcrumbs {
+            display: flex;
+            align-items: center;
+            padding: none;
+        }
+        .qld__overflow_menu_wrapper {
+            display: inline;
+        }
         
         > li {
             margin: 0; //Intentionally flush with the container, as breadcrumbs are designed to sit on a full viewport width bg.
@@ -66,9 +91,27 @@
                 background-color: var(--QLD-color-light__action--secondary);
             }
             
-            &:last-child:after {
-                display: none;
+            &:last-child {
+                display: flex;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: wrap;
+                text-overflow: ellipsis;
+                flex: 1 1 auto; 
+                flex-shrink: 3;
+
+                &:after {
+                    display: none;
+                }
+
+                @include QLD-media(md) {
+                    
+                    white-space: nowrap;
+                }
+
             }
+
+
             
             .ie8 &,
             .lt-ie8 & {
@@ -146,6 +189,8 @@
         display: inline-block;
 
         > .qld__link-list > li {
+
+            flex: 0 0 auto;
             
             // Hide current page
             &:last-child {

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

@@ -0,0 +1,234 @@
+(function () {
+    "use strict";
+
+    /**
+     * @module breadcrumb
+     */
+
+    var breadcrumb = {};
+    var originalBreadCrumbUl = null;
+
+    function getTheElements(resized = false) {
+        // const banner =
+        //     document.querySelector(".qld__banner--breadcrumbs") ||
+        //     document.querySelector(".qld__body--breadcrumb");
+
+        // if (document) {
+            const bannerBreadCrumbsAll = document.querySelectorAll(
+                "nav.qld__banner__breadcrumbs--desktop"
+            );
+
+            const bodyBreadCrumbsAll = document.querySelectorAll(
+                'section.qld__body--breadcrumb nav.qld__breadcrumbs'
+            );
+
+            const bannerBreadCrumbArray = [...bannerBreadCrumbsAll, ...bodyBreadCrumbsAll];
+            const bannerBreadCrumb = bannerBreadCrumbArray.find(
+                (breadcrumb) => {
+                    return breadcrumb.offsetWidth > 0;
+                }
+            );
+
+            if(bannerBreadCrumb) {
+                const containerFluid = bannerBreadCrumb.closest('.container-fluid');
+
+                const containerFluidStyle = window.getComputedStyle(containerFluid);
+                
+                const paddings = parseFloat(containerFluidStyle.getPropertyValue('padding-right').replace(/\D/g, '')) + parseFloat(containerFluidStyle.getPropertyValue('padding-left').replace(/\D/g, ''));
+                bannerBreadCrumb.style.maxWidth = (containerFluid.offsetWidth - paddings) + 'px';
+    
+                // console.log('here is the containerFluid.offsetWidth ', paddings , ' here is the containerFluid.offsetWidth ', bannerBreadCrumb)
+                
+                if(!originalBreadCrumbUl) {
+                    originalBreadCrumbUl = bannerBreadCrumb.querySelector("ul.qld__link-list").cloneNode(true);
+                }
+    
+                if(resized) {
+                    bannerBreadCrumb.querySelector("ul.qld__link-list").innerHTML = originalBreadCrumbUl.innerHTML;
+                }
+    
+                const breadCrumbsUl = bannerBreadCrumb.querySelector("ul.qld__link-list");
+    
+                return {
+                    bannerBreadCrumb,
+                    breadCrumbsUl,
+                };
+            }
+
+            
+        // }
+
+        // return null;
+    }
+
+    function createOverFlow() {
+        //create the over flow menu here:
+
+        //start wrapper
+        const overFlowWrapper = document.createElement("div");
+        overFlowWrapper.className = "qld__overflow_menu_wrapper";
+        //end wrapper
+
+        //start overflow button
+        const button = document.createElement("button");
+        button.className =
+            "qld__btn qld__btn--toggle qld__overflow_menu__btn qld__accordion--closed";
+        button.setAttribute("href", "#");
+        button.setAttribute("aria-controls", "overflow-menu--");
+        button.setAttribute("aria-expanded", "false");
+
+        const svg = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg"
+        );
+        svg.classList.add("qld__icon");
+        svg.classList.add("qld__icon--lg");
+        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+        svg.setAttribute("viewBox", "0 0 448 512");
+        svg.setAttribute("aria-hidden", "true");
+        svg.setAttribute("focusable", "false");
+        svg.setAttribute("width", "24");
+        svg.setAttribute("height", "32");
+        svg.setAttribute("role", "img");
+
+        const path = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+        );
+        path.setAttribute("fill", "currentColor");
+        path.setAttribute(
+            "d",
+            "M352 256C352 238.3 366.3 224 384 224C401.7 224 416 238.3 416 256C416 273.7 401.7 288 384 288C366.3 288 352 273.7 352 256zM192 256C192 238.3 206.3 224 224 224C241.7 224 256 238.3 256 256C256 273.7 241.7 288 224 288C206.3 288 192 273.7 192 256zM96 256C96 273.7 81.67 288 64 288C46.33 288 32 273.7 32 256C32 238.3 46.33 224 64 224C81.67 224 96 238.3 96 256z"
+        );
+
+        svg.appendChild(path);
+        button.appendChild(svg);
+        //end overflow button
+
+        overFlowWrapper.appendChild(button);
+
+        // Start menu element
+        const div = document.createElement("div");
+        div.className = "qld__overflow_menu qld__accordion--closed";
+        div.setAttribute("id", "overflow-menu--");
+
+        const ul = document.createElement("ul");
+        ul.className = "qld__overflow_menu_list";
+        ul.setAttribute("aria-label", "qld__overflow_menu qld__link-columns");
+
+        div.appendChild(ul);
+        //end menu
+
+        overFlowWrapper.appendChild(div);
+
+        //This menu does not have the uls , uls are going to be created in insertfunction
+
+        return overFlowWrapper;
+    }
+
+    function insertOverFlowButton(overFlowWrapper, element) {
+        const newElement = document.createElement("div");
+        newElement.className = "qld__overflow_menu_list-item";
+
+        const link = element.querySelector("a");
+        link.classList.add("qld__overflow_menu_list-item-link");
+        link.setAttribute("tabindex", "0");
+
+        newElement.appendChild(link);
+
+        const ul = overFlowWrapper.querySelector("ul");
+
+        ul.appendChild(newElement);
+
+        return overFlowWrapper;
+    }
+    
+    function appendOverflow( breadCrumbsUlLis, overflowMenu) {
+        breadCrumbsUlLis[1].innerHTML = "";
+        breadCrumbsUlLis[1].className = "qld__overflow_menu--breadcrumbs";
+        breadCrumbsUlLis[1].appendChild(overflowMenu);
+        breadCrumbsUlLis[1].style.display = "flex";
+    }
+
+    breadcrumb.init = function () {
+        if (getTheElements()) {
+            const { breadCrumbsUl } = getTheElements();
+
+            const breadCrumbsUlLis = breadCrumbsUl.querySelectorAll("li");
+            // if (breadCrumbsUl.offsetHeight > breadCrumbsUlLis[0].offsetHeight && breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) {
+            if (breadCrumbsUlLis.length > 2 && breadCrumbsUlLis[0].offsetHeight > 0) {
+                const overflowMenu = createOverFlow();
+                let breadcrumbLisLength = breadCrumbsUlLis.length;
+                let i = 1;
+                
+
+                let totalLisOffsetWidth = 0;
+                
+                for (let i = 0; i < breadCrumbsUlLis.length; i++) {
+                    totalLisOffsetWidth += breadCrumbsUlLis[i].offsetWidth;
+                }
+
+                if(breadCrumbsUlLis.length > 5) {
+
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                    breadCrumbsUlLis[1].style.display = "none";
+                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    i = 2;
+
+                    while(i < breadCrumbsUlLis.length - 2) {
+                        insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                        breadCrumbsUlLis[i].style.display = "none";
+                        i++;
+                    }
+
+                } else if((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9))) {
+
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                    breadCrumbsUlLis[1].style.display = "none";
+                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    i = 2;
+
+                    while ((breadCrumbsUl.offsetHeight > (breadCrumbsUlLis[0].offsetHeight * 1.9)) &&
+                    (i < breadcrumbLisLength - 2)
+                    ) {
+
+                        insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                        breadCrumbsUlLis[i].style.display = "none";
+
+                        i++;
+                    }
+                } else if(breadCrumbsUl.offsetWidth < totalLisOffsetWidth) {
+
+                    insertOverFlowButton(overflowMenu, breadCrumbsUlLis[1]);
+                    breadCrumbsUlLis[1].style.display = "none";
+                    appendOverflow(breadCrumbsUlLis, overflowMenu);
+                    i = 2;
+
+                    while ((breadCrumbsUl.offsetWidth < totalLisOffsetWidth) &&
+                    (i < breadcrumbLisLength - 2)
+                    ) {
+
+                        insertOverFlowButton(overflowMenu, breadCrumbsUlLis[i]);
+                        breadCrumbsUlLis[i].style.display = "none";
+
+                        i++;
+                    }
+                }
+            }
+        }
+    };
+
+    QLD.breadcrumb = breadcrumb;
+
+    window.addEventListener("DOMContentLoaded", function () {
+        QLD.breadcrumb.init();
+        QLD.accordion.init('overflow');
+    });
+
+    window.addEventListener('resize' , function() {
+        getTheElements(true);
+        QLD.breadcrumb.init();
+        QLD.accordion.init('overflow');
+    });
+
+})();

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

@@ -348,6 +348,20 @@
             }
         }
     }
+
+    * + .qld__footer__logo {
+        img {
+            @include QLD-space(margin-top, map-get( $QLD-space-map, $QLD-margin__text-element--mobile ) + px);
+        }
+    }
+
+    @include QLD-media(md) {
+        * + .qld__footer__logo {
+            img {
+                @include QLD-space(margin-top, map-get( $QLD-space-map, $QLD-margin__text-element--desktop ) + px);
+            }
+        }   
+    }
     
     &.qld__footer--dark,
     &.qld__footer--dark-alt{
@@ -414,7 +428,11 @@
         a.qld__footer__copyright-link {
             display: block;
             font-weight: 900;
-            @include QLD-space(margin-top, 1.5unit);
+            @include QLD-space(margin-top, 1.25unit);
+
+            @include QLD-media(md) {
+                @include QLD-space(margin-top, 1.5unit);
+            }
         }
 
         .qld__footer__logo {

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

@@ -135,17 +135,12 @@
             
             <div class="col-xs-12 qld__footer__column">
                 <div class="">
-                    {{#with (jsonParse footerMetaMetadata.value)}}
-                    {{#if footerLogo}}
-                    <a class="qld__footer__logo" href="https://www.qld.gov.au/">
-                        <img
-                            class="qld__footer__logo-image"
-                            alt="Queensland Government"
-                            src="{{urldecode (lookup footerLogo 'asset_url^urlencode')}}"
-                        />
-                    </a>
+                    
+                    {{#if footerAcknowledgementsHeading.value}}
+                    <h3 class="qld__footer__heading">
+                        {{footerAcknowledgementsHeading.value}}
+                    </h3>
                     {{/if}}
-                    {{/with}}
 
                     {{#if footerAcknowledgements.value}}
                     <p class="qld__footer__acknowledgements">
@@ -153,6 +148,39 @@
                     </p>
                     {{/if}}
 
+                    {{#with (jsonParse footerMetaMetadata.value)}}
+                    {{#if footerLogo}}
+                    {{#if footerCopyrightLink}}
+                            {{#ifCond footerCopyrightLink.asset_type_code '==' 'page_redirect'}}
+                            <a class="qld__footer__logo" href="{{urldecode (lookup footerCopyrightLink 'redirect_url^urlencode')}}">
+                                <img
+                                    class="qld__footer__logo-image"
+                                    alt="Queensland Government"
+                                    src="{{urldecode (lookup footerLogo 'asset_url^urlencode')}}"
+                                />
+                            </a>
+                            {{else}}
+                            <a class="qld__footer__logo" href="{{urldecode (lookup footerCopyrightLink 'asset_url^urlencode')}}">
+                                <img
+                                    class="qld__footer__logo-image"
+                                    alt="Queensland Government"
+                                    src="{{urldecode (lookup footerLogo 'asset_url^urlencode')}}"
+                                />
+                            </a>
+                            {{/ifCond}}
+                    {{else}}
+                        <a class="qld__footer__logo"  href="https://www.qld.gov.au/">
+                            <img
+                                class="qld__footer__logo-image"
+                                alt="Queensland Government"
+                                src="{{urldecode (lookup footerLogo 'asset_url^urlencode')}}"
+                            />
+                        </a>
+                    {{/if}}
+                        
+                    {{/if}}
+                    {{/with}}
+
                     {{#if footerCopyrightMessage.value}}
                     <p class="qld__footer__copyrightMessage">
                         {{footerCopyrightMessage.value}}