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

package/src/components/bs5/formcheck/stories/bootstrap-validation/bootstrap-validation.stories.js

@@ -0,0 +1,304 @@
+// Bootstrap5Validation.stories.js
+import { Formcheck, argTypes } from "../../Formcheck.js";
+import { Textarea } from "../../../textarea/Textarea.js";
+import { Textbox } from "../../../textbox/Textbox.js";
+import { Select } from "../../../select/Select.js";
+import { Dateinput } from "../../../dateinput/Dateinput.js";
+import checkboxData from "../checkbox/checkbox.data.json";
+import textAreaData from "../../../textarea/textarea.data.json";
+import textInputData from "../../../textbox/textbox.data.json";
+import dateInputData from "../../../dateinput/dateinput.data.json";
+import selectData from "../../../select/select.data.json";
+
+checkboxData.optionalLabel = null;
+textAreaData.optionalLabel = null;
+textInputData.optionalLabel = null;
+selectData.optionalLabel = null;
+dateInputData.optionalLabel = null;
+
+/**
+ * This page tests and compares various validation styling methods.
+ *
+ * Server side validation:
+ * - via Bootstrap's `.is-valid`/`.is-invalid` classes.
+ * - also via legacy `.valid` and `.invalid` classes on the form element.
+ *
+ * Client side validation:
+ * - via `.was-validated` class on the `<form>` element targeting html5 `:valid` and `:invalid` input element pseudoclasses.
+ *
+ * #### Multiple input forms and validation feedback
+ * Because validation feedback (error or success messages) styles rely on sibling input selectors,
+ * it is important to wrap individual form components in a containing div when also providing validation feedback.
+ */
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Forms/Form Validation",
+  args: {
+    ...checkboxData, // There is no shared form element abstract args, only use controls common to all inputs (isValid, successMessage, errorMessage)
+    _storyId: "default", // make it easier to create unique ids for each input.
+  },
+
+  render: (args) => `
+<div class="mb-32">${new Formcheck({ ...args, listitems: [{ ...checkboxData.listitems[0], id: `${args._storyId}Checkbox1` }] }).html}</div>
+<div class="mb-32">${
+    new Formcheck({
+      ...checkboxData,
+      isValid: args.isValid,
+      type: "radio",
+      listitems: [
+        { ...checkboxData.listitems[0], id: `${args._storyId}Radio1` },
+        { ...checkboxData.listitems[1], id: `${args._storyId}Radio2` },
+      ],
+    }).html
+  }</div>
+<div class="mb-32">${new Textarea({ ...textAreaData, isValid: args.isValid, id: `${args._storyId}Textarea`, isRequired: true, successMessageText: args.successMessageText, errorMessageText: args.errorMessageText }).html}</div>
+<div class="mb-32">${new Textbox({ ...textInputData, isValid: args.isValid, id: `${args._storyId}TextInput`, isRequired: true, successMessageText: args.successMessageText, errorMessageText: args.errorMessageText }).html}</div>
+<div class="mb-32">${new Select({ ...selectData, isValid: args.isValid, id: `${args._storyId}SelectInvalid`, isRequired: true, successMessageText: args.successMessageText, errorMessageText: args.errorMessageText }).html}</div>
+<div class="mb-32">${new Dateinput({ ...dateInputData, isValid: args.isValid, id: `${args._storyId}DateInvalid`, isRequired: true, successMessageText: args.successMessageText, errorMessageText: args.errorMessageText }).html}</div>
+`,
+
+  argTypes,
+  parameters: {
+    controls: {
+      include: ["isValid", "successMessageText", "errorMessageText"],
+    },
+    backgrounds: { disable: false },
+  },
+  globals: { backgrounds: { value: "default" } },
+};
+
+/**
+ * Server side validation with `isValid: false`
+ */
+export const BootstrapIsInvalid = {
+  name: "Server side - invalid",
+  args: {
+    isValid: false,
+    _storyId: "BootstrapIsInvalid",
+  },
+};
+
+/**
+ * Server side validation with `isValid: true`
+ */
+export const BootstrapIsValid = {
+  name: "Server side - valid",
+  args: {
+    isValid: true,
+    _storyId: "BootstrapIsValid",
+  },
+};
+
+/**
+ * Client side validation offers the best user experience, however it not always suit your needs.
+ * For client side validation using HTML5 features, add the `novalidate` boolean attribute to your `<form>`.
+ * This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
+ * Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you.
+ * Validation styles using built-in HTML5 validation require class `was-validated` to be added to the `<form>` and rely on the `:invalid` and `:valid` pseudoclasses.
+ * #### Multiple input forms and validation feedback
+ * Because validation feedback (error or success messages) styles rely on sibling input selectors,
+ * it is important to wrap individual form components in a containing div when also providing validation feedback.
+ */
+export const HTML5NeedsValidation = {
+  name: "Client side validation",
+
+  args: {
+    ...checkboxData,
+    _storyId: "HTML5NeedsValidation",
+    listitems: [
+      {
+        ...checkboxData.listitems[0],
+        id: "needs-validation-1",
+        label: "Required checkbox (unchecked will be invalid)",
+        isChecked: false,
+        isRequired: true,
+      },
+      {
+        ...checkboxData.listitems[1],
+        id: "needs-validation-2",
+        label: "Required checkbox (checked will be valid)",
+        isChecked: true,
+        isRequired: true,
+      },
+    ],
+  },
+  render: (args) => {
+    return `
+<form class="needs-validation" novalidate>
+  <div class="row">
+    <div class="col">
+      <div class="mb-32">${new Formcheck({ ...args, listitems: [{ ...checkboxData.listitems[0], id: `${args._storyId}CheckboxInvalid` }] }).html}</div>
+      <div class="mb-32">${new Textarea({ ...textAreaData, id: `${args._storyId}TextareaInvalid`, value: "", isRequired: true }).html}</div>
+      <div class="mb-32">${new Textbox({ ...textInputData, id: `${args._storyId}TextInputInvalid`, value: "", isRequired: true }).html}</div>
+      <div class="mb-32">${new Select({ ...selectData, id: `${args._storyId}SelectInvalid`, isRequired: true }).html}</div>
+      <div class="mb-32">${new Dateinput({ ...dateInputData, id: `${args._storyId}DateInvalid`, isRequired: true }).html}</div>
+    </div>
+    <div class="col">
+      <div class="mb-32">${new Formcheck({ ...args, listitems: [{ ...checkboxData.listitems[1], id: `${args._storyId}CheckboxValid` }] }).html}</div>
+      <div class="mb-32">${new Textarea({ ...textAreaData, id: `${args._storyId}TextareaValid`, value: "I have value!", isRequired: true }).html}</div>
+      <div class="mb-32">${new Textbox({ ...textInputData, id: `${args._storyId}TextInputValid`, value: "I have value also!", isRequired: true }).html}</div>
+      <div class="mb-32">${new Select({ ...selectData, id: `${args._storyId}SelectValid`, isRequired: true }).html}</div>
+      <div class="mb-32">${new Dateinput({ ...dateInputData, id: `${args._storyId}DateValid`, isRequired: true }).html}</div>
+    </div>
+  </div>
+          
+  <button class="btn btn-primary mt-3" type="submit" onclick="validateForm(event)">Validate</button>
+</form>
+<script>
+function validateForm(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  const form = event.target.closest('form');
+
+  form.elements["${args._storyId}CheckboxInvalid"].checked = false;
+  form.elements["${args._storyId}CheckboxValid"].checked = true;
+
+  form.elements["${args._storyId}TextareaInvalid"].value = "";
+  form.elements["${args._storyId}TextareaValid"].value = "I have value!";
+
+  form.elements["${args._storyId}TextInputInvalid"].value = "";
+  form.elements["${args._storyId}TextInputValid"].value = "I have value also!";
+
+  form.elements["${args._storyId}SelectInvalid"].value = null;
+  form.elements["${args._storyId}SelectValid"].value = "2";
+
+  form.elements["${args._storyId}DateInvalid-dayinput"].value = "";
+
+  form.elements["${args._storyId}DateValid-dayinput"].value = "2";
+  form.elements["${args._storyId}DateValid-monthinput"].value = "2";
+  form.elements["${args._storyId}DateValid-yearinput"].value = "2222";
+  
+  form.classList.add('was-validated');
+}
+</script>`;
+  },
+};
+
+export const BootstrapInvalidDark = {
+  name: "Dark Palette - Invalid",
+  args: {
+    isValid: false,
+    _storyId: "BootstrapInvalidDark",
+  },
+  parameters: {
+    docs: {
+      source: {
+        excludeDecorators: false,
+      },
+    },
+  },
+  globals: { backgrounds: { value: "dark" } },
+  decorators: [
+    (Story) => {
+      return `
+<div class="dark">${Story()}</div>`;
+    },
+  ],
+};
+
+export const BootstrapValidDark = {
+  name: "Dark Palette - Valid",
+  args: {
+    isValid: true,
+    _storyId: "BootstrapValidDark",
+  },
+  parameters: {
+    docs: {
+      source: {
+        excludeDecorators: false,
+      },
+    },
+  },
+  globals: { backgrounds: { value: "dark" } },
+  decorators: [
+    (Story) => {
+      return `
+<div class="dark">${Story()}</div>`;
+    },
+  ],
+};
+
+/**
+ * `.valid` and `.invalid` classes on the form or parent element.
+ */
+export const ValidationComparison = {
+  name: "Legacy Validation Comparison",
+  args: {
+    ...checkboxData,
+    questionLabel: "Comparison of validation methods",
+    listitems: [
+      {
+        ...checkboxData.listitems[0],
+        id: "compare-1",
+        label: "Legacy .valid",
+        isChecked: true,
+      },
+      {
+        ...checkboxData.listitems[1],
+        id: "compare-2",
+        label: "Legacy .invalid",
+        isChecked: false,
+      },
+      {
+        ...checkboxData.listitems[2],
+        id: "compare-3",
+        label: "Bootstrap .is-valid",
+        isChecked: true,
+      },
+      {
+        ...checkboxData.listitems[3],
+        id: "compare-4",
+        label: "Bootstrap .is-invalid",
+        isChecked: false,
+      },
+    ],
+  },
+  render: (args) => {
+    return `
+      <div class="row">
+        <div class="col">
+          <div class="valid">
+            ${
+              new Formcheck({
+                ...args,
+                questionLabel: "Legacy classes - .valid",
+                listitems: [args.listitems[0]],
+              }).html
+            }
+          </div>
+          <div class="invalid">
+            ${
+              new Formcheck({
+                ...args,
+                questionLabel: "Legacy classes - .invalid",
+                listitems: [args.listitems[1]],
+              }).html
+            }
+        </div>
+      </div>
+      <div class="col">
+        <div>
+          ${
+            new Formcheck({
+              ...args,
+              questionLabel: "Bootstrap classes - .is-valid",
+              isValid: true,
+              listitems: [args.listitems[2]],
+            }).html
+          }
+        </div>
+        <div>
+          ${
+            new Formcheck({
+              ...args,
+              questionLabel: "Bootstrap classes .is-invalid",
+              isValid: false,
+              listitems: [args.listitems[3]],
+            }).html
+          }
+        </div>
+      </div>
+    </div>
+    `;
+  },
+};

