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

package/src/components/bs5/card/Card.mdx

@@ -6,6 +6,10 @@ import defaultdata from "./card.data.json";
 
 # Cards
 
+## Accessibility considerations - heading level
+
+Use the field `headingTag` to apply the correct heading level of your card title (h1 should be followed by h2, then h3 etc) and keep the semantic structure of your page correct.
+
 <Canvas of={CardStories.Default} />
 
 ## Design resources

package/src/components/bs5/card/card--icon-list-footer.stories.js

@@ -1,5 +1,5 @@
 // card--icon-list-footer.stories.js
-import { Card } from "./Card.js";
+import { Card, argTypes } from "./Card.js";
 import { Link } from "../link/link.js";
 import defaultdata from "./card.data.json";
 
@@ -95,29 +95,7 @@ export default {
     description:
       "This card demonstrates the proper nesting of an Icon List component into the Card Footer following the Figma design pattern with 0.75rem gap spacing between links and 12px gap between icons and text.",
   },
-  argTypes: {
-    date: {
-      control: "text",
-    },
-    variantClass: {
-      control: "select",
-      options: {
-        Default: "default",
-        Light: "light",
-        Alternative: "alt",
-        Dark: "dark",
-        "Dark alternative": "dark-alt",
-      },
-    },
-    action: {
-      control: "select",
-      options: {
-        None: "no",
-        Single: "single",
-        Multi: "multi",
-      },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       description: {

package/src/components/bs5/card/card--multi-action.stories.js

@@ -1,6 +1,6 @@
 // card--multi-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 // include tags for footer option
 import { Tag } from "../tag/Tag.js";
@@ -11,14 +11,17 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Card/Multi action",
   render: (args) => {
-    const tags = new Tag(tagdata.action).html;
+    const tags = new Tag({
+      ...tagdata.action,
+      classes: "",
+    }).html;
     const cta = new CallToAction({ label: "View all", href: "#" }).html;
 
     return `
     <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
       ${new Card(args).html}
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-left", footer: "Footer content" }).html}
-      ${new Card({ ...args, description: "Card body text lorem ipsum dolor sit amet.", footer: '' }).html}
+      ${new Card({ ...args, description: "Card body text lorem ipsum dolor sit amet.", footer: "" }).html}
       ${new Card({ ...args, footer: tags }).html}
       ${new Card({ ...args, description: "<ul><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li></ul>", footer: cta }).html}
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content" }).html}
@@ -35,29 +38,7 @@ export default {
     `;
   },
   args: defaultdata.multiAction,
-  argTypes: {
-    date: {
-      control: "text",
-    },
-    variantClass: {
-      control: "select",
-      options: {
-        Default: "default",
-        Light: "light",
-        Alternative: "alt",
-        Dark: "dark",
-        "Dark alternative": "dark-alt",
-      },
-    },
-    action: {
-      control: "select",
-      options: {
-        None: "no",
-        Single: "single",
-        Multi: "multi",
-      },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       controls: {
@@ -67,7 +48,7 @@ export default {
   },
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

package/src/components/bs5/card/card--no-action.stories.js

@@ -1,6 +1,6 @@
 // card--no-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 export default {
   tags: ["autodocs"],
@@ -15,7 +15,7 @@ export default {
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-left", footer: "Footer content" }).html}
       <div class="col" id="placeholder"></div>
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top" }).html}
-      ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content"}).html}
+      ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content" }).html}
       <div class="col" id="placeholder"></div>
       ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre." }).html}
       ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", footer: "Footer content" }).html}
@@ -23,32 +23,10 @@ export default {
     `;
   },
   args: defaultdata.noAction,
-  argTypes: {
-    date: {
-      control: "text",
-    },
-    variantClass: {
-      control: "select",
-      options: {
-        Default: "default",
-        Light: "light",
-        Alternative: "alt",
-        Dark: "dark",
-        "Dark alternative": "dark-alt",
-      },
-    },
-    action: {
-      control: "select",
-      options: {
-        None: "no",
-        Single: "single",
-        Multi: "multi",
-      },
-    },
-  },
+  argTypes,
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

package/src/components/bs5/card/card--single-action.stories.js

@@ -1,6 +1,6 @@
 // card--single-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 export default {
   tags: ["autodocs"],
@@ -20,39 +20,10 @@ export default {
     `;
   },
   args: defaultdata.singleAction,
-  argTypes: {
-    date: {
-      control: "text",
-    },
-    variantClass: {
-      control: "select",
-      options: {
-        Default: "default",
-        Light: "light",
-        Alternative: "alt",
-        Dark: "dark",
-        "Dark alternative": "dark-alt",
-      },
-    },
-    action: {
-      control: "select",
-      options: {
-        None: "no",
-        Single: "single",
-        Multi: "multi",
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      controls: {
-        exclude: ["link", "arrow", "iconPosition"],
-      },
-    },
-  },
+  argTypes,
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

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

@@ -1,6 +1,7 @@
 {
   "noAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -20,6 +21,7 @@
   },
   "singleAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -39,6 +41,7 @@
   },
   "multiAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text <a href='javascript:void(0)'>lorem ipsum</a> dolor sit amet.",
     "date": "",
     "variantClass": "default",
@@ -56,4 +59,4 @@
     "footer": "<ul><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li></ul>",
     "equalHeight": false
   }
-}
+}

package/src/components/bs5/card/card.hbs

@@ -35,13 +35,13 @@
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-                <h3 class="card-title">
+                <{{isdefined headingTag 'h3'}} class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
                     {{else}}
                     {{ title }}
                     {{/if }}
-                </h3>
+                </{{isdefined headingTag 'h3'}}>
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}

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

@@ -1,10 +1,9 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./dateinput.hbs?raw";
 
 export class Dateinput {
-
   // Use the global Component class to create a new instance of the Date input component.
-  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
 
   constructor(data = {}) {
     var component = new Component(template, data);
@@ -13,26 +12,32 @@ export class Dateinput {
   }
 
   dateInputs() {
-    let elements = document.querySelectorAll(".dayinput, .monthinput, .yearinput");
+    let elements = document.querySelectorAll(
+      ".dayinput, .monthinput, .yearinput",
+    );
 
     Array.from(elements).forEach(function (element) {
-      element.addEventListener('keyup', function () {
+      element.addEventListener("keyup", function () {
         const input = event.currentTarget;
         let max = 0;
         if (input.value) {
-          if (input.classList.contains('dayinput')) {
+          if (input.classList.contains("dayinput")) {
             max = 31;
-          } else if (input.classList.contains('monthinput')) {
+          } else if (input.classList.contains("monthinput")) {
             max = 12;
-          } if (input.classList.contains('yearinput')) {
+          }
+          if (input.classList.contains("yearinput")) {
             max = 2030;
           }
           if (!parseInt(input.value)) {
-            input.classList.add('qld-input-error');
+            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');
+            if (
+              parseInt(input.value) > max &&
+              !input.classList.contains("qld-input-error")
+            ) {
+              input.classList.add("qld-input-error");
               input.blur();
             }
           }
@@ -41,3 +46,13 @@ export class Dateinput {
     });
   }
 }
+
+export const argTypes = {
+  isValid: {
+    description:
+      "For server-side validation, set to true or false. Omit or set to null to to indicate the input is yet to be validated.",
+    control: "radio",
+    options: [true, false, null],
+    type: "boolean | null",
+  },
+};

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

@@ -1,14 +1,16 @@
 {
-	"isDisabled": false,
-	"isRequired": true,
-	"isFilled": false,
-	"customClass": "",
-	"label-text": "Date label",
-	"day-placeholder": "DD",
-	"month-placeholder": "MM",
-	"year-placeholder": "YYYY",
-	"optional-text": "optional",
-	"hint-text": "(dd/mm/yyyy)",
-	"successMessageText": "Success message",
-	"errorMessageText": "Error message"
+  "id": "example-1",
+  "isDisabled": false,
+  "isRequired": true,
+  "isValid": null,
+  "isFilled": false,
+  "customClass": "",
+  "label-text": "Date label",
+  "day-placeholder": "DD",
+  "month-placeholder": "MM",
+  "year-placeholder": "YYYY",
+  "optional-text": "optional",
+  "hint-text": "(dd/mm/yyyy)",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message"
 }

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

@@ -1,64 +1,64 @@
 <!-- QGDS Component: Date input -->
 
-<!-- Label -->
-<label id="dategroup-label"
+<label id="{{id}}-label"
     class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
-    for="example-1">
+    for="{{id}}">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
     {{/if}}
 </label>
 
-<!-- Hint text -->
 {{#if hint-text}}
-<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+<span class="qld-hint-text" id="{{id}}-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" customClass}}
-<span id="text-field-success" class="qld-input-success">
-    {{successMessageText}}
-</span>
-{{/contains}}
+{{#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`}}
+<div class="valid-feedback">{{successMessageText}}</div>
+{{/if}}{{/contains}}
 
-{{#contains "qld-input-error" customClass}}
-<span id="text-field-error" class="qld-input-error">
-    {{errorMessageText}}
-</span>
-{{/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`}}
+<div class="invalid-feedback">{{errorMessageText}}</div>
+{{/if}}{{/contains}}
 
-<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
+<div aria-labelledby="{{id}}-label" role="group" class="row date-container {{customClass}}">
     <!-- day group -->
     <div class="day-group">
-        <label for="dayinput" class="date-label qld-text-input-label">Day</label>
+        <label id="{{id}}-dayinput-label" for="{{id}}-dayinput" class="date-label qld-text-input-label">Day</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
+            <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}}" id="dayinput" ref="day"
+                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}}>
         </div>
     </div>
     <!-- month group -->
     <div class="date-group">
-        <label for="monthinput" class="date-label qld-text-input-label">Month</label>
+        <label id="{{id}}-monthinput-label" for="{{id}}-monthinput" class="date-label qld-text-input-label">Month</label>
         <div>
-            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
+            <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}}" id="monthinput" ref="month"
+                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}}>
         </div>
     </div>
     <!-- year group -->
     <div class="date-group">
-        <label for="yearinput" class="date-label">Year</label>
+        <label id="{{id}}-yearinput-label" for="{{id}}-yearinput" class="date-label">Year</label>
         <div class="year-label">
-            <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-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}}"
-                id="yearinput" ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if
-                isRequired}}required aria-required="true" {{/if}}>
+                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}}>
         </div>
     </div>
 </div>

package/src/components/bs5/footer/footer_formio.scss

@@ -141,7 +141,7 @@
         border-color: $qld-textbox-border-color;
       }
       &:focus {
-        outline: 3px solid var(--#{$prefix}light-blue);
+        outline: 3px solid var(--#{$prefix}focus-color);
         outline-offset: 2px;
         background-color: var(--#{$prefix}white);
         border: 2px solid var(--#{$prefix}light-grey);
@@ -157,7 +157,7 @@
         box-shadow: none; // Overrides Bootstrap5 styling for invalid input.
 
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
         }
       }
     }
@@ -255,7 +255,7 @@
         outline: none;
 
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
           outline-offset: 3px;
         }
       }
@@ -273,7 +273,7 @@
           border-color: $qld-textbox-border-color;
         }
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
           outline-offset: 2px;
           background-color: var(--#{$prefix}white);
           border: 2px solid var(--#{$prefix}light-grey);
@@ -289,7 +289,7 @@
           box-shadow: none; // Overrides Bootstrap5 styling for invalid input.
 
           &:focus {
-            outline: 3px solid var(--#{$prefix}light-blue);
+            outline: 3px solid var(--#{$prefix}focus-color);
           }
         }
 

package/src/components/bs5/formcheck/Formcheck.js

@@ -1,13 +1,64 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./formcheck.hbs?raw";
 
 export class Formcheck {
-
   // Use the global Component class to create a new instance of the Breadcrumbs 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.
+
+  constructor(data = {}) {
     return new Component(template, data);
   }
-
 }
+
+/**
+ * argTypes is used to render component parameters in storybook.
+ */
+export const argTypes = {
+  questionLabel: {
+    type: "string",
+    description: `The heading label for the for the set of checks/radios.`,
+  },
+  optionalLabel: {
+    type: "string",
+    description: "Additional text used to denote an optional field.",
+  },
+  hintLabel: {
+    type: "string",
+    description:
+      "Extra informational text which can be used to give the input more context.",
+  },
+  listClasses: {
+    type: "string",
+    description: "CSS class names to be added to the topmost element.",
+  },
+  successMessageText: {
+    type: "string",
+    description:
+      "Informational text which appears when the input passes validation, or if `isValid` is true.",
+  },
+  errorMessageText: {
+    type: "string",
+    description:
+      "Informational text which appears when the input fails validation, or if `isValid` is false.",
+  },
+  type: {
+    type: "string",
+    options: ["checkbox", "radio"],
+    control: "radio",
+    description:
+      "The type of input. This will override any value of `type` set on the listItems themselves.",
+    table: {
+      defaultValue: { summary: "checkbox" },
+    },
+  },
+  isValid: {
+    options: [null, true, false],
+    type: "boolean | null",
+    control: "radio",
+    description:
+      "Should be set only when the input is to be validated server-side. Adds class `is-valid` or `is-invalid` to the form control. For client-side validation.",
+  },
+  listitems: {
+    description: "An array which represents the input set.",
+  },
+};