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

package/src/components/bs5/footer/customLinks.hbs

@@ -1,5 +1,5 @@
 {{#if customLinks }}
-    <ul class="nav footer-link-list footer-link-list--custom flex-column">      
+    <ul class="nav footer-link-list footer-link-list--custom flex-column">
         {{#each customLinks }}
         <li><a class="nav-link" href="{{ link }}" {{#if target }} target="_blank" {{/if}}>{{ label }}</a></li>
         {{/each }}

package/src/components/bs5/footer/followLinks.hbs

@@ -6,7 +6,7 @@
               <span class="qld-icon qld-icon-md qld-icon-{{icon}} d-lg-none" aria-hidden="true"></span>
               <span class="qld-icon qld-icon-sm qld-icon-{{icon}} d-none d-lg-block" aria-hidden="true"></span>
               <span class="nav-link-label d-none d-lg-block">{{ label }}</span>
-              <span class="sr-only">{{ label }}</span>
+              <span class="sr-only">{{isdefined accessibleLabel label}}</span>
           </a>
       </li>
     {{/each }}

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

@@ -61,18 +61,21 @@
   "followLinks": [
     {
       "label": "Facebook",
+      "accessibleLabel": "Facebook page",
       "link": "#",
       "icon": "facebook",
       "target": "_blank"
     },
     {
       "label": "LinkedIn",
+      "accessibleLabel": "LinkedIn page",
       "link": "#",
       "icon": "linkedin",
       "target": "_blank"
     },
     {
       "label": "X (Twitter)",
+      "accessibleLabel": "X page",
       "link": "#",
       "icon": "x",
       "target": "_blank"

package/src/components/bs5/formcheck/_form-variables.scss

@@ -1,5 +1,13 @@
 // Expand this file with all themable shared form variables
 // @extend %form-variables in all input and form components.
+@use "../../../css/functions" as f;
+
+/// Custom colored icons for dropdown chevron in all states.
+/// Select input cannot use ::before or ::after so need a svg cbackground image via url(data);
+@function _dropdown-icon($color) {
+  @return url(f.svg-encode(f.color-icon("chevron-down", $color)));
+}
+
 %form-control-variables {
   &,
   .default &,
@@ -108,6 +116,34 @@
   }
 }
 
+%form-select-variables {
+  &,
+  .default &,
+  .light &,
+  .alt & {
+    --#{$prefix}icon-url: #{_dropdown-icon($qld-light-action-secondary)};
+    --#{$prefix}icon-hover-url: #{_dropdown-icon(
+        $qld-light-action-secondary-hover
+      )};
+    --#{$prefix}icon-disabled-url: #{_dropdown-icon(
+        $color-default-color-light-text-lighter
+      )};
+    --#{$prefix}icon-error-url: #{_dropdown-icon($qld-notify-warning)};
+    --#{$prefix}icon-success-url: #{_dropdown-icon($qld-notify-success)};
+    --#{$prefix}icon-focus-url: #{_dropdown-icon($qld-light-action-secondary)};
+  }
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}icon-url: #{_dropdown-icon($qld-dark-action-secondary)};
+    --#{$prefix}icon-hover-url: #{_dropdown-icon($qld-dark-action-secondary)};
+    --#{$prefix}icon-disabled-url: #{_dropdown-icon(
+        $color-default-color-dark-text-lighter
+      )};
+    --#{$prefix}icon-focus-url: #{_dropdown-icon($qld-light-action-secondary)};
+  }
+}
+
 %form-valid-feedback-variables {
   &,
   :is(.default, .light, .alt) & {

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

@@ -1,5 +1,6 @@
 @use "../../../css/mixins" as m;
 @use "../../../css/functions" as f;
+@use "../icons/icons.list" as icons;
 @import "form-variables";
 // NTGOV Form Controls, radios, checkboxes and input groups
 // https://getbootstrap.com/docs/5.2/forms/form-control/#variables
@@ -149,6 +150,11 @@ $form-check-inline-margin-end: 1rem;
     &::placeholder {
       color: var(--#{$prefix}placeholder-color-focus);
     }
+
+    .dark &,
+    .dark-alt & {
+      @extend %qld-palette-default;
+    }
   }
 
   &:disabled,
@@ -172,7 +178,10 @@ $form-check-inline-margin-end: 1rem;
     ); // already scoped to .valid/.invalid.
     // USe the same padding value as default state, and remove the background image icon.
     padding: $_padding;
-    background-image: none;
+
+    &:not(.form-select, .qld-select) {
+      background-image: none;
+    }
 
     &:focus {
       border-color: var(
@@ -190,38 +199,74 @@ $form-check-inline-margin-end: 1rem;
 .form-select,
 .qld-select {
   @extend %form-control;
+  @extend %form-select-variables;
+
+  $_background-position: right 1rem center;
+  $_background-size: f.remify(20px);
 
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23008635' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
+  background-image: var(--#{$prefix}icon-url);
   background-repeat: no-repeat;
   appearance: none;
-  background-position: right 1rem center;
-  background-size: f.remify(20px);
+  background-position: $_background-position;
+  background-size: $_background-size;
   background-origin: border-box;
   width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    --#{$prefix}icon-url: var(--#{$prefix}icon-hover-url);
+  }
 
   &.disabled,
   &:disabled,
   &.is-disabled {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23636363' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
+    --#{$prefix}icon-url: var(--#{$prefix}icon-disabled-url);
   }
 
+  .was-validated &:invalid,
   &.qld-input-error,
   &.is-invalid {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23E22339' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
+    --#{$prefix}icon-url: var(--#{$prefix}icon-error-url);
+  }
 
-    &:not([multiple]):not([size]),
-    &:not([multiple])[size="1"] {
-      background-size: 1rem auto;
-    }
+  .was-validated &:valid,
+  &.qld-input-success,
+  &.is-valid {
+    --#{$prefix}icon-url: var(--#{$prefix}icon-success-url);
   }
 
+  .was-validated &:invalid,
+  &.qld-input-error,
+  &.is-invalid,
+  .was-validated &:valid,
   &.qld-input-success,
   &.is-valid {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23339d37' d='M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z'/%3E%3C/svg%3E");
+    // some bs specificity war stuff
+    &:not([multiple]):not([size]) {
+      padding-right: $input-padding-x;
+      background-position: $_background-position;
+      background-size: $_background-size;
+    }
+  }
+
+  &:focus {
+    --#{$prefix}icon-url: var(--#{$prefix}icon-focus-url);
+  }
+
+  // A select doesn't have a `placeholder` attribute, instead it may have an option with a null or empty string value, which is used instead.
+  &:has(option[value=""]:checked) {
+    color: var(--#{$prefix}placeholder-color);
+
+    .dark &:focus {
+      --#{$prefix}placeholder-color: #{$color-default-color-light-text-lighter};
+    }
+  }
+
+  > option {
+    color: $color-default-color-light-text-default;
 
-    &:not([multiple]):not([size]),
-    &:not([multiple])[size="1"] {
-      background-size: 1rem auto;
+    &[value=""] {
+      color: $color-default-color-light-text-lighter;
     }
   }
 }

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/header/header.scss

@@ -425,9 +425,8 @@
     position: absolute;
     left: 0;
     right: 0;
-    top: 0.4rem;
     padding: 1rem var(--qld-container-padding-x);
-    background-color: var(--#{$prefix}header-color-bg);
+    background-color: var(--#{$prefix}body-bg);
 
     &.is-open {
       display: block;

package/src/components/bs5/icons/_icons.list.js

@@ -1,10 +1,4 @@
 export default [
-  "spinner-step-1",
-  "spinner-step-2",
-  "spinner-step-3",
-  "spinner-step-4",
-  "x",
-  "youtube",
   "accessibility",
   "alert-cancel",
   "alert-danger",
@@ -94,6 +88,10 @@ export default [
   "show",
   "sort-alpha",
   "speech",
+  "spinner-step-1",
+  "spinner-step-2",
+  "spinner-step-3",
+  "spinner-step-4",
   "spreadsheet",
   "status-cancel",
   "status-danger",
@@ -110,5 +108,7 @@ export default [
   "video",
   "view-all",
   "wheelchair",
-  "zoom",
+  "x",
+  "youtube",
+  "zoom"
 ];