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

package/.storybook/dynamicThemeDecorator.js

@@ -6,7 +6,7 @@ let currentTheme = "masterbrand";
 // Automatically generate theme modules based on available theme files
 const themeModules = (() => {
   const modules = {
-    customized: () => import("../src/css/main.scss"),
+    masterbrand: () => import("../src/css/main.scss"),
   };
 
   // Get all theme files in the themes directory
@@ -50,27 +50,23 @@ function mapStyleElementsByTheme(callback) {
   });
 }
 
-const unloadTheme = (themeName) => {
-  // Cache current theme's style elements before removing
-  // Remove existing style elements for current theme
-  const currentStyleElements = [];
-  const themeNotExist = themeName && !themeStyleElements.has(themeName);
-  mapStyleElementsByTheme((element) => {
-    if (themeNotExist) {
-      currentStyleElements.push(element.cloneNode(true));
-    }
-    element.remove();
-  });
-
-  if (currentStyleElements.length > 0) {
-    themeStyleElements.set(themeName, currentStyleElements);
-  }
-};
-
 const loadTheme = async (themeName) => {
-  // Unload current theme if it's different
-  if (currentTheme && currentTheme !== themeName) {
-    unloadTheme(currentTheme);
+  // Store the previous theme name before changing
+  const previousTheme = currentTheme;
+
+  // Cache previous theme's elements BEFORE loading new theme
+  const previousThemeElements = [];
+  if (previousTheme && previousTheme !== themeName) {
+    mapStyleElementsByTheme((element) => {
+      previousThemeElements.push(element);
+    });
+    // Store in cache if not already cached
+    if (!themeStyleElements.has(previousTheme)) {
+      themeStyleElements.set(
+        previousTheme,
+        previousThemeElements.map((el) => el.cloneNode(true)),
+      );
+    }
   }
 
   // If theme style elements are cached, restore them
@@ -79,6 +75,10 @@ const loadTheme = async (themeName) => {
     cachedElements.forEach((element) => {
       document.head.appendChild(element.cloneNode(true));
     });
+    // Remove previous theme elements after new theme is fully loaded
+    previousThemeElements.forEach((element) => {
+      element.remove();
+    });
     currentTheme = themeName;
     return;
   }
@@ -108,6 +108,11 @@ const loadTheme = async (themeName) => {
       // Store references
       loadedThemes.set(themeName, true);
       currentTheme = themeName;
+
+      // Remove previous theme elements after new theme is fully loaded
+      previousThemeElements.forEach((element) => {
+        element.remove();
+      });
     } catch (error) {
       console.warn(`Failed to load theme: ${themeName}`, error);
     }
@@ -132,11 +137,11 @@ export const dynamicThemeGlobalTypes = {
       icon: "switchalt",
       items: (() => {
         // Dynamically generate toolbar items from available themes
-        const items = [];
+        const items = [{ value: "masterbrand", title: "Masterbrand theme" }];
 
         // Add items for all discovered themes
         Object.keys(themeModules).forEach((themeName) => {
-          if (themeName !== "customized") {
+          if (themeName !== "masterbrand") {
             const capitalizedName =
               themeName.charAt(0).toUpperCase() + themeName.slice(1);
             items.push({
@@ -145,7 +150,6 @@ export const dynamicThemeGlobalTypes = {
             });
           }
         });
-        items.push({ value: "customized", title: "Customized theme" });
         return items;
       })(),
       showName: true,

package/.storybook/main.js

@@ -46,11 +46,13 @@ const config = {
 
   viteFinal: async (config, { configType }) => {
     config.root = "./dist";
-    
+
     // Define environment variables for the browser
     config.define = {
       ...config.define,
-      'import.meta.env.ENABLE_DYNAMIC_THEME': JSON.stringify(process.env.ENABLE_DYNAMIC_THEME === 'true')
+      "import.meta.env.ENABLE_DYNAMIC_THEME": JSON.stringify(
+        process.env.ENABLE_DYNAMIC_THEME === "true",
+      ),
     };
     // config.plugins.push({
     //     name: "html-transform",

package/.storybook/preview.js

@@ -1,6 +1,6 @@
 import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
 import "../src/js/qld.bootstrap.js";
-import "../src/css/main.masterbrand.scss";
+import "../src/css/main.scss";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import {
   withDynamicTheme,

package/dist/assets/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.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???