@qld-gov-au/qgds-bootstrap5 2.0.9 → 2.0.11

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

@@ -1,3 +1,5 @@
+import { createFocusTrap } from "../../../js/utils.js";
+
 export function initializeNavbar() {
   const navbarCollapse = document.getElementById("main-nav");
   const overlay = document.getElementById("overlay");
@@ -8,13 +10,112 @@ export function initializeNavbar() {
     .map((id) => document.getElementById(id))
     .filter(Boolean);
 
-  // Close navbar when overlay is clicked
-  overlay?.addEventListener("click", () => {
+  // Helper to set aria-hidden
+  const setAriaHidden = (hidden) => {
+    hideTargets.forEach((el) => {
+      if (hidden) {
+        el.setAttribute("aria-hidden", "true");
+      } else {
+        el.removeAttribute("aria-hidden");
+      }
+    });
+  };
+
+  // Focus trap instances (created on-demand)
+  let mobileFocusTrap = null;
+  const dropdownFocusTraps = new Map();
+
+  // Helper function to close navbar
+  function closeNavbar() {
     if (navbarCollapse?.classList.contains("show")) {
       navbarCollapse.classList.remove("show");
-      overlay.classList.remove("show");
+      overlay?.classList.remove("show");
       document.body.style.overflow = "";
+      setAriaHidden(false);
+
+      // Deactivate and destroy mobile focus trap
+      if (mobileFocusTrap) {
+        mobileFocusTrap.deactivate();
+        mobileFocusTrap = null;
+      }
     }
+  }
+
+  // Create mobile focus trap on-demand (when mobile menu opens)
+  function createMobileFocusTrap() {
+    if (!mobileFocusTrap && navbarCollapse) {
+      mobileFocusTrap = createFocusTrap(navbarCollapse, {
+        returnFocusElement: burgerBtn,
+        onEscape: () => {
+          closeNavbar();
+        },
+      });
+    }
+    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
+  function setupDropdownListeners() {
+    // Find all dropdown toggles (elements with data-bs-toggle="dropdown")
+    const dropdownToggles = navbarCollapse?.querySelectorAll(
+      '[data-bs-toggle="dropdown"]',
+    );
+
+    dropdownToggles?.forEach((toggle) => {
+      // Find the associated dropdown menu within the same parent container
+      const parentItem =
+        toggle.closest(".dropdown") || toggle.closest(".nav-item");
+      if (!parentItem) return;
+
+      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 < 992;
+        if (!isMobile) {
+          // Create and activate focus trap on-demand
+          const dropdownTrap = getOrCreateDropdownFocusTrap(dropdown, toggle);
+          setTimeout(() => dropdownTrap.activate(), 0);
+        }
+      });
+
+      // Listen for dropdown hide event
+      toggle.addEventListener("hidden.bs.dropdown", () => {
+        const dropdownTrap = dropdownFocusTraps.get(dropdown);
+        if (dropdownTrap && dropdownTrap.isActive()) {
+          dropdownTrap.deactivate();
+        }
+      });
+    });
+  }
+
+  // Setup dropdown listeners on load
+  if (navbarCollapse) {
+    setupDropdownListeners();
+  }
+
+  // Close navbar when overlay is clicked
+  overlay?.addEventListener("click", () => {
+    closeNavbar();
   });
 
   const resetNavbarState = () => {
@@ -42,23 +143,25 @@ export function initializeNavbar() {
   window.addEventListener("resize", resetNavbarState);
   resetNavbarState();
 
-  // Helper to set aria-hidden
-  const setAriaHidden = (hidden) => {
-    hideTargets.forEach((el) => {
-      if (hidden) {
-        el.setAttribute("aria-hidden", "true");
-      } else {
-        el.removeAttribute("aria-hidden");
+  // Burger buttons - handle open (mobile only)
+  navbarCollapse?.addEventListener("shown.bs.collapse", () => {
+    // Check if navbar is opening
+    setTimeout(() => {
+      if (navbarCollapse?.classList.contains("show")) {
+        setAriaHidden(true);
+
+        // Create and activate focus trap when navbar opens (mobile only - whole navbar)
+        const isMobile = window.innerWidth < 992;
+        if (isMobile) {
+          const trap = createMobileFocusTrap();
+          trap.activate();
+        }
       }
-    });
-  };
+    }, 0);
+  });
 
-  // Burger buttons
-  [burgerBtn, burgerCloseBtn].forEach((btn) => {
-    if (btn) {
-      btn.addEventListener("click", () => {
-        setAriaHidden(true);
-      });
-    }
+  // Close button
+  burgerCloseBtn?.addEventListener("click", () => {
+    closeNavbar();
   });
 }

package/src/components/bs5/tag/tag--status.stories.js

@@ -42,6 +42,7 @@ function statusVariantsMarkup() {
           //Generate Tag component markup from all possible tag types.
           const tagHtml = new Tag({
             variant: defaultdata.status.variant,
+            classes: "p-4 my-2",
             tagItems: tagItems,
             size: sizeClass,
             emphasis: emClass,

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

@@ -1,145 +1,151 @@
 {
-	"default": {
-		"variant": "tag-default",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text"
-			},
-			{
-				"id": "Four",
-				"content": "Tag text"
-			}
-		]
-	},
-	"large": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text",
-				"classes": "tag-large"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text",
-				"classes": "tag-large"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text",
-				"classes": "tag-large"
-			}
-		]
-	},
-	"action": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			},
-			{
-				"id": "Two",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			},
-			{
-				"id": "Three",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			}
-		]
-	},
-	"dark": {
-		"classes": "",
-		"variant": "tag-dark",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text"
-			}
-		]
-	},
-	"info": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text",
-				"classes": "tag-info"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text",
-				"classes": "tag-info"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text",
-				"classes": "tag-info"
-			}
-		]
-	},
-	"filter": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Policies and procedures",
-				"classes": "tag-large",
-				"applied-filter": true
-			},
-			{
-				"id": "Two",
-				"content": "Publications",
-				"classes": "tag-large",
-				"applied-filter": true
-			}
-		]
-	},
-	"status": {
-		"variant": "tag-status",
-		"tagItems": [
-			{
-				"content": "Neutral",
-				"classes": "tag-neutral"
-			},
-			{
-				"content": "Success",
-				"classes": "tag-success"
-			},
-			{
-				"content": "Warning",
-				"classes": "tag-warning"
-			},
-			{
-				"content": "Error",
-				"classes": "tag-error"
-			},
-			{
-				"content": "Information",
-				"classes": "tag-information"
-			}
-		],
-		"size": "tag-small",
-		"emphasis": "tag-low"
-	}
+  "default": {
+    "variant": "tag-default",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text"
+      },
+      {
+        "id": "Four",
+        "content": "Tag text"
+      }
+    ]
+  },
+  "large": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text",
+        "classes": "tag-large"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text",
+        "classes": "tag-large"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text",
+        "classes": "tag-large"
+      }
+    ]
+  },
+  "action": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      },
+      {
+        "id": "Two",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      },
+      {
+        "id": "Three",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      }
+    ]
+  },
+  "dark": {
+    "classes": "p-4 my-2",
+    "variant": "tag-dark",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text"
+      }
+    ]
+  },
+  "info": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text",
+        "classes": "tag-info"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text",
+        "classes": "tag-info"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text",
+        "classes": "tag-info"
+      }
+    ]
+  },
+  "filter": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Policies and procedures",
+        "classes": "tag-large",
+        "applied-filter": true
+      },
+      {
+        "id": "Two",
+        "content": "Publications",
+        "classes": "tag-large",
+        "applied-filter": true
+      }
+    ]
+  },
+  "status": {
+    "variant": "tag-status",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "content": "Neutral",
+        "classes": "tag-neutral"
+      },
+      {
+        "content": "Success",
+        "classes": "tag-success"
+      },
+      {
+        "content": "Warning",
+        "classes": "tag-warning"
+      },
+      {
+        "content": "Error",
+        "classes": "tag-error"
+      },
+      {
+        "content": "Information",
+        "classes": "tag-information"
+      }
+    ],
+    "size": "tag-small",
+    "emphasis": "tag-low"
+  }
 }

