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

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

@@ -825,7 +825,7 @@
   </section>
   {{/each }}
 </div>`;var R=`
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.4","branch":"HEAD","tag":"v2.0.4","commit":"0b896ac48e7daadbef3fdbd2caccc437be120856","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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.4","branch":"HEAD","tag":"v2.0.4","commit":"0b896ac48e7daadbef3fdbd2caccc437be120856","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","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.4","branch":"HEAD","tag":"v2.0.4","commit":"0b896ac48e7daadbef3fdbd2caccc437be120856","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "",
   "repository": {
     "type": "git",
@@ -10,9 +10,11 @@
   "scripts": {
     "prepare": "npm run build",
     "start": "npm run build",
-    "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' .",
+    "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",
     "build:icons": "node esbuild.js --icons",
+    "build:theme": "node esbuild.js --theme",
+    "build:theme:icons": "node esbuild.js --theme --icons",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:integration": "npm-run-all --parallel --race serve:test test:testrunner",
@@ -22,7 +24,9 @@
     "serve:test": "http-server dist -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",
     "build-storybook": "storybook build --webpack-stats-json ",
+    "build-storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook build --webpack-stats-json ",
     "build-storybook:serve": "http-server storybook-static -p 8080"
   },
   "keywords": [],

package/esbuild.js

@@ -1,6 +1,7 @@
 /* global process */
 // ESBUILD PROJECT DEPENDENCIES
 import * as esbuild from "esbuild";
+import path from "path";
 
 //Local ESBUILD PLUGINS
 import QGDSupdateHandlebarsPartialsPlugin from "./.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js";
@@ -10,6 +11,7 @@ import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js";
 import QDGScopy from "./.esbuild/plugins/qgds-plugin-copy-assets.js";
 import { QGDSgenerateIconAssetsPlugin } from "./.esbuild/plugins/qgds-plugin-generate-icon-assets.js";
 import { versionPlugin } from "./.esbuild/plugins/qgds-plugin-version.js";
+import { createOverrideThemeScssEntry } from "./.esbuild/helpers/scssOverrideTheme.js";
 
 //Open source ESBUILD PLUGINS
 import { sassPlugin } from "esbuild-sass-plugin";
@@ -19,7 +21,6 @@ import handlebarsPlugin from "esbuild-plugin-handlebars";
 import minimist from "minimist";
 const argv = minimist(process.argv.slice(2));
 
-
 // https://esbuild.github.io/getting-started/#build-scripts
 const buildConfig = {
   bundle: true,
@@ -65,7 +66,12 @@ const buildConfig = {
     versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
-    sassPlugin(),
+    sassPlugin({
+      //Hide sass deprecation warnings with a quiet flag...  npm run build -- --quiet
+      silenceDeprecations: argv.quiet
+        ? ["import", "global-builtin", "mixed-decls", "color-functions"]
+        : [],
+    }),
     QDGSbuildLog(),
   ],
 };
@@ -81,7 +87,7 @@ const buildNodeConfig = {
   external: buildConfig.external,
   platform: "node",
   target: ["node20"],
-  format: 'esm',
+  format: "esm",
   entryPoints: [
     {
       in: "./src/js/handlebars.init.cjs",
@@ -95,26 +101,45 @@ const buildNodeConfig = {
     versionPlugin(),
     handlebarsPlugin(),
   ],
-}
+};
 
 async function StartBuild() {
-  let ctx = await esbuild.context(buildConfig);
+  // 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");
+    const mainScss = path.join(cssDir, "main.scss");
 
+    themes.forEach((themeVar) => {
+      const tempEntry = createOverrideThemeScssEntry({
+        cssDir,
+        mainScss,
+        themeVar,
+      });
+      tempEntries.push(tempEntry);
+      config.entryPoints.push({
+        in: tempEntry,
+        out: `./assets/css/qld.${themeVar}.bootstrap`,
+      });
+      console.log(`theme SCSS entry created: ${tempEntry}`);
+    });
+  }
+
+  let ctx = await esbuild.context(config);
   if (argv.watch === true) {
-    // "npm run watch"
     await ctx.watch();
-
   } else {
-    // "npm run build" or "node build.js"
     await ctx.rebuild();
     await ctx.dispose();
+    // Note: Temp files are preserved for performance - they're only recreated when content changes
   }
 
   //node js module
   let ctxNode = await esbuild.context(buildNodeConfig);
   await ctxNode.rebuild();
   await ctxNode.dispose();
-
 }
 
 //Initate the project build...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "",
   "repository": {
     "type": "git",
@@ -10,9 +10,11 @@
   "scripts": {
     "prepare": "npm run build",
     "start": "npm run build",
-    "lint": "eslint --fix --ext .js,.json --ignore-pattern 'docs/*' --ignore-pattern 'dist/*' --ignore-pattern 'storybook-static/*' .",
+    "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",
     "build:icons": "node esbuild.js --icons",
+    "build:theme": "node esbuild.js --theme",
+    "build:theme:icons": "node esbuild.js --theme --icons",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:integration": "npm-run-all --parallel --race serve:test test:testrunner",
@@ -22,7 +24,9 @@
     "serve:test": "http-server dist -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",
     "build-storybook": "storybook build --webpack-stats-json ",
+    "build-storybook:themes": "ENABLE_DYNAMIC_THEME=true storybook build --webpack-stats-json ",
     "build-storybook:serve": "http-server storybook-static -p 8080"
   },
   "keywords": [],

package/src/components/bs5/card/card--icon-list-footer.stories.js

@@ -0,0 +1,171 @@
+// card--icon-list-footer.stories.js
+import { Card } from "./Card.js";
+import { Link } from "../link/link.js";
+import defaultdata from "./card.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Card/Icon List Footer",
+  render: (args) => {
+    // Create icon list for card footer following Figma design pattern
+    const figmaLinkData = {
+      title: "Related links",
+      linkList: [
+        {
+          url: "#",
+          id: "link-1",
+          label: "Label",
+          target: "_self",
+          arialabel: "Label",
+          iconClass: "qld-icon-arrow-right",
+          iconPosition: "leading",
+          download: null,
+        },
+        {
+          url: "#",
+          id: "link-2",
+          label: "Label",
+          target: "_self",
+          arialabel: "Label",
+          iconClass: "qld-icon-profile",
+          iconPosition: "leading",
+          download: null,
+        },
+        {
+          url: "#",
+          id: "link-3",
+          label: "Label",
+          target: "_self",
+          arialabel: "Label",
+          iconClass: "qld-icon-like",
+          iconPosition: "leading",
+          download: null,
+        },
+      ],
+    };
+    const iconListHtml = new Link(figmaLinkData).html;
+
+    return `
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+      ${new Card({ ...args, footer: iconListHtml }).html}
+      ${new Card({ ...args, variantClass: "light", footer: iconListHtml }).html}
+      ${new Card({ ...args, variantClass: "alt", footer: iconListHtml }).html}
+      ${new Card({ ...args, variantClass: "dark", footer: iconListHtml }).html}
+      ${new Card({ ...args, variantClass: "dark-alt", footer: iconListHtml }).html}
+      ${
+        new Card({
+          ...args,
+          iconClasses: "qld-icon-design",
+          iconPosition: "icon-left",
+          footer: iconListHtml,
+        }).html
+      }
+      ${
+        new Card({
+          ...args,
+          iconClasses: "qld-icon-design",
+          iconPosition: "icon-top",
+          footer: iconListHtml,
+        }).html
+      }
+      ${
+        new Card({
+          ...args,
+          image: "./img/image-placeholder.png",
+          imageAlt: "A grey placeholder image with an icon in the centre.",
+          footer: iconListHtml,
+        }).html
+      }
+      ${
+        new Card({
+          ...args,
+          image: "./img/image-placeholder.png",
+          imageAlt: "A grey placeholder image with an icon in the centre.",
+          video: true,
+          videoDuration: "2:34",
+          footer: iconListHtml,
+        }).html
+      }
+    </div>
+    `;
+  },
+  args: {
+    ...defaultdata.multiAction,
+    title: "Card with Icon List Footer",
+    description:
+      "This card demonstrates the proper nesting of an Icon List component into the Card Footer following the Figma design pattern with 0.75rem gap spacing between links and 12px gap between icons and text.",
+  },
+  argTypes: {
+    date: {
+      control: "text",
+    },
+    variantClass: {
+      control: "select",
+      options: {
+        Default: "default",
+        Light: "light",
+        Alternative: "alt",
+        Dark: "dark",
+        "Dark alternative": "dark-alt",
+      },
+    },
+    action: {
+      control: "select",
+      options: {
+        None: "no",
+        Single: "single",
+        Multi: "multi",
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "This story demonstrates how to properly nest an Icon List component into the Card Footer following the Figma design pattern with 0.75rem gap spacing between links and 12px gap between icons and text. Each link uses consistent 'Label' text with different leading icons (arrow-right, profile, like) as shown in the design reference.",
+      },
+      controls: {
+        exclude: ["link", "arrow", "iconPosition", "footer"],
+      },
+    },
+    design: {
+      name: "QGDS Figma Reference - Cards",
+      type: "figma",
+      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=card-component",
+    },
+  },
+};
+
+export const Default = {};
+
+export const WithLeadingIcons = {
+  name: "With leading icon variant",
+  args: {
+    iconClasses: "qld-icon-design",
+    iconPosition: "icon-left",
+  },
+};
+
+export const LightTheme = {
+  name: "Light theme with icon list",
+  args: {
+    variantClass: "light",
+  },
+};
+
+export const DarkTheme = {
+  name: "Dark theme with icon list",
+  args: {
+    variantClass: "dark",
+  },
+};
+
+export const WithVideo = {
+  name: "Video card with icon list footer",
+  args: {
+    image: "./img/image-placeholder.png",
+    imageAlt: "A grey placeholder image with an icon in the centre.",
+    video: true,
+    videoDuration: "2:34",
+  },
+};

package/src/components/bs5/card/card.scss

@@ -431,6 +431,21 @@
         margin: 0;
       }
     }
