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

package/src/components/bs5/textbox/textbox.hbs

@@ -1,32 +1,31 @@
 <!-- QGDS Component: Textbox -->
 
-<!-- Label for the first input field -->
 <label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text for the first input field -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-success" customClass}}{{! legacy support for feedback classes `qld-input-success`}}
+<span class="qld-input-success">{{successMessageText}}</span>
+{{else}}
+{{#if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/contains}}
+{{#contains "qld-input-error" customClass}}{{! legacy support for feedback classes `qld-input-error`}}
+<span class="qld-input-error">{{errorMessageText}}</span>
+{{else}}
+{{#if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<!-- First text input field, described by the hint text above -->
-<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
-    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
-    isRequired}}required aria-required="true" {{/if}} />
+<input id={{id}} {{#if value}}value="{{value}}"{{/if}}  class="form-control {{customClass}} {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
+    type="text" placeholder="{{placeholder}}" {{#if isDisabled}}disabled{{/if}} {{#if
+    isRequired}}required{{/if}} {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} />

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/functions/_index.scss

@@ -1 +1,3 @@
 @forward "in-list";
+@forward "remify";
+@forward "snap-line-height";

package/src/css/functions/remify.scss

@@ -0,0 +1,32 @@
+@use "sass:math";
+@use "sass:meta";
+@use "sass:list";
+
+///
+/// Easily convert px to rems
+/// @param {Number} $value The px value to convert to rem. May be unitless or supplied as px units.
+/// @param {Number} $baseline [16px] The assumed px value of 1rem.
+/// @todo support complex property values eg: `border: remify(4px 8px 12px 2rem)`;
+@function remify($value, $baseline: 16px) {
+  @if (math.is-unitless($baseline)) {
+    $baseline-px: $baseline * 1px;
+  }
+
+  @if (math.unit($baseline) != "px") {
+    @error "parameter $baseline may only use px units";
+  }
+
+  @if (meta.type-of($value) == "list") {
+    $result: ();
+    @each $item in $value {
+      $result: list.append($result, remify($item));
+    }
+    @return $result;
+  }
+
+  @if (math.is-unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return (math.div($value, $baseline) * 1rem);
+}

package/src/css/functions/snap-line-height.scss

@@ -0,0 +1,7 @@
+@use "remify" as *;
+///
+/// Calculate a lineheight snapped to nearest 4px value, based on current font size
+/// The returned value is absolute, so only use on leaf nodes where relative line-height value doesn't need to cascade.
+@function snap-line-height($ideal-line-height: 1.4, $grid-size: 4px) {
+  @return round(nearest, calc(1em * $ideal-line-height), remify($grid-size));
+}

package/src/css/main.scss

@@ -100,7 +100,7 @@ $enable-dark-mode: true;
 @import "../../node_modules/bootstrap/scss/utilities/api";
 
 // Themes
-@import "qld-theme";
+@import "qld-palettes";
 
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";

package/src/css/mixins/focusable.scss

@@ -4,6 +4,7 @@
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
 /// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+/// @content
 
 @mixin focusable(
   $offsetOutline: true,
@@ -35,9 +36,11 @@
       style: solid;
       color: var(
         --qld-focus-color,
-        #0085b3
+        #002e85
       ); // --qld-focus-color defined in qld-type.scss
       offset: $offsetOutline;
     }
+
+    @content;
   }
 }

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/css/{qld-theme.scss → qld-palettes.scss}

@@ -2,7 +2,7 @@
 // Provides complete theme styling including color, background-color, and CSS variables
 
 // Theme properties mixins to avoid duplication
-@mixin light-theme-properties {
+%qld-palette-default {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-light-action-secondary);
@@ -15,7 +15,6 @@
   --qld-headings-color: #{$headings-color};
   --qld-link-color: #{$link-color};
   --qld-link-color-rgb: #{to-rgb($link-color)};
-  --qld-link-font-weight: 400;
   --qld-link-hover-color: var(--qld-link-color);
   --qld-link-visited-color: #{$color-default-color-light-link-visited};
   --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
@@ -30,12 +29,26 @@
   --qld-selection-color: var(--qld-white);
 }
 
-@mixin dark-theme-properties {
+%qld-palette-light {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-background);
+  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
+}
+
+%qld-palette-alt {
+  @extend %qld-palette-default;
+  --qld-body-bg: var(--qld-light-alt-background);
+  --qld-border-color: var(--qld-soft-grey);
+}
+
+%qld-palette-dark {
   background-color: var(--qld-body-bg);
   color: var(--qld-body-color);
   --qld-action-icon-color: var(--qld-dark-action-secondary);
   --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
+  --qld-body-bg: var(--qld-dark-background);
   --qld-body-color: #fff;
+  --qld-border-color: var(--qld-dark-border);
   --qld-focus-color: var(--qld-dark-focus);
   --qld-headings-color: #{$color-default-color-dark-text-heading};
   --qld-link-color: #{$color-default-color-dark-link-default};
@@ -54,42 +67,36 @@
   --qld-selection-color: var(--qld-brand-primary);
 }
 
+%qld-palette-dark-alt {
+  @extend %qld-palette-dark;
+  --qld-body-bg: var(--qld-dark-alt-background);
+  --qld-border-color: var(--qld-dark-alt-border);
+}
+
 // Default theme (inherits :root variables) and root variables
 :root,
 .default {
-  @include light-theme-properties;
+  @extend %qld-palette-default;
 }
 
 // Light theme
 .light {
-  @include light-theme-properties;
-  --qld-body-bg: var(--qld-light-background);
-  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
+  @extend %qld-palette-light;
 }
 
 // Alt theme (light alternative)
 .alt {
-  @include light-theme-properties;
-  --qld-body-bg: var(--qld-light-alt-background);
-  --qld-border-color: var(--qld-soft-grey);
+  @extend %qld-palette-alt;
 }
 
 // Dark theme
-.dark {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-background);
-  --qld-border-color: var(--qld-dark-border);
+// Bootstrap dark mode support
+.dark,
+:root[data-bs-theme="dark"] {
+  @extend %qld-palette-dark;
 }
 
 // Dark alt theme
 .dark-alt {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-dark-alt-background);
-  --qld-border-color: var(--qld-dark-alt-border);
-}
-
-// Bootstrap dark mode support
-:root[data-bs-theme="dark"] {
-  @include dark-theme-properties;
-  --qld-body-bg: var(--qld-brand-primary);
+  @extend %qld-palette-dark-alt;
 }

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

package/src/js/utils.js

@@ -47,3 +47,145 @@ export function isFocusable(element) {
   }
   return false;
 }
+
+/**
+ * Get all focusable elements within a container
+ * @param {HTMLElement} container The container element to search within
+ * @returns {HTMLElement[]} Array of focusable elements
+ */
+export function getFocusableElements(container) {
+  if (!container) return [];
+
+  const allElements = container.querySelectorAll("*");
+  return Array.from(allElements).filter((el) => isFocusable(el));
+}
+
+/**
+ * Create a focus trap for accessibility
+ * Traps keyboard focus within a container element (e.g., modal, navbar, menu)
+ * @param {HTMLElement} container The container element to trap focus within
+ * @param {Object} options Configuration options
+ * @param {HTMLElement} options.returnFocusElement Element to return focus to when deactivated
+ * @param {Function} options.onEscape Callback function when Escape key is pressed
+ * @returns {Object} Focus trap controller with activate, deactivate, and update methods
+ */
+export function createFocusTrap(container, options = {}) {
+  if (!container) {
+    throw new Error("Container element is required for focus trap");
+  }
+
+  const { returnFocusElement, onEscape } = options;
+  let isActive = false;
+  let focusableElements = [];
+  let previousActiveElement = null;
+
+  /**
+   * Update the list of focusable elements
+   */
+  function updateFocusableElements() {
+    focusableElements = getFocusableElements(container);
+  }
+
+  /**
+   * Handle Tab key navigation within the trap
+   */
+  function handleTabKey(event) {
+    if (!isActive || focusableElements.length === 0) return;
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElement = document.activeElement;
+
+    // Shift + Tab (backward)
+    if (event.shiftKey) {
+      if (
+        activeElement === firstElement ||
+        !container.contains(activeElement)
+      ) {
+        event.preventDefault();
+        lastElement.focus();
+      }
+    }
+    // Tab (forward)
+    else {
+      if (activeElement === lastElement || !container.contains(activeElement)) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  }
+
+  /**
+   * Handle Escape key to close/deactivate
+   */
+  function handleEscapeKey(event) {
+    if (!isActive) return;
+
+    if (event.key === "Escape" || event.key === "Esc") {
+      event.preventDefault();
+      if (typeof onEscape === "function") {
+        onEscape();
+      }
+    }
+  }
+
+  /**
+   * Handle all keyboard events
+   */
+  function handleKeyDown(event) {
+    if (event.key === "Tab") {
+      handleTabKey(event);
+    } else if (event.key === "Escape" || event.key === "Esc") {
+      handleEscapeKey(event);
+    }
+  }
+
+  /**
+   * Activate the focus trap
+   */
+  function activate() {
+    if (isActive) return;
+
+    // Store the currently focused element to return focus later
+    previousActiveElement = document.activeElement;
+
+    // Update focusable elements
+    updateFocusableElements();
+
+    // Add keyboard event listener
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Focus the first focusable element
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+
+    isActive = true;
+  }
+
+  /**
+   * Deactivate the focus trap
+   */
+  function deactivate() {
+    if (!isActive) return;
+
+    // Remove keyboard event listener
+    document.removeEventListener("keydown", handleKeyDown);
+
+    // Return focus to the element that had focus before activation
+    const elementToFocus = returnFocusElement || previousActiveElement;
+    if (elementToFocus && typeof elementToFocus.focus === "function") {
+      elementToFocus.focus();
+    }
+
+    isActive = false;
+    previousActiveElement = null;
+  }
+
+  return {
+    activate,
+    deactivate,
+    update: updateFocusableElements,
+    isActive: () => isActive,
+  };
+}