@qld-gov-au/qgds-bootstrap5 2.0.5 → 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.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","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.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","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.5",
+  "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

@@ -37,13 +37,22 @@ const buildConfig = {
       out: "./assets/js/qld.bootstrap.min",
     },
     {
-      in: "./src/css/main.scss",
+      in: "./src/css/main.scss", //default masterbrand theme
       out: "./assets/css/qld.bootstrap",
     },
+    {
+      in: "./src/css/main.legacy.scss", //legacy masterbrand theme (before October 2025)
+      out: "./assets/css/qld.bootstrap.legacy",
+    },
     {
       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",
@@ -66,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(),
   ],
@@ -107,6 +123,7 @@ async function StartBuild() {
   // Choose configuration based on theme
   let config = buildConfig;
   const tempEntries = [];
+
   if (argv.theme) {
     const themes = Array.isArray(argv.theme) ? argv.theme : [argv.theme];
     const cssDir = path.resolve("src/css");

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.5",
+  "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.scss

@@ -3,11 +3,11 @@
 
 //SASS variables;
 $accordion-padding: 1rem;
-$accordion-icon-color: $qld-brand-secondary-dark;
-$accordion-icon-active-color: $qld-brand-secondary-dark;
+$accordion-icon-color: $color-default-color-light-action-primary;
+$accordion-icon-active-color: $color-default-color-light-action-primary;
 $accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
 $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-$accordion-icon-dark-color: $qld-brand-accent;
+$accordion-icon-dark-color: $color-default-color-dark-action-primary;
 $accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
 $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
 

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