@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.9

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

@@ -1,75 +1,85 @@
 // updateHandlebarsPartialsPlugin.js
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { build } from 'esbuild';
+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');
-
+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 });
+  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));
+    }
+  });
 
-    arrayOfFiles = arrayOfFiles || [];
+  return 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));
+export default function QGDSupdateHandlebarsPartialsPlugin() {
+  return {
+    name: "update-handlebars-partials",
+    setup(build) {
+      build.onStart(async () => {
+        const files = getAllFiles(COMPONENTS_DIR);
+        // Sort files alphabetically to ensure deterministic ordering
+        // This prevents TurboSnap cache invalidation in Chromatic builds
+        // caused by non-deterministic filesystem readdir ordering
+        files.sort((a, b) => path.basename(a).localeCompare(path.basename(b)));
+
+        //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`;
         }
-    });
 
-    return arrayOfFiles;
-}
+        if (duplicateFound) {
+          process.exit(1);
+        }
 
-export default function QGDSupdateHandlebarsPartialsPlugin() {
-    return {
-        name: 'update-handlebars-partials',
-        setup(build) {
-            build.onStart(async () => {
-
-                const files = getAllFiles(COMPONENTS_DIR);
-                // Sort files alphabetically to ensure deterministic ordering
-                // This prevents TurboSnap cache invalidation in Chromatic builds
-                // caused by non-deterministic filesystem readdir ordering
-                files.sort();
-                //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 = `/* global Handlebars */
+        const newContent = `/* global Handlebars */
 /** THIS IS A GENERATED FILE **/
 
 ${importLines}
@@ -87,9 +97,9 @@ if(typeof(Handlebars) !== 'undefined') {
 }
 `;
 
-                fs.writeFileSync(PARTIALS_JS_FILE, newContent);
-                //console.log(`${PARTIALS_JS_FILE} has been updated.`);
-            });
-        },
-    }
-};
+        fs.writeFileSync(PARTIALS_JS_FILE, newContent);
+        //console.log(`${PARTIALS_JS_FILE} has been updated.`);
+      });
+    },
+  };
+}

package/.storybook/preview.js

