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

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",

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

@@ -1,5 +1,5 @@
 // FormcheckRadio.stories.js
-import { Formcheck } from "../../Formcheck.js";
+import { Formcheck, argTypes } from "../../Formcheck.js";
 import defaultdata from "./radio.data.json";
 
 export default {
@@ -11,169 +11,77 @@ export default {
   globals: { backgrounds: { value: "default" } },
   parameters: { backgrounds: { disable: false } },
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {},
+  argTypes,
 };
 
-// Default story for Formcheck component
 export const Default = {
   args: { ...defaultdata },
-  parameters: {
-    controls: { include: `listitems` },
-  },
   globals: { backgrounds: { value: "default" } },
 };
 
 export const RadioDark = {
   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 RadioSmall = {
-  args: { ...defaultdata, id: "radioSmall" },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
+  args: { ...defaultdata, id: "checkboxSmall" },
+  render: (args) => `<div class="small">${new Formcheck(args).html}</div>`,
 };
 
 export const RadioSmallDark = {
-  args: { ...defaultdata, id: "radioSmallDark" },
+  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 RadioValid = {
-  args: { ...defaultdata, id: "radioValid" },
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: true }).html}`,
 };
 
 export const RadioValidSmall = {
-  args: { ...defaultdata, id: "radioValidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: true }).html}</div>`,
 };
 
 export const RadioValidDark = {
-  args: { ...defaultdata, id: "radioValidDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidDark" },
+  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 RadioValidSmallDark = {
-  args: { ...defaultdata, id: "radioValidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxValidSmallDark" },
+  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 RadioInvalid = {
-  args: { ...defaultdata, id: "radioInvalid" },
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalid" },
+  render: (args) => `${new Formcheck({ ...args, isValid: false }).html}`,
 };
 
 export const RadioInvalidSmall = {
-  args: { ...defaultdata, id: "radioInvalidSmall" },
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmall" },
+  render: (args) =>
+    `<div class="small">${new Formcheck({ ...args, isValid: false }).html}</div>`,
 };
+
 export const RadioInvalidDark = {
-  args: { ...defaultdata, id: "radioInvalidDark" },
-  render: (args) => {
-    return `
-    <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidDark" },
+  render: (args) =>
+    `<div class="dark">${new Formcheck({ ...args, isValid: false }).html}</div>`,
   globals: { backgrounds: { value: "dark" } },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
 };
 
 export const RadioInvalidSmallDark = {
-  args: { ...defaultdata, id: "radioInvalidSmallDark" },
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `;
-  },
+  args: { ...defaultdata, id: "checkboxInvalidSmallDark" },
+  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/inpageAlert/inpageAlert.scss

@@ -5,7 +5,7 @@
 //To account for this, we redefine the global vars at the .alert scope
 
 .alert {
-  @include light-theme-properties();
+  @extend %qld-palette-default;
   --qld-headings-color: var(--#{$prefix}light-text-text);
   --qld-alert-color: var(--#{$prefix}light-text-text);
   --qld-alert-bg: #fff;

package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js}

@@ -1,34 +1,35 @@
 export default {
-  title: "5. Templates/Theme Showcase",
+  title: "5. Templates/Palette Showcase",
   render: (args) => {
     return args.content;
   },
   argTypes: {
-    themeClass: {
-      control: { type: 'select' },
-      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
-      description: 'Theme class to apply to the content area',
+    paletteClass: {
+      control: { type: "select" },
+      options: ["", "default", "light", "alt", "dark", "dark-alt"],
+      description: "Palette class to apply to the content area",
     },
   },
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+        story:
+          "This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.",
       },
     },
   },
 };
 
 /**
- * Default Theme
- * The default theme uses the base color scheme without additional background styling
+ * Default Palette
+ * The default palette uses the base color scheme without additional background styling
  */
-export const DefaultTheme = {
+export const DefaultPalette = {
   args: {
     content: `
       <div class="default p-4 mb-4 border">
-        <h2>Default Theme</h2>
+        <h2>Default Palette</h2>
         <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -60,19 +61,19 @@ export const DefaultTheme = {
 };
 
 /**
- * Light Theme
- * The light theme provides a bright, clean appearance
+ * Light Palette
+ * The light palette provides a bright, clean appearance
  */
-export const LightTheme = {
+export const LightPalette = {
   args: {
     content: `
       <div class="light p-4 mb-4 border">
-        <h2>Light Theme</h2>
+        <h2>Light Palette</h2>
         <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
         
-        <h3 class="mt-4">Theme Features</h3>
+        <h3 class="mt-4">Palette Features</h3>
         <ul>
           <li>Automatic color and background-color application</li>
           <li>Optimized contrast ratios</li>
@@ -84,14 +85,14 @@ export const LightTheme = {
 };
 
 /**
- * Alt Theme
+ * Alt Palette
  * The alt theme provides an alternative light styling
  */
-export const AltTheme = {
+export const AltPalette = {
   args: {
     content: `
       <div class="alt p-4 mb-4 border">
-        <h2>Alt Theme</h2>
+        <h2>Alt Palette</h2>
         <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -106,14 +107,14 @@ export const AltTheme = {
 };
 
 /**
- * Dark Theme
+ * Dark Palette
  * The dark theme provides a bold, high-contrast appearance
  */
-export const DarkTheme = {
+export const DarkPalette = {
   args: {
     content: `
       <div class="dark p-4 mb-4 border">
-        <h2>Dark Theme</h2>
+        <h2>Dark Palette</h2>
         <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -128,14 +129,14 @@ export const DarkTheme = {
 };
 
 /**
- * Dark Alt Theme
+ * Dark Alt Palette
  * The dark alt theme provides an alternative dark styling
  */
-export const DarkAltTheme = {
+export const DarkAltPalette = {
   args: {
     content: `
       <div class="dark-alt p-4 mb-4 border">
-        <h2>Dark Alt Theme</h2>
+        <h2>Dark Alt Palette</h2>
         <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -161,21 +162,21 @@ export const DarkAltTheme = {
 };
 
 /**
- * Theme Comparison
- * Shows all themes in a single view for comparison
+ * Palette Comparison
+ * Shows all palettes in a single view for comparison
  */
-export const ThemeComparison = {
+export const PaletteComparison = {
   args: {
     content: `
       <div class="mb-4">
-        <h2>Theme Palette Comparison</h2>
-        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+        <h2>Palette Comparison</h2>
+        <p>Compare all available palette classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
       </div>
       
       <div class="row g-4">
         <div class="col-lg-6">
           <div class="default p-3 border">
-            <h3>Default Theme</h3>
+            <h3>Default Palette</h3>
             <p>Base theme with neutral styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -183,7 +184,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="light p-3 border">
-            <h3>Light Theme</h3>
+            <h3>Light Palette</h3>
             <p>Clean, bright appearance.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -191,7 +192,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="alt p-3 border">
-            <h3>Alt Theme</h3>
+            <h3>Alt Palette</h3>
             <p>Alternative light styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -199,7 +200,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="dark p-3 border">
-            <h3>Dark Theme</h3>
+            <h3>Dark Palette</h3>
             <p>High contrast, modern look.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -207,7 +208,7 @@ export const ThemeComparison = {
         
         <div class="col-12">
           <div class="dark-alt p-3 border">
-            <h3>Dark Alt Theme</h3>
+            <h3>Dark Alt Palette</h3>
             <p>Alternative dark styling with different background treatment.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -216,7 +217,7 @@ export const ThemeComparison = {
       
       <div class="mt-5">
         <h3>Background Utility Classes</h3>
-        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <p>These utilities can be used independently of palette classes for specific background styling:</p>
         <div class="row g-3">
           <div class="col-md-3">
             <div class="bg-default p-2 text-center rounded">.bg-default</div>