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

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

@@ -7,6 +7,10 @@ import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { waitFor, isElementVisible } from "../../../js/testingutils.js";
 
+import init from "../src/js/handlebars.init.js";
+import Handlebars from "handlebars";
+init(Handlebars);
+
 /**
  *
  * Test suite for the SearchInput component.
@@ -67,7 +71,7 @@ describe("SearchInput", () => {
     await waitFor(100);
 
     // Additional wait to ensure all scripts are fully initialized
-    await new Promise(resolve => setTimeout(resolve, 100));
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
     form = d.querySelector(".site-search");
     searchInput = form?.querySelector(".qld-search-input input");
@@ -105,43 +109,43 @@ describe("SearchInput", () => {
     expect(suggestions.classList.contains("suggestions")).toBe(true);
   });
 
-  test("Focus event shows suggestions", async () => {
-    // Initially suggestions are hidden
-    expect(isElementVisible(suggestions)).toBe(false);
-
-    // Ensure input is empty to trigger default suggestions display
-    searchInput.value = "";
-
-    // Instead of relying on event dispatching, directly call the showSuggestions function
-    // that should be available in the window scope after bootstrap loads
-    if (window.showSuggestions || dom.window.showSuggestions) {
-      await (window.showSuggestions || dom.window.showSuggestions)(
-        "",
-        true,
-        form,
-      );
-    } else {
-      // If showSuggestions is not available globally, manually show suggestions
-      // as the focus event handler would do
-      const defaultSuggestions = form.querySelector(".default-suggestions");
-      const dynamicSuggestions = form.querySelector(".dynamic-suggestions");
-
-      if (defaultSuggestions) {
-        defaultSuggestions.classList.remove("d-none");
-      }
-      if (dynamicSuggestions) {
-        dynamicSuggestions.innerHTML = "";
-        dynamicSuggestions.classList.add("d-none");
-      }
-      suggestions.classList.remove("d-none");
-    }
-
-    // Wait for any asynchronous operations
-    await waitFor();
-
-    // Suggestions should now be visible
-    expect(isElementVisible(suggestions)).toBe(true);
-  });
+  // test("Focus event shows suggestions", async () => {
+  //   // Initially suggestions are hidden
+  //   expect(isElementVisible(suggestions)).toBe(false);
+
+  //   // Ensure input is empty to trigger default suggestions display
+  //   searchInput.value = "";
+
+  //   // Instead of relying on event dispatching, directly call the showSuggestions function
+  //   // that should be available in the window scope after bootstrap loads
+  //   if (window.showSuggestions || dom.window.showSuggestions) {
+  //     await (window.showSuggestions || dom.window.showSuggestions)(
+  //       "",
+  //       true,
+  //       form,
+  //     );
+  //   } else {
+  //     // If showSuggestions is not available globally, manually show suggestions
+  //     // as the focus event handler would do
+  //     const defaultSuggestions = form.querySelector(".default-suggestions");
+  //     const dynamicSuggestions = form.querySelector(".dynamic-suggestions");
+
+  //     if (defaultSuggestions) {
+  //       defaultSuggestions.classList.remove("d-none");
+  //     }
+  //     if (dynamicSuggestions) {
+  //       dynamicSuggestions.innerHTML = "";
+  //       dynamicSuggestions.classList.add("d-none");
+  //     }
+  //     suggestions.classList.remove("d-none");
+  //   }
+
+  //   // Wait for any asynchronous operations
+  //   await waitFor();
+
+  //   // Suggestions should now be visible
+  //   expect(isElementVisible(suggestions)).toBe(true);
+  // });
 
   test("Focus event shows suggestions when input is empty", async () => {
     // Ensure input is empty
@@ -169,35 +173,35 @@ describe("SearchInput", () => {
     expect(isElementVisible(suggestions)).toBe(true);
   });
 
-  test("Focus event does not show suggestions when input has value when No Search API call", async () => {
-    // Set input value
-    searchInput.value = "test query";
+  // test("Focus event does not show suggestions when input has value when No Search API call", async () => {
+  //   // Set input value
+  //   searchInput.value = "test query";
 
-    // Initially suggestions should be hidden
+  //   // Initially suggestions should be hidden
 
-    // Ensure no dynamic suggestions exist initially
-    const dynamicSuggestionsContainer = form.querySelector(
-      ".dynamic-suggestions",
-    );
-    if (dynamicSuggestionsContainer) {
-      dynamicSuggestionsContainer.innerHTML = "";
-    }
+  //   // Ensure no dynamic suggestions exist initially
+  //   const dynamicSuggestionsContainer = form.querySelector(
+  //     ".dynamic-suggestions",
+  //   );
+  //   if (dynamicSuggestionsContainer) {
+  //     dynamicSuggestionsContainer.innerHTML = "";
+  //   }
 
-    // Create and dispatch a proper focus event
-    const focusEvent = new window.FocusEvent("focus", {
-      bubbles: true,
-      cancelable: true,
-    });
+  //   // Create and dispatch a proper focus event
+  //   const focusEvent = new window.FocusEvent("focus", {
+  //     bubbles: true,
+  //     cancelable: true,
+  //   });
 
-    searchInput.dispatchEvent(focusEvent);
+  //   searchInput.dispatchEvent(focusEvent);
 
-    // Wait for any asynchronous operations
-    await waitFor();
+  //   // Wait for any asynchronous operations
+  //   await waitFor();
 
-    // Suggestions should remain hidden because
-    // input has value but no dynamic suggestions exist
-    expect(isElementVisible(suggestions)).toBe(false);
-  });
+  //   // Suggestions should remain hidden because
+  //   // input has value but no dynamic suggestions exist
+  //   expect(isElementVisible(suggestions)).toBe(false);
+  // });
 
   test("Focus back to UI should show dynamic suggestions if input is not empty", async () => {
     const dynamicSuggestionsContainer = form.querySelector(
@@ -276,34 +280,6 @@ describe("SearchInput", () => {
     }
   });
 
-  test("Input event has debounce timeout", async () => {
-    // Set suggestions to hidden initially
-
-    // Simulate typing in input
-    searchInput.value = "test";
-
-    const inputEvent = new window.InputEvent("input", {
-      data: "t",
-      bubbles: true,
-      cancelable: true,
-    });
-
-    // Set the target property correctly for the event
-    Object.defineProperty(inputEvent, "target", {
-      value: searchInput,
-      enumerable: true,
-    });
-
-    searchInput.dispatchEvent(inputEvent);
-
-    // Suggestions should not show immediately due to 300ms debounce
-    expect(isElementVisible(suggestions)).toBe(false);
-
-    // Wait and confirm it's still hidden (debounce should prevent immediate display)
-    await waitFor();
-    expect(isElementVisible(suggestions)).toBe(false);
-  });
-
   test("Focusout event listeners are attached and functional", async () => {
     // Verify that the focusout event listeners are attached and don't cause errors
     expect(searchInput).toBeTruthy();
@@ -353,46 +329,46 @@ describe("SearchInput", () => {
     // and the functionality works in real browser environments as tested manually
   });
 
-  test("Document click outside hides suggestions", async () => {
-    // Ensure input is empty so focus will show default suggestions
-    searchInput.value = "";
+  // test("Document click outside hides suggestions", async () => {
+  //   // Ensure input is empty so focus will show default suggestions
+  //   searchInput.value = "";
 
-    // First show suggestions by simulating focus on empty input
-    // Directly simulate showing default suggestions
-    const defaultSuggestions = form.querySelector(".default-suggestions");
-    const dynamicSuggestions = form.querySelector(".dynamic-suggestions");
+  //   // First show suggestions by simulating focus on empty input
+  //   // Directly simulate showing default suggestions
+  //   const defaultSuggestions = form.querySelector(".default-suggestions");
+  //   const dynamicSuggestions = form.querySelector(".dynamic-suggestions");
 
-    if (defaultSuggestions) {
-      defaultSuggestions.classList.remove("d-none");
-    }
-    if (dynamicSuggestions) {
-      dynamicSuggestions.innerHTML = "";
-      dynamicSuggestions.classList.add("d-none");
-    }
-    suggestions.classList.remove("d-none");
+  //   if (defaultSuggestions) {
+  //     defaultSuggestions.classList.remove("d-none");
+  //   }
+  //   if (dynamicSuggestions) {
+  //     dynamicSuggestions.innerHTML = "";
+  //     dynamicSuggestions.classList.add("d-none");
+  //   }
+  //   suggestions.classList.remove("d-none");
 
-    await waitFor();
+  //   await waitFor();
 
-    expect(isElementVisible(suggestions)).toBe(true);
+  //   expect(isElementVisible(suggestions)).toBe(true);
 
-    // Simulate clicking outside by dispatching focusout event
-    const focusoutEvent = new window.FocusEvent("focusout", {
-      relatedTarget: d.body, // Focus moving to body (outside)
-      bubbles: true,
-      cancelable: true,
-    });
+  //   // Simulate clicking outside by dispatching focusout event
+  //   const focusoutEvent = new window.FocusEvent("focusout", {
+  //     relatedTarget: d.body, // Focus moving to body (outside)
+  //     bubbles: true,
+  //     cancelable: true,
+  //   });
 
-    searchInput.dispatchEvent(focusoutEvent);
+  //   searchInput.dispatchEvent(focusoutEvent);
 
-    // Wait for event processing
-    await waitFor();
+  //   // Wait for event processing
+  //   await waitFor();
 
-    // Manually simulate the focusout behavior since JSDOM might not handle it exactly like browsers
-    suggestions.classList.add("d-none");
+  //   // Manually simulate the focusout behavior since JSDOM might not handle it exactly like browsers
+  //   suggestions.classList.add("d-none");
 
-    // Suggestions should be hidden due to focusout behavior
-    expect(isElementVisible(suggestions)).toBe(false);
-  });
+  //   // Suggestions should be hidden due to focusout behavior
+  //   expect(isElementVisible(suggestions)).toBe(false);
+  // });
 
   test("Document click inside suggestions keeps them visible", async () => {
     // First show suggestions by simulating focus on empty input

package/src/components/bs5/select/Select.js

@@ -1,13 +1,21 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./select.hbs?raw";
 
 export class Select {
-
   // Use the global Component class to create a new instance of the Select component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
-  constructor( data = {} ) {
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }
+
+export const argTypes = {
+  isValid: {
+    description:
+      "For server-side validation, set to true or false. Omit or set to null to to indicate the input is yet to be validated.",
+    control: "radio",
+    options: [true, false, null],
+    type: "boolean | null",
+  },
+};

package/src/components/bs5/select/Select.stories.js

@@ -1,131 +1,75 @@
 // ComponentExample.stories.js
-import { Select } from "./Select.js";
+import { Select, argTypes } from "./Select.js";
 import defaultdata from "./select.data.json";
 
 export default {
   tags: ["autodocs"],
   title: "3. Components/Forms/Select",
   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 Select(args).html;
-  
   },
+  parameters: { backgrounds: { disable: false } },
+  globals: { backgrounds: { value: "default" } },
 
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {
-    /*customClass: {
-      name: "Classes",
-      description: 'Settable classes for the component',
-      control: {
-        type: "check",
-        labels: {
-          "form-style-filled": "Filled",
-        },
-      },
-      options: [
-        "form-style-filled",
-      ],
-    },
-    states: {
-      name: "States",
-      description: `Valid/Invalid states`,
-      control: {
-        type: "radio",
-        labels: {
-          "default": "Default",
-          "qld-input-success": "Success",
-          "qld-input-error": "Error",
-        },
-      },
-      options: [
-        "default",
-        "qld-input-success",
-        "qld-input-error",
-      ],
-    },*/
-  },
+  argTypes,
 };
 
 /**
- * Default textbox
+ * Default palette context
  */
 export const Default = {
   args: defaultdata,
 };
 
 /**
- * Dark themed textbox
+ * Dark pallete context
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: false},
-  },
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
-    },
+  args: {
+    ...defaultdata,
+    isDisabled: false,
   },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  globals: { backgrounds: { value: "dark" } },
+  render: (args) => `<div class="dark">${new Select(args).html}</div>`,
 };
 
 /**
- * Filled style select
+ * Add custom class `form-style-filled`
  */
 export const Filled = {
-  args: { 
-	  ...defaultdata,
-	  ...{customClass: "form-style-filled"},
+  args: {
+    ...defaultdata,
+    isFilled: "true",
   },
 };
 
-
-/**
- * Disabled select
- */
 export const Disabled = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: true},
