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

package/dist/components/bs5/button/button.hbs

@@ -10,7 +10,7 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

package/dist/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/dist/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/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.12","branch":"HEAD","tag":"v2.0.12","commit":"8a144c9ab3a88493219cbc779eb61a0ca8b8d059","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.0","branch":"HEAD","tag":"v2.1.0","commit":"1610f625e3e2ba5c9420ba3ef0ebb53ed35820f6","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/inpageAlert/inpageAlert.hbs

@@ -1,5 +1,13 @@
-<div class="alert {{variantClass}} {{customClass}}" role="alert" 
-    {{#if alertType}}aria-label="{{alertType}}"{{/if}}>
+<div class="alert {{variantClass}} {{customClass}}" role="alert"
+    {{#if ariaLabel}}
+    aria-label="{{ ariaLabel }}"
+    {{else}}
+    {{#ifCond variantClass "==" "alert-info"}}aria-label="Information alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-success"}}aria-label="Success alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-error"}}aria-label="Error alert"{{/ifCond}}
+    {{#ifCond variantClass "==" "alert-warning"}}aria-label="Warning alert"{{/ifCond}}
+    {{/if}}
+>
     {{#if heading}}
         {{#if headingTag}}
             <{{headingTag}} class="alert-heading">{{{ heading }}}</{{headingTag}}>

package/dist/components/bs5/searchInput/searchInput.hbs

@@ -3,38 +3,40 @@
 -->
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
-        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
     <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
         <span class="btn-icon"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
-    <div class="suggestions suggestions__group d-none default">
+    
+    <div class="suggestions suggestions__group default">
         {{#if hasDefaultSuggestions}}
             <div class="default-suggestions">
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.popularServices}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.popularServicesLink}}
-                            <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
-
+                {{#if defaultSuggestions.categories}}
                 <div class="suggestions-category">
                     <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
                     <ul>
                         {{#each defaultSuggestions.categories}}
-                        <li><a href="{{link}}">{{title}}</a></li>
+                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
                         {{/each}}
                         {{#if defaultSuggestions.categoriesLink}}
-                            <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                            <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
                         {{/if}}
                     </ul>
                 </div>
+                {{/if}}
             </div>
         {{/if}}
         {{#if hasDynamicSuggestions}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.12",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",

package/dist/sample-data/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/dist/sample-data/inpageAlert/inpageAlert.data.json

@@ -1,6 +1,6 @@
 {
   "variantClass": "alert-success",
-  "alertType": "",
+  "ariaLabel": "Success alert",
   "heading": "Alert heading",
   "headingTag": "h2",
   "content": "<p>This is an alert notice with some important information. <a href='#'>Find out more</a>.</p>"

package/dist/sample-data/searchInput/searchInput.data.json

@@ -6,6 +6,7 @@
   "buttonType": "submit",
   "buttonLabel": "Search",
   "ariaLabel": "Search website",
+  "placeholder": "",
   "tags": {
     "collection": "qgov~sp-search",
     "profile": "qld",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.12",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -85,10 +85,9 @@ $expander-icon-color: $qld-light-link;
         );
         background-color: $core-default-color-neutral-lighter;
       }
-      @include m.focusable($offsetOutline: 3px);
-      &:focus {
-        outline-offset: -3px;
-      }
+
+      --qld-focus-color: var(--qld-light-focus);
+      @include m.focusable($offsetOutline: -6px);
     }
   }
   .breadcrumb-collapse-wrapper {

package/src/components/bs5/button/Button.js

@@ -1,13 +1,39 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./button.hbs?raw";
+import data from "./button.data.json";
 
-export class Button {
+/**
+ * @typedef {Object} ButtonArgs
+ * @prop {"btn-primary" | "btn-secondary" | "btn-tertiary" } variantClass
+ * @prop {string} label The label description
+ * @prop {string} [onclick]
+ * @prop {boolean} [islink]
+ * @prop {boolean} [isdisabled]
+ * @prop {boolean} [isProgress]
+ * @prop {string} [progressLabel]
+ * @prop {string} [iconClass]
+ * @prop {"leading" | "trailing"} [iconPosition]
+ * @prop {string} [href]
+ * @prop {"_blank" | "_self" | "_parent" | "_top" | "_unfencedTop" } [target]
+ */
+
+/**  @type {ButtonArgs}*/
+export const defaultArgs = {
+  ...data,
+  onclick: "() => false",
+  islink: false,
+  href: "#",
+  target: null,
+};
 
+export class Button {
   // Use the global Component class to create a new instance of the Button component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
-  
-  constructor( data = {} ) {
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+  /**
+   *
+   * @param {ButtonArgs} data
+   */
+  constructor(data = defaultArgs) {
     return new Component(template, data);
   }
-
 }

package/src/components/bs5/button/button.hbs

@@ -10,7 +10,7 @@
 
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
     {{#if isprogress}}
       {{~>progressSpinner~}}
     {{else}}

package/src/components/bs5/button/button.scss

@@ -340,11 +340,6 @@ a.btn,
     }
   }
 
-  &:focus {
-    outline: var(--#{$prefix}dark-focus) solid 3px;
-    outline-offset: 2px;
-  }
-
   // Progress state focus for dark mode
   &.btn-progress:focus {
     outline: var(--#{$prefix}dark-focus) solid 3px;

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

@@ -303,6 +303,8 @@
     a {
       color: var(--#{$prefix}card-link-color);
       text-decoration-color: var(--#{$prefix}card-link-color);
+      outline-style: none;
+
       &:visited,
       &:hover,
       &:visited:hover {

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
@@ -172,7 +173,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 +194,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/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"
 ];