package/src/components/bs5/tag/tag.hbs

@@ -1,6 +1,6 @@
 <!-- QGDS Component: Tag -->
 
-<ul class="tag-list {{variant}}">
+<ul class="tag-list {{variant}} {{classes}}">
   {{#each tagItems}}
     <li class="tag-item {{classes}} {{../size}} {{../emphasis}}">
       {{{content}}}

package/src/components/bs5/tag/tag.scss

@@ -91,9 +91,8 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
 // General styling rules.
 .tag-list {
   list-style-type: none;
-  margin: 0.5rem 0;
-  padding: 30px;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 1rem;
 
@@ -114,9 +113,7 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     border: var(--_border-width) solid var(--#{$prefix}neutral-lighter);
     border-radius: 1rem;
     font-size: 0.875rem;
-    line-height: 1.5;
-
-    height: var(--_height);
+    line-height: 1.4;
 
     &.tag-large {
       --_padding-y: 0.5rem;

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

@@ -45,6 +45,7 @@ export const ParentContextComparison = {
   render: () => {
     const testTags = {
       variant: "",
+      classes: "p-4 my-2",
       tagItems: [
         {
           content: "default",

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

@@ -69,8 +69,8 @@ export default {
       },
     ],
     backgrounds: { disable: false },
-    globals: { backgrounds: { value: "default" } },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**

package/src/css/mixins/focusable.scss

@@ -35,7 +35,7 @@
       style: solid;
       color: var(
         --qld-focus-color,
-        #0085b3
+        #002e85
       ); // --qld-focus-color defined in qld-type.scss
       offset: $offsetOutline;
     }

package/src/css/mixins/make-icon.scss

@@ -11,7 +11,7 @@ $prefix: "qld-" !default;
 /// @param {String} $name [null] - The name of icon
 /// @param {String} $size ["sm"] - The icon size, valid values are "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
 /// @param {String | null} $pseudo [null] - Whether the mixin applies styles as a pseudo-element. Valid string values are "before" | "after"
-/// @param {false} $is-inline - Applies extra styles to assist with vertical alignent when used inline with text.
+/// @param {Boolean} $is-inline [false] - Applies extra styles to assist with vertical alignent when used inline with text.
 /// @param {Boolean} $include-base [true] - Apply all base styles. Set to false when reusing this mixin to create modifier classes where base styles are already applied (For instance qld-icon-{name})
 /// @content
 @mixin make-icon(

package/src/js/handlebars.helpers.js

@@ -3,7 +3,7 @@
 /**
  *
  * @param {*} v1 The left value
- * @param { "==" | "===" | "!=" | "!==" | "<" | "<=" | ">" | ">=" | "&&"  | "||" | "contains"} operator the operator to handle comparison
+ * @param { "==" | "===" | "!=" | "!==" | "<" | "<=" | ">" | ">=" | "&&"  | "||" | "in" | "contains"} operator the operator to handle comparison
  * @param {*} v2 The right value
  * @returns {Boolean} the result of comparison
  * @example
@@ -92,6 +92,14 @@ export default function handlebarsHelpers(handlebars) {
     return args.some((arg) => !!arg) ? options.fn(this) : options.inverse(this);
   });
 
+  // ifAll - {{{#ifAll variable1 variable2 variable3 variable4 etc}}, if all true return true
+  handlebars.registerHelper("ifAll", function (...args) {
+    const options = args.pop(); // The last argument is the options object
+    return args.every((arg) => !!arg)
+      ? options.fn(this)
+      : options.inverse(this);
+  });
+
   // now - return current timestamp i.e {{now}}
   handlebars.registerHelper("now", function () {
     return new Date().toISOString();