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

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/footer/footer.scss

@@ -7,9 +7,7 @@
   //  1. Palette colours
   // ------------------------------------------------------------------------------------------------------------------
   // Default palette
-  --#{$prefix}footer-color-crest-fill: var(
-    --#{$prefix}color-default-color-light-crest-fill
-  );
+  --#{$prefix}footer-color-crest-fill: var(--#{$prefix}-neutral-black);
   --#{$prefix}footer-color-border: var(
     --#{$prefix}color-default-color-light-border-default
   );
@@ -35,11 +33,9 @@
   --#{$prefix}footer-color-background: var(
     --#{$prefix}color-default-color-light-background-default
   );
-  --#{$prefix}footer-color-alt-button: var(
-    --#{$prefix}core-default-color-brand-secondary-darkgreen
-  );
+  --#{$prefix}footer-color-alt-button: var(--#{$prefix}light-action-secondary);
   --#{$prefix}footer-color-alt-button__hover: var(
-    --#{$prefix}core-default-color-brand-primary-light-green
+    --#{$prefix}light-action-secondary-hover
   );
   --#{$prefix}footer-color-social-icon: #{$core-default-color-neutral-black};
 

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

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

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

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} />

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

@@ -163,6 +163,7 @@ export default {
     docs: {
       story: { height: "400px" },
     },
+    backgrounds: { disable: true },
   },
 };
 
@@ -172,12 +173,6 @@ export const MasterBrand = {
     ...masterbrand_variant,
     ...menu_state,
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story) => {
       return `
@@ -193,12 +188,6 @@ export const SubBrand = {
     ...subbrand_variant,
     ...menu_state,
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story) => {
       return `
@@ -212,12 +201,6 @@ export const SubBrand = {
 export const CoBrand = {
   args: mergeArgs(alternative_palette, cobrand_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;
@@ -249,12 +232,6 @@ export const CoBrand = {
 export const EndorsedBrand = {
   args: mergeArgs(sample_argtypes, endorsed_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;
@@ -286,12 +263,6 @@ export const EndorsedBrand = {
 export const StandaloneBrand = {
   args: mergeArgs(sample_argtypes, standalone_variant, menu_state),
   argTypes: arg_types,
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
   decorators: [
     (Story, context) => {
       const args = context.args;

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

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

package/src/components/bs5/icons/Icons.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story, Markdown } from "@storybook/blocks";
+import { Canvas, Meta, Story, Markdown } from "@storybook/addon-docs/blocks";
 import * as IconStories from "./icons.stories.js";
 import IconsSizes from "./mdx/_IconsSizes.mdx";
 

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

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

package/src/components/bs5/icons/mdx/_IconsSizes.mdx

@@ -1,5 +1,5 @@
 import { Sizes } from "../icons.stories";
-import { Story } from "@storybook/blocks";
+import { Story } from "@storybook/addon-docs/blocks";
 
 ## Sizes
 

package/src/components/bs5/image/Image.mdx

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

package/src/components/bs5/inpageAlert/InpageAlert.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 AlertStories from "./inpageAlert.stories";
 import defaultdata from "./inpageAlert.data.json";
 

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

@@ -3,7 +3,7 @@ import defaultdata from "./inpageAlert.data.json";
 
 /**
  * The Inpage Alert is also known as Page Alert or Alert
- * 
+ *
  * Inpage alert accepts the following classes: <code>.alert-success</code>, <code>.alert-info</code>, <code>.alert-warning</code>, and <code>.alert-danger</code>
  */
 
@@ -32,7 +32,8 @@ export default {
   render: (args) => {
     return new InpageAlert({ ...defaultdata, ...args }).html;
   },
-
+  globals: { backgrounds: { value: "default" } },
+  parameters: { backgrounds: { disable: false } },
   argTypes: {
     variantClass: {
       name: "Classes",
@@ -46,12 +47,7 @@ export default {
           "alert-error": "Error",
         },
       },
-      options: [
-        "alert-success",
-        "alert-info",
-        "alert-warning",
-        "alert-error",
-      ],
+      options: ["alert-success", "alert-info", "alert-warning", "alert-error"],
     },
     alertType: {
       name: "Alert Type",
@@ -59,15 +55,14 @@ export default {
     },
     headingTag: {
       name: "Heading Tag",
-      description: 'Heading tag for the In-page Alert component. Can be h2, h3, h4, h5 or h6.',
+      description:
+        "Heading tag for the In-page Alert component. Can be h2, h3, h4, h5 or h6.",
       control: "select",
       options: ["h2", "h3", "h4", "h5", "h6"],
     },
   },
-
 };
 
-
 /**
  * Default In-page Alert component.
  */
@@ -76,23 +71,12 @@ export const Default = {
   args: defaultdata,
 };
 
-
-
-
 /**
  * In-page Alert when presented inside a <code>.dark</code> or <code>.dark-alt</code> container.
  */
 
-
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-dark-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
 
   decorators: [
     (Story) => {

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

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

package/src/components/bs5/inpagenav/Inpagenav.mdx

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

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

@@ -13,7 +13,9 @@ export default {
         exclude: ["variantClass", "navitems"],
       },
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -21,6 +23,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -43,12 +46,7 @@ export const Default = {
  */
 export const Dark = {
   args: defaultdata,
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `

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

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

package/src/components/bs5/link/link.mdx

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