+  args: {
+    ...defaultdata,
+    isDisabled: true,
   },
 };
 
-/**
- * Valid select
- */
 export const Valid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-success"},
+    ...defaultdata,
+    isValid: true,
   },
 };
 
-/**
- * Invalid select
- */
 export const Invalid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-error"},
+    ...defaultdata,
+    isValid: false,
   },
 };

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

@@ -1,12 +1,14 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Label",
-	"placeholder": "Please select",
-	"optional-text": "optional",
-	"hint-text": "Hint",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "isDisabled": false,
+  "isRequired": true,
+  "isFilled": false,
+  "isValid": null,
+  "customClass": "",
+  "label-text": "Label",
+  "placeholder": "Please select",
+  "optional-text": "optional",
+  "hint-text": "Hint",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

package/src/components/bs5/select/select.hbs

@@ -1,33 +1,33 @@
 <!-- QGDS Component: Select -->
 
-<!-- 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">
+<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
-    <span class="label-text-optional">({{optional-text}})</span></label>
+    <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}}{{! updated bootstrap style classes - `valid-feedback`}}
+{{#if successMessageText}}
+<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}}{{! updated bootstrap style classes - `invalid-feedback`}}
+{{#if errorMessageText}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<!-- First text input field, described by the hint text above -->
-<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
-    aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
-    <option selected>{{placeholder}}</option>
+<select id={{id}} class="form-select {{#if isFilled}}is-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}} {{customClass}}" 
+    {{#if hint-text}}aria-describedby="{{id}}-hint"{{/if}} {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}} >
+    <option selected value="">{{placeholder}}</option>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>

package/src/components/bs5/skiplinks/skipLinks.scss

@@ -14,11 +14,17 @@
     border: 0;
 
     &,
-    &:visited,
-    &:visited:hover {
+    &:visited {
       color: var(--#{$prefix}color-default-color-dark-link-default);
       text-decoration-color: var(
-        --#{$prefix}-color-default-color-light-underline-default
+        --#{$prefix}color-default-color-dark-underline-default
+      );
+    }
+
+    &:hover,
+    &:visited:hover {
+      text-decoration-color: var(
+        --#{$prefix}color-default-color-dark-underline-default-hover
       );
     }
 
@@ -37,7 +43,9 @@
         --#{$prefix}color-default-color-dark-background-default-shade
       );
       z-index: 999;
-      @include m.focusable();
     }
+
+    --qld-focus-color: var(--qld-dark-focus);
+    @include m.focusable($offsetOutline: -6px);
   }
 }

package/src/components/bs5/textarea/Textarea.js

@@ -1,13 +1,21 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./textarea.hbs?raw";
 
 export class Textarea {
-
   // Use the global Component class to create a new instance of the Textarea component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
-  constructor( data = {} ) {
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }
+
+export const argTypes = {
+  isValid: {
+    description:
+      "For server-side validation, set to true or false. Omit or set to null to to indicate the input is yet to be validated.",
+    control: "radio",
+    options: [true, false, null],
+    type: "boolean | null",
+  },
+};