@qld-gov-au/qgds-bootstrap5 1.0.21 → 1.1.0

package/.esbuild/helpers/listFilesHbs.js

@@ -0,0 +1,54 @@
+import fs from "fs";
+import path from "path";
+
+export const listFilesHbs = (dir, filelist = []) => {
+  fs.readdirSync(dir, { withFileTypes: true }).forEach((file) => {
+    const dirFile = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      filelist = listFilesHbs(dirFile, filelist);
+    } else if (file.name.endsWith(".hbs")) {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+export const listFilesJS = (dir, filelist = []) => {
+  fs.readdirSync(dir, { withFileTypes: true }).forEach((file) => {
+    const dirFile = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      filelist = listFilesJS(dirFile, filelist);
+    } else if (file.name.endsWith(".js")) {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+export const listFilesCSS = (dir, filelist = []) => {
+  fs.readdirSync(dir, { withFileTypes: true }).forEach((file) => {
+    const dirFile = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      filelist = listFilesCSS(dirFile, filelist);
+    } else if (file.name.endsWith(".css")) {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+
+export const listFiles = (dir, filelist = []) => {
+  fs.readdirSync(dir, { withFileTypes: true }).forEach((file) => {
+    const dirFile = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      filelist = listFiles(dirFile, filelist);
+    } else {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+
+export default listFilesHbs;

package/.esbuild/helpers/logger.js

@@ -11,6 +11,7 @@ export default function log(color, message) {
     blue: "\x1b[34m",
     red: "\x1b[31m",
     reset: "\x1b[0m",
+    black: "\x1b[0m",
     magenta: "\x1b[35m",
     cyan: "\x1b[36m",
   };

package/.esbuild/plugins/qgds-plugin-build-log.js

@@ -1,6 +1,6 @@
 /* global process */
 import log from "../helpers/logger.js";
-import listFiles from "../helpers/listfiles.js";
+import listFilesHbs, {listFilesCSS, listFilesJS} from "../helpers/listFilesHbs.js";
 
 
 export default function buildlog() {
@@ -16,25 +16,33 @@ export default function buildlog() {
       build.onEnd((result) => {
         console.log("BUNDLING:");
         build.initialOptions.entryPoints.forEach((entry) => {
-          log("cyan", entry.in);
+          log("cyan", `${entry.in} -> ${entry.out}`);
         });
-        
-        console.log(`\n`);
-        console.log("CREATED:");
-        log("magenta", `CSS\t\t./dist/assets/css/qld.bootstrap.css`);
-        log("blue", "JS\t\t./dist/assets/js/bootstrap.min.js");
-        log("blue", `JS\t\t./dist/assets/js/qld.bootstrap.min.js`);
-
-        //List new components
         const root = process.cwd();
-        const relativePath = "/dist/components/bs5/";
-        const newTemplateFiles = listFiles(root + relativePath);
-        
-        newTemplateFiles.forEach((file) => {
+
+        log( "black", "\n");
+        log( "black", "CREATED:");
+
+        listFilesCSS(root + "/dist/").forEach((file) => {
+          let newfile = file.replace(root, "");
+          log("magenta", `CSS:\t\t.${newfile}`);
+        });
+
+
+        listFilesJS(root + "/dist/").forEach((file) => {
+          let newfile = file.replace(root, "");
+          log("blue", `JS:\t\t.${newfile}`);
+        });
+
+
+        //List new assets
+
+        listFilesHbs(root + "/dist/").forEach((file) => {
           let newfile = file.replace(root, "");
           log("cyan", `Template:\t.${newfile}`);
         });
 
+
       });
 
       // eslint-disable-next-line no-unused-vars

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

@@ -6,27 +6,26 @@ export default function copyPlugin() {
   return copy({
     resolveFrom: "cwd",
     verbose: false,
-    watch: false,
+    watch: true,
     assets: [
-      { from: ["./src/templates/compiled/*.html"], to: ["./dist/"] },
-      {
-        from: ["./src/components/bs5/**/*.hbs"],
-        to: ["./dist/components/bs5/"],
-      },
-      {
-        from: ["./src/components/bs5/**/*.data.json"],
-        to: ["./dist/sample-data/"],
-      },
-      {
-        from: ["./src/js/handlebars.helpers.js"],
-        to: ["./dist/assets/js/handlebars.helpers.js"],
-      },
-      {
-        from: ["./src/js/handlebars.*"],
-        to: ["./dist/components/"],
-      },
+      {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.js"], to: ["./dist/assets/js/bootstrap.js"]},
+      {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"], to: ["./dist/assets/js/bootstrap.min.js"]},
+      {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map"], to: ["./dist/assets/js/bootstrap.min.js.map"]},
 
-      { from: ["./src/assets/img/*"], to: ["./dist/assets/img"] },
+      {from: ["./src/components/bs5/**/*.hbs"], to: ["./dist/assets/components/bs5/"],},
+      {from: ["./src/js/handlebars.*"], to: ["./dist/assets/js/"],},
+      {from: ["./src/img/*"], to: ["./dist/assets/img"]},
+      // Sample data
+      {from: ["./src/components/bs5/**/*.data.json"], to: ["./dist/sample-data/"],},
+
+      // dist/components will be going away please use dist/assets/components
+      {from: ["./src/js/handlebars.*"], to: ["./dist/components/"],},
+      {from: ["./src/components/bs5/**/*.hbs"], to: ["./dist/components/bs5/"],},
+
+      //Copy info files for reference
+      {from: ["./src/templates/compiled/*.html"], to: ["./dist/"]},
+      {from: ["./package.json"], to: ["./dist/package.json"]},
+      {from: ["./README.md"], to: ["./dist/README.md"]},
     ],
   });
 

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

@@ -58,7 +58,7 @@ export default function QGDSupdateHandlebarsPartialsPlugin() {
                     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`;
+                    registerLines += `  handlebars.registerPartial("${componentName}", ${importName});\n`;
                 }
 
                 if (duplicateFound) {
@@ -84,7 +84,7 @@ if(typeof(Handlebars) !== 'undefined') {
 `;
 
                 fs.writeFileSync(PARTIALS_JS_FILE, newContent);
-                console.log('handlebar.partials.js has been updated.');
+                //console.log(`${PARTIALS_JS_FILE} has been updated.`);
             });
         },
     }

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

@@ -2,28 +2,49 @@ import { promises as fs } from 'fs';
 import path from 'path';
 import { execSync } from 'child_process';
 import { fileURLToPath } from 'url';
-import listFiles from "../helpers/listfiles.js";
-import log from "../helpers/logger.js";
+import listFilesHbs, {listFiles, listFilesJS} from "../helpers/listFilesHbs.js";
 
 // Helper function to get git information
 const getGitInfo = () => {
-    const getGitBranch = () => execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+    const getGitBranch = () => {
+
+        try {
+            return  execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+        } catch {
+            return ``;
+        }
+    }
     const getGitTag = () => {
+
         try {
             return execSync('git describe --tags --exact-match 2>/dev/null').toString().trim();
         } catch {
-            return null;
+            return ``;
         }
     };
-    const getGitCommit = () => execSync('git rev-parse HEAD').toString().trim();
-    const getGitCommitDate = () => execSync('git log -1 --format=%cI').toString().trim();
+    const getGitCommit = () => {
 
-    return {
+        try {
+            return execSync('git rev-parse HEAD').toString().trim();
+        } catch {
+            return ``;
+        }
+    }
+    const getGitCommitDate = () => {
+        try {
+            execSync('git log -1 --format=%cI').toString().trim();
+        } catch {
+            return ``;
+        }
+    }
+
+    var output = {
         branch: getGitBranch(),
         tag: getGitTag(),
         commit: getGitCommit(),
         datetime: getGitCommitDate(),
     };
+    return output
 };
 
 // Function to extract major version prefix from a tag
@@ -56,26 +77,32 @@ const versionPlugin = () => ({
         let versionDetails;
         build.onStart(async () => {
             const packageInfo = await getPackageJson();
-            const gitInfo = getGitInfo();
+            var majorVersion = extractMajorVersion('v' + packageInfo.version)
+            var gitInfo = getGitInfo();
+
             versionDetails = {
                 ...packageInfo,
                 ...gitInfo,
-                majorVersion: extractMajorVersion(gitInfo.tag || 'v' + packageInfo.version),
+                majorVersion: majorVersion,
             };
-            console.log(`version details collected: ${JSON.stringify(versionDetails)}`);
+            //log( "green", `Version details collected: ${JSON.stringify(versionDetails)}`);
+            //log( "black", "");
         });
 
+
+
         // Replace placeholders in HTML, Mustache, and Handlebars files
         build.onEnd(async (result) => {
-            console.log('version update starting...');
+            //log( "green", 'version update starting...');
 
             //List new components
             const root = process.cwd();
-            const relativePath = "/dist/components/";
+            const relativePath = "/dist";
 
             const newTemplateFiles = listFiles(root + relativePath);
+            //console.log(newTemplateFiles)
             for (const file of newTemplateFiles) {
-                if (/\.(html|mustache|hbs)$/.test(file)) {
+                if (/\.(js|html|hbs)$/.test(file)) {
                     // const outputPath = path.resolve(process.cwd(), file);
                     let source = await fs.readFile(file, 'utf8');
                     let newSource = source.replace(/###VERSION###/g, JSON.stringify(versionDetails));
@@ -85,12 +112,14 @@ 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}`);
+                         //console.log(`Placeholder replaced in: ${file}`);
                         await fs.writeFile(file, newSource);
                     }
                 }
             }
-            console.log('version update Completed');
+
+            //log( "green", 'version update Completed');
 
         });
 

package/dist/README.md

@@ -0,0 +1,128 @@
+# Queensland Government Design System - Bootstrap 5 - Edition
+A Queensland Online - Design System development space
+
+Please see [For Gov - Queensland Government Design System](https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/queensland-government-design-system) for more details.
+
+This is a BS5 flavour based on [QGDS Figma Design](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?m=auto&node-id=6902-69802&t=q6FMpeH4XPs1hjP1-1). <br/>
+Qld Health edition can be found at [design-system.health.qld.gov.au](https://www.design-system.health.qld.gov.au/).
+
+This includes:
+- Public NPM Release packages:
+  - https://www.npmjs.com/package/@qld-gov-au/qgds-bootstrap5
+  - https://github.com/qld-gov-au/qgds-bootstrap5/pkgs/npm/qgds-bootstrap5
+- Squiz Git bridge dist/binary repo: https://github.com/qld-gov-au/qgds-bootstrap5-release
+- Git CDN repo: https://github.com/qld-gov-au/qgds-bootstrap5-cdn
+
+
+## Technical overview
+
+- ES6 Javascript
+- ESbuild for bundling, minification and transpiling
+- Storybook for component development and documentation
+- Mustache JS / Handlebars JS for component and HTML templating
+- Figma for design and prototyping
+- CSS/SCSS, extending Bootstrap 5.3 core components with custom CSS properties
+- NPM for package management
+
+
+## Documentation
+
+- Storybook examples available at [https://qld-gov-au.github.io/qgds-bootstrap5/](https://qld-gov-au.github.io/qgds-bootstrap5/)
+
+
+## Development Getting started
+
+### Personal Development
+This repo is designed to allow easy forking.  <br/>
+Do enable GitHub Actions post forking and GitHub pages via GitHub actions  <br/>
+Also do configure your own personal chromatic to ease development in providing delta change diff-ing.
+
+We welcome external contributors, so don't be afraid to raise PR's back to this repo for inclusion into core deployment + cdn repo.
+
+### GitHub Actions
+This repo includes many workflows to reduce developer overheads. This includes but not limited to:
+* CICD on all commit's and PR's
+* GitHub io static document deployment based on develop/main
+* Dependabot auto patching + storybook upgrade feature
+* One click npm versioning publish (patch, minor, major) **
+* Auto generate release notes based on PR's created (On version Tag)
+* Npm js package publish (On version Tag) ***
+* GitHub package Publish (On version Tag) ****
+
+** Must configure GitHub service account ssh private key loaded into GitHub actions secret ``DEPLOY_KEY``<br/>
+*** Must have npm js token loaded into GitHub actions secrets ``NPM_TOKEN`` to allow publishing.<br/>
+**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step ``Update package scope, export package name``.
+
+### Quick build
+If you hava java and maven installed. This will pull in a local node/npm version and run through the full lifecycle build.
+
+```bash
+git clone https://github.com/qld-gov-au/qgds-bootstrap5
+cd qgds-bootstrap5
+mvn install
+```
+
+### Standard build
+1. Download
+  
+    ```bash
+    git clone https://github.com/qld-gov-au/qgds-bootstrap5
+    ```
+
+2. Setup
+
+   Prerequisites
+   - Node 18.17.1+
+   - NPM 10.2.5+
+
+3. Install dependencies
+    
+    ```bash
+    npm install
+    ```
+
+4. Build the Design System CSS, Components and templates
+    
+    ```bash
+    npm run build
+    ```
+
+6.  Start Watch and Storybook for component development
+        
+    ```bash
+    npm run dev-storybook
+    ```
+     Alt:
+     ```bash
+     npm run watch
+     npm run storybook
+     ```
+
+7. Lint
+   ```bash
+   npm run lint
+   ```
+
+* Static view, start a local server from /dist folder
+    
+    ```bash
+    npm run serve
+    ```
+
+* Next steps
+
+   - HTML templating using drop in components 
+  
+     If you wish to use the includes handle bars, please ensure 
+   "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
+   - Dev build and testing branching
+
+### IDE Development suggestions
+
+We recommend using VSCode as the IDE for development with the following plugins:
+
+- Prettier
+- ESLint
+- Mustache JS or Handlebars JS template support
+
+Webstorm also works.

package/dist/assets/components/bs5/accordion/accordion.hbs

@@ -0,0 +1,28 @@
+<!-- QGDS Component: Accordion -->
+<div class="accordion-group">
+
+    {{#if toggleAll}}
+        <div class="accordion-toggle">
+            <button class="accordion-toggle-btn accordion-toggle-btn--closed" type="button">Open all</button>
+        </div>
+    {{/if}}
+    <div class="accordion" id="{{groupid}}">
+        {{#each accordionItems }}
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading-{{id}}">
+                <button class="accordion-button {{#unless expanded}}collapsed{{/unless}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{id}}" aria-expanded="{{expanded}}" aria-controls="collapse-{{id}}">
+                    {{title}}
+                </button>
+            </h2>
+
+            <div id="collapse-{{id}}" class="accordion-collapse collapse {{#if expanded}}show{{/if}}" aria-labelledby="heading-{{id}}">
+                <div class="accordion-body">
+                    {{{content}}}
+                </div>
+            </div>
+        </div>
+        {{/each }}
+
+    </div>
+
+</div>

package/dist/assets/components/bs5/banner/banner.hbs

@@ -0,0 +1,29 @@
+<!-- QGDS Partial: banner -->
+
+<div class="container-fluid qld-banner {{variantClass}}">
+
+    <div class="container">
+        <div class="row">
+            
+            <div class="col-12 col-md-7">
+
+                {{{breadcrumbs}}}
+
+                <h1 class="banner-title">{{{title}}}</h1>
+                <p class="banner-lead">{{{content}}}</p>
+
+                {{#if ctabuttons}}
+                <div class="banner-cta btn-toolbar">
+                    {{#each ctabuttons}}
+                    <a href="{{link}}" class="btn {{class}}" target="{{target}}">{{label}}</a>
+                    {{/each}}
+                </div>
+                {{/if}}
+
+            </div>
+        </div>
+    </div>
+
+    <div class="banner-image {{image.classes}}" style="--banner-background-img:url({{image.url}})"></div>
+
+</div>

package/dist/assets/components/bs5/blockquote/blockquote.hbs

@@ -0,0 +1,13 @@
+<!-- QGDS Component: Blockquote -->
+
+<figure class="blockquote {{classes}}">
+
+	<blockquote cite="{{cite-url}}">
+		{{{content}}}
+	</blockquote>
+
+	<figcaption class="quote-source">
+		{{cite-text}}
+	</figcaption>
+
+</figure>

package/dist/assets/components/bs5/breadcrumbs/breadcrumbs.hbs

@@ -0,0 +1,16 @@
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        {{#each breadcrumbs}}
+            {{! print all breadcrumbs except the current page as links}}
+            {{#unless @last}}
+            <li class="breadcrumb-item">
+                <a href="{{link}}">{{linktext}}</a>
+            </li>
+            {{/unless}}
+            {{! print the current page as plain text}}
+            {{#if @last}}
+            <li class="breadcrumb-item active" aria-current="page" data-href="{{link}}">{{linktext}}</li>
+            {{/if}}
+        {{/each}}
+    </ol>
+</nav>

package/dist/assets/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>

package/dist/assets/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs

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

package/dist/assets/components/bs5/button/button.hbs

@@ -0,0 +1,31 @@
+{{#unless islink}}
+    <button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'leading'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    {{label}}
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    </button>
+
+{{else}}
+
+    <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}} aria-disabled="true" {{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+        {{#if iconClass}}
+            {{#ifCond iconPosition '==' 'leading'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{~/ifCond~}}
+        {{~/if~}}
+        {{~label~}}
+        {{#if iconClass}}
+            {{#ifCond iconPosition '==' 'trailing'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{/ifCond}}
+        {{/if}}
+    </a>
+{{/unless }}

package/dist/assets/components/bs5/callout/callout.hbs

@@ -0,0 +1,8 @@
+<!-- QGDS Component: Callout -->
+
+<div class="callout">
+    {{#if title}}
+        <h3 class="callout-title">{{{title}}}</h3>
+    {{/if}}
+    <div class="callout-text">{{{content}}}</div>
+</div>

package/dist/assets/components/bs5/card/card.hbs

@@ -0,0 +1,66 @@
+<!-- QGDS Partial: card -->
+
+<div class="col{{#if feature}}-md-12 col-lg-12{{/if}}">
+
+    <div class="card card-{{variantClass}} {{variantClass}} {{iconPosition}} card-{{action}}-action{{#if arrow}} card-arrow{{/if}}{{#if equalHeight}} h-100{{/if}}{{#if feature}} card-feature card-feature-{{featureImagePosition}}{{/if}}{{#if video}} card-video{{/if}}">
+
+        {{#if image}}
+        <div class="card-img ratio ratio-16x9">
+            <div class="{{#if feature}}card-img-{{featureImagePosition}}{{else}}card-img-top{{/if}}"
+            style="--card-image:url({{image}})" alt="{{imageAlt}}"></div>
+
+            {{#if video}}
+            <div class="video-overlay">
+                <div class="video-nav">
+                    <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
+
+                    {{#if videoDuration}}
+                        <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{videoDuration}}</span></div>
+                    {{/if}}
+                </div>
+            </div>
+            {{/if}}
+        </div>
+        {{/if}}
+
+        {{#if iconClasses}}
+        <div class="card-icon {{iconPosition}} {{iconClasses}}"></div>
+        {{/if}}
+
+        {{#if feature}}<div class="card-inner">{{/if}}
+
+            <div class="card-body">
+                {{#if date}}
+                <div class="card-date">{{date}}</div>
+                {{/if}}
+
+                <h3 class="card-title">
+                    {{#if link}}
+                    <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
+                    {{else}}
+                    {{ title }}
+                    {{/if }}
+                </h3>
+
+                {{#if description}}
+                <p class="card-text">
+                    {{{description}}}
+                </p>
+                {{/if}}
+
+                {{#if arrow}}
+                <div class="card-icon icon-arrow"></div>
+                {{/if}}
+            </div>
+
+            {{#if footer}}
+            <div class="card-footer">
+                {{{footer}}}
+            </div>
+            {{/if }}
+
+        {{#if feature}}</div>{{/if}}
+
+    </div>
+
+</div>

package/dist/assets/components/bs5/contentFooter/contentFooter.hbs

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

package/dist/assets/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs

@@ -0,0 +1,5 @@
+<div class="container qld-content-footer">
+  <div class="row">
+    {{> @partial-block }}
+  </div>
+</div>