Merge branch 'develop' into QOLOE-294-seatchInput-items-styling

.esbuild/plugins/qgds-plugin-copy-assets.js

@@ -18,13 +18,14 @@ export default function copyPlugin() {
         to: ["./dist/sample-data/"],
       },
       {
-        from: ["./src/js/handlebars*"],
-        to: ["./dist/assets/js"],
+        from: ["./src/js/handlebars.helpers.js"],
+        to: ["./dist/assets/js/handlebars.helpers.js"],
       },
       {
-        from: ["./src/js/handlebars*"],
+        from: ["./src/js/handlebars.*"],
         to: ["./dist/components/"],
       },
+
       { from: ["./src/assets/img/*"], to: ["./dist/assets/img"] },
     ],
   });

.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js

@@ -0,0 +1,87 @@
+// updateHandlebarsPartialsPlugin.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { build } from 'esbuild';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const COMPONENTS_DIR = path.resolve(__dirname, './../../src/components');
+const PARTIALS_JS_FILE = path.resolve(__dirname, '../../src/js/handlebars.partials.js');
+
+
+function getAllFiles(dirPath, arrayOfFiles) {
+    const files = fs.readdirSync(dirPath, { withFileTypes: true });
+
+    arrayOfFiles = arrayOfFiles || [];
+
+    files.forEach((file) => {
+        //console.log(file);
+        if (file.isDirectory()) {
+            arrayOfFiles = getAllFiles(path.join(dirPath, file.name), arrayOfFiles);
+        } else if (file.isFile() && (file.name.endsWith('.hbs') && !file.name.endsWith('.test.hbs'))) {
+            arrayOfFiles.push(path.join(dirPath, file.name));
+        }
+    });
+
+    return arrayOfFiles;
+}
+
+export default function QGDSupdateHandlebarsPartialsPlugin() {
+    return {
+        name: 'update-handlebars-partials',
+        setup(build) {
+            build.onStart(async () => {
+
+                const files = getAllFiles(COMPONENTS_DIR);
+                //console.log(files);
+                const fileNames = new Map();
+                let duplicateFound = false;
+
+                let importLines = '';
+                let registerLines = '';
+
+                for (const file of files) {
+                    //console.log(file);
+                    const componentName = path.basename(file, '.hbs')
+                    //console.log(componentName);
+                    // Duplicate check
+                    if (fileNames.has(componentName)) {
+                        console.error(`Error: Duplicate component name found: "${componentName}" second partial located at ${file} and ${fileNames.get(componentName)}`);
+                        duplicateFound = true;
+                        continue;
+                    }
+                    fileNames.set(componentName, file);
+
+                    const importName = componentName.replace(/-/g, '');
+                    const componentPath = path.relative(path.dirname(PARTIALS_JS_FILE), file).replace(/\\/g, '/');
+
+                    importLines += `import ${importName} from "${componentPath}?raw";\n`;
+                    registerLines += `    handlebars.registerPartial("${componentName}", ${importName});\n`;
+                }
+
+                if (duplicateFound) {
+                    process.exit(1);
+                }
+
+                const newContent = `/** THIS IS A GENERATED FILE **/
+
+${importLines}
+
+/**
+ * Registers Handlebars Partials
+ * @param {Handlebars} handlebars Templating engine
+ * @returns {void} Result of the helper operation
+ */
+export default function handlebarsPartials(handlebars) {
+${registerLines}
+}
+`;
+
+                fs.writeFileSync(PARTIALS_JS_FILE, newContent);
+                console.log('handlebar.partials.js has been updated.');
+            });
+        },
+    }
+};

.esbuild/plugins/qgds-plugin-version.js

@@ -67,7 +67,7 @@ const versionPlugin = () => ({
 
         // Replace placeholders in HTML, Mustache, and Handlebars files
         build.onEnd(async (result) => {
-            console.log('version update starting');
+            console.log('version update starting...');
 
             //List new components
             const root = process.cwd();
@@ -85,11 +85,12 @@ const versionPlugin = () => ({
 
                     // Check if the content has changed
                     if (source !== newSource) {
-                        console.log(`Placeholder replaced in: ${file}, ${newSource}`);
+                        // console.log(`Placeholder replaced in: ${file}, ${newSource}`);
                         await fs.writeFile(file, newSource);
                     }
                 }
             }
+            console.log('version update Completed');
 
         });
 

.storybook/preview.js

@@ -96,7 +96,7 @@ const preview = {
         },
     ],
 
-    tags: ["autodocs", "autodocs"]
+    tags: ["autodocs"]
 };
 
 export default preview;

esbuild.js

@@ -3,6 +3,7 @@
 import * as esbuild from "esbuild";
 
 //Local ESBUILD PLUGINS
