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

package/dist/assets/node/handlebars.init.min.js

@@ -808,7 +808,7 @@ var head_default;
 var init_head = __esm({
   "src/components/bs5/head/head.hbs?raw"() {
     head_default = `
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.7","branch":"HEAD","tag":"v2.0.7","commit":"c204c02c3420408a069d8228b40be125edc579d8","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.7","branch":"HEAD","tag":"v2.0.7","commit":"c204c02c3420408a069d8228b40be125edc579d8","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/qld-gov-au/qgds-bootstrap5"
   },
   "main": "index.js",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "husky && npm run build",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
@@ -21,7 +24,7 @@
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
     "watch": "node esbuild.js --watch",
     "serve": "http-server dist -p 8080",
-    "serve:test": "http-server dist -p 8081 --silent",
+    "serve:test": "http-server . -p 8081 --silent",
     "dev-storybook": "npm-run-all --parallel watch storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook dev -p 6006",
@@ -50,22 +53,16 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/html": "^8.6.14",
-    "@storybook/html-vite": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@stylistic/eslint-plugin-js": "2.1.0",
+    "@storybook/addon-a11y": "^9.1.9",
+    "@storybook/addon-docs": "^9.1.9",
+    "@storybook/addon-links": "^9.1.9",
+    "@storybook/addon-themes": "^9.1.9",
+    "@storybook/cli": "^9.1.9",
+    "@storybook/html-vite": "^9.1.9",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
@@ -77,11 +74,13 @@
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "9.30.0",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-storybook": "^9.1.9",
+    "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
@@ -91,17 +90,16 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.37",
     "postcss": "^8.5.4",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
-    "selenium-webdriver": "^4.32.0",
-    "storybook": "^8.6.14",
-    "storybook-addon-deep-controls": "^0.9.2",
+    "selenium-webdriver": "^4.33.0",
+    "storybook": "^9.1.9",
+    "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
-    "vitest": "^3.2.4",
-    "watch": "^1.0.2"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

package/dist/sample-data/correctincorrect/correctincorrect.data.json

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

package/dist/sample-data/tabs/tabs.data.json

@@ -28,8 +28,7 @@
       {
         "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
+        "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 5",

package/dist/sample-data/typography/typography.data.json

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

package/esbuild.js

@@ -48,6 +48,11 @@ const buildConfig = {
       in: "./src/js/handlebars.helpers.js",
       out: "./assets/js/handlebars.helpers.bundle",
     },
+    {
+      //Deprecated init is where it should be at
+      in: "./src/js/handlebars.init.js",
+      out: "./assets/js/handlebars.partials",
+    },
     {
       in: "./src/js/handlebars.init.js",
       out: "./assets/js/handlebars.init.min",
@@ -70,11 +75,18 @@ const buildConfig = {
     versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
+    //https://github.com/twbs/bootstrap/issues/40962 bootstrap 5.x is not ready for sass 1.80, so silence what we can't change (review 2026)
     sassPlugin({
-      //Hide sass deprecation warnings with a quiet flag...  npm run build -- --quiet
-      silenceDeprecations: argv.quiet
-        ? ["import", "global-builtin", "mixed-decls", "color-functions"]
-        : [],
+      silenceDeprecations: [
+        "legacy-js-api",
+        "mixed-decls",
+        "color-functions",
+        "global-builtin",
+        "import",
+      ],
+      indentType: "space",
+      indentWidth: 2,
+      includePaths: ["./node_modules"],
     }),
     QDGSbuildLog(),
   ],

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/qld-gov-au/qgds-bootstrap5"
   },
   "main": "index.js",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
-    "prepare": "npm run build",
+    "prepare": "husky && npm run build",
     "start": "npm run build",
     "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' --ignore-pattern 'src/js/handlebars.partials.js' .",
     "build": "node esbuild.js",
@@ -21,7 +24,7 @@
     "test:testrunner": "sleep 2 && mocha --timeout 10000 --require ./test/testServer.test.js ",
     "watch": "node esbuild.js --watch",
     "serve": "http-server dist -p 8080",
-    "serve:test": "http-server dist -p 8081 --silent",
+    "serve:test": "http-server . -p 8081 --silent",
     "dev-storybook": "npm-run-all --parallel watch storybook",
     "storybook": "storybook dev -p 6006",
     "storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook dev -p 6006",
@@ -50,22 +53,16 @@
     "bootstrap": "^5.3.8"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/addon-viewport": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/cli": "^8.6.14",
-    "@storybook/html": "^8.6.14",
-    "@storybook/html-vite": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.14",
-    "@storybook/theming": "^8.6.14",
-    "@stylistic/eslint-plugin-js": "2.1.0",
+    "@storybook/addon-a11y": "^9.1.9",
+    "@storybook/addon-docs": "^9.1.9",
+    "@storybook/addon-links": "^9.1.9",
+    "@storybook/addon-themes": "^9.1.9",
+    "@storybook/cli": "^9.1.9",
+    "@storybook/html-vite": "^9.1.9",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
@@ -77,11 +74,13 @@
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint": "9.30.0",
+    "eslint-plugin-json": "^4.0.1",
+    "eslint-plugin-storybook": "^9.1.9",
+    "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
@@ -91,17 +90,16 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.37",
     "postcss": "^8.5.4",
-    "prettier": "3.5.3",
+    "prettier": "3.6.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
-    "selenium-webdriver": "^4.32.0",
-    "storybook": "^8.6.14",
-    "storybook-addon-deep-controls": "^0.9.2",
+    "selenium-webdriver": "^4.33.0",
+    "storybook": "^9.1.9",
+    "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
-    "vitest": "^3.2.4",
-    "watch": "^1.0.2"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"

package/pom.xml

@@ -12,8 +12,8 @@
 
     <properties>
         <frontend-maven-plugin.version>1.15.0</frontend-maven-plugin.version>
-        <node.version>v20.12.0</node.version>
-        <npm.version>10.5.0</npm.version>
+        <node.version>v22.19.0</node.version>
+        <npm.version>10.9.3</npm.version>
     </properties>
 
     <build>
@@ -107,7 +107,7 @@
                         <goals>
                             <goal>npm</goal>
                         </goals>
-                        <phase>storybook</phase>
+                        <phase>package</phase>
                         <configuration>
                             <arguments>run build-storybook</arguments>
                         </configuration>

package/src/components/bs5/accordion/Accordion.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 AccordionStories from "./accordion.stories";
 import defaultdata from "./accordion.data.json";
 import "../../../stories/documentation/storybook-documentation.scss";

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

@@ -20,6 +20,9 @@ export default {
       options: ["h2", "h3", "h4", "h5", "h6"],
     },
   },
+  globals: {
+    backgrounds: { value: "default" },
+  },
 
   /**
    * Additional parameters for the story.
@@ -36,13 +39,18 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6276-45691&mode=design&t=crJKtPwMG2IcZf5E-4",
     },
+    backgrounds: {
+      disable: false,
+    },
   },
 };
 
 /**
  * Default Accordion story
  */
-export const Default = {};
+export const Default = {
+  globals: { backgrounds: { value: "default" } },
+};
 
 /**
  * Accordion in 'Light' colour theme.
@@ -57,11 +65,8 @@ export const Light = {
       2: { ...defaultdata.accordionItems[2], id: "light-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
+  globals: {
+    backgrounds: { value: "light" },
   },
   decorators: [
     (Story) => {
@@ -89,11 +94,8 @@ export const Alternative = {
       2: { ...defaultdata.accordionItems[2], id: "alt-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
+  globals: {
+    backgrounds: { value: "alt" },
   },
   decorators: [
     (Story) => {
@@ -121,11 +123,8 @@ export const Dark = {
       2: { ...defaultdata.accordionItems[2], id: "dark-three" },
     },
   },
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
-    },
+  globals: {
+    backgrounds: { value: "dark" },
   },
   decorators: [
     (Story) => {
@@ -153,12 +152,8 @@ export const DarkAlternative = {
       2: { ...defaultdata.accordionItems[2], id: "dark-alt-three" },
     },
   },
-  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/backToTop/backToTop.mdx

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

package/src/components/bs5/banner/Banner.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 BannerStories from "./banner.stories";
 import defaultdata from "./banner.data.json";
 

package/src/components/bs5/blockquote/Blockquote.mdx

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

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

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

package/src/components/bs5/breadcrumbs/Breadcrumbs.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 BreadcrumbsStories from "./breadcrumbs.stories";
 import defaultdata from "./breadcrumbs.data.json";
 

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

@@ -15,7 +15,11 @@ export default {
       description: `Pass a JSON object containing an array of links to the component.`,
     },
   },
-
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
   decorators: [
     (Story, context) => {
       const { args } = context; // Deconstruct args from the context oject
@@ -47,30 +51,36 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98076&mode=design&t=Ge7frKNP4uEGswUz-0",
     },
+    backgrounds: {
+      disable: false,
+    },
   },
 };
 
 /**
  * Default Breadcrumbs story
  * */
-export const Default = {};
+export const Default = {
+  globals: {
+    backgrounds: {
+      value: "default",
+    },
+  },
+};
 
 /**
  * Dark Breadcrumbs story
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
-
   args: {
     ...defaultdata.default,
     class: "dark",
   },
-
   decorators: [
     (Story) => {
       return `
@@ -92,10 +102,9 @@ export const WithExpanderDefault = {
  * Breadcrumbs with expander (Dark)
  * */
 export const WithExpanderDark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+      value: "dark",
     },
   },
   args: {

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

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

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

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

package/src/components/bs5/button/Button.mdx

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

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

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

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

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

@@ -16,14 +16,14 @@ export default {
     <div class="container">
       <div class="row">
         <div class="col">
-          ${new CallToAction({...args}).html}
+          ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({...args, label: 'Label', "class": [{"small": false}, {"view-all": false}]}).html}
+          ${new CallToAction({ ...args, label: "Label", class: [{ small: false }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>
-    `
+    `;
   },
   parameters: {
     design: {
@@ -31,7 +31,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=v3sxViBgYUUmwplL-0",
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -39,6 +41,7 @@ export default {
  */
 export const Default = {
   args: defaultdata,
+  globals: { backgrounds: { value: "default" } },
   decorators: [
     (Story) => {
       return `
@@ -54,14 +57,7 @@ export const Default = {
  * Call To Action - Light
  * */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -77,14 +73,7 @@ export const Light = {
  * Call To Action - Light-Alt
  * */
 export const LightAlt = {
-  parameters: {
-    backgrounds: {
-      default: 'LightAlt',
-      values: [
-        { name: 'LightAlt', value: 'var(--qld-light-alt-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -100,14 +89,7 @@ export const LightAlt = {
  * Call To Action - Dark
  * */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-dark-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -123,14 +105,7 @@ export const Dark = {
  * Call To Action - Dark-Alt
  * */
 export const DarkAlt = {
-  parameters: {
-    backgrounds: {
-      default: 'DarkAlt',
-      values: [
-        { name: 'DarkAlt', value: 'var(--qld-dark-alt-background)' },
-      ],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `
@@ -149,33 +124,23 @@ export const Small = {
   args: {
     ...defaultdata,
     label: "View all",
-    class: [
-      {"small": true}, 
-      {"view-all": true},
-    ],
+    class: [{ small: true }, { "view-all": true }],
   },
   render: (args) => {
     return `
     <div class="container">
       <div class="row">
         <div class="col">
-          ${new CallToAction({...args}).html}
+          ${new CallToAction({ ...args }).html}
         </div>
         <div class="col">
-          ${new CallToAction({...args, label: 'Label', "class": [{"small": true}, {"view-all": false}]}).html}
+          ${new CallToAction({ ...args, label: "Label", class: [{ small: true }, { "view-all": false }] }).html}
         </div>
       </div>
     </div>
-    `
-  },
-  parameters: {
-    backgrounds: {
-      default: 'DarkAlt',
-      values: [
-        { name: 'DarkAlt', value: 'var(--qld-dark-alt-background)' },
-      ],
-    },
+    `;
   },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/components/bs5/callout/Callout.mdx

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