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

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 @@
+{}

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

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

package/src/components/bs5/header/Header.js

@@ -9,3 +9,28 @@ export class Header {
     return new Component(template, data);
   }
 }
+
+export const argTypes = {
+  ["preHeader.palette"]: {
+    options: ["dark", "default"],
+    control: "radio",
+    table: { category: "Pre header" },
+  },
+  ["preHeader.globalLink.text"]: {
+    table: { category: "Pre header" },
+  },
+  ["preHeader.actions"]: {
+    table: { category: "Pre header" },
+  },
+  ["mainContent.palette"]: {
+    options: ["dark", "default", "dark-alt"],
+    control: "radio",
+    table: { category: "Main content" },
+  },
+  ["mainContent.siteTitle"]: {
+    table: { category: "Main content" },
+  },
+  ["mainContent.subline"]: {
+    table: { category: "Main content" },
+  },
+};

package/src/components/bs5/header/Header.mdx

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