package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json

@@ -3,9 +3,12 @@
   "optionalLabel": "(Optional)",
   "hintLabel": "Hint label",
   "listClasses": "field-required",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message",
+  "isValid": null,
+  "type": "checkbox",
   "listitems": [
     {
-      "type": "checkbox",
       "id": "checkboxItem1",
       "name": "checkboxOption",
       "label": "Option 1",
@@ -14,7 +17,6 @@
       "isChecked": false
     },
     {
-      "type": "checkbox",
       "id": "checkboxItem2",
       "name": "checkboxOption",
       "label": "Option 2",
@@ -23,7 +25,6 @@
       "isChecked": false
     },
     {
-      "type": "checkbox",
       "id": "checkboxItem3",
       "name": "checkboxOption",
       "label": "Option 3",
@@ -32,7 +33,6 @@
       "isChecked": false
     },
     {
-      "type": "checkbox",
       "id": "checkboxItem4",
       "name": "checkboxOption",
       "label": "Option 4",
@@ -41,7 +41,6 @@
       "isChecked": true
     },
     {
-      "type": "checkbox",
       "id": "checkboxItem5",
       "name": "checkboxOption",
       "label": "Disabled",

package/src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js

@@ -1,5 +1,5 @@
 // FormcheckCheckbox.stories.js
-import { Formcheck } from "../../Formcheck.js";
+import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./checkbox.data.json";
 
 export default {
@@ -11,7 +11,7 @@ export default {
   globals: { backgrounds: { value: "default" } },
   parameters: { backgrounds: { disable: false } },
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {},
+  argTypes,
 };
 
 export const Default = {
@@ -22,158 +22,66 @@ export const Default = {
 export const CheckboxDark = {
   args: { ...defaultdata },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark">${new Formcheck(args).html}</div>`,
 };
 
 export const CheckboxSmall = {
   args: { ...defaultdata, id: "checkboxSmall" },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="small">${new Formcheck(args).html}</div>`,
 };
 
 export const CheckboxSmallDark = {
   args: { ...defaultdata, id: "checkboxSmallDark" },
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-      <div class="small">
-          ${Story()}
-      </div>
-      </div>
-      `;
-    },
-  ],
+  render: (args) => `<div class="dark small">${new Formcheck(args).html}</div>`,
 };
 
 export const CheckboxValid = {
   args: { ...defaultdata, id: "checkboxValid" },
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `;
-  },
+  render: (args) => `${new Formcheck({ ...args, isValid: true }).html}`,
 };
 
 export const CheckboxValidSmall = {
   args: { ...defaultdata, id: "checkboxValidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
 };
 
 export const CheckboxValidDark = {
   args: { ...defaultdata, id: "checkboxValidDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="valid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
 };
 
 export const CheckboxValidSmallDark = {
   args: { ...defaultdata, id: "checkboxValidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="valid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };
 
 export const CheckboxInvalid = {
   args: { ...defaultdata, id: "checkboxInvalid" },
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `;
-  },
+  render: (args) => `${new Formcheck({ ...args, isValid: false }).html}`,
 };
 
 export const CheckboxInvalidSmall = {
   args: { ...defaultdata, id: "checkboxInvalidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
 };
 
 export const CheckboxInvalidDark = {
   args: { ...defaultdata, id: "checkboxInvalidDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="invalid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
 };
 
 export const CheckboxInvalidSmallDark = {
   args: { ...defaultdata, id: "checkboxInvalidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  render: (args) =>
+    `<div class="dark small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="invalid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
 };

package/src/components/bs5/formcheck/stories/radio/radio.data.json

@@ -3,9 +3,12 @@
   "optionalLabel": "(Optional)",
   "hintLabel": "Hint label",
   "listClasses": "field-required",
+  "successMessageText": "Success message",
+  "errorMessageText": "Error message",
+  "isValid": null,
+  "type": "radio",
   "listitems": [
     {
-      "type": "radio",
       "id": "radioItem1",
       "name": "radioOption",
       "label": "Option 1",
@@ -14,7 +17,6 @@
       "isChecked": false
     },
     {
-      "type": "radio",
       "id": "radioItem2",
       "name": "radioOption",
       "label": "Option 2",
@@ -23,7 +25,6 @@
       "isChecked": false
     },
     {
-      "type": "radio",
       "id": "radioItem3",
       "name": "radioOption",
       "label": "Option 3",
@@ -32,7 +33,6 @@
       "isChecked": true
     },
     {
-      "type": "radio",
       "id": "radioItem4",
       "name": "radioOption",
       "label": "Option 4",