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

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

@@ -19,7 +19,7 @@ export default {
           ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({ ...args, label: "Label", class: [{ small: false }, { "view-all": false }] }).html}
+          ${new CallToAction({ ...args, label: "Label", arialabel: "View more information", class: [{ small: false }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>
@@ -134,7 +134,7 @@ export const Small = {
           ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({ ...args, label: "Label", class: [{ small: true }, { "view-all": false }] }).html}
+          ${new CallToAction({ ...args, label: "Label", arialabel: "View more information", class: [{ small: true }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>

package/src/components/bs5/card/card.scss

@@ -29,7 +29,7 @@
   --#{$prefix}card-group-margin: #{$card-group-margin};
   --#{$prefix}card-link-color: var(--#{$prefix}light-link);
   --#{$prefix}card-date-color: var(--#{$prefix}dark-grey-muted);
-  --#{$prefix}card-footer-border: var(--#{$prefix}light-border);
+  --#{$prefix}card-footer-border: var(--#{$prefix}neutral-lighter);
   --#{$prefix}card-img-border-radius: 0px 0px 6.0882800609%/10.8108108108% 0px; // from QHDS website
   --#{$prefix}card-img-overlay-color: var(--#{$prefix}dark-background);
   --#{$prefix}link-hover-colour: var(--#{$prefix}light-action-primary-hover);
@@ -113,7 +113,7 @@
   }
   &-alt {
     --#{$prefix}card-bg: var(--#{$prefix}light-alt-background);
-    --#{$prefix}card-footer-border: var(--#{$prefix}soft-grey);
+    --#{$prefix}card-footer-border: var(--#{$prefix}light-border-alt);
     --#{$prefix}card-icon-background-color: var(
       --#{$prefix}light-alt-background-shade
     );

package/src/components/bs5/dateinput/Dateinput.js

@@ -6,44 +6,7 @@ export class Dateinput {
   // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
   constructor(data = {}) {
-    var component = new Component(template, data);
-    this.dateInputs();
-    return component;
-  }
-
-  dateInputs() {
-    let elements = document.querySelectorAll(
-      ".dayinput, .monthinput, .yearinput",
-    );
-
-    Array.from(elements).forEach(function (element) {
-      element.addEventListener("keyup", function () {
-        const input = event.currentTarget;
-        let max = 0;
-        if (input.value) {
-          if (input.classList.contains("dayinput")) {
-            max = 31;
-          } else if (input.classList.contains("monthinput")) {
-            max = 12;
-          }
-          if (input.classList.contains("yearinput")) {
-            max = 2030;
-          }
-          if (!parseInt(input.value)) {
-            input.classList.add("qld-input-error");
-            input.blur();
-          } else {
-            if (
-              parseInt(input.value) > max &&
-              !input.classList.contains("qld-input-error")
-            ) {
-              input.classList.add("qld-input-error");
-              input.blur();
-            }
-          }
-        }
-      });
-    });
+    return new Component(template, data);
   }
 }
 

package/src/components/bs5/dateinput/Dateinput.mdx

@@ -0,0 +1,27 @@
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Story,
+  Stories,
+  Source,
+} from "@storybook/addon-docs/blocks";
+import * as dateinputStories from "./Dateinput.stories";
+
+<Meta of={dateinputStories} />
+
+# Date input
+
+The Date input consists of 3 separate text inputs.
+
+## Behaviour
+
+- Only numeric values may be typed into each these, and any out-of-range value will be converted into an in-range value.
+- Additionally, on blur the value will be padded with leading zeroes if needed.
+- If a min and/or max value is passed via `yearMin` and `yearMax`, these are also used to constrain the input value.
+
+<Canvas of={dateinputStories.Default} />
+
+<Controls />
+
+<Stories />

package/src/components/bs5/dateinput/Dateinput.stories.js

@@ -1,6 +1,6 @@
-// ComponentExample.stories.js
 import { Dateinput } from "./Dateinput.js";
 import defaultdata from "./dateinput.data.json";
+import { expect } from "storybook/test";
 
 export default {
   tags: ["autodocs"],
@@ -17,17 +17,18 @@ export default {
 
     return new Dateinput(args).html;
   },
-
-  //https://storybook.js.org/docs/api/arg-types
   argTypes: {},
   globals: { backgrounds: { value: "default" } },
-  parameters: { backgrounds: { disable: false } },
+  parameters: {
+    backgrounds: { disable: false },
+  },
 };
 
 /**
  * Default Date inputs
  */
 export const Default = {
+  tags: ["!autodocs"],
   args: defaultdata,
   globals: { backgrounds: { value: "default" } },
 };
@@ -91,3 +92,46 @@ export const Invalid = {
     ...{ customClass: "qld-input-error" },
   },
 };
+
+export const InputValuesArePaddedWithLeadingZeroesOnBlur = {
+  tags: ["!autodocs"],
+  args: defaultdata,
+  play: async ({ canvas, userEvent }) => {
+    const dayInput = document.getElementById(`${defaultdata.id}-dayinput`);
+    const monthInput = document.getElementById(`${defaultdata.id}-monthinput`);
+    const yearInput = document.getElementById(`${defaultdata.id}-yearinput`);
+
+    await userEvent.type(dayInput, "4");
+    await userEvent.tab();
+    await userEvent.type(monthInput, "4");
+    await userEvent.tab();
+    await userEvent.type(yearInput, "42");
+    await userEvent.tab();
+
+    await expect(dayInput.value).toBe("04");
+    await expect(monthInput.value).toBe("04");
+    await expect(yearInput.value).toBe("0042");
+  },
+};
+
+export const OutOfRangeValuesAreCorrected = {
+  tags: ["!autodocs"],
+  args: {
+    ...defaultdata,
+    ...{ yearMin: "1000", yearMax: "2000" },
+  },
+  play: async ({ canvas, userEvent }) => {
+    const dayInput = document.getElementById(`${defaultdata.id}-dayinput`);
+    const monthInput = document.getElementById(`${defaultdata.id}-monthinput`);
+    const yearInput = document.getElementById(`${defaultdata.id}-yearinput`);
+
+    await userEvent.type(dayInput, "42");
+    await userEvent.type(monthInput, "42");
+    await userEvent.type(yearInput, "42");
+    await userEvent.tab();
+
+    await expect(dayInput.value).toBe("31");
+    await expect(monthInput.value).toBe("12");
+    await expect(yearInput.value).toBe("1000");
+  },
+};

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

@@ -12,5 +12,7 @@
   "optional-text": "optional",
   "hint-text": "(dd/mm/yyyy)",
   "successMessageText": "Success message",
-  "errorMessageText": "Error message"
+  "errorMessageText": "Error message",
+  "yearMin": "",
+  "yearMax": ""
 }

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

@@ -0,0 +1,91 @@
+export function initDateInput() {
+  const dateContainers = document.querySelectorAll(".date-container");
+
+  /**
+   * @param {InputEvent} e
+   * @returns void
+   */
+  const inputHandler = (e) => {
+    // verify the event target is what we expect.
+    if (!(e.target.tagName === "INPUT" && e.target.type === "text")) {
+      return;
+    }
+
+    /**
+     * @type HTMLInputElement
+     */
+    const input = e.target;
+    const { value, min, max, pattern } = input;
+    const previousValue = input.dataset.previousValue || "";
+    // enforce the validation attributes
+    if (max && parseInt(value) > parseInt(max)) {
+      input.dataset.previousValue = input.value = max;
+      return;
+    }
+
+    if (
+      min &&
+      parseInt(value) !== 0 && // Must allow typing leading zeroes
+      value.length >= min.length &&
+      parseInt(value) < parseInt(min)
+    ) {
+      input.dataset.previousValue = input.value = min;
+      return;
+    }
+
+    if (
+      value &&
+      value !== "" &&
+      parseInt(value) !== 0 &&
+      !RegExp(pattern).test(value)
+    ) {
+      input.value = previousValue;
+      return;
+    }
+
+    // all good - update previousValue with current value
+    input.dataset.previousValue = input.value = input.value.trim();
+  };
+
+  /**
+   * @param {FocusEvent} e
+   * @returns void
+   */
+  const focusOutHandler = (e) => {
+    // Because format is dd/mm/yyyy we want to add leading zeroes to single digits
+    // verify the event target is what we expect
+    if (!(e.target.tagName === "INPUT" && e.target.type === "text")) {
+      return;
+    }
+
+    /** @type {HTMLInputElement} */
+    const input = e.target;
+    const { min, max } = input;
+    const minLength = input.minLength || 0;
+    const value = (input.value || "").trim();
+
+    if (!value || parseInt(value) === 0) {
+      input.dataset.previousValue = input.value = "";
+      return;
+    }
+
+    // If value is less than the min, bump up to min and add padding.
+    if (min && parseInt(value) < min) {
+      input.dataset.previousValue = input.value = min.padStart(minLength, "0");
+      return;
+    }
+
+    // If value exceeds max, bring it down to max and add padding
+    if (max && parseInt(value) > max) {
+      input.dataset.previousValue = input.value = max.padStart(minLength, "0");
+      return;
+    }
+
+    input.dataset.previousValue = input.value = value.padStart(minLength, "0");
+  };
+
+  dateContainers.forEach((dateContainer) => {
+    dateContainer.addEventListener("input", inputHandler);
+    dateContainer.addEventListener("focusout", focusOutHandler);
+  });
+}

package/src/components/bs5/dateinput/dateinput.hbs

@@ -1,8 +1,6 @@
 <!-- QGDS Component: Date input -->
 
-<label id="{{id}}-label"
-    class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="{{id}}">
+<label id="{{id}}-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>
@@ -12,53 +10,49 @@
 {{#if hint-text}}
 <span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
-
 {{#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`}}
+{{else if successMessageText}}{{! updated bootstrap style classes - `valid-feedback`}}
 <div class="valid-feedback">{{successMessageText}}</div>
-{{/if}}{{/contains}}
-
+{{/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`}}
+{{else if errorMessageText}}{{! updated bootstrap style classes - `invalid-feedback`}}
 <div class="invalid-feedback">{{errorMessageText}}</div>
-{{/if}}{{/contains}}
+{{/contains}}
 
 <div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
     <!-- day group -->
     <div class="day-group">
         <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
         <div>
-            <input id="{{id}}-dayinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
-                inputmode="numeric" maxlength="2"
-                class="qld-text-input form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
-                {{/if}}>
+            <input id="{{id}}-dayinput" aria-labelledby="{{id}}-label {{id}}-dayinput-label" placeholder="{{day-placeholder}}" type="text"
+                inputmode="numeric" maxlength="2" minlength="2" min="1" max="31" pattern="^(0?[1-9]|[12][0-9]|3[01])$"
+                class="form-control dayinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
+                {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="day"
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
         </div>
     </div>
     <!-- month group -->
     <div class="date-group">
         <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
         <div>
-            <input id="{{id}}-monthinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
-                type="text" inputmode="numeric" maxlength="2"
-                class="qld-text-input form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
-                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"
-                {{/if}}>
+            <input id="{{id}}-monthinput" aria-labelledby="{{id}}-label {{id}}-monthinput-label" placeholder="{{month-placeholder}}"
+                type="text" inputmode="numeric" maxlength="2" minlength="2" min="1" max="12" pattern="^(0?[1-9]|[1][0-2])$"
+                class="form-control monthinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} 
+                {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}" ref="month"
+                aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
         </div>
     </div>
     <!-- year group -->
     <div class="date-group">
-        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
+        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label qld-text-input-label">Year</label>
         <div class="year-label">
-            <input id="{{id}}-yearinput" aria-required="true" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
-                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
-                class="qld-text-input form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
-                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
-                isRequired}}required{{/if}}>
+            <input id="{{id}}-yearinput" aria-labelledby="{{id}}-label {{id}}-yearinput-label"
+                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4" minlength="4" pattern="[0-9]*" 
+                {{#if yearMin}}min="{{yearMin}}"{{/if}} {{#if yearMax}}max="{{yearMax}}"{{/if}}
+                class="form-control yearinput {{customClass}} {{#if isFilled}}form-style-filled{{/if}} {{#if isValid}}is-valid{{else}}{{#ifCond isValid "===" false}}is-invalid{{/ifCond}}{{/if}}"
+                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required{{/if}}>
         </div>
     </div>
 </div>

package/src/components/bs5/formcheck/formcheck.scss

@@ -150,6 +150,11 @@ $form-check-inline-margin-end: 1rem;
     &::placeholder {
       color: var(--#{$prefix}placeholder-color-focus);
     }
+
+    .dark &,
+    .dark-alt & {
+      @extend %qld-palette-default;
+    }
   }
 
   &:disabled,

package/src/components/bs5/globalAlert/globalAlert.hbs

@@ -3,7 +3,13 @@
 <div class="global-alert-include">
   {{#each alertItems}}
   <section role="region" class="global-alert alert container-full d-none {{variant}}" data-variant="{{variant}}"
-    aria-label="{{ariaLabel}}" {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
+    {{#if ariaLabel}} aria-label="{{ ariaLabel }}"
+    {{~else ifCond variant "==" "global-alert-critical"}} aria-label="Critical alert"
+    {{~else ifCond variant "==" "global-alert-info"}} aria-label="Informational alert"
+    {{~else ifCond variant "==" "global-alert-warning"}} aria-label="Warning alert"
+    {{~else}} aria-label="Informational alert"
+    {{~/if}}
+    {{#if id}} data-id="{{id}}" {{/if}}{{#if dismissedExpiryDays}}
     data-expiry-days="{{dismissedExpiryDays}}" {{/if}}>
     <div class="qld-global-alert-main">
       <div class="global-alert-icon">
@@ -13,6 +19,7 @@
         <span class="qld-icon qld-icon-sm qld-icon-alert-information" aria-hidden="true"></span>
         {{else ifCond variant '==' 'global-alert-warning'}}
         <span class="qld-icon qld-icon-sm qld-icon-alert-warning" aria-hidden="true"></span>
+        {{else}}<span class="qld-icon qld-icon-sm qld-icon-alert-information" aria-hidden="true"></span>
         {{/ifCond}}
       </div>
 

package/src/components/bs5/globalAlert/globalAlert.scss

@@ -1,3 +1,5 @@
+@use "../../../css/mixins" as m;
+
 .global-alert {
   line-height: 1.25rem;
   border-radius: 0;
@@ -35,6 +37,7 @@
   }
 
   .global-alert-content {
+    --qld-focus-color: #000;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -49,8 +52,8 @@
       text-underline-offset: 0.3rem;
     }
 
-    a:focus {
-      outline-color: #000;
+    a {
+      @include m.focusable($outlineWidth: 2px);
     }
 
     .global-alert-action {
@@ -103,11 +106,8 @@
         mask-size: contain;
       }
 
-      &:focus {
-        outline: 3px solid;
-        outline-offset: 0;
-        box-shadow: none;
-      }
+      @include m.focusable($outlineWidth: 2px);
+      box-shadow: none;
 
       @include media-breakpoint-down(lg) {
         &:hover {
@@ -119,7 +119,7 @@
 
   &.global-alert-critical {
     --#{$prefix}icon-color: #{$core-default-color-neutral-white};
-    //
+
     background-color: $qld-notify-warning;
     color: var(--#{$prefix}white);
     font-size: 0.875em;
@@ -129,12 +129,6 @@
       background-color: var(--#{$prefix}white);
     }
 
-    a {
-      &:focus {
-        outline-color: #fff;
-      }
-    }
-
     .global-alert-action a {
       color: var(--#{$prefix}white);
       text-decoration-color: var(--#{$prefix}white);
@@ -145,18 +139,19 @@
     }
 
     .global-alert-close .btn-close {
-      &:focus {
-        outline-color: #ffffff;
-      }
       &::before {
         background-color: #ffffff;
       }
     }
+
+    a {
+      --qld-focus-color: #ffffff;
+    }
   }
 
   &.global-alert-warning {
     --#{$prefix}icon-color: #{$core-default-color-neutral-black};
-    //
+
     background-color: $qld-notify-alert;
     color: var(--#{$prefix}body-color);
     font-size: 0.875em;
@@ -170,7 +165,7 @@
 
   &.global-alert-info {
     --#{$prefix}icon-color: #{$core-default-color-neutral-black};
-    //
+
     background-color: $qld-general-info-alert;
     color: var(--#{$prefix}body-color);
     font-size: 0.875em;

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

@@ -34,6 +34,7 @@ export default {
 
       if (args.variant && storyName === "Default") {
         args.alertItems[0].variant = args.variant || "global-alert-critical";
+        args.alertItems[0].ariaLabel = "";
       }
 
       // Render the story with the updated args.

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

@@ -124,8 +124,13 @@ describe("initGlobalAlerts", () => {
       beforeParse(window) {
         // Ensure console methods exist
         window.console = console;
-        // Mock localStorage before any scripts run
-        window.localStorage = localStorageMock;
+        // Mock localStorage by redefining localStorage property entirely
+        Object.defineProperty(window, "localStorage", {
+          value: localStorageMock,
+          configurable: true,
+          enumerable: true,
+          writable: true,
+        });
         Object.defineProperty(window, "localStorage", {
           value: localStorageMock,
           writable: true,
@@ -139,11 +144,11 @@ describe("initGlobalAlerts", () => {
     localStorage = localStorageMock;
 
     // Set global references for initGlobalAlerts
-     
+
     global.document = d;
-     
+
     global.window = window;
-     
+
     global.localStorage = localStorageMock;
 
     // Clear localStorage before each test

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

@@ -30,12 +30,11 @@
   ul,
   ol {
     line-height: 1.5;
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
   }
 
+  &> :last-child {
+    margin-bottom: 0;
+  }
   // Close button for dismissible alerts
   .btn-close {
     position: absolute;

package/src/components/bs5/inpagenav/inpagenav.scss

@@ -14,7 +14,7 @@
   --#{$prefix}inpage-nav-border-color: var(--#{$prefix}dark-action-primary);
 
   .nav {
-    --#{$prefix}nav-link-color: var(--#{$prefix}white);
+    --#{$prefix}nav-link-color: var(--#{$prefix}neutral-white);
     --#{$prefix}nav-link-hover-color: var(--#{$prefix}brand-accent);
   }
 }
@@ -40,12 +40,20 @@
 
   .nav-item {
     margin-top: 0;
+    display: inline-flex;
+
     .nav-link {
       padding-top: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-bottom: var(--#{$prefix}inpage-nav-link-padding-y);
       padding-left: var(--#{$prefix}inpage-nav-title-padding-left);
+      padding-right: 0;
       color: var(--#{$prefix}nav-link-color);
       text-decoration-line: underline;
+
+      &:hover,
+      &:visited {
+        text-decoration-color: var(--qld-link-underline);
+      }
     }
 
     &:first-child .nav-link {

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

@@ -51,7 +51,7 @@
       --#{$prefix}color-default-color-light-text-heading
     );
     --#{$prefix}btn-close-focus-shadow: none;
-    --#{$prefix}btn-close-focus-border: var(--#{$prefix}focus-color) solid 3px;
+    --#{$prefix}btn-close-focus-border: var(--#{$prefix}color-default-color-light-focus-default) solid 3px;
   }
 }