Merge branch 'develop' of github.com:qld-gov-au/qgds-vanilla into fea…

…ture/QGDS-93-theme-switcher

.esbuild/helpers/config.js

@@ -37,7 +37,7 @@ const THEMES_FOLDER = "node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles";
 const themesMap = {};
 
 fs.readdirSync(THEMES_FOLDER).forEach((file) => {
-  const match = file.match(/^qgds-(.+)-palette\.scss$/);
+  const match = file.match(/^(.+)-palette\.scss$/);
   if (match) {
     const theme = match[1];
     themesMap[theme] = {
@@ -47,7 +47,7 @@ fs.readdirSync(THEMES_FOLDER).forEach((file) => {
     };
   }
 });
-
+console.log('Themes Map:', themesMap);
 const CSS_FOLDER = "src/css";
 
 Object.entries(themesMap).forEach(([theme, { paletteFile, scss, variables }]) => {
@@ -112,16 +112,16 @@ if (entryMatch) {
     .split("},")
     .map((e) => e.trim().replace(/[\s{},]+$/, ""))
     .filter((e) => e.includes("in:") && e.includes(".js"))
-    .map((e) => e + ",\n        }"); // Retain existing JS entries
+    .map((e) => e + ",\n    }"); // Retain existing JS entries
 
   // Generate SCSS entries based on `themeMap`
   const newEntries = Object.values(themesMap).map(({ scss }) => {
     const scssPath = `./src/css/${scss}.scss`;
     const outputPath = `./assets/css/${scss}.min`;
     return `{
-          in: "${scssPath}",
-          out: "${outputPath}",
-        }`;
+      in: "${scssPath}",
+      out: "${outputPath}",
+    }`;
   });
 
   // Combine JS and SCSS entries
@@ -130,7 +130,7 @@ if (entryMatch) {
   // Replace `entryPoints` in `esbuild.js`
   esbuildContent = esbuildContent.replace(
     entryRegex,
-    `entryPoints: [\n        ${updatedEntries.join(",\n        ")}\n    ]`,
+    `entryPoints: [\n    ${updatedEntries.join(",\n    ")},\n  ]`,
   );
 
   fs.writeFileSync(ESBUILD_FILE, esbuildContent);

.github/workflows/npmjsPackage.yml

@@ -20,6 +20,7 @@ on:
 
 jobs:
   build:
+    if: github.repository == 'qld-gov-au/qgds-vanilla' #lock npmjs deployment to single repo, alter if you change package.json
     runs-on: ubuntu-latest
     strategy:
       matrix:

esbuild.js

@@ -32,35 +32,31 @@ const buildConfig = {
   external: ["fs", "path", "handlebars", "../img/*"],
 
   entryPoints: [
-        {
-      in: "./src/js/main.js",
-      out: "./assets/js/main.min",
-        },
-        {
+    {
       in: "./src/js/index.js",
       out: "./assets/js/index.min",
-        },
-        {
-          in: "./src/css/main-campaign-neon.scss",
-          out: "./assets/css/main-campaign-neon.min",
-        },
-        {
-          in: "./src/css/main-qld-corporate.scss",
-          out: "./assets/css/main-qld-corporate.min",
-        },
-        {
-          in: "./src/css/main.scss",
-          out: "./assets/css/main.min",
-        },
-        {
-          in: "./src/css/main-qld-high-contrast.scss",
-          out: "./assets/css/main-qld-high-contrast.min",
-        },
-        {
-          in: "./src/css/main-qld-maroon.scss",
-          out: "./assets/css/main-qld-maroon.min",
-        }
-    ],
+    },
+    {
+      in: "./src/css/main-campaign-neon.scss",
+      out: "./assets/css/main-campaign-neon.min",
+    },
+    {
+      in: "./src/css/main-qld-corporate.scss",
+      out: "./assets/css/main-qld-corporate.min",
+    },
+    {
+      in: "./src/css/main.scss",
+      out: "./assets/css/main.min",
+    },
+    {
+      in: "./src/css/main-qld-high-contrast.scss",
+      out: "./assets/css/main-qld-high-contrast.min",
+    },
+    {
+      in: "./src/css/main-qld-maroon.scss",
+      out: "./assets/css/main-qld-maroon.min",
+    },
+  ],
 
   loader: {
     ".html": "text",

package.json

@@ -10,8 +10,8 @@
   },
   "scripts": {
     "config": "node .esbuild/helpers/config.js",
-    "prepare": "npm run config && npm run build",
-    "build": "node esbuild.js",
+    "prepare": "npm run build",
+    "build": "npm run config && node esbuild.js",
     "lint": "npm run lint:js && npm run lint:styles",
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write .",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.3",
     "@eslint/js": "^9.16.0",
-    "@qld-gov-au/qgds-tokens": "^3.1.5",
+    "@qld-gov-au/qgds-tokens": "^3.2.0",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",

src/components/_example/example.stories.js

@@ -4,10 +4,9 @@
  * @module example.stories
  */
 
-// Imports:
-// - the QGDS object containing all components
-// - data you need to populate the component for rendering
-import { QGDS } from "../../js/index.js";
+// load helpers handlebars
+import Handlebars from "handlebars";
+import handlebarsInit from "../../helpers/handlebars.init.js";
 import mockupData from "./example.data.json";
 
 /* ========= STORIES 👇 ===== */
@@ -19,8 +18,9 @@ import mockupData from "./example.data.json";
 export default {
   title: "Components / _Example",
   render: (args) => {
+    handlebarsInit(Handlebars);
     try {
-      return new QGDS.Example({ data: args }).htmlstring;
+      return Handlebars.compile("{{> example }}")(args);
     } catch (e) {
       return JSON.stringify(e) + JSON.stringify(args);
     }

src/components/back_to_top/back-to-top.stories.js

@@ -4,19 +4,19 @@
  * @module back-to-top.stories
  */
 
-// Imports:
-// - the QGDS object containing all components
-// - data you need to populate the component for rendering
-import { QGDS } from "../../js/index.js";
+// load helpers handlebars
+import Handlebars from "handlebars";
+import handlebarsInit from "../../helpers/handlebars.init.js";
 import mockupData from "./back-to-top.data.json";
 
 /* ========= STORIES 👇 ===== */
 
 export default {
   title: "Components / Back to Top",
   render: (args) => {
+    handlebarsInit(Handlebars);
     try {
-      return new QGDS.BackToTop({ data: args }).htmlstring;
+      return Handlebars.compile("{{> back-to-top }}")(args);
     } catch (e) {
       return JSON.stringify(e) + JSON.stringify(args);
     }

src/components/breadcrumbs/breadcrumbs.stories.js

@@ -4,14 +4,17 @@
  * @module breadcrumbs.stories
  */
 
-import { QGDS } from "../../js/index.js";
+// load helpers handlebars
+import Handlebars from "handlebars";
+import handlebarsInit from "../../helpers/handlebars.init.js";
 import mockupData from "./breadcrumbs.data.json";
 
 export default {
   title: "3 Layout/Breadcrumbs",
   render: (args) => {
+    handlebarsInit(Handlebars);
     try {
-      return new QGDS.Breadcrumbs({ data: args }).htmlstring;
+      return Handlebars.compile("{{> breadcrumbs }}")(args);
     } catch (e) {
       return JSON.stringify(e) + JSON.stringify(args);
     }

src/css/main-campaign-neon.scss

@@ -6,7 +6,7 @@
 @import "./../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds";
 // Level 3 (Theme-Palette) theme and palettes are combined in one file
 // Please don't change the following line. It is used by the build process to inject the correct path to the qgds-tokens package
-@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds-campaign-neon-palette.scss";
+@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/campaign-neon-palette.scss";
 // Mapping of the QGDS Design Tokens to general CSS variables
 @import "imports/variables-root.scss";
 // Mapping of tokens to CSS variables for the light and dark themes

src/css/main-qld-corporate.scss

@@ -6,7 +6,7 @@
 @import "./../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds";
 // Level 3 (Theme-Palette) theme and palettes are combined in one file
 // Please don't change the following line. It is used by the build process to inject the correct path to the qgds-tokens package
-@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds-qld-corporate-palette.scss";
+@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qld-corporate-palette.scss";
 // Mapping of the QGDS Design Tokens to general CSS variables
 @import "imports/variables-root.scss";
 // Mapping of tokens to CSS variables for the light and dark themes

src/css/main-qld-high-contrast.scss

@@ -6,7 +6,7 @@
 @import "./../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds";
 // Level 3 (Theme-Palette) theme and palettes are combined in one file
 // Please don't change the following line. It is used by the build process to inject the correct path to the qgds-tokens package
-@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds-qld-high-contrast-palette.scss";
+@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qld-high-contrast-palette.scss";
 // Mapping of the QGDS Design Tokens to general CSS variables
 @import "imports/variables-root.scss";
 // Mapping of tokens to CSS variables for the light and dark themes

src/css/main-qld-maroon.scss

@@ -6,7 +6,7 @@
 @import "./../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds";
 // Level 3 (Theme-Palette) theme and palettes are combined in one file
 // Please don't change the following line. It is used by the build process to inject the correct path to the qgds-tokens package
-@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds-qld-maroon-palette.scss";
+@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qld-maroon-palette.scss";
 // Mapping of the QGDS Design Tokens to general CSS variables
 @import "imports/variables-root.scss";
 // Mapping of tokens to CSS variables for the light and dark themes

src/css/main.scss

@@ -4,7 +4,7 @@
 @import "./../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds";
 // Level 3 (Theme-Palette) theme and palettes are combined in one file
 // Please don't change the following line. It is used by the build process to inject the correct path to the qgds-tokens package
-@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qgds-qld-default-palette.scss";
+@import "../../node_modules/@qld-gov-au/qgds-tokens/dist/scss/styles/qld-default-palette.scss";
 // Mapping of the QGDS Design Tokens to general CSS variables
 @import "imports/variables-root.scss";
 // Mapping of tokens to CSS variables for the light and dark themes