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

package/src/components/bs5/searchInput/searchInput.scss

@@ -4,8 +4,9 @@
 .qld-search-input {
   // Input variables
   --background-color: var(--#{$prefix}white);
+  --background-color-hover: var(--#{$prefix}neutral-lightest);
   --border-color: var(--#{$prefix}light-border-alt);
-  --border-color-focus: var(--#{$prefix}light-border-alt);
+  --border-color-focus: var(--#{$prefix}default-border);
   --border-color-hover: var(--#{$prefix}light-action-primary-hover);
   --placeholder-color: var(--#{$prefix}light-text-lighter);
   --qld-icon-color: var(--#{$prefix}light-text-lighter);
@@ -13,31 +14,66 @@
   --text-heading: var(--#{$prefix}color-default-color-light-text-heading);
   --suggestions-shadow:
     0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+  --border-radius: 0.25rem;
+  --hover-background-color: var(--#{$prefix}neutral-light);
+  --_size: 3rem;
 
   .dark &,
   .dark-alt & {
-    --border-color: var(--#{$prefix}dark-border-alt);
-    --border-color-focus: var(--#{$prefix}dark-border-alt);
+    --border-color: var(--#{$prefix}dark-alt-border);
+    --border-color-focus: var(--#{$prefix}dark-alt-border);
     --border-color-hover: var(--#{$prefix}dark-action-primary-hover);
-  }
+    --background-color: var(--#{$prefix}dark-background);
+    --text-color: var(--#{$prefix}dark-text-default);
+    --background-color-hover: var(--#{$prefix}dark-background-shade);
 
-  --border-radius: 0.25rem;
-  --_size: 3rem;
+    --qld-selection-bg: var(--qld-dark-background);
+    --qld-selection-color: var(--qld-neutral-white);
+
+    .btn:active {
+      background-color: var(--#{$prefix}neutral-lightest);
+      border-color: var(--#{$prefix}neutral-lightest);
+      text-decoration: underline;
+    }
+    .form-control:focus {
+      border-color: var(--#{$prefix}neutral-lighter);
+      --text-color: var(--#{$prefix}light-text-text);
+    }
+  }
 
   display: flex;
   position: relative;
   border-radius: var(--border-radius);
 
+  .suggestions {
+    transition-behavior: allow-discrete;
+    opacity: 0;
+    display: none;
+    transition:
+      opacity 0.5s,
+      display 0.5s;
+  }
+
   &:focus-within {
-    .suggestions.d-none {
-      display: block !important; // !important to override bootstrap d-none
+    .suggestions {
+      display: block; // !important to override bootstrap d-none
+      opacity: 1;
+      transition:
+        opacity 0.5s,
+        display 0.5s;
     }
+
+    // &:has(#search-button:active) {
+    //   .suggestions {
+    //     display: none;
+    //   }
+    // }
   }
 
   @include mixins.focusable($customSelector: ":has(.form-control:focus)");
 
   &:has(.form-control:focus) {
-    >button {
+    > button {
       border-bottom-right-radius: var(--border-radius);
     }
   }
@@ -65,7 +101,7 @@
     }
 
     &:hover {
-      --background-color: var(--#{$prefix}neutral-lightest);
+      --background-color: var(--background-color-hover);
       --border-color: var(--border-color-hover);
     }
 
@@ -77,7 +113,7 @@
     }
   }
 
-  >button {
+  > button {
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
     padding: 0;
     margin: 0;
@@ -106,7 +142,7 @@
   @include media-breakpoint-up(md) {
     --_size: 3.25rem;
 
-    >button {
+    > button {
       padding-block: calc(0.75rem - 0.125rem);
       padding-inline: var(--qld-btn-padding-x);
       margin: 0;
@@ -133,24 +169,26 @@
     position: absolute;
     inset-inline-start: 0;
     width: 100%;
-    inset-block-start: 7px !important; // to override bootstrap's popperjs default top value
+    inset-block-start: calc(3.25rem + 7px) !important;
     z-index: 1;
     border-radius: 0.5rem;
-    background: var(--#{$prefix}color-default-color-light-background-default-shade);
-    box-shadow: var(--suggestions-shadow);
+    background: var(--#{$prefix}neutral-lightest);
 
-    &>div {
+    & > div:has(> div) {
+      box-shadow: var(--suggestions-shadow);
       border-radius: 0.5rem;
-      border-bottom: 0.25rem solid var(--#{$prefix}color-default-color-light-accent-design-accent);
+      border-bottom: 0.25rem solid
+        var(--#{$prefix}color-default-color-light-accent-design-accent);
     }
 
     .suggestions-category {
       padding-block: 0.75rem;
 
       &:not(:first-of-type) {
-        border-block-start: 1px solid var(--#{$prefix}light-alt-background-shade);
+        border-block-start: 1px solid
+        var(--#{$prefix}light-alt-background-shade);
       }
-
+      
       // Question
       &-label {
         padding-block: 0.75rem;
@@ -167,18 +205,25 @@
             color: var(--#{$prefix}light-text-text);
             width: 100%;
             text-decoration: underline;
-            text-decoration-color: transparent;
             text-decoration-thickness: 0.5px;
+            text-decoration-color: transparent;
             transition:
-              text-decoration-color animation.$duration-fast animation.$timing-function,
-              text-decoration-thickness animation.$duration-fast animation.$timing-function;
+              text-decoration-thickness animation.$duration-fast
+                animation.$timing-function,
+              text-decoration-color animation.$duration-fast
+                animation.$timing-function;
 
-            &:hover {
+            &:hover,
+            &:hover strong {
               text-decoration-color: inherit;
-              text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+              text-decoration-thickness: var(
+                --#{$prefix}link-underline-thickness-hover
+              );
               transition:
-                text-decoration-color animation.$duration-fast animation.$timing-function,
-                text-decoration-thickness animation.$duration-fast animation.$timing-function;
+                text-decoration-thickness animation.$duration-fast
+                  animation.$timing-function,
+                text-decoration-color animation.$duration-fast
+                  animation.$timing-function;
             }
 
             &:not(.view-more) {
@@ -197,7 +242,9 @@
 
               &:hover {
                 &::before {
-                  background-color: var(--#{$prefix}light-action-secondary-hover);
+                  background-color: var(
+                    --#{$prefix}light-action-secondary-hover
+                  );
                 }
               }
             }
@@ -210,10 +257,9 @@
       }
     }
 
-    &:has(.dynamic-suggestions:not(.d-none)) {
+    &:has(.dynamic-suggestions > div) {
       background-color: var(--#{$prefix}default-background);
     }
-
     .dynamic-suggestions {
       .suggestions-category:not(.feature) {
         ul {
@@ -236,7 +282,9 @@
 
     // Featured search result styles
     .feature {
-      background-color: var(--#{$prefix}color-default-color-light-background-default-shade);
+      background-color: var(
+        --#{$prefix}color-default-color-light-background-default-shade
+      );
     }
 
     // Show when active
@@ -250,7 +298,6 @@
       a,
       strong {
         font-size: 1rem;
-        text-decoration: none;
       }
 
       strong {
@@ -273,16 +320,14 @@
             vertical-align: -webkit-baseline-middle;
 
             &:focus {
-              text-decoration-color: inherit;
-              text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
               outline-color: var(--#{$prefix}light-focus);
+              background-color: var(--hover-background-color);
               outline-offset: -4px;
-              background-color: var(--#{$prefix}color-default-color-light-border-default);
             }
           }
 
           &:hover {
-            background-color: var(--#{$prefix}color-default-color-light-border-default);
+            background-color: var(--hover-background-color);
           }
         }
       }
@@ -291,6 +336,14 @@
         strong {
           color: var(--#{$prefix}light-text-text);
         }
+        ul li {
+          &:hover {
+            --hover-background-color: var(--#{$prefix}default-background-shade);
+          }
+          a:focus {
+            --hover-background-color: var(--#{$prefix}default-background-shade);
+          }
+        }
       }
     }
   }
@@ -300,7 +353,7 @@
   }
 
   &.is-filled {
-    --background-color: var(--#{$prefix}neutral-lightest);
+    --background-color: var(--background-color-hover);
 
     .form-control {
       border-width: 0;
@@ -315,9 +368,9 @@
       }
     }
 
-    >button {
+    > button {
       border-radius: 0;
       border-start-end-radius: var(--border-radius);
     }
   }
-}
+}

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

@@ -109,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
@@ -173,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(
@@ -280,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();
@@ -357,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/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/common/focus-styles/focusStyles.mdx

@@ -0,0 +1,20 @@
+import { Meta, Canvas, Controls } from "@storybook/addon-docs/blocks";
+import * as Stories from "./focusStyles.stories";
+
+<Meta of={Stories} />
+
+# Focus Styles
+
+Use the mixin `focusable()` to keep focus styles consistent across all elements including links, buttons, and single-action cards.
+
+## Focus ring color and palette context
+
+Focus ring color is palette context-aware via CSS custom property `--qld-focus-color`. This means it changes color based on the classes `default`, `alt`, `light`, `dark`, and `dark-alt`.
+Because a focus ring is offset beyond an element's boundaries, when a themable component such as a Card is also focusable, it must retain the palette color of its parent.
+For this reason `--qld-focus-color` is set on children of elements with palette classes, not the element itself. Change the values of `paletteClass` and `cardPaletteClass` to see this in effect.
+
+To otherwise force a focus-ring's palette context, you may also use utility classes `qld-focus-light` and `qld-focus-dark`. This should only be done as a final resort however.
+
+<Canvas of={Stories.Default} />
+
+<Controls />

package/src/components/common/focus-styles/focusStyles.stories.js

@@ -0,0 +1,58 @@
+import { Button, defaultArgs as buttonArgs } from "../../bs5/button/Button";
+import { Card } from "../../bs5/card/Card";
+import cardData from "../../bs5/card/card.data.json";
+const cardArgs = cardData.singleAction;
+/**
+ * @import { Meta, StoryObj } from "@storybook/html";
+ */
+
+/**
+ * @typedef {Object} Args
+ * @prop {"focus-light" | "focus-dark" | ""} [utilityClass] - Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [paletteClass]
+ * @prop {"default" | "light" | "alt" | "dark" | "dark-alt" | ""} [cardPaletteClass]
+ */
+
+/**
+ * @type { Meta<Args> }
+ */
+export default {
+  title: "1. Core Styles/Focus Styles",
+  tags: ["autodocs"],
+  argTypes: {
+    utilityClass: {
+      description:
+        "Manually force a light or dark palette context on the focus color. This can be used as escape hatch for when the focus color must be inverted for accessibility reasons.",
+      control: "radio",
+      options: ["qld-focus-light", "qld-focus-dark", null],
+    },
+    paletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt", null],
+    },
+    cardPaletteClass: {
+      control: "select",
+      options: ["default", "light", "alt", "dark", "dark-alt"],
+    },
+  },
+  parameters: { layout: "fullscreen" },
+
+  render: (args) => {
+    return `<div class="p-24 ${args.paletteClass || ""}" style="display: flex; gap: 48px; align-items: flex-start">
+<a href=javascript:void()" class="${args.utilityClass || ""}">Here is a link</a>
+${new Button({ ...buttonArgs, variantClass: `${buttonArgs.variantClass} ${args.utilityClass || ""}` }).html}
+${new Card({ ...cardArgs, variantClass: `${args.cardPaletteClass} ${args.utilityClass || ""}` }).html}
+</div>
+`;
+  },
+};
+
+/** @type {StoryObj<Args>} */
+export const Default = {
+  /**@type Args */
+  args: {
+    utilityClass: "",
+    paletteClass: "",
+    cardPaletteClass: "default",
+  },
+};

package/src/css/functions/_index.scss

@@ -1,3 +1,6 @@
+@forward "color-icon";
 @forward "in-list";
 @forward "remify";
 @forward "snap-line-height";
+@forward "string-replace";
+@forward "svg-encode";

package/src/css/functions/color-icon.scss

@@ -0,0 +1,31 @@
+@use "../../components/bs5/icons/icons.list" as icons;
+@use "../functions/string-replace" as *;
+@use "../functions/in-list" as *;
+@use "../functions/svg-encode" as *;
+@use "bootstrap/scss/functions" as bs;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
+///
+/// This function can create an svg string with a customised fill color by replacing all instances of the string "currentColor" with the chosen color.
+/// This is useful when creating svg data urls for use in background property, where currentColor does not work.
+/// Use it together with svg-encode for fun and profit.
+/// @param {string} $name - The name of the QGDS icon
+/// @param {color} $color -The desired new color. Must be of type color (eg hex or rgb notation) not a CSS custom property.
+/// @return {string} - the new svg string with "currentColor" replaced with chosen color
+@function color-icon($name, $color) {
+  $_validNames: map.keys(icons.$icon-names);
+  // validate $name
+  @if ($name and not in-list($name, $_validNames)) {
+    @error "Invalid parameter $name: " + $name;
+  }
+
+  // validate color is valid.
+  @if (meta.type-of($color) != "color") {
+    @error "Invalid parameter $color: " + $name;
+  }
+
+  $svg: map.get(icons.$icon-names, $name);
+  @return string-replace($svg, "currentColor", "#{$color}");
+}