@qld-gov-au/qgds-bootstrap5 2.0.6 → 2.0.7

package/src/components/bs5/callout/callout.stories.js

@@ -33,7 +33,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98115&mode=design&t=Ue7c77KjVYU1eTGj-0",
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -41,6 +43,7 @@ export default {
  */
 export const Default = {
   args: defaultdata.default,
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -55,12 +58,7 @@ export const NoTitle = {
  */
 export const Light = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -79,12 +77,7 @@ export const Light = {
  */
 export const Alternative = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -103,12 +96,7 @@ export const Alternative = {
  */
 export const Dark = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -127,14 +115,7 @@ export const Dark = {
  */
 export const DarkAlternative = {
   args: defaultdata.default,
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [
-        { name: "Dark alternative", value: "var(--qld-dark-alt-background)" },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/callout/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as CardStories from "./card--no-action.stories";
 import defaultdata from "./card.data.json";
 

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

@@ -0,0 +1 @@
+{}

package/src/components/bs5/contentFooter/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/contentFooterWrapper/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/contentWrapper/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1 @@
+{}

package/src/components/bs5/correctincorrect/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -6,23 +6,22 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Forms/Dateinput",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Dateinput(args).html;
-  
   },
 
   //https://storybook.js.org/docs/api/arg-types
-  argTypes: {
-  },
+  argTypes: {},
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
 };
 
 /**
@@ -30,24 +29,18 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
  * Dark themed Date inputs
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: false},
-  },
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
-    },
+  args: {
+    ...defaultdata,
+    ...{ isDisabled: false },
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -63,20 +56,19 @@ export const Dark = {
  * Filled style Date inputs
  */
 export const Filled = {
-  args: { 
-	  ...defaultdata,
-	  ...{customClass: "form-style-filled"},
+  args: {
+    ...defaultdata,
+    ...{ customClass: "form-style-filled" },
   },
 };
 
-
 /**
  * Disabled Date inputs
  */
 export const Disabled = {
-  args: { 
-	  ...defaultdata,
-	  ...{isDisabled: true},
+  args: {
+    ...defaultdata,
+    ...{ isDisabled: true },
   },
 };
 
@@ -85,8 +77,8 @@ export const Disabled = {
  */
 export const Valid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-success"},
+    ...defaultdata,
+    ...{ customClass: "qld-input-success" },
   },
 };
 
@@ -95,7 +87,7 @@ export const Valid = {
  */
 export const Invalid = {
   args: {
-	  ...defaultdata,
-    ...{customClass: "qld-input-error"},
+    ...defaultdata,
+    ...{ customClass: "qld-input-error" },
   },
 };

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

@@ -0,0 +1 @@
+{}

package/src/components/bs5/directionLinks/DirectionLinks.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as DirectionLinksStories from "./directionLinks.stories";
 
 <Meta of={DirectionLinksStories} />

package/src/components/bs5/directionLinks/directionLinks.stories.js

@@ -10,6 +10,11 @@ import defaultdata from "./directionLinks.data.json";
 export default {
   tags: ["autodocs"],
   title: "3. Components/Direction Links",
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
   render: (args) => {
     return `
     <!-- Grid container -->
@@ -51,6 +56,7 @@ export default {
     label: { control: "text" },
   },
   parameters: {
+    backgrounds: { disable: false },
     controls: { disable: true },
     design: {
       name: "QGDS Figma Reference",
@@ -69,10 +75,9 @@ export const Default = {};
  * Direction Link - Light
  * */
 export const Light = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+      value: "light",
     },
   },
   decorators: [
@@ -90,10 +95,9 @@ export const Light = {
  * Direction Link - Light-Alt
  * */
 export const LightAlt = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "LightAlt",
-      values: [{ name: "LightAlt", value: "var(--qld-light-alt-background)" }],
+      value: "alt",
     },
   },
   decorators: [
@@ -111,10 +115,9 @@ export const LightAlt = {
  * Direction Link - Dark
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
   decorators: [
@@ -132,10 +135,9 @@ export const Dark = {
  * Direction Link - Dark-Alt
  * */
 export const DarkAlt = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "DarkAlt",
-      values: [{ name: "DarkAlt", value: "var(--qld-dark-alt-background)" }],
+      value: "darkAlt",
     },
   },
   decorators: [

package/src/components/bs5/footer/Footer.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as FooterStories from "./footer.stories";
 import defaultdata from "./footer.data.json";
 

package/src/components/bs5/formcheck/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/formcheck/stories/checkbox/Checkbox.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as FormCheckCheckboxStories from "./checkbox.stories";
 
 <Meta of={FormCheckCheckboxStories} />

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

@@ -1,35 +1,27 @@
 // FormcheckCheckbox.stories.js
-import { Formcheck } from '../../Formcheck.js';
-import defaultdata from './checkbox.data.json';
+import { Formcheck } from "../../Formcheck.js";
+import defaultdata from "./checkbox.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Forms/Checkbox',
+  tags: ["autodocs"],
+  title: "3. Components/Forms/Checkbox",
   render: (args) => {
-    return `${new Formcheck(args).html}`
+    return `${new Formcheck(args).html}`;
   },
-  //https://storybook.js.org/docs/api/arg-types 
-  argTypes: {
-  },
-
-  
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
+  //https://storybook.js.org/docs/api/arg-types
+  argTypes: {},
 };
 
 export const Default = {
-  args: {...defaultdata},
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "default" } },
 };
 
 export const CheckboxDark = {
-  
-  args: {...defaultdata},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -42,7 +34,7 @@ export const CheckboxDark = {
 };
 
 export const CheckboxSmall = {
-  args: {...defaultdata, id: "checkboxSmall"},
+  args: { ...defaultdata, id: "checkboxSmall" },
   decorators: [
     (Story) => {
       return `
@@ -55,15 +47,8 @@ export const CheckboxSmall = {
 };
 
 export const CheckboxSmallDark = {
-  args: {...defaultdata, id: "checkboxSmallDark"},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
+  args: { ...defaultdata, id: "checkboxSmallDark" },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -78,39 +63,32 @@ export const CheckboxSmallDark = {
 };
 
 export const CheckboxValid = {
-  args: {...defaultdata, id: "checkboxValid"},
+  args: { ...defaultdata, id: "checkboxValid" },
   render: (args) => {
     return `
     <div class="valid">${new Formcheck(args).html}</div>
-    `
+    `;
   },
-}
+};
 
 export const CheckboxValidSmall = {
-  args: {...defaultdata, id: "checkboxValidSmall"},
+  args: { ...defaultdata, id: "checkboxValidSmall" },
   render: (args) => {
     return `
     <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `
+    `;
   },
-}
+};
 
 export const CheckboxValidDark = {
-  args: {...defaultdata, id: "checkboxValidDark"},
+  args: { ...defaultdata, id: "checkboxValidDark" },
   render: (args) => {
     return `
     <div class="dark">
     <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -120,24 +98,17 @@ export const CheckboxValidDark = {
       `;
     },
   ],
-}
+};
 
 export const CheckboxValidSmallDark = {
-  args: {...defaultdata, id: "checkboxValidSmallDark"},
+  args: { ...defaultdata, id: "checkboxValidSmallDark" },
   render: (args) => {
     return `
     <div class="dark">
     <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -147,42 +118,35 @@ export const CheckboxValidSmallDark = {
       `;
     },
   ],
-}
+};
 
 export const CheckboxInvalid = {
-  args: {...defaultdata, id: "checkboxInvalid"},
+  args: { ...defaultdata, id: "checkboxInvalid" },
   render: (args) => {
     return `
     <div class="invalid">${new Formcheck(args).html}</div>
-    `
+    `;
   },
-}
+};
 
 export const CheckboxInvalidSmall = {
-  args: {...defaultdata, id: "checkboxInvalidSmall"},
+  args: { ...defaultdata, id: "checkboxInvalidSmall" },
   render: (args) => {
     return `
     <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `
+    `;
   },
-}
+};
 
 export const CheckboxInvalidDark = {
-  args: {...defaultdata, id: "checkboxInvalidDark"},
+  args: { ...defaultdata, id: "checkboxInvalidDark" },
   render: (args) => {
     return `
     <div class="dark">
     <div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -192,24 +156,17 @@ export const CheckboxInvalidDark = {
       `;
     },
   ],
-}
+};
 
 export const CheckboxInvalidSmallDark = {
-  args: {...defaultdata, id: "checkboxInvalidSmallDark"},
+  args: { ...defaultdata, id: "checkboxInvalidSmallDark" },
   render: (args) => {
     return `
     <div class="dark">
     <div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -219,4 +176,4 @@ export const CheckboxInvalidSmallDark = {
       `;
     },
   ],
-}
+};

package/src/components/bs5/formcheck/stories/radio/Radio.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as FormCheckRadioStories from "./radio.stories";
 
 <Meta of={FormCheckRadioStories} />

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

@@ -8,6 +8,8 @@ export default {
   render: (args) => {
     return `${new Formcheck(args).html}`;
   },
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
   //https://storybook.js.org/docs/api/arg-types
   argTypes: {},
 };
@@ -18,16 +20,12 @@ export const Default = {
   parameters: {
     controls: { include: `listitems` },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 export const RadioDark = {
   args: { ...defaultdata },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -54,12 +52,7 @@ export const RadioSmall = {
 
 export const RadioSmallDark = {
   args: { ...defaultdata, id: "radioSmallDark" },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -97,12 +90,7 @@ export const RadioValidDark = {
     <div class="valid">${new Formcheck(args).html}</div></div>
     `;
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -122,12 +110,7 @@ export const RadioValidSmallDark = {
     <div class="valid">${new Formcheck(args).html}</div></div>
     `;
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -163,12 +146,7 @@ export const RadioInvalidDark = {
     <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
     `;
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -188,12 +166,7 @@ export const RadioInvalidSmallDark = {
     <div class="invalid">${new Formcheck(args).html}</div></div>
     `;
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/fullPageWrapper/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/globalAlert/GlobalAlert.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs/blocks";
 import * as GlobalAlertStories from "./globalAlert.stories";
 import defaultdata from "./globalAlert.data.json";
 

package/src/components/bs5/globalAlert/globalAlert.test.js

@@ -139,11 +139,11 @@ describe("initGlobalAlerts", () => {
     localStorage = localStorageMock;
 
     // Set global references for initGlobalAlerts
-    // eslint-disable-next-line no-undef
+     
     global.document = d;
-    // eslint-disable-next-line no-undef
+     
     global.window = window;
-    // eslint-disable-next-line no-undef
+     
     global.localStorage = localStorageMock;
 
     // Clear localStorage before each test

package/src/components/bs5/globalAlert/manifest.json

@@ -0,0 +1 @@
+{}