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

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.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|???

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.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|???

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.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|???

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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,
@@ -36,9 +37,13 @@ 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",
@@ -65,7 +70,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 +91,7 @@ const buildNodeConfig = {
   external: buildConfig.external,
   platform: "node",
   target: ["node20"],
-  format: 'esm',
+  format: "esm",
   entryPoints: [
     {
       in: "./src/js/handlebars.init.cjs",
@@ -95,26 +105,46 @@ 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.6",
   "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/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/button/button.scss

@@ -18,20 +18,16 @@
   //Primary button variant
   &-primary {
     --#{$prefix}btn-bg: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
     --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
     --#{$prefix}btn-disabled-opacity: 1;
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}light-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-primary-hover
+      --#{$prefix}light-action-primary-hover
     );
     --#{$prefix}icon-color: currentColor;
     --#{$prefix}icon-hover-color: currentColor;
@@ -41,12 +37,12 @@
   &-outline-secondary {
     --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
-    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
-    --#{$prefix}btn-hover-bg: transparent;
+    --#{$prefix}btn-border-color: var(--#{$prefix}light-action-secondary);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
+    --#{$prefix}btn-hover-color: var(--#{$prefix}light-action-primary);
+    --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
@@ -57,7 +53,7 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
     --#{$prefix}gradient: none;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-light-action-secondary-hover
+      --#{$prefix}light-action-secondary-hover
     );
   }
 
@@ -83,40 +79,32 @@
 .dark-alt .btn {
   //Primary button variant (dark mode)
   &-primary {
-    --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
+    --#{$prefix}btn-bg: var(--#{$prefix}dark-action-secondary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}text-darkest);
     --#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
-    --#{$prefix}btn-hover-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-focus-bg: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
-    );
+    --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-action-primary-hover);
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-primary-hover
+      --#{$prefix}dark-action-primary-hover
     );
   }
 
   //Secondary button variant (dark mode)
   &-secondary,
   &-outline-secondary {
-    --#{$prefix}btn-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary
-    );
+    --#{$prefix}btn-border-color: var(--#{$prefix}dark-action-secondary);
     --#{$prefix}btn-color: var(--#{$prefix}white);
     --#{$prefix}btn-hover-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
     --#{$prefix}btn-hover-bg: transparent;
     --#{$prefix}btn-hover-color: var(--#{$prefix}white);
@@ -124,13 +112,11 @@
     --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
     --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
     --#{$prefix}btn-focus-bg: transparent;
     --#{$prefix}btn-focus-border-color: var(
-      --#{$prefix}color-default-color-dark-action-secondary-hover
+      --#{$prefix}dark-action-secondary-hover
     );
   }
 
@@ -145,9 +131,7 @@
     --#{$prefix}btn-active-color: var(--#{$prefix}white);
     --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-background-shade);
     --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(
-      --#{$prefix}color-default-color-dark-text-lighter
-    );
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-text-lighter);
     --#{$prefix}btn-disabled-border-color: transparent;
   }
 }
@@ -321,19 +305,15 @@ a.btn,
   &-tertiary {
     text-decoration: underline;
     text-underline-offset: 0.3em;
-    --qld-body-color: var(--#{$prefix}dark-green);
+    --qld-body-color: var(--#{$prefix}light-link);
 
     &:hover {
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:focus {
       background-color: var(--#{$prefix}btn-hover-bg);
-      --qld-body-color: var(
-        --#{$prefix}color-default-color-light-action-secondary-hover
-      );
+      --qld-body-color: var(--#{$prefix}light-action-secondary-hover);
     }
 
     &:active {
@@ -409,7 +389,7 @@ a.btn,
   }
 
   &-tertiary {
-    --qld-body-color: var(--#{$prefix}golden-yellow);
+    --qld-body-color: var(--#{$prefix}dark-link);
 
     &:hover {
       --qld-body-color: var(--#{$prefix}dark-action-secondary-hover);
@@ -421,7 +401,7 @@ a.btn,
 
     &:active {
       text-decoration: none;
-      --qld-body-color: var(--#{$prefix}white);
+      --qld-body-color: var(--#{$prefix}dark-link);
     }
   }
 }

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

@@ -1,20 +1,20 @@
 // callout.stories.js
-import { Callout } from './Callout.js';
-import defaultdata from './callout.data.json';
+import { Callout } from "./Callout.js";
+import defaultdata from "./callout.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Callout',
+  tags: ["autodocs"],
+  title: "3. Components/Callout",
   render: (args) => new Callout(args).html,
 
   argTypes: {
     title: {
-      name: 'Title',
+      name: "Title",
       description: `H3 title text for the callout.`,
     },
     content: {
-      name: 'Content',
-      description: 'Text content for the callout. Can include HTML markup.',
+      name: "Content",
+      description: "Text content for the callout. Can include HTML markup.",
     },
   },
 
@@ -57,10 +57,8 @@ export const Light = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Light',
-      values: [
-        { name: 'Light', value: 'var(--qld-light-background)' },
-      ],
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
     },
   },
   decorators: [
@@ -83,10 +81,8 @@ export const Alternative = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Alternative',
-      values: [
-        { name: 'Alternative', value: 'var(--qld-light-grey-alt)' },
-      ],
+      default: "Alternative",
+      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
     },
   },
   decorators: [
@@ -109,10 +105,8 @@ export const Dark = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
     },
   },
   decorators: [
@@ -135,9 +129,9 @@ export const DarkAlternative = {
   args: defaultdata.default,
   parameters: {
     backgrounds: {
-      default: 'Dark alternative',
+      default: "Dark alternative",
       values: [
-        { name: 'Dark alternative', value: 'var(--qld-dark-blue)' },
+        { name: "Dark alternative", value: "var(--qld-dark-alt-background)" },
       ],
     },
   },

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",
+  },
+};