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

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.3","branch":"HEAD","tag":"v2.0.3","commit":"fa72cd132ffaf157e0fe59ce291db6db0d2f2554","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/searchInput/searchInput.hbs

@@ -1,44 +1,43 @@
 <!-- 
     QGDS Component: Search input 
 -->
-<div class="container {{variantClass}}">
-    <div class="qld-search-input {{customClass}} d-flex">
-        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text"
-            autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+<div class="qld-search-input {{customClass}}">
+    <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
 
-        {{#if suggestions}}
-        <div class="suggestions suggestions__group d-none">
-            <div class="default-suggestions">
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Popular services</strong>
-                    <ul class="mt-2">
-                        {{#each default_suggestions.popular_services}}
-                            <li><a href="{{link}}">{{title}}</a></li>
-                        {{/each}}
-                    </ul>
-                </div>
+    {{#if suggestions}}
+    <div class="suggestions suggestions__group d-none">
+        <div class="default-suggestions">
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Popular services</strong>
+                <ul class="mt-2">
+                    {{#each default_suggestions.popular_services}}
+                    <li><a href="{{link}}">{{title}}</a></li>
+                    {{/each}}
+                </ul>
+            </div>
 
-                <div class="suggestions-category mt-16">
-                    <strong class="suggestions-category-label d-block">Browse by category</strong>
-                    <ul class="mt-12 mb-0">
-                        {{#each default_suggestions.categories}}
-                            <li><a href="{{link}}">{{title}}</a></li>
-                        {{/each}}
-                    </ul>
-                </div>
+            <div class="suggestions-category mt-16">
+                <strong class="suggestions-category-label d-block">Browse by category</strong>
+                <ul class="mt-12 mb-0">
+                    {{#each default_suggestions.categories}}
+                    <li><a href="{{link}}">{{title}}</a></li>
+                    {{/each}}
+                </ul>
+            </div>
 
-                {{#if default_suggestions.options.view_more}}
-                    <div class="suggestions-category">
-                        <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
-                    </div>
-                {{/if}}
+            {{#if default_suggestions.options.view_more}}
+            <div class="suggestions-category">
+                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
+                    href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
             </div>
-            <div class="dynamic-suggestions"></div>
+            {{/if}}
         </div>
-        {{/if}}
-        <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-            <span class="btn-icon mx-0"></span>
-            <span class="btn-label">{{ buttonLabel }}</span>
-        </button>
+        <div class="dynamic-suggestions"></div>
     </div>
-</div>
+    {{/if}}
+    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+        <span class="btn-icon"></span>
+        <span class="btn-label">{{ buttonLabel }}</span>
+    </button>
+</div>

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.3",
+  "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/dist/sample-data/searchInput/searchInput.data.json

@@ -1,6 +1,5 @@
 {
   "customClass": "",
-  "variantClass": "",
   "inputID": "search",
   "inputName": "query",
   "buttonID": "search-button",

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.3",
+  "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 {
@@ -400,37 +408,25 @@
   }
 
   &-site-search {
-    form {
-      display: flex;
-      position: relative;
-    }
+    display: none;
+    z-index: 1;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0.4rem;
+    padding: 1rem var(--qld-container-padding-x);
+    background-color: var(--#{$prefix}header-color-bg);
 
-    @include media-breakpoint-down(lg) {
-      // Mobile search open class
-      &.is-open {
-        z-index: 1;
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0.4rem;
-        padding: 1rem 0;
-        background-color: var(--#{$prefix}header-color-bg);
-      }
-      &.is-closed {
-        display: none;
-      }
+    &.is-open {
+      display: block;
     }
 
-    // Some default styling overrides.
     @include media-breakpoint-up(lg) {
-      .container {
-        display: contents;
-      }
-    }
-
-    .qld-search-input {
-      min-width: auto;
+      z-index: unset;
+      display: block;
+      position: static;
+      padding: 0;
+      background-color: transparent;
     }
   }
 }

package/src/components/bs5/logo/Logo.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from "@storybook/blocks";
-import stories from "./logo.stories";
+import * as stories from "./logo.stories";
 
 <Meta of={stories} />
 

package/src/components/bs5/navbar/navbar.scss

@@ -59,7 +59,7 @@
             button.nav-link {
               background-color: var(--dropdown-show-btn-bg);
               &::after {
-                transform: rotate(180deg);
+                transform: rotate(-180deg);
                 transition: transform var(--animation-time) ease-in;
               }
             }
@@ -267,7 +267,7 @@
   --text-color: var(--#{$prefix}light-text-text);
   --border-color: var(--#{$prefix}default-border);
   --header-color: var(--#{$prefix}default-background);
-  --action-icon-color: var(--#{$prefix}alt-button-hover);
+  --action-icon-color: var(--#{$prefix}light-action-secondary);
   --action-icon-color_active: var(--text-color);
   --mobile-only-display: none;
   --visibility-display: hidden;
@@ -475,10 +475,11 @@
   .navbar-nav a.nav-link,
   a.dropdown-item {
     color: var(--link-color);
-    padding: 0.5rem;
+    padding-block: 0.625rem;
+    padding-inline: 0.75rem;
     display: flex;
     line-height: 2rem;
-    gap: 1rem;
+    gap: 0.5rem;
     align-items: center;
     &:hover {
       text-decoration: underline;
@@ -505,7 +506,7 @@
     }
     &.show {
       &:after {
-        transform: rotate(180deg);
+        transform: rotate(-180deg);
         transition: transform var(--animation-time) ease-in;
       }
     }
@@ -578,6 +579,7 @@
           background-color: var(--action-icon-color);
           height: 1.25rem;
           width: 1.25rem;
+          min-width: 1.25rem;
           margin-inline-start: auto;
           border: 0;
           transform: scaleX(var(--icon-dir));

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

@@ -530,7 +530,7 @@ export const Default = {
           }
           .navbar #burgerCloseBtn::before {
             --nav-header-icon-color: var(--#{$prefix}brand-accent);
-            background-color: var(--nav-header-icon-color, #008635);
+            background-color: var(--nav-header-icon-color, #ffe500);
           }
         }
         @media (width >= 992px) {

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

@@ -9,4 +9,4 @@ import * as SearchInputStories from "./searchInput.stories";
 
 ## Design resources
 
-- [Component library (Figma)]https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)./searchInput.stories
+- [Component library(Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)