+    /////////////////////////////////////////////
+    // Override default spacing on link list component for icon links
+    .link-list {
+      display: flex;
+      flex-direction: column;
+      margin: 1rem 0;
+      padding: 0;
+      gap: 0.75rem;
+      .link-item {
+        margin: 0;
+        a {
+          gap: 12px;
+        }
+      }
+    }
   }
   .card-footer {
     font-size: 1.25rem;

package/src/components/bs5/header/header.scss

@@ -293,6 +293,14 @@
     position: relative;
     color: var(--#{$prefix}header-color-text);
     background: var(--#{$prefix}header-color-bg);
+
+    // Patch for v2.0.5. Redundant after header QGDS-266 is merged
+    border-bottom: 0.25rem solid var(--qld-light-accent);
+
+    @include media-breakpoint-up(lg) {
+      border-bottom: none;
+    }
+    // End patch for v2.0.5
   }
 
   &-brand {

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

@@ -43,12 +43,12 @@ const sideNavData = {
     },
     {
       link: "#",
-      label: "Content page (basic bar)",
+      label: "Content page (with bar)",
       class: "",
     },
     {
       link: "#",
-      label: "Single page form",
+      label: "Page with form",
       class: "",
     },
   ],

package/src/components/bs5/searchInput/searchInput.test.js

@@ -1,4 +1,4 @@
-import { expect, it, describe, test, beforeEach } from "vitest";
+import { expect, it, describe, test, beforeEach, afterEach } from "vitest";
 import { JSDOM } from "jsdom";
 import { SearchInput } from "./SearchInput.js";
 import mockData from "./searchInput.data.json";
@@ -63,12 +63,15 @@ describe("SearchInput", () => {
     d = dom.window.document;
     window = dom.window;
 
-    // Wait for scripts to execute
-    await waitFor();
+    // Wait for scripts to execute and DOM to be fully ready
+    await waitFor(100);
+
+    // Additional wait to ensure all scripts are fully initialized
+    await new Promise(resolve => setTimeout(resolve, 100));
 
     form = d.querySelector(".site-search");
-    searchInput = form.querySelector(".qld-search-input input");
-    suggestions = form.querySelector(".suggestions");
+    searchInput = form?.querySelector(".qld-search-input input");
+    suggestions = form?.querySelector(".suggestions");
 
     // Ensure elements exist
     if (!form || !searchInput || !suggestions) {
@@ -76,6 +79,19 @@ describe("SearchInput", () => {
     }
   });
 
+  afterEach(() => {
+    // Clean up DOM and prevent memory leaks
+    if (dom) {
+      dom.window.close();
+      dom = null;
+      d = null;
+      window = null;
+      form = null;
+      searchInput = null;
+      suggestions = null;
+    }
+  });
+
   it("Renders as expected", () => {
     const SearchInputComponent = new SearchInput(mockData);
     expect(SearchInputComponent.html).toMatchSnapshot();

package/src/css/main.masterbrand.scss

@@ -0,0 +1,137 @@
+@import './themes/masterbrand.scss';// Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
+
+// External fonts
+@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap");
+$font-family-sans-serif:
+  "Noto Sans",
+  system-ui,
+  -apple-system,
+  "Segoe UI",
+  Roboto,
+  "Helvetica Neue",
+  "Noto Sans",
+  "Liberation Sans",
+  Arial,
+  sans-serif,
+  "Apple Color Emoji",
+  "Segoe UI Emoji",
+  "Segoe UI Symbol",
+  "Noto Color Emoji" !default;
+$font-family-sitename: "Fira Sans";
+
+//Prefix to namespace design-system classes
+$prefix: "qld-";
+$enable-cssgrid: true;
+$color-mode-type: data;
+$enable-dark-mode: true;
+
+// 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
+
+// 2. QLD Design System variables (Bootstrap overrides)
+@import "./qld-variables";
+@import "variables";
+
+// 3. Include remainder of bootstrap
+// 3.1 Required
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";
+
+// 3.2 QLD Design System utilities (is dependent on maps, mixins and utilities being available)
+@import "./qld-utilities";
+
+// 3.2 Recommended, Resets and shared
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/helpers";
+
+// 3.3 Optional components
+@import "../../node_modules/bootstrap/scss/accordion";
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/carousel";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/list-group";
+@import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/progress";
+@import "../../node_modules/bootstrap/scss/transitions";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/offcanvas";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/placeholders";
+@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/spinners";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/toasts";
+@import "../../node_modules/bootstrap/scss/tooltip";
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "../../node_modules/bootstrap/scss/utilities/api";
+
+// Themes
+@import "qld-theme";
+
+//8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
+@import "./qld-type";
+
+// Common Layout Blocks
+@import "../components/common/layout/content";
+@import "../components/common/layout/container";
+
+// 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency.
+@import "../components/bs5/accordion/accordion";
+@import "../components/bs5/banner/banner";
+@import "../components/bs5/blockquote/blockquote";
+@import "../components/bs5/breadcrumbs/breadcrumbs";
+@import "../components/bs5/button/button";
+@import "../components/bs5/callout/callout";
+@import "../components/bs5/card/card";
+@import "../components/bs5/callToAction/callToAction";
+@import "../components/bs5/correctincorrect/correctincorrect";
+@import "../components/bs5/dateinput/dateinput";
+@import "../components/bs5/directionLinks/directionLinks";
+@import "../components/bs5/formcheck/formcheck";
+@import "../components/bs5/footer/footer";
+@import "../components/bs5/globalAlert/globalAlert";
+@import "../components/bs5/link/link";
+@import "../components/bs5/header/header";
+@import "../components/bs5/icons/icons";
+@import "../components/bs5/inpageAlert/inpageAlert";
+@import "../components/bs5/image/image";
+@import "../components/bs5/inpagenav/inpagenav";
+@import "../components/bs5/linkColumns/linkColumns";
+@import "../components/bs5/modal/modal";
+@import "../components/bs5/navbar/navbar";
+@import "../components/bs5/pagination/pagination";
+@import "../components/bs5/promotionalPanel/promotionalPanel";
+@import "../components/bs5/quickexit/quickexit";
+@import "../components/bs5/sidenav/sidenav";
+@import "../components/bs5/searchInput/searchInput";
+@import "../components/bs5/skiplinks/skipLinks";
+@import "../components/bs5/spinner/spinner";
+@import "../components/bs5/table/table";
+@import "../components/bs5/tabs/tabs";
+@import "../components/bs5/tag/tag";
+@import "../components/bs5/textbox/textInput";
+@import "../components/bs5/typography/typography";
+@import "../components/bs5/video/video";
+
+// Custom utility classes
+@import "utilities";
+
+// Print
+@import "qld-print";