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

package/.storybook/preview.js

@@ -1,11 +1,11 @@
 import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
 import "../src/css/main.scss";
 import { withThemeByClassName } from "@storybook/addon-themes";
-// import { allBackgrounds } from "./modes.js";
 import {
   withDynamicTheme,
   dynamicThemeGlobalTypes,
 } from "./dynamicThemeDecorator.js";
+import { breakpoints } from "../src/js/constants.js";
 
 // Check if dynamic theme should be enabled via environment variable
 const ENABLE_DYNAMIC_THEME = import.meta.env.ENABLE_DYNAMIC_THEME;
@@ -48,12 +48,21 @@ const preview = {
     viewport: {
       options: {
         //QLD-media Breakpoints
-        small: { name: "Small", styles: { width: "400px", height: "800px" } },
-        medium: { name: "Medium", styles: { width: "700px", height: "800px" } },
-        large: { name: "Large", styles: { width: "992px", height: "800px" } },
+        small: {
+          name: "Small",
+          styles: { width: `${breakpoints.sm}px`, height: "800px" },
+        },
+        medium: {
+          name: "Medium",
+          styles: { width: `${breakpoints.md}px`, height: "800px" },
+        },
+        large: {
+          name: "Large",
+          styles: { width: `${breakpoints.lg}px`, height: "800px" },
+        },
         xlarge: {
           name: "Extra Large",
-          styles: { width: "1312px", height: "1000px" },
+          styles: { width: `${breakpoints.xl}px`, height: "1000px" },
         },
         xxlarge: {
           name: "Extra Extra Large",
@@ -61,7 +70,7 @@ const preview = {
         },
         navbreakpoint: {
           name: "Nave Breakpoint",
-          styles: { width: "992px", height: "800px" },
+          styles: { width: `${breakpoints.lg}px`, height: "800px" },
         },
         ...INITIAL_VIEWPORTS,
       },

package/dist/assets/components/bs5/callToAction/callToAction.hbs

@@ -1,8 +1,8 @@
 <a class="qld-cta-link {{getClassNames "small, view-all" class}}"
     {{#if id}}id="{{id}}"{{/if}}
-    href="{{href}}" 
-    target="{{target}}" 
-    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    href="{{href}}"
+    target="{{target}}"
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}}
     >
      {{label}}
     <span class="icon" aria-hidden="true"></span>

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

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

package/dist/assets/components/bs5/pagination/pagination.hbs

@@ -23,8 +23,13 @@ Reference: https://getbootstrap.com/docs/5.0/components/pagination/
             {{! More button }}
             <span></span>
             {{else}}
-            {{! Page button }}
-            <a class="page-link" href="{{href}}" aria-label="{{arialabel}}">{{ linktext }}</a>
+                {{#ifCond "active" "in" customClasses}}
+                {{! Active page - not a link }}
+                <span class="page-link" aria-current="page" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}, current page{{/if}}">{{ linktext }}</span>
+                {{else}}
+                {{! Page button }}
+                <a class="page-link" href="{{href}}" aria-label="{{#if arialabel}}{{arialabel}}{{else}}Page {{linktext}}{{/if}}">{{ linktext }}</a>
+                {{/ifCond}}
             {{/if}}
         </li>
 

package/dist/assets/components/bs5/promotionalPanel/promotionalPanel.hbs

@@ -5,7 +5,7 @@
         {{/ifCond}}>
         <div class="image-panel">
             {{#ifCond type '!=' 'promo'}}
-            <img class="promo-panel-image" src="{{promoImage}}" alt="Promotional Image">
+            <img class="promo-panel-image" src="{{promoImage}}" alt="{{isdefined promoImageDescription "Promotional image"}}">
             {{else}}
                 <div class="promo-panel-image"></div>
             {{/ifCond}}

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

@@ -4,8 +4,8 @@
 <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}} placeholder="{{placeholder}}" />
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}" aria-label="{{ buttonLabel }}">
+        <span class="btn-icon" aria-hidden="true"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
     {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}