@qld-gov-au/qgds-bootstrap5 2.1.7 → 2.1.8

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.7","branch":"HEAD","tag":"v2.1.7","commit":"a2b829ca974b07e6d76408477d21b5ee3d41aa8b","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.8","branch":"HEAD","tag":"v2.1.8","commit":"725614dd2b3f362a82c568aaf0dd15676b17b6af","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/navbar/navbar.hbs

@@ -12,7 +12,7 @@
                 <ul class="navbar-nav">
                     {{#each navigation}}
                         {{#if navigationItems}}
-                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
+                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"{{#if isExpandedOnMobile}} data-is-expanded-on-mobile="true"{{/if}}>
                                 <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}{{#if currentPage}} active{{/if}}{{#if dropdownOptions.hasNoLink}} hasNoLink{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}{{#if dropdownOptions.hasNoLink}} href="#"{{else}} href="{{url}}"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
                             aria-expanded="false">
                                 {{#if iconName}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "",
   "repository": {
     "type": "git",

package/dist/sample-data/navbar/navbar.data.json

@@ -24,6 +24,7 @@
       "currentPage": false,
       "hideLabel": false,
       "target": "_blank",
+      "isExpandedOnMobile": true,
       "dropdownOptions": {
         "hasNoLink": false,
         "alternativeText": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/banner/banner.scss

@@ -222,6 +222,17 @@
         grid-row: 1 / span 2; // Spans rows 1 and 2
       }
     }
+
+    &.is-full-width:not(:has(.banner-image)) {
+      @include media-breakpoint-down(lg) {
+        .banner-content {
+          grid-column: 1 / -1;
+          .banner-abstract {
+            max-width: none;
+          }
+        }
+      }
+    }
   }
 }
 

package/src/components/bs5/footer/footer.scss

@@ -134,10 +134,9 @@
   a.nav-link {
     --qld-link-color: var(--#{$prefix}footer-color-link);
     text-decoration: underline;
-    text-decoration-color: var(--#{$prefix}footer-color-link);
+    text-decoration-color: var(--#{$prefix}link-underline);
     text-decoration-thickness: var(--#{$prefix}link-underline-thickness);
-    text-underline-offset: auto;
-    text-underline-position: from-font;
+    text-underline-offset: var(--#{$prefix}link-underline-offset);
     color: var(--qld-link-color);
     padding-left: 0;
 
@@ -145,13 +144,21 @@
       text-decoration-thickness: var(
         --#{$prefix}link-underline-thickness-hover
       );
+      text-decoration-color: var(--#{$prefix}link-underline-hover);
     }
 
     &:visited {
       color: var(--#{$prefix}footer-color-link);
       text-decoration: underline;
-      text-decoration-color: var(--#{$prefix}footer-color-link);
+      text-decoration-color: var(--#{$prefix}link-underline);
       text-decoration-thickness: var(--#{$prefix}link-underline-thickness);
+
+      &:hover {
+        text-decoration-color: var(--#{$prefix}link-underline-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
+      }
     }
   }
 

package/src/components/bs5/linkColumns/linkColumns.scss

@@ -3,7 +3,7 @@
   --color-border: var(--#{$prefix}neutral-lighter);
 
   background-color: var(--#{$prefix}body-bg);
-  
+
   &.light {
     --color-border: var(--#{$prefix}light-border);
   }
@@ -22,7 +22,7 @@
     max-width: var(--max-column-width);
   }
   ul {
-    width: 100%;  
+    // width: 100%;
     display: grid;
     gap: 0 1rem;
   }
@@ -31,17 +31,17 @@
   }
   .col-2 {
     grid-template-columns: repeat(2, 1fr);
-    @include media-breakpoint-down(md) { 
+    @include media-breakpoint-down(md) {
       grid-template-columns: repeat(1, 1fr);
     }
   }
   .col-3 {
     grid-template-columns: repeat(3, 1fr);
     @include media-breakpoint-down(lg) {
-        grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(2, 1fr);
     }
     @include media-breakpoint-down(md) {
-        grid-template-columns: repeat(1, 1fr);
+      grid-template-columns: repeat(1, 1fr);
     }
   }
   .col-vert-1 {
@@ -64,9 +64,9 @@
     column-count: 3;
     column-gap: 2rem;
     @include media-breakpoint-down(lg) {
-        column-count: 2;
-        column-gap: 1.5rem;
-    }    
+      column-count: 2;
+      column-gap: 1.5rem;
+    }
     @include media-breakpoint-down(md) {
       column-count: 1;
     }
@@ -82,11 +82,19 @@
     margin-block: 0;
     //Reset the line height too to override styles from .qld-content-body li
     line-height: 1.5rem;
+
+    // This prevents LI's from breaking across columns
+    // Legacy support for older WebKit browsers (=< chrome 104)
+    break-inside: avoid-column;
+    -webkit-column-break-inside: avoid;
+
     .nav-link {
       text-decoration: underline;
       text-decoration-color: transparent;
       text-decoration-thickness: 0;
-      transition: text-decoration-thickness 0.2s ease, text-decoration-color 0.2s ease;
+      transition:
+        text-decoration-thickness 0.2s ease,
+        text-decoration-color 0.2s ease;
       display: flex;
       align-items: center;
       flex: 1;
@@ -105,22 +113,28 @@
         mask-repeat: no-repeat;
         mask-position: right center;
         background-color: var(--#{$prefix}action-icon-color);
-        transition: margin-inline-end 0.2s ease, width 0.2s ease;
+        transition:
+          margin-inline-end 0.2s ease,
+          width 0.2s ease;
       }
       &:hover {
         text-decoration-color: var(--#{$prefix}link-color);
         text-decoration-thickness: 2px;
-        transition: text-decoration-thickness 0.2s ease, text-decoration-color 0.2s ease;
+        transition:
+          text-decoration-thickness 0.2s ease,
+          text-decoration-color 0.2s ease;
         &::after {
           background-color: var(--#{$prefix}action-icon-hover-color);
           margin-inline-end: 0rem;
           width: 2.5rem;
-          transition: margin-inline-end 0.2s ease, width 0.2s ease;
+          transition:
+            margin-inline-end 0.2s ease,
+            width 0.2s ease;
         }
       }
     }
   }
-  .all-link{
+  .all-link {
     grid-column: 1/-1;
     max-width: 100%;
     border-block-end: none;

package/src/components/bs5/navbar/navbar.data.json

@@ -24,6 +24,7 @@
       "currentPage": false,
       "hideLabel": false,
       "target": "_blank",
+      "isExpandedOnMobile": true,
       "dropdownOptions": {
         "hasNoLink": false,
         "alternativeText": "",

package/src/components/bs5/navbar/navbar.functions.js

@@ -1,6 +1,5 @@
 import { createFocusTrap } from "../../../js/utils.js";
 import { breakpoints } from "../../../js/constants.js";
-import { getFocusableElements } from "../../../js/utils.js";
 
 const getIsMobile = () => window.innerWidth < breakpoints.lg;
 
@@ -9,6 +8,7 @@ export function initializeNavbar() {
   const overlay = document.getElementById("overlay");
   const burgerBtn = document.getElementById("burgerBtn");
   const burgerCloseBtn = document.getElementById("burgerCloseBtn");
+  let wasMobile = getIsMobile();
 
   /** @type {HTMLElement[]} */
   let inertTargets = [];
@@ -94,35 +94,55 @@ export function initializeNavbar() {
     closeNavbar();
   });
 
-  const resetNavbarState = () => {
-    const isMobile = getIsMobile();
+  const resetNavbarState = (isMobile) => {
     const dropdownToggles = navbar?.querySelectorAll(
       "a.dropdown-toggle, a.no-dropdown-toggle",
     );
 
-    // Toggle dropdown functionality based on screen size
-    dropdownToggles?.forEach((toggle) => {
-      if (isMobile) {
+    if (isMobile) {
+      // disable navlinks as toggles
+      dropdownToggles?.forEach((toggle) => {
         // Skip toggle items with hasNoLink class
         if (toggle.classList.contains("hasNoLink")) {
           return;
         }
         toggle.classList.replace("dropdown-toggle", "no-dropdown-toggle");
         toggle.removeAttribute("data-bs-toggle");
-      } else {
+      });
+
+      // Expand any dropdowns set to expand on mobile
+      navbar
+        ?.querySelectorAll('[data-is-expanded-on-mobile="true"]')
+        .forEach((item) => {
+          item
+            .querySelectorAll(".dropdown-toggle, .dropdown-menu")
+            .forEach((item) => {
+              item.classList.add("show");
+            });
+        });
+    } else {
+      // reenable navlinks as toggle
+      dropdownToggles?.forEach((toggle) => {
         toggle.classList.replace("no-dropdown-toggle", "dropdown-toggle");
         toggle.setAttribute("data-bs-toggle", "dropdown");
-      }
-    });
+      });
 
-    if (!isMobile) {
+      // Collapse any dropdowns set to expand on mobile
+      navbar
+        ?.querySelectorAll('[data-is-expanded-on-mobile="true"]')
+        .forEach((item) => {
+          item
+            .querySelectorAll(".dropdown-toggle, .dropdown-menu")
+            .forEach((item) => {
+              item.classList.remove("show");
+            });
+        });
+
+      // close the navbar
       closeNavbar();
     }
   };
 
-  window.addEventListener("resize", resetNavbarState);
-  resetNavbarState();
-
   //All associated side effects of navbar collapse beginning belong here
   navbar?.addEventListener("hide.bs.collapse", () => {
     overlay?.classList.remove("show");
@@ -160,4 +180,14 @@ export function initializeNavbar() {
       }, 0);
     }
   });
+
+  window.addEventListener("resize", () => {
+    const isMobile = getIsMobile();
+    if (wasMobile !== isMobile) {
+      wasMobile = isMobile;
+      resetNavbarState(isMobile);
+    }
+  });
+
+  resetNavbarState(wasMobile);
 }

package/src/components/bs5/navbar/navbar.hbs

@@ -12,7 +12,7 @@
                 <ul class="navbar-nav">
                     {{#each navigation}}
                         {{#if navigationItems}}
-                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"> 
+                            <li class="nav-item dropdown{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}"{{#if isExpandedOnMobile}} data-is-expanded-on-mobile="true"{{/if}}>
                                 <a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}{{#if currentPage}} active{{/if}}{{#if dropdownOptions.hasNoLink}} hasNoLink{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}{{#if dropdownOptions.hasNoLink}} href="#"{{else}} href="{{url}}"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
                             aria-expanded="false">
                                 {{#if iconName}}

package/src/js/qld.bootstrap.js

@@ -21,6 +21,7 @@ import { backToTop } from "./../components/bs5/backToTop/backToTop.functions";
 import { initTabsScroll } from "./../components/bs5/tabs/tabs.functions";
 import { initGlobalAlerts } from "./../components/bs5/globalAlert/globalAlert.function";
 import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.functions";
+import { printPage } from "./utils";
 
 window.addEventListener("click", initQuickexit, true);
 window.addEventListener("keydown", initQuickexit, true);
@@ -137,6 +138,10 @@ window.addEventListener("DOMContentLoaded", () => {
     transcript.addEventListener("click", videoTranscriptTitle);
   });
 
+  // Add btn page print functions
+  printPage();
+
+  // Date Input
   initDateInput();
 
   // Skip Links

package/src/js/utils.js

@@ -191,3 +191,18 @@ export function createFocusTrap(container, options = {}) {
     },
   };
 }
+
+/**
+ * Print page function
+ * Attaches event listener to elements with class 'js-print' to trigger window.print()
+ */
+export function printPage() {
+  // Add btn page print functions
+  let printButton = document.querySelector(".js-print");
+  if (printButton) {
+    printButton.addEventListener("click", function (event) {
+      event.preventDefault();
+      window.print();
+    });
+  }
+}