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

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

@@ -2,6 +2,42 @@
 import { Tabs } from "./tabs.js";
 import defaultdata from "./tabs.data.json";
 
+// Generate argTypes for tab items dynamically
+const generateTabItemArgTypes = () => {
+  const argTypes = {};
+  const tabCount = defaultdata.data.items.length;
+
+  for (let i = 0; i < tabCount; i++) {
+    argTypes[`data.items.${i}.tab_text`] = {
+      name: `tabs item ${i} tab_text`,
+      description: `Tab ${i + 1} label text`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.title`] = {
+      name: `tabs item ${i} title`,
+      description: `Tab ${i + 1} section heading`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.icon`] = {
+      name: `tabs item ${i} icon`,
+      description: `Tab ${i + 1} icon classes`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.content`] = {
+      name: `tabs item ${i} content`,
+      description: `Tab ${i + 1} content HTML`,
+      control: "text",
+    };
+    argTypes[`data.items.${i}.disabled`] = {
+      name: `tabs item ${i} disabled`,
+      description: `Tab ${i + 1} disabled state`,
+      control: "boolean",
+    };
+  }
+
+  return argTypes;
+};
+
 export default {
   tags: ["autodocs"],
   title: "3. Components/Tabs",
@@ -32,6 +68,8 @@ export default {
       control: "text",
       defaultValue: "12345",
     },
+    // Dynamically generated tab item controls
+    ...generateTabItemArgTypes(),
   },
 };
 
@@ -52,49 +90,6 @@ export const ContainerTabsDefault = {
     type_variant: "container-tabs",
     unique_id: "234566",
     variant: "default",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 3",
-          title: "Section Heading Item 3",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 4",
-          title: "Section Heading Item 4",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-          disabled: true,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 6",
-          title: "Section Heading Item 6",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-      ],
-    },
   },
 };
 
@@ -107,49 +102,6 @@ export const ContainerTabsLight = {
     type_variant: "container-tabs",
     unique_id: "345678",
     variant: "light",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 3",
-          title: "Section Heading Item 3",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 4",
-          title: "Section Heading Item 4",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-          disabled: true,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 6",
-          title: "Section Heading Item 6",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-      ],
-    },
   },
 };
 
@@ -162,49 +114,6 @@ export const ContainerTabsAlt = {
     type_variant: "container-tabs",
     unique_id: "456789",
     variant: "alt",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 3",
-          title: "Section Heading Item 3",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 4",
-          title: "Section Heading Item 4",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-          disabled: true,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 6",
-          title: "Section Heading Item 6",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-      ],
-    },
   },
 };
 
@@ -217,49 +126,6 @@ export const ContainerTabsDark = {
     type_variant: "container-tabs",
     unique_id: "567890",
     variant: "dark",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 3",
-          title: "Section Heading Item 3",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 4",
-          title: "Section Heading Item 4",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-          disabled: true,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 6",
-          title: "Section Heading Item 6",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-      ],
-    },
   },
 };
 
@@ -272,48 +138,5 @@ export const ContainerTabsDarkAlt = {
     type_variant: "container-tabs",
     unique_id: "123456",
     variant: "dark-alt",
-    data: {
-      items: [
-        {
-          tab_text: "Tab label 1",
-          title: "Section Heading (H3)",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 2",
-          title: "Section Heading Item 2",
-          icon: "qld-icon qld-icon-md qld-icon-calendar",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 3",
-          title: "Section Heading Item 3",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 4",
-          title: "Section Heading Item 4",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-          disabled: true,
-        },
-        {
-          tab_text: "Tab label 5",
-          title: "Section Heading Item 5",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-        {
-          tab_text: "Tab label 6",
-          title: "Section Heading Item 6",
-          content:
-            "<p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.</p>",
-        },
-      ],
-    },
   },
 };

package/src/components/bs5/tag/Tag.mdx

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

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

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

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

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

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

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

package/src/components/bs5/typography/Typography.mdx

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

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

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

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

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

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

@@ -68,6 +68,8 @@ export default {
         url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-301553&mode=design&t=5REJ3QGtTW1K0fGT-4",
       },
     ],
+    backgrounds: { disable: false },
+    globals: { backgrounds: { value: "default" } },
   },
 };
 
@@ -80,12 +82,7 @@ export const Default = {};
  * Light colour Callout
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -103,12 +100,7 @@ export const Light = {
  * Alternative Callout
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -126,12 +118,7 @@ export const Alternative = {
  * Dark Callout
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -149,12 +136,7 @@ export const Dark = {
  * Dark alternative Callout
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/video/Video.mdx

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

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

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

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

@@ -84,7 +84,9 @@ export default {
     controls: {
       exclude: ["transcriptAccordion"],
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -110,12 +112,7 @@ export const Custom = {
  * Light colour Video
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -131,12 +128,7 @@ export const Light = {
  * Alternative Video
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -152,12 +144,7 @@ export const Alternative = {
  * Dark Video
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -173,12 +160,7 @@ export const Dark = {
  * Dark alternative Video
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `