@qld-gov-au/qgds-bootstrap5 2.0.10 → 2.0.12

package/src/components/bs5/formcheck/stories/radio/radio.stories.js

@@ -1,5 +1,5 @@
 // FormcheckRadio.stories.js
-import { Formcheck } from "../../Formcheck.js";
+import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./radio.data.json";
 
 export default {
@@ -11,169 +11,77 @@ export default {
   globals: { backgrounds: { value: "default" } },
   parameters: { backgrounds: { disable: false } },
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {},
+  argTypes,
 };
 
-// Default story for Formcheck component
 export const Default = {
   args: { ...defaultdata },
-  parameters: {
-    controls: { include: `listitems` },
-  },
   globals: { backgrounds: { value: "default" } },
 };
 
 export const RadioDark = {
   args: { ...defaultdata },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioSmall = {
-  args: { ...defaultdata, id: "radioSmall" },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  args: { ...defaultdata, id: "checkboxSmall" },
+  render: (args) => `<div class="small">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioSmallDark = {
-  args: { ...defaultdata, id: "radioSmallDark" },
+  args: { ...defaultdata, id: "checkboxSmallDark" },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark small">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioValid = {
-  args: { ...defaultdata, id: "radioValid" },
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: true }).html}`,
 };
 
 export const RadioValidSmall = {
-  args: { ...defaultdata, id: "radioValidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
 };
 
 export const RadioValidDark = {
-  args: { ...defaultdata, id: "radioValidDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidDark" },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="valid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
 };
 
 export const RadioValidSmallDark = {
-  args: { ...defaultdata, id: "radioValidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmallDark" },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="valid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };
 
 export const RadioInvalid = {
-  args: { ...defaultdata, id: "radioInvalid" },
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: false }).html}`,
 };
 
 export const RadioInvalidSmall = {
-  args: { ...defaultdata, id: "radioInvalidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
 };
+
 export const RadioInvalidDark = {
-  args: { ...defaultdata, id: "radioInvalidDark" },
-  render: (args) => {
-    return `
-    <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidDark" },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
 };
 
 export const RadioInvalidSmallDark = {
-  args: { ...defaultdata, id: "radioInvalidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmallDark" },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="invalid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };

package/src/components/bs5/inpageAlert/inpageAlert.scss

@@ -5,7 +5,7 @@
 //To account for this, we redefine the global vars at the .alert scope
 
 .alert {
-  @include light-theme-properties();
+  @extend %qld-palette-default;
   --qld-headings-color: var(--#{$prefix}light-text-text);
   --qld-alert-color: var(--#{$prefix}light-text-text);
   --qld-alert-bg: #fff;

package/src/components/bs5/modal/modal.scss

@@ -4,117 +4,124 @@
 
 // QGDS specific modal variables.
 .modal {
-    --#{$prefix}modal-zindex: #{$zindex-modal};
-    --#{$prefix}modal-width: #{$modal-md};
-    
-    --#{$prefix}modal-margin: #{$modal-dialog-margin};
-    --#{$prefix}modal-color: #{$modal-content-color};
-    --#{$prefix}modal-bg: #{$modal-content-bg};
-    --#{$prefix}modal-padding: 1.5rem 2rem;
-    
-    --#{$prefix}modal-border-color: var(--#{$prefix}light-grey);
-    --#{$prefix}modal-border-width: 1px;
-    --#{$prefix}modal-border-radius: 0.75rem;
-    
-    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
-    --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-
-    --#{$prefix}modal-header-padding: 2rem 2rem 0;
-    --#{$prefix}modal-header-border-width: 0px;
-
-    --#{$prefix}modal-title-line-height: 2rem;
-
-    --#{$prefix}modal-footer-gap: 0;
-    --#{$prefix}modal-footer-bg: none;
-    --#{$prefix}modal-footer-border-color: none; 
-    --#{$prefix}modal-footer-border-width: none;
-
-    .btn-close {
-        --#{$prefix}btn-close-icon: "data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
-        --#{$prefix}btn-close-color: var(--#{$prefix}color-default-color-light-text-lighter);
-        --#{$prefix}btn-close-width: 40px;
-        --#{$prefix}btn-border-radius: 50%;
-
-        //Hover state
-        --#{$prefix}btn-close-hover-color: var(--#{$prefix}color-default-color-light-text-heading);
-        --#{$prefix}btn-close-hover-bg: var(--#{$prefix}core-default-color-neutral-lightest);
-        --#{$prefix}btn-close-hover-bg-size: 15px;
-
-        //Focus state
-        --#{$prefix}btn-close-focus-color: var(--#{$prefix}color-default-color-light-text-heading);
-        --#{$prefix}btn-close-focus-shadow: none;
-        --#{$prefix}btn-close-focus-border: var(--#{$prefix}light-blue) solid 3px;
-    }
+  --#{$prefix}modal-zindex: #{$zindex-modal};
+  --#{$prefix}modal-width: #{$modal-md};
+
+  --#{$prefix}modal-margin: #{$modal-dialog-margin};
+  --#{$prefix}modal-color: #{$modal-content-color};
+  --#{$prefix}modal-bg: #{$modal-content-bg};
+  --#{$prefix}modal-padding: 1.5rem 2rem;
+
+  --#{$prefix}modal-border-color: var(--#{$prefix}light-grey);
+  --#{$prefix}modal-border-width: 1px;
+  --#{$prefix}modal-border-radius: 0.75rem;
+
+  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
+  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
+
+  --#{$prefix}modal-header-padding: 2rem 2rem 0;
+  --#{$prefix}modal-header-border-width: 0px;
+
+  --#{$prefix}modal-title-line-height: 2rem;
+
+  --#{$prefix}modal-footer-gap: 0;
+  --#{$prefix}modal-footer-bg: none;
+  --#{$prefix}modal-footer-border-color: none;
+  --#{$prefix}modal-footer-border-width: none;
+
+  .btn-close {
+    --#{$prefix}btn-close-icon: "data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
+    --#{$prefix}btn-close-color: var(
+      --#{$prefix}color-default-color-light-text-lighter
+    );
+    --#{$prefix}btn-close-width: 40px;
+    --#{$prefix}btn-border-radius: 50%;
+
+    //Hover state
+    --#{$prefix}btn-close-hover-color: var(
+      --#{$prefix}color-default-color-light-text-heading
+    );
+    --#{$prefix}btn-close-hover-bg: var(
+      --#{$prefix}core-default-color-neutral-lightest
+    );
+    --#{$prefix}btn-close-hover-bg-size: 15px;
+
+    //Focus state
+    --#{$prefix}btn-close-focus-color: var(
+      --#{$prefix}color-default-color-light-text-heading
+    );
+    --#{$prefix}btn-close-focus-shadow: none;
+    --#{$prefix}btn-close-focus-border: var(--#{$prefix}focus-color) solid 3px;
+  }
 }
 
 // General styling rules.
 .modal {
-    .btn-close {
-        width: var(--#{$prefix}btn-close-width);
-        height: var(--#{$prefix}btn-close-width);
-        border-radius: var(--#{$prefix}btn-border-radius);
-        background-size: 12px;
-        padding: 0;
-        flex-shrink: 0;  //Flex, do not shrink this perfectly round button.
-
-        &:hover {
-            width: var(--#{$prefix}btn-close-width);
-            height: var(--#{$prefix}btn-close-width);
-            color: var(--#{$prefix}btn-close-hover-color);
-            background-size: var(--#{$prefix}btn-close-hover-bg-size);
-            background-color: var(--#{$prefix}btn-close-hover-bg);
-        }
-        &:focus {
-            width: var(--#{$prefix}btn-close-width);
-            height: var(--#{$prefix}btn-close-width);
-            color: var(--#{$prefix}btn-close-focus-color);
-            background-size: var(--#{$prefix}btn-close-hover-bg-size);
-            background-color: var(--#{$prefix}btn-close-hover-bg);
-            outline: var(--#{$prefix}btn-close-focus-border);
-            outline-offset: 2px;
-        }
-    }
+  .btn-close {
+    width: var(--#{$prefix}btn-close-width);
+    height: var(--#{$prefix}btn-close-width);
+    border-radius: var(--#{$prefix}btn-border-radius);
+    background-size: 12px;
+    padding: 0;
+    flex-shrink: 0; //Flex, do not shrink this perfectly round button.
 
-    .modal-header {
-        .modal-title {
-            line-height: var(--#{$prefix}modal-title-line-height);
-            font-size: 1.5rem;
-        }
+    &:hover {
+      width: var(--#{$prefix}btn-close-width);
+      height: var(--#{$prefix}btn-close-width);
+      color: var(--#{$prefix}btn-close-hover-color);
+      background-size: var(--#{$prefix}btn-close-hover-bg-size);
+      background-color: var(--#{$prefix}btn-close-hover-bg);
+    }
+    &:focus {
+      width: var(--#{$prefix}btn-close-width);
+      height: var(--#{$prefix}btn-close-width);
+      color: var(--#{$prefix}btn-close-focus-color);
+      background-size: var(--#{$prefix}btn-close-hover-bg-size);
+      background-color: var(--#{$prefix}btn-close-hover-bg);
+      outline: var(--#{$prefix}btn-close-focus-border);
+      outline-offset: 2px;
     }
+  }
 
-    .modal-footer {
-        padding: 0 2rem 2rem;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-        
-        .btn {
-            margin: 0 0 0 1.5rem;
-        }
+  .modal-header {
+    .modal-title {
+      line-height: var(--#{$prefix}modal-title-line-height);
+      font-size: 1.5rem;
     }
+  }
 
-    //Rescope for smaller modals 
-    .modal-dialog {
-        &.modal-sm {
-            .modal-footer {
-                flex-wrap: wrap;
-                .btn {
-                    width: 100%;
-                    margin: 1rem 0;
-                }
-            }
-        }
+  .modal-footer {
+    padding: 0 2rem 2rem;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+
+    .btn {
+      margin: 0 0 0 1.5rem;
     }
+  }
 
-    //Rescope for smaller viewports 
-    @include media-breakpoint-down(md) {
-        .modal-footer {
-            flex-wrap: wrap;
-            .btn {
-                width: 100%;
-                margin: 1rem 0;
-            }
+  //Rescope for smaller modals
+  .modal-dialog {
+    &.modal-sm {
+      .modal-footer {
+        flex-wrap: wrap;
+        .btn {
+          width: 100%;
+          margin: 1rem 0;
         }
+      }
     }
+  }
 
+  //Rescope for smaller viewports
+  @include media-breakpoint-down(md) {
+    .modal-footer {
+      flex-wrap: wrap;
+      .btn {
+        width: 100%;
+        margin: 1rem 0;
+      }
+    }
+  }
 }

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();
   });
 }