@@ -42,7 +42,7 @@ const preview = {
       },
     },
     viewport: {
-      viewports: {
+      options: {
         //QLD-media Breakpoints
         small: { name: "Small", styles: { width: "400px", height: "800px" } },
         medium: { name: "Medium", styles: { width: "700px", height: "800px" } },

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

@@ -38,24 +38,26 @@
        
           <div class="col-12">
             {{!-- Custom contact list --}}
-            {{#ifCond contact.showList "&&" contact.list}}
-            {{#each contact.list }}
-            <div class="footer-contact-item footer-contact-{{@key}}">
-              <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
-            </div>
-            {{/each}}
-            
-            {{else}}
-            {{!default contact list }}
-            <div class="footer-contact-item footer-contact-phone">
-              <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
-              rel="noopener">13 QGOV (13 74 68)</a>
-            </div>
-          
-            <div class="footer-contact-item footer-contact-email">
-              <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
-              href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
-            </div>
+            {{#ifCond contact.showList "!==" false}}
+              {{#ifCond contact.showList "&&" contact.list}}
+              {{#each contact.list }}
+              <div class="footer-contact-item footer-contact-{{@key}}">
+                <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
+              </div>
+              {{/each}}
+
+              {{else}}
+              {{!default contact list }}
+              <div class="footer-contact-item footer-contact-phone">
+                <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
+                rel="noopener">13 QGOV (13 74 68)</a>
+              </div>
+
+              <div class="footer-contact-item footer-contact-email">
+                <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
+                href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
+              </div>
+              {{/ifCond}}
             {{/ifCond}}
           </div>
         </div>

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.7","branch":"HEAD","tag":"v2.0.7","commit":"c204c02c3420408a069d8228b40be125edc579d8","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.9","branch":"HEAD","tag":"v2.0.9","commit":"0f12969e32431b89a0e3a8c31cb7d6eb86d06886","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

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

@@ -1,50 +1,46 @@
-<header class="qld-header" role="banner" >
-    <div class="qld-header-pre-header {{#ifCond preHeader.palette "===" " dark"}}dark{{else}}{{#ifCond
-        preHeader.palette "===" "light" }}light{{else}}{{#ifCond preHeader.palette "===" "dark-alt"
-        }}dark-alt{{else}}dark{{/ifCond}}{{/ifCond}}{{/ifCond}}">
+<header class="qld-header " role="banner">
+    <div class="qld-header-pre-header {{#ifCond preHeader.palette "===" "dark"}}dark{{else}}{{#ifCond
+        preHeader.palette "===" "default" }}default{{else}}{{#ifCond preHeader.palette "===" "dark-alt"
+        }}dark-alt{{else}}default{{/ifCond}}{{/ifCond}}{{/ifCond}}">
         <div class="container">
-            <div class="d-flex justify-content-between align-items-baseline">
+            <div class="d-flex justify-content-between">
 
-                <a class="qld-header-link"
+                <a class="qld-header-link align-self-center"
                     href="{{#if preHeader.globalLink.url}}{{preHeader.globalLink.url}}{{else}}https://qld.gov.au{{/if}}">
                     <span class="d-none d-lg-inline">{{preHeader.globalLink.text}}</span>
+                    {{#if hasDeliveringForQLDLogo}}
+                    {{>logo logo="coa-delivering-for-qld" className="qld-header-logo is-delivering-for-qld" fill="currentColor"}}
+                    {{else}}
                     {{>logo className="qld-header-logo" fill="currentColor"}}
+                    {{/if}}
                 </a>
 
                 {{#if preHeader.actions}}
-                <div class="d-none d-lg-flex gap-20 align-items-baseline">
+                <div class="d-none d-lg-flex align-items-baseline">
                     {{#each preHeader.actions}}
                     {{#if dropdown}}
                     <div class="dropdown">
                         <a id="dropdown{{id}}" role="button" data-bs-toggle="dropdown" aria-expanded="false"
-                            class="qld-header-link" href="#">
+                            class="qld-header-link dropdown-toggle" href="#">
                             {{{text}}}
-
-                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
-                                class="qld-header-dropdown-icon ">
-                                <use href="{{../assets.SVGSpritePath}}#qgds-icon-chevron-down"
-                                    aria-hidden="true"></use>
-                            </svg>
                         </a>
 
                         {{#ifCond dropdown.type "===" "list"}}
-                        <ul class="dropdown-menu">
+                        <ul class="dropdown-menu dropdown-menu-end">
 
                             {{#each dropdown.items}}
                             <li>
-                                <a class="qld-header-link dropdown-item " href="{{url}}" {{#if target}}target="{{target}}"{{/if}}>
+                                <a class="qld-header-link dropdown-item " href="{{url}}" {{#if
+                                    target}}target="{{target}}" {{/if}}>
                                     {{text}}
-                                    <svg width="24" height="24" class="qld-header-icon qld-header-dropdown-item-icon">
-                                        <use href="{{ ../../assets.SVGSpritePath }}#qgds-icon-arrow-right"
-                                            aria-hidden="true"></use>
-                                    </svg>
                                 </a>
                             </li>
                             {{/each}}
 
                             {{#if dropdown.viewMore}}
                             <li>
-                                <a href="{{dropdown.viewMore.url}}" {{#if dropdown.viewMore.target}}target="{{dropdown.viewMore.target}}"{{/if}}
+                                <a href="{{dropdown.viewMore.url}}" {{#if
+                                    dropdown.viewMore.target}}target="{{dropdown.viewMore.target}}" {{/if}}
                                     class="qld-header-link dropdown-item border-bottom-0">
                                     {{dropdown.viewMore.text}}
                                 </a>
@@ -54,8 +50,8 @@
                         </ul>
                         {{/ifCond}}
 
-                        {{#ifCond dropdown.type "===" "form"}}
-                        <div class="dropdown-menu">
+                        {{#ifCond dropdown.type "in" "html, form"}}
+                        <div class="dropdown-menu dropdown-menu-end">
                             {{{dropdown.HTMLContent}}}
                         </div>
                         {{/ifCond}}
@@ -63,51 +59,42 @@
                     </div>
                     {{else}}
 
-                    <a class="qld-header-link" href="{{url}}">
-                        {{#if icon}} 
-                        <svg class="qld-header-link-icon">
-                            <use href="{{ ../assets.SVGSpritePath }}#qgds-icon-{{icon}}" aria-hidden="true"></use>
-                        </svg>{{/if}}{{{text}}}
+                    <a class="qld-header-link ms-16" href="{{url}}">
+                        {{#if icon}}
+                        <span class="qld-icon qld-icon-{{icon}} qld-icon-sm qld-header-link-icon"
+                            aria-hidden="true"></span>
+                        {{/if}}{{{text}}}
                     </a>
                     {{/if}}
                     {{/each}}
                 </div>
                 {{/if}}
-            </div>
 
-            <div class="qld-header-main-nav-controls">
-                {{#if assets.siteSearch.value}}
-                <button id="qld-header-toggle-search-button" aria-controls="qld-header-search"
-                    class="qld-header-toggle-main-nav" aria-expanded="false">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use class="icon-search" href="{{ assets.SVGSpritePath }}#qgds-icon-search" aria-hidden="true" style="display: block;"></use>
-                        <use class="icon-close" href="{{ assets.SVGSpritePath}}#qgds-icon-close" style="display: none;"></use>
-                    </svg>
-                    <span class="qld-header-toggle-main-nav-text">Search</span>
-                </button>
-                {{/if}}
+                <div class="qld-header-mobile-controls">
+                    {{#if assets.siteSearch.value}}
+                    <button id="qld-header-toggle-search-button" aria-controls="qld-header-search"
+                        class="qld-header-mobile-button is-search-toggle" aria-expanded="false"
+                        aria-label="Open search">Search</button>
+                    {{/if}}
 
-                <button id="burgerBtn" class="qld-header-toggle-main-nav"
-                    data-bs-toggle="collapse" data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false"
-                    aria-label="Open menu">
-                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <use href="{{assets.SVGSpritePath}}#qgds-icon-menu" aria-hidden="true">
-                        </use>
-                    </svg>
-                    <span class="qld-header-toggle-main-nav-text">Menu</span>
-                </button>
+                    <button id="burgerBtn" class="qld-header-mobile-button is-menu-toggle" data-bs-toggle="collapse"
+                        data-bs-target="#main-nav" aria-controls="main-nav" aria-expanded="false"
+                        aria-label="Open menu">Menu</button>
+                </div>
             </div>
+
         </div>
     </div>
 
-    <div class="qld-header-main{{#ifCond preHeader.palette "===" " dark"}} dark{{else}}{{#ifCond
-        preHeader.palette "===" "light" }} light{{else}}{{#ifCond preHeader.palette "===" "dark-alt"
-        }} dark-alt{{else}} default{{/ifCond}}{{/ifCond}}{{/ifCond}}">
+    <div class="qld-header-main {{#ifCond mainContent.palette "===" "dark"}}dark{{else ifCond
+        mainContent.palette "===" "default" }}default{{else ifCond mainContent.palette "===" "dark-alt"
+        }}dark-alt{{else}}default{{/ifCond}}">
         <div class="container">
             <div class="row align-items-center">
                 <div class="col">
                     {{#ifAny isMasterBrand isSubBrand isCoBrand}}
                     {{>headerBrand
+                    hasDeliveringForQLDLogo=hasDeliveringForQLDLogo
                     url=mainContent.url
                     logo=mainContent.logo
                     siteTitle=mainContent.siteTitle
@@ -116,6 +103,7 @@
 
                     {{#ifAny isEndorsedBrand isStandaloneBrand }}
                     {{>headerBrand
+                    hasDeliveringForQLDLogo=hasDeliveringForQLDLogo
                     url=mainContent.url
                     logo=mainContent.logo
                     siteTitle=mainContent.siteTitle

package/dist/assets/components/bs5/header/headerBrand.hbs

@@ -1,22 +1,21 @@
 
 <div class="qld-header-brand">
-    <a class="qld-header-link d-lg-inline-flex" href="{{url}}">
-        <div class="qld-header-brand-image qld-header-logo">
+    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}">
+        <div class="qld-header-brand-image align-self-center">
             {{#if logo}}
             <img src="{{logo.src}}" height="56" alt="{{#if logo.altText}}{{logo.altText}}{{else}}Queensland government{{/if}}" />
+            {{else if siteTitle}}
+            {{>logo logo="coa-landscape-2lines" height="56" className="qld-header-logo" fill="currentColor"}}
+            {{else if hasDeliveringForQLDLogo}}
+            {{>logo logo="coa-delivering-for-qld" height="56" className="qld-header-logo is-delivering-for-qld" fill="currentColor"}}
             {{else}}
-            {{#if siteTitle}}
-            {{>logo logo="coa-landscape-2lines" height="56" fill="currentColor"}}
-            {{else}}
-            {{>logo height="56" fill="currentColor"}}
-            {{/if}}
+            {{>logo height="56" className="qld-header-logo"  fill="currentColor"}}
             {{/if}}
         </div>
         {{#if secondaryLogo}}
-            <div class="qld-header-secondary-content" >
+        <div class="qld-header-secondary-content">
             <img src="{{secondaryLogo.src}}" class="qld-header-secondary-image qld-header-logo" height="56" alt="{{#if secondaryLogo.altText}}{{secondaryLogo.altText}}{{else}}{{siteTitle}}{{#if subline}}{{subline}}{{/if}}{{/if}}" />
-
-            </div>
+        </div>
         {{else}}
         {{#if siteTitle}}
         <div class="qld-header-secondary-content">

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

@@ -13,12 +13,15 @@
 {{/inline}}
 
 {{#if src}}
-  {{#if caption}}
+  {{#ifAny caption credit }}
     <figure class="{{ figureClass }}" {{#if width}}style="width:{{ width }}{{ widthUnit }}"{{/if}}>
       {{> imageTag}}
-      <figcaption>{{ caption }}</figcaption>
+      <figcaption>
+        {{caption}}
+        {{#if credit}}<span class="figure-credit">{{ credit }}</span>{{/if}}
+      </figcaption>
     </figure>
   {{else}}
-    {{> imageTag}}
-  {{/if}}
-{{/if}}
+    {{>imageTag}}
+  {{/ifAny}}
+{{/if}}

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

@@ -2,6 +2,8 @@
     {{>logoCOALandscape}}
 {{else ifCond logo "===" "coa-landscape-2lines"}}
     {{>logoCOALandscape2Lines}}
+{{else ifCond logo "===" "coa-delivering-for-qld"}}
+    {{>logoCOADeliveringForQLD}}
 {{else}}
     {{>logoCOALandscape}}
 {{/ifCond}}