+import QGDSupdateHandlebarsPartialsPlugin from "./.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js";
 import QGDSrawLoader from "./.esbuild/plugins/qgds-plugin-raw-loader.js";
 import QDGScleanFolders from "./.esbuild/plugins/qgds-plugin-clean-output-folders.js";
 import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js";
@@ -47,7 +48,11 @@ const buildConfig = {
     },
     {
       in: "./src/js/handlebars.init.js",
-      out: "./components/handlebars.init.bundle",
+      out: "./components/handlebars.init.min",
+    },
+    {
+      in: "./src/js/handlebars.init.js",
+      out: "./assets/js/handlebars.init.min",
     },
   ],
 
@@ -60,14 +65,15 @@ const buildConfig = {
   },
 
   plugins: [
+    QGDSupdateHandlebarsPartialsPlugin(),
     QDGScopy(),
     QDGSbuildLog(),
     QGDSrawLoader(),
     versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
-    sassPlugin()
-  ]
+    sassPlugin(),
+  ],
 };
 
 async function StartBuild() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "",
   "repository": {
     "type": "git",
@@ -39,7 +39,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.20.0"
+    "material-symbols": "^0.20.0",
+    "run-parallel": "^1.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
@@ -92,7 +93,7 @@
     "qld.bootstrap.min.js": "./dist/assets/js/qld.bootstrap.min.js",
     "qld.bootstrap.css": "./dist/assets/css/qld.bootstrap.css",
     "handlebars.helpers.bundle.js": "./dist/components/handlebars.helpers.bundle.js",
-    "handlebars.init.js": "./dist/components/handlebars.init.js",
+    "handlebars.init.min.js": "./dist/components/handlebars.init.min.js",
     "bootstrap.min.js": "./dist/assets/js/boostrap.min.js"
   }
 }

src/components/bs5/accordion/accordion.scss

@@ -81,7 +81,6 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   &-button {
     font-size: 1.25rem;
     font-weight: 400;
-    line-height: 1.2;
     text-decoration-line: underline;
     text-underline-offset: var(--#{$prefix}link-underline-offset);
     text-decoration-thickness: var(--#{$prefix}link-underline-thickness);

src/components/bs5/breadcrumbs/breadcrumb.functions.js

@@ -92,4 +92,4 @@ export function breadcrumbExpand(event) {
       crumb.querySelector('a').setAttribute('tabindex', 0)
     }
   })
-}
+}

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs

@@ -0,0 +1,11 @@
+<!-- breadcrumbs-->
+<div class="container-fluid alt">
+  <div class="container">
+    <div class="row">
+      <div class="container-xl">
+
+        {{> @partial-block }}
+      </div>
+    </div>
+  </div>
+</div>

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js

@@ -0,0 +1,38 @@
+import { forGov } from "../breadcrumbs/breadcrumbs.data.json";
+import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js";
+// eslint-disable-next-line no-unused-vars
+import init from "../../../js/handlebars.init.js"; //self init's when loaded
+
+const defaultData = { breadcrumbs: forGov };
+
+export default {
+  title: "!Layout/Components/Breadcrumbs Wrapper",
+  render: (args) => {
+
+    return new BreadcrumbsWrapperTest(args).html;
+  },
+  args: defaultData,
+  argTypes: {
+  },
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+/**
+ * Default head metadata
+ * 
+ */
+export const Default = {};
+

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs

@@ -0,0 +1,7 @@
+header before
+<main>
+{{#>breadcrumbsWrapper}}
+  {{> breadcrumbs breadcrumbs }}
+{{/breadcrumbsWrapper}}
+content after
+</main>

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./breadcrumbsWrapper.test.hbs?raw";
+
+export class BreadcrumbsWrapperTest {
+
+  // Use the global Component class to create a new instance of the Sidenav component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

src/components/bs5/card/card.scss

@@ -229,15 +229,7 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
         }
 
         a {
-            color: var(--#{$prefix}card-link-color);
             font-weight: 600;
-            text-underline-offset: 3px;
-            text-decoration-thickness: var(--qld-link-underline-thickness);
-
-            &:hover, &:focus {
-                text-decoration: underline;
-                text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-            }
         }
     }
 

src/components/bs5/contentFooter/contentFooter.data.json

@@ -0,0 +1,3 @@
+{
+    "lastUpdated":  "1900-01-31"
+}

src/components/bs5/contentFooter/contentFooter.hbs

@@ -0,0 +1,4 @@
+<dl class="qld-content-dates">
+  <dt>Last updated:</dt>
+  <dd>{{formatDateOrToday lastUpdated }}</dd>
+</dl>

src/components/bs5/contentFooter/contentFooter.js

@@ -0,0 +1,10 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./contentFooter.hbs?raw";
+
+export class ContentFooter {
+
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}