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

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

@@ -12,7 +12,7 @@ export default function buildlog() {
         log("yellow", "Starting build...\n");
       });
 
-      // eslint-disable-next-line no-unused-vars
+       
       build.onEnd((result) => {
         console.log("BUNDLING:");
         build.initialOptions.entryPoints.forEach((entry) => {
@@ -45,7 +45,7 @@ export default function buildlog() {
 
       });
 
-      // eslint-disable-next-line no-unused-vars
+       
       build.onEnd((result) => {
         console.log(`\n`);
         log("yellow", `✓ Build complete.\n\n`);

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

@@ -8,19 +8,16 @@ export default function copyPlugin() {
     verbose: false,
     watch: true,
     assets: [
-      {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: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.*"], to: ["./dist/assets/js/"]},
 
       {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

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/README.md

@@ -0,0 +1,10 @@
+## What stops Turbo Snapshots
+
+The key files that will always trigger a full run if touched include:
+
+*  .storybook/main.js / .storybook/main.ts
+* .storybook/preview.js / .storybook/preview.ts
+* .storybook/manager.js
+* Any addons.js or config imports that affect global decorators/parameters
+
+Any file linked to preview.js i.e. transitive dependencies could also trigger a skip (i.e. if css is altered it would then run the full build to pick up regressions, if hbs files are just altered or a new story is added then it would not rebuild the full project)

package/.storybook/{main.js → main.mjs}

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
+// Is an ESM module now
 
 import path from "path";
-import fs from "fs";
 
 const config = {
   stories: [
@@ -17,11 +17,10 @@ const config = {
     //https://storybook.js.org/addons/
     "@storybook/addon-a11y",
     "@storybook/addon-themes",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-links",
     "@chromatic-com/storybook",
     "storybook-addon-deep-controls",
+    "@storybook/addon-docs",
   ],
 
   framework: {
@@ -69,8 +68,8 @@ const config = {
       fs: {
         allow: [
           // Allow access to assets
-          path.resolve(__dirname, "../src/assets"),
-          path.resolve(__dirname, "../src/img"),
+          path.resolve(process.cwd(), "../src/assets"),
+          path.resolve(process.cwd(), "../src/img"),
         ],
       },
     };

package/.storybook/modes.js

@@ -7,25 +7,16 @@ export const allModes = {
   desktop: {
     viewport: "large",
   },
-  "Light": {
+  Light: {
     theme: "light",
   },
   "Light alternative": {
     theme: "alt",
   },
-  "Dark": {
+  Dark: {
     theme: "dark",
   },
   "Dark alternative": {
     theme: "dark-alt",
-  }
+  },
 };
-
-export const allBackgrounds = {
-default: {name: 'default', value: '#FFFFFF'},
-"Light": {name: 'Light', value: "var(--qld-light-background)"},
-"Light alternative": {name: 'Light alternative', value: "var(--qld-light-grey-alt)"},
-"Dark": {name: 'Dark', value: "var(--qld-sapphire-blue)"},
-"Dark alternative": {name: 'Dark alternative', value: "var(--qld-dark-blue)"},
-}
-

package/.storybook/preview.js

@@ -2,6 +2,7 @@ import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
 import "../src/js/qld.bootstrap.js";
 import "../src/css/main.scss";
 import { withThemeByClassName } from "@storybook/addon-themes";
+// import { allBackgrounds } from "./modes.js";
 import {
   withDynamicTheme,
   dynamicThemeGlobalTypes,
@@ -9,8 +10,7 @@ import {
 
 // Check if dynamic theme should be enabled via environment variable
 const ENABLE_DYNAMIC_THEME = import.meta.env.ENABLE_DYNAMIC_THEME;
-import { allBackgrounds } from "./modes.js";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 import init from "../src/js/handlebars.init.js";
 import Handlebars from "handlebars";
 
@@ -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" } },
@@ -82,14 +82,14 @@ const preview = {
       },
     },
     backgrounds: {
-      //default: 'default',
-      values: [
-        allBackgrounds["default"],
-        allBackgrounds["Light"],
-        allBackgrounds["Light alternative"],
-        allBackgrounds["Dark"],
-        allBackgrounds["Dark alternative"],
-      ],
+      options: {
+        default: { name: "Default", value: "var(--qld-default-background)" },
+        light: { name: "Light", value: "var(--qld-light-background)" },
+        alt: { name: "Light Alt", value: "var(--qld-light-alt-background)" },
+        dark: { name: "Dark", value: "var(--qld-dark-background)" },
+        darkAlt: { name: "Dark Alt", value: "var(--qld-dark-alt-background)" },
+      },
+      disable: true,
     },
     options: {
       storySort: {
@@ -110,6 +110,9 @@ const preview = {
         restoreScroll: true,
       },
     },
+    initialGlobals: {
+      backgrounds: { value: "default" },
+    },
   },
 
   decorators: [

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.6","branch":"HEAD","tag":"v2.0.6","commit":"8e01e15b93ee3bf9a4f97638ef79324fdf6a97a7","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.8","branch":"HEAD","tag":"v2.0.8","commit":"b00b1b9ba663416df3f4b2da41b11b05dcb6c2a6","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/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}}