@qld-gov-au/qgds-bootstrap5 2.1.3 → 2.1.5

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

@@ -1,37 +1,27 @@
 import { createFocusTrap } from "../../../js/utils.js";
 import { breakpoints } from "../../../js/constants.js";
+import { getFocusableElements } from "../../../js/utils.js";
+
+const getIsMobile = () => window.innerWidth < breakpoints.lg;
 
 export function initializeNavbar() {
   const navbar = document.getElementById("main-nav");
   const overlay = document.getElementById("overlay");
   const burgerBtn = document.getElementById("burgerBtn");
   const burgerCloseBtn = document.getElementById("burgerCloseBtn");
-  const addHideTo = ["head", "main", "footer"];
-  const hideTargets = addHideTo
-    .map((id) => document.getElementById(id))
-    .filter(Boolean);
-
-  // Helper to set aria-hidden
-  const setAriaHidden = (hidden) => {
-    hideTargets.forEach((el) => {
-      if (hidden) {
-        el.setAttribute("aria-hidden", "true");
-      } else {
-        el.removeAttribute("aria-hidden");
-      }
-    });
-  };
+
+  /** @type {HTMLElement[]} */
+  let inertTargets = [];
 
   // Focus trap instances (created on-demand)
   let mobileFocusTrap = null;
-  const dropdownFocusTraps = new Map();
 
   function closeNavbar() {
     // Do not call static method bootstrap.Collapse.getInstance(navbar).hide()
     // because storybook has a problem with referencing global bootstrap object in production build.
     // Instead simulate the close button click - same thing.
     // Do not put side effects of closing menu here (eg clearing menu focus trap), instead use "hidden.bs.collapse" or "hide.bs.collapse" event handlers declared below.
-    // Need to check if menu is actually set to show, otherwise cick will open instead.
+    // Need to check if menu is actually set to show, otherwise click will open instead.
     if (navbar?.classList.contains("show")) {
       burgerCloseBtn?.click();
     }
@@ -50,25 +40,7 @@ export function initializeNavbar() {
     return mobileFocusTrap;
   }
 
-  // Create dropdown focus trap on-demand (when dropdown opens)
-  function getOrCreateDropdownFocusTrap(dropdown, toggle) {
-    if (!dropdownFocusTraps.has(dropdown)) {
-      const dropdownTrap = createFocusTrap(dropdown, {
-        returnFocusElement: toggle,
-        onEscape: () => {
-          // Close the dropdown using Bootstrap's API
-          const bsDropdown = bootstrap.Dropdown.getInstance(toggle);
-          if (bsDropdown) {
-            bsDropdown.hide();
-          }
-        },
-      });
-      dropdownFocusTraps.set(dropdown, dropdownTrap);
-    }
-    return dropdownFocusTraps.get(dropdown);
-  }
-
-  // Setup dropdown event listeners
+  // Setup dropdown event listeners.
   function setupDropdownListeners() {
     // Find all dropdown toggles (elements with data-bs-toggle="dropdown")
     const dropdownToggles = navbar?.querySelectorAll(
@@ -84,21 +56,29 @@ export function initializeNavbar() {
       const dropdown = parentItem.querySelector(".dropdown-menu");
       if (!dropdown) return;
 
-      // Listen for dropdown show event (desktop only)
-      toggle.addEventListener("shown.bs.dropdown", () => {
-        const isMobile = window.innerWidth < breakpoints.lg;
-        if (!isMobile) {
-          // Create and activate focus trap on-demand
-          const dropdownTrap = getOrCreateDropdownFocusTrap(dropdown, toggle);
-          setTimeout(() => dropdownTrap.activate(), 0);
-        }
-      });
+      // Add spacebar click for <a> tags, <buttons> already have this.
+      if (toggle?.tagName === "A") {
+        toggle.addEventListener("keydown", (/** @type KeyboardEvent*/ e) => {
+          if (e.key === " ") {
+            e.preventDefault();
+            toggle.click();
+          }
+        });
+      }
 
-      // Listen for dropdown hide event
-      toggle.addEventListener("hidden.bs.dropdown", () => {
-        const dropdownTrap = dropdownFocusTraps.get(dropdown);
-        if (dropdownTrap && dropdownTrap.isActive) {
-          dropdownTrap.deactivate();
+      // There are two separate toggle elements for desktop and mobile. Bootstrap only keeps one registered for these events,
+      // which is the mobile button, hidden on desktop. Therefore, we need to handle any `a.dropdown-toggle` updates manually. The event is caught on the
+      // mobile toggle, so traverse back up find the desktop toggle.
+      toggle.addEventListener("hidden.bs.dropdown", (e) => {
+        const _toggle = parentItem.querySelector(
+          'a[data-bs-toggle="dropdown"]',
+        );
+        _toggle?.classList.remove("show");
+        if (
+          dropdown?.contains(document.activeElement) &&
+          !(getIsMobile() || navbar.classList.contains("vertical"))
+        ) {
+          _toggle?.focus();
         }
       });
     });
@@ -115,13 +95,13 @@ export function initializeNavbar() {
   });
 
   const resetNavbarState = () => {
-    const isMobile = window.innerWidth < breakpoints.lg;
-    const dropdownToggles = document.querySelectorAll(
-      ".navbar a.dropdown-toggle, .navbar a.no-dropdown-toggle",
+    const isMobile = getIsMobile();
+    const dropdownToggles = navbar?.querySelectorAll(
+      "a.dropdown-toggle, a.no-dropdown-toggle",
     );
 
     // Toggle dropdown functionality based on screen size
-    dropdownToggles.forEach((toggle) => {
+    dropdownToggles?.forEach((toggle) => {
       if (isMobile) {
         // Skip toggle items with hasNoLink class
         if (toggle.classList.contains("hasNoLink")) {
@@ -150,8 +130,9 @@ export function initializeNavbar() {
 
   // All associated side effects of navbar collapse completion belong here.
   navbar?.addEventListener("hidden.bs.collapse", () => {
-    setAriaHidden(false);
-
+    inertTargets.forEach((target) => {
+      target.inert = false;
+    });
     // Deactivate and destroy mobile focus trap
     if (mobileFocusTrap) {
       mobileFocusTrap.deactivate();
@@ -159,20 +140,24 @@ export function initializeNavbar() {
     }
   });
 
-  // Burger buttons - handle open (mobile only)
+  //  All associated side effects of navbar opening belong here.
   navbar?.addEventListener("shown.bs.collapse", () => {
-    // Check if navbar is opening
-    setTimeout(() => {
-      if (navbar?.classList.contains("show")) {
-        setAriaHidden(true);
-
-        // Create and activate focus trap when navbar opens (mobile only - whole navbar)
-        const isMobile = window.innerWidth < breakpoints.lg;
-        if (isMobile) {
+    if (getIsMobile) {
+      // Check if navbar is opening
+      setTimeout(() => {
+        if (navbar?.classList.contains("show")) {
+          // set all siblings to inert
+          inertTargets = Array.from(navbar.parentElement.children).filter(
+            (child) => child !== navbar,
+          );
+          inertTargets.forEach((target) => {
+            target.inert = true;
+          });
+
           const trap = createMobileFocusTrap();
           trap.activate();
         }
-      }
-    }, 0);
+      }, 0);
+    }
   });
 }

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

@@ -26,7 +26,7 @@
                                     {{text}}
                                 {{/if}}
                                 </a>
-                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
+                                <button class="nav-link dropdown-toggle"{{#if currentPage}} aria-current="page"{{/if}}  data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">                                
                                     <span class="visually-hidden">Expand</span>
                                 </button>
                                 <ul class="dropdown-menu">

package/src/components/bs5/navbar/navbar.scss

@@ -1,4 +1,5 @@
 @use "../../../css/mixins" as m;
+@use "../../../css/functions" as f;
 
 @mixin repeatedVerticalStyles {
   .nav-header {
@@ -128,6 +129,7 @@
           display: block;
           padding: 0;
           box-shadow: none;
+          columns: unset;
           &::before {
             display: none;
           }
@@ -211,6 +213,7 @@
     }
     a.dropdown-item {
       background-color: transparent;
+      border-radius: 0;
       &:hover {
         background-color: transparent;
       }
@@ -548,19 +551,23 @@
       background-color: var(--action-icon-color);
     }
   }
+
   .navbar-nav a.nav-link {
     color: var(--text-color);
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
-    line-height: 2rem;
+    line-height: f.snap-line-height(1.4);
     gap: 0.5rem;
     align-items: center;
     &:hover {
       color: var(--link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.3rem;
-      text-decoration-thickness: 0.125rem;
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
+    }
+    &:focus {
+      z-index: 1;
+      outline-offset: -3px;
     }
   }
 
@@ -569,17 +576,18 @@
     padding-block: var(--nav-link-padding-block);
     padding-inline: 0.75rem;
     display: flex;
-    line-height: 2rem;
+    line-height: f.snap-line-height(1.4);
     gap: 0.5rem;
-    align-items: center;
+    align-items: flex-start;
+    border-radius: 0.25rem;
     &:hover {
       color: var(--link-color);
-      text-decoration: underline;
-      text-underline-offset: 0.3rem;
-      text-decoration-thickness: 0.125rem;
+      text-decoration-line: underline;
+      text-decoration-color: currentColor;
     }
     @include m.focusable($offsetOutline: -3px) {
       box-shadow: none;
+      background-color: transparent;
     }
   }
   a.dropdown-toggle {
@@ -608,6 +616,8 @@
     }
   }
   .dropdown-menu.show {
+    display: block;
+    columns: 3;
     margin-block-start: calc(
       var(--horizontal-bar-border-width) - var(--border-width)
     );
@@ -617,21 +627,20 @@
     border-radius: 0.75rem;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    border-width: 0;
     color: var(--text-color);
     box-shadow: var(--shadow-dropdown);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
     column-gap: 2rem;
-    row-gap: 0;
     z-index: 999;
-    border-width: 0;
-    @include media-breakpoint-up(xl) {
-      column-gap: 4rem;
-      row-gap: 0;
-    }
+
     @include media-breakpoint-up(md) {
       padding-block: 3rem;
     }
+
+    @include media-breakpoint-up(xl) {
+      column-gap: 4rem;
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -640,21 +649,26 @@
       inset-block-start: 0;
       background-color: var(--dropdown-bg-color);
     }
+
     li {
-      display: flex;
+      break-inside: avoid-column;
+
       &.mobile-only {
         display: var(--mobile-only-display);
       }
-      &:has(p) {
-        flex-direction: column;
-        row-gap: 20px;
-        p {
-          font-size: 0.875rem;
+
+      p {
+        font-size: 0.875rem;
+        margin-block: f.remify(16px);
+
+        &:first-of-type {
+          margin-block-start: f.remify(20px);
         }
       }
+
       a {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         padding-inline-start: 0;
         padding-inline-end: 0.5rem;
         white-space: normal;
@@ -672,7 +686,7 @@
           mask-repeat: no-repeat;
           mask-position: 0;
           background-color: var(--action-icon-color);
-          height: 1.25rem;
+          height: 1lh;
           width: 1.25rem;
           min-width: 1.25rem;
           margin-inline-start: auto;
@@ -690,24 +704,18 @@
           box-shadow: none;
         }
       }
-      p {
-        text-align: start;
-        margin-block-start: 1rem;
-      }
-      p:first-of-type {
-        margin-block-start: 0;
-      }
-      p:last-of-type {
-        margin-block-end: 0;
-      }
     }
+
     li:has(.parent-link) {
       border-block-end: 2px solid var(--border-color);
       padding-block-end: 2rem;
       margin-block-end: 2rem;
       gap: 1rem;
-      grid-column: 1 / -1;
+      column-span: all;
+
       .dropdown-item {
+        width: auto;
+        display: inline-flex;
         border-block-end: 0;
         padding-block: 0;
         gap: 1rem;
@@ -733,11 +741,15 @@
       border-block-start: 2px solid var(--border-color);
       padding-block-start: 2rem;
       margin-block-start: 2rem;
-      grid-column: 1 / -1;
+      text-align: end;
+      column-span: all;
+
       .dropdown-item {
         border-block-end: 0;
-        display: flex;
+        display: inline-flex;
+        width: auto;
         flex-direction: row-reverse;
+        align-items: center;
         padding-inline-end: 0.5rem;
         gap: 0.5rem;
         font-size: 1.25rem;
@@ -755,7 +767,6 @@
           transform: scaleX(var(--icon-dir));
         }
         &::after {
-          content: "";
           content: none;
         }
         &:hover {

package/src/components/bs5/promotionalPanel/promotionalPanel.stories.js

@@ -11,33 +11,34 @@ import defaultdata from "./promotionalPanel.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Promotional Panel",
-  
+
   render: (args) => new PromotionalPanel(args).html,
   args: defaultdata,
   argTypes: {
     type: {
-      description: 'The types of layouts that this component supports',
+      description: "The types of layouts that this component supports",
       control: "select",
       options: ["promo", "contained", "indent-text", "indent-img"],
     },
     variantClass: {
-      description: 'The types of themes that this component supports',
+      description: "The types of themes that this component supports",
       control: "select",
       options: ["light", "alt", "dark", "dark-alt"],
-    },  
+    },
     promoImage: {
       control: "text",
       description: "The image to be displayed in the promotional panel.",
-      defaultValue:"./assets/img/banner-example-3-to-2.jpg",
+      defaultValue: "./assets/img/banner-example-3-to-2.jpg",
     },
     contentAlignment: {
-      description: 'Position of the content in the panel within this component',
+      description: "Position of the content in the panel within this component",
       control: "select",
-      options: ["content-left","content-right"],
+      options: ["content-left", "content-right"],
     },
     icon: {
       control: "select",
-      description: "Current list of usable icons available in the icon component.",
+      description:
+        "Current list of usable icons available in the icon component.",
       options: ["icon-dot-grid", "icon-phone", "icon-email", "icon-search"],
     },
     title: {
@@ -48,20 +49,22 @@ export default {
     abstract: {
       control: "text",
       description: "The abstract of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis.",
     },
     body: {
       control: "text",
       description: "The body of the promotional panel.",
-      defaultValue:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
+      defaultValue:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor, leo vulputate ut odio mattis. Vel suspendisse mi quisque consequat aliquet egestas.",
     },
     cta: {
-      description: 'The call to action objects for the promotional panel.',
-      control: 'object',
+      description: "The call to action objects for the promotional panel.",
+      control: "object",
     },
     btn: {
-      description: 'The button objects for the promotional panel.',
-      control: 'object',
+      description: "The button objects for the promotional panel.",
+      control: "object",
     },
   },
 
@@ -120,4 +123,3 @@ export const DarkAlternative = {
     variantClass: "dark-alt",
   },
 };
-

package/src/components/bs5/quickexit/quickexit.stories.js

@@ -3,7 +3,7 @@ import { Quickexit } from "./Quickexit.js";
 import defaultdata from "./quickexit.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Quickexit",
   render: (args) => {
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.

package/src/components/bs5/searchInput/searchInput.stories.js

@@ -6,7 +6,7 @@ import defaultdata from "./searchInput.data.json";
 const initData = defaultdata.defaultSuggestions || null;
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Search Input",
   render: (args) => {
     return `<form action="https://uat.forgov.qld.gov.au/search" class="site-search p-3">${new SearchInput(args).html}</form>`;

package/src/components/bs5/spinner/Spinner.stories.js

@@ -6,18 +6,16 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Spinner",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Spinner(args).html;
-  
   },
 };
 
@@ -32,15 +30,13 @@ export const Default = {
  * Dark themed Loading Spinner
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
+  args: {
+    ...defaultdata,
   },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [
@@ -59,8 +55,8 @@ export const Dark = {
  */
 export const Minimal = {
   args: {
-	  ...defaultdata,
-	  ...{minimal: true},
+    ...defaultdata,
+    ...{ minimal: true },
   },
 };
 
@@ -68,9 +64,8 @@ export const Minimal = {
  * Stacked Loading Spinner
  */
 export const Stacked = {
-  args: { 
-	  ...defaultdata,
-	  ...{stacked: true},
+  args: {
+    ...defaultdata,
+    ...{ stacked: true },
   },
 };
-

package/src/components/bs5/table/table.stories.js

@@ -3,7 +3,7 @@ import { Table } from "./Table.js";
 import defaultdata from "./table.data.json";
 
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Table",
   render: (args) => {
     

package/src/components/bs5/video/video.stories.js

@@ -10,7 +10,7 @@ import { Accordion } from "../accordion/Accordion.js";
  * which is based on YouTube arguments.
  */
 export default {
-  tags: ["autodocs"],
+  tags: ["autodocs", "extended"],
   title: "3. Components/Video",
   args: defaultdata.youtube,
   render: (args) => {

package/src/stories/Introduction.mdx

@@ -1,14 +1,23 @@
 import { Meta, Markdown } from "@storybook/addon-docs/blocks";
 
-import Readme from "../../README.md?raw"
+import Readme from "../../README.md?raw";
 
 <Meta title="Welcome" />
 
-[//]: # (# Welcome to QGDS QOL BS MVP Storybook)
+[//]: # "# Welcome to QGDS QOL BS MVP Storybook"
+[//]: #
+[//]: # "Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes."
+[//]: # "For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe."
 
-[//]: # ()
-[//]: # (Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes.)
+<Markdown>{Readme}</Markdown>
 
-[//]: # (For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe.)
+---
 
-<Markdown>{Readme}</Markdown>
+## Component Badges
+
+Components are labelled as:
+
+- **Core** — Essential, broadly applicable components that serve as the single source of truth for the Queensland Government design system.
+- **Extended** — Specialised components for needs not covered by the core set.
+
+Further information is available in the [QGDS UI Kit](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=8701-244248&m=dev).