@qld-gov-au/qgds-bootstrap5 1.1.39 → 1.1.41

package/src/components/common/layout/content.scss

@@ -1,6 +1,13 @@
-.qld-content {
-    padding: 4rem 1.25rem 4.5rem 1.25rem;
-    @include media-breakpoint-up(lg) {
-        padding: 4rem 0 4.5rem;
+.qld-content-body {
+  .emphasis {
+    margin: 4rem -2rem;
+    padding: 4rem 2rem;
+    overflow: visible;
+
+    & p:last-child,
+    & ul:last-child,
+    & ol:last-child {
+      margin-bottom: 0;
     }
+  }
 }

package/src/components/common/layout/grid.scss

@@ -0,0 +1,26 @@
+// Modifies BS5's default container behaviours at different viewports
+// Spec from QGDS UI-Kit spacing variables
+:root {
+  --qld-container-padding-x-sm: 1rem;
+  --qld-container-padding-x-md: 2rem;
+  --qld-container-max-width: 86rem;
+  --qld-gap: 2rem;
+}
+
+.row,
+.row-fluid {
+  --qld-gutter-x: 2rem;
+  --qld-gutter-y: 0;
+}
+
+.container {
+  width: 100%;
+  max-width: var(--qld-container-max-width);
+  padding-left: var(--qld-container-padding-x-sm);
+  padding-right: var(--qld-container-padding-x-sm);
+
+  @include media-breakpoint-up(md) {
+    padding-left: var(--qld-container-padding-x-md);
+    padding-right: var(--qld-container-padding-x-md);
+  }
+}

package/src/css/main.scss

@@ -91,9 +91,12 @@ $enable-dark-mode: true;
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";
 
+// Common Layout Blocks
+@import "../components/common/layout/content";
+@import "../components/common/layout/container";
+
 // 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency.
 @import "../components/bs5/accordion/accordion";
-@import "../components/bs5/backToTop/backToTop";
 @import "../components/bs5/banner/banner";
 @import "../components/bs5/blockquote/blockquote";
 @import "../components/bs5/breadcrumbs/breadcrumbs";
@@ -107,6 +110,7 @@ $enable-dark-mode: true;
 @import "../components/bs5/formcheck/formcheck";
 @import "../components/bs5/footer/footer";
 @import "../components/bs5/globalAlert/globalAlert";
+@import "../components/bs5/iconLink/iconLink";
 @import "../components/bs5/header/header";
 @import "../components/bs5/icons/icons";
 @import "../components/bs5/inpageAlert/inpageAlert";
@@ -129,9 +133,6 @@ $enable-dark-mode: true;
 @import "../components/bs5/typography/typography";
 @import "../components/bs5/video/video";
 
-// Common Layout Blocks, under review
-@import "../components/common/layout/content";
-
 // Themes
 @import "qld-theme";
 

package/src/css/qld-variables.scss

@@ -10,14 +10,14 @@
 @import "@qld-gov-au/qgds-tokens/dist/scss/_map.scss";
 
 //QLD Names Colours
-$qld-dark-blue : $core-default-color-brand-primary-dark-blue;
-$qld-sapphire-blue : $core-default-color-brand-primary-sapphire-blue;
-$qld-light-blue : $core-default-color-brand-primary-light-blue;
-$qld-light-green : $core-default-color-brand-primary-light-green;
-$qld-dark-green : $core-default-color-brand-secondary-darkgreen;
-$qld-golden-yellow : $core-default-color-brand-secondary-golden-yellow;
-$qld-maroon-traditional : $core-default-color-brand-other-gov-maroon;
-$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
+$qld-dark-blue: $core-default-color-brand-primary-dark-blue;
+$qld-sapphire-blue: $core-default-color-brand-primary-sapphire-blue;
+$qld-light-blue: $core-default-color-brand-primary-light-blue;
+$qld-light-green: $core-default-color-brand-primary-light-green;
+$qld-dark-green: $core-default-color-brand-secondary-darkgreen;
+$qld-golden-yellow: $core-default-color-brand-secondary-golden-yellow;
+$qld-maroon-traditional: $core-default-color-brand-other-gov-maroon;
+$qld-maroon-modern: $core-default-color-brand-other-modern-maroon;
 $qld-dark-text: $color-default-color-dark-text-default;
 $qld-dark-border: $color-default-color-dark-border-default;
 $qld-dark-alt-border: $color-default-color-dark-border-alt;
@@ -26,7 +26,7 @@ $qld-general-info-alert: $core-default-color-status-info-lighter;
 $qld-red-border: $core-default-color-status-error-darker;
 $qld-blue-border: $color-default-color-light-border-light;
 $qld-yellow-border: $core-default-color-status-caution-darker;
-$qld-dark-blue-shade : $color-default-color-dark-background-alt-shade;
+$qld-dark-blue-shade: $color-default-color-dark-background-alt-shade;
 $qld-light-background: $core-default-color-status-info-lightest;
 $qld-light-background-shade: $color-default-color-light-background-light-shade;
 $qld-light-border: $color-default-color-light-border-default;
@@ -43,27 +43,27 @@ $qld-link-underline-dark: $color-default-color-dark-underline-default;
 $qld-link-underline-hover-dark: $color-default-color-dark-underline-default-hover;
 $qld-link-underline-visited-dark: $color-default-color-dark-underline-visited;
 $qld-link-underline-visited-hover-dark: $color-default-color-dark-underline-visited-hover;
-/// 
+///
 $qld-link-visited: $color-default-color-light-underline-visited;
 $qld-link-visited-dark: $color-default-color-dark-underline-visited;
-$qld-text-darkest : $color-default-color-dark-link-on-action;
-$qld-dark-hover : $color-default-color-dark-background-default-shade;
+$qld-text-darkest: $color-default-color-dark-link-on-action;
+$qld-dark-hover: $color-default-color-dark-background-default-shade;
 
-$qld-text-light-blue-dark : $core-default-color-brand-primary-dark-blue;
-$qld-light-green-dark : $core-default-color-brand-primary-light-green;
-$qld-dark-green-dark : $color-default-color-dark-action-primary;
-$qld-light-yellow : $core-default-color-status-caution-lightest;
-$qld-button-dark-blue : $color-default-color-light-action-primary-hover;
+$qld-text-light-blue-dark: $core-default-color-brand-primary-dark-blue;
+$qld-light-green-dark: $core-default-color-brand-primary-light-green;
+$qld-dark-green-dark: $color-default-color-dark-action-primary;
+$qld-light-yellow: $core-default-color-status-caution-lightest;
+$qld-button-dark-blue: $color-default-color-light-action-primary-hover;
 
 //QGOV Brand Mapping - QLD.GOV.AU
-$qld-brand-primary-dark : $qld-dark-blue;
-$qld-brand-primary : $qld-sapphire-blue;
-$qld-brand-primary-light : $qld-light-blue;
-$qld-brand-secondary-dark : $qld-dark-green;
-$qld-brand-secondary : $qld-light-green;
-$qld-brand-accent : $qld-golden-yellow;
-
-// Resolves @qgds-tokens V1 gap between (_variables.scss and _map.scss). 
+$qld-brand-primary-dark: $qld-dark-blue;
+$qld-brand-primary: $qld-sapphire-blue;
+$qld-brand-primary-light: $qld-light-blue;
+$qld-brand-secondary-dark: $qld-dark-green;
+$qld-brand-secondary: $qld-light-green;
+$qld-brand-accent: $qld-golden-yellow;
+
+// Resolves @qgds-tokens V1 gap between (_variables.scss and _map.scss).
 // Nuetrals were dropped from _variables.scss, but retained in _map.scss.
 $core-default-color-neutral-black: #131212;
 $core-default-color-neutral-darkest: #222020;
@@ -74,43 +74,40 @@ $core-default-color-neutral-lighter: #ebebeb;
 $core-default-color-neutral-lightest: #f5f5f5;
 $core-default-color-neutral-white: #ffffff;
 
-
 //Greys
-$qld-system-darkest : $core-default-color-neutral-darkest;
-$qld-dark-grey : $core-default-color-neutral-darker;
-$qld-medium-grey : $core-default-color-neutral-dark;
-$qld-alt-grey : $core-default-color-neutral-light;
+$qld-system-darkest: $core-default-color-neutral-darkest;
+$qld-dark-grey: $core-default-color-neutral-darker;
+$qld-medium-grey: $core-default-color-neutral-dark;
+$qld-alt-grey: $core-default-color-neutral-light;
 $qld-light-link: $color-default-color-light-link-default;
 $qld-dark-link: $color-default-color-dark-link-default;
 
 //Should be core color rather than second hand reference (no match)
 $qld-soft-grey: $color-default-color-light-border-alt; //todo, replace soft-greys across the system with the below color
 
-
-
-$qld-dark-grey-muted : $color-default-color-light-text-lighter;
-$qld-text-grey : $color-default-color-light-text-default;
+$qld-dark-grey-muted: $color-default-color-light-text-lighter;
+$qld-text-grey: $color-default-color-light-text-default;
 $qld-hint-text-color: $color-default-color-light-text-lighter;
 $qld-hint-text-color-muted: $color-default-color-dark-text-lighter;
 $qld-color-dark-button-hover: $core-default-color-brand-primary-light-green;
-$qld-text-headings : $color-default-color-light-text-heading;
-$qld-grey : $core-default-color-neutral-light;
-$qld-light-grey : $core-default-color-neutral-lighter;
-$qld-light-grey-alt : $color-default-color-light-background-alt;
-$qld-extra-light-grey : $core-default-color-neutral-lightest;
-$qld-white : $core-default-color-neutral-white;
-$qld-white-underline : $core-default-color-status-underline-light;
-$qld-dark-underline : $core-default-color-status-underline-dark;
+$qld-text-headings: $color-default-color-light-text-heading;
+$qld-grey: $core-default-color-neutral-light;
+$qld-light-grey: $core-default-color-neutral-lighter;
+$qld-light-grey-alt: $color-default-color-light-background-alt;
+$qld-extra-light-grey: $core-default-color-neutral-lightest;
+$qld-white: $core-default-color-neutral-white;
+$qld-white-underline: $core-default-color-status-underline-light;
+$qld-dark-underline: $core-default-color-status-underline-dark;
 $qld-maroon-traditional: $core-default-color-brand-other-gov-maroon;
-$qld-maroon-modern : $core-default-color-brand-other-modern-maroon;
-$qld-notify-warning : $core-default-color-status-error-default;
+$qld-maroon-modern: $core-default-color-brand-other-modern-maroon;
+$qld-notify-warning: $core-default-color-status-error-default;
 $qld-notify-information: $core-default-color-status-info-default;
-$qld-notify-success : $core-default-color-status-success-default;
-$qld-notify-alert : $core-default-color-status-caution-default;
-$qld-syntax-values : $core-default-color-brand-primary-light-green;
-$qld-syntax-elements : $core-default-color-code-light-blue;
-$qld-syntax-properties : $core-default-color-code-violet;
-$qld-syntax-comments : $core-default-color-code-muted;
+$qld-notify-success: $core-default-color-status-success-default;
+$qld-notify-alert: $core-default-color-status-caution-default;
+$qld-syntax-values: $core-default-color-brand-primary-light-green;
+$qld-syntax-elements: $core-default-color-code-light-blue;
+$qld-syntax-properties: $core-default-color-code-violet;
+$qld-syntax-comments: $core-default-color-code-muted;
 $qld-textbox-border-color: $color-default-color-light-action-primary-hover;
 $qld-color-error-light: $core-default-color-status-error-lightest;
 $qld-color-success-light: $core-default-color-status-success-lightest;
@@ -139,23 +136,23 @@ $qld-dark-action-secondary: $core-default-color-brand-secondary-golden-yellow;
 $qld-dark-action-secondary-hover: $color-default-color-dark-action-secondary-hover;
 $qld-dark-action-text: $color-default-color-dark-link-on-action;
 
-$primary : $qld-brand-primary;
-$primary-dark : $qld-brand-primary-dark;
-$secondary : $qld-dark-green;
-$success : $qld-notify-success;
-$info : $qld-notify-information;
-$warning : $qld-notify-alert;
-$danger : $qld-notify-warning;
-$light : $qld-extra-light-grey;
-$dark : $qld-dark-grey;
+$primary: $qld-brand-primary;
+$primary-dark: $qld-brand-primary-dark;
+$secondary: $qld-dark-green;
+$success: $qld-notify-success;
+$info: $qld-notify-information;
+$warning: $qld-notify-alert;
+$danger: $qld-notify-warning;
+$light: $qld-extra-light-grey;
+$dark: $qld-dark-grey;
 
 $qld-fluid-width-full: 100%;
 $qld-fluid-width-3-quarters: 75%;
 $qld-fluid-width-half: 48.5%;
 $qld-fluid-width-1-quarter: 25%;
 
-$color-default-color-dark-underline-default: #FFFFFF;
-$color-default-color-dark-underline-default-hover: #FFFFFF;
+$color-default-color-dark-underline-default: #ffffff;
+$color-default-color-dark-underline-default-hover: #ffffff;
 
 // Project-specific colors map for generating CSS custom properties only
 // These will NOT create utility classes, only CSS variables on :root
@@ -247,7 +244,6 @@ $project-colors: (
   "dark-alt-background": $qld-color-dark-alt-background,
   "dark-alt-background-shade": $qld-color-dark-alt-background--shade,
 
-
   //Text
   "light-text-heading": $color-default-color-light-text-heading,
   "light-text-text": $color-default-color-light-text-default,
@@ -256,7 +252,6 @@ $project-colors: (
   "dark-text-text": $color-default-color-dark-text-default,
   "dark-text-lighter": $color-default-color-dark-text-lighter,
 
-
   // Desing Tokens V1 dependent variables
   "light-accent": $color-default-color-light-accent-design-accent,
   "dark-accent": $color-default-color-dark-accent-design-accent,
@@ -273,9 +268,11 @@ $project-colors: (
 
   // Underlines
   "light-underline-default": $color-default-color-light-underline-default,
-  "light-underline-default-hover": $color-default-color-light-underline-default-hover,
+  "light-underline-default-hover":
+    $color-default-color-light-underline-default-hover,
   "dark-underline-default": $color-default-color-dark-underline-default,
-  "dark-underline-default-hover": $color-default-color-dark-underline-default-hover
+  "dark-underline-default-hover":
+    $color-default-color-dark-underline-default-hover,
 );
 
 $project-base-colors: (
@@ -302,7 +299,7 @@ $project-base-colors: (
   "light-yellow": $qld-light-yellow,
   "button-dark-blue": $qld-button-dark-blue,
   "text-darkest": $qld-text-darkest,
-  "dark-hover" : $qld-dark-hover,
+  "dark-hover": $qld-dark-hover
 );
 
 // Generate CSS custom properties for qld-tokens & project colours on :root to prevent utility class generation
@@ -319,37 +316,61 @@ $grid-breakpoints: (
   sm: 400px,
   md: 700px,
   lg: 992px,
-  xl: 1312px
+  xl: 1312px,
 );
 
 // Map merge to include custom breakpoints
 $breakpoints: map-merge($grid-breakpoints, ());
 
+// Gutters inside rows (column gutters)
+$grid-gutter-width: 2rem;
+
 // Default border radius
 $border-radius: 0.25rem;
 $border-radius-sm: 0.25rem;
 $border-radius-lg: 0.25rem;
 
 // QGOV Borders
-$qld-border-width-thin : 1px;
-$qld-border-width-default : 2px;
-$qld-border-width-medium : 3px;
-$qld-border-width-thick : 4px;
-$qld-border-width-extra-thick : 8px;
+$qld-border-width-thin: 1px;
+$qld-border-width-default: 2px;
+$qld-border-width-medium: 3px;
+$qld-border-width-thick: 4px;
+$qld-border-width-extra-thick: 8px;
 
 // Extended spacers to procude 8px and 16px increments
 // use px-16, py-sm-16, ml-40, mr-40, etc
 $qld-custom-spacers: (
+  12: (
+    $spacer * 0.75,
+  ),
   16: $spacer,
-  20: ($spacer * 1.25),
-  24: ($spacer * 1.5),
-  32: ($spacer * 2),
-  40: ($spacer * 2.5),
-  48: ($spacer * 3.0),
-  56: ($spacer * 3.5),
-  64: ($spacer * 4),
-  72: ($spacer * 4.5),
-  80: ($spacer * 5)
+  20: (
+    $spacer * 1.25,
+  ),
+  24: (
+    $spacer * 1.5,
+  ),
+  32: (
+    $spacer * 2,
+  ),
+  40: (
+    $spacer * 2.5,
+  ),
+  48: (
+    $spacer * 3,
+  ),
+  56: (
+    $spacer * 3.5,
+  ),
+  64: (
+    $spacer * 4,
+  ),
+  72: (
+    $spacer * 4.5,
+  ),
+  80: (
+    $spacer * 5,
+  ),
 );
 
 $spacers: map-merge($spacers, $qld-custom-spacers);

package/src/js/handlebars.helpers.js

@@ -1,22 +1,23 @@
 /* global Handlebars */
+
 /**
- * Registers Handlebars Helpers
- * @param {Handlebars} handlebars Templating engine
- * @returns {void} Result of the helper operation
+ *
+ * @param {*} v1 The left value
+ * @param { "==" | "===" | "!=" | "!==" | "<" | "<=" | ">" | ">=" | "&&"  | "||" | "contains"} operator the operator to handle comparison
+ * @param {*} v2 The right value
+ * @param {Object} options handlebars-provided options object
+ * @returns {string} handlebars template block string
+ * @example
+ *   {{#ifCond value1 "===" value2}}
+ *     <!-- Content to render if condition is true -->
+ *     <p>Value1 is strictly equal to Value2</p>
+ *   {{else}}
+ *     <!-- Content to render if condition is false -->
+ *     <p>Value1 is not strictly equal to Value2</p>
+ *   {{/ifCond}}
  */
-
-export default function handlebarsHelpers(handlebars) {
-  // contains - if first object is in collection (second object) to return true
-  handlebars.registerHelper("contains", function (needle, haystack, options) {
-    needle = handlebars.escapeExpression(needle);
-    haystack = handlebars.escapeExpression(haystack);
-    return haystack.indexOf(needle) > -1
-      ? options.fn(this)
-      : options.inverse(this);
-  });
-  // ifCond - checks conditions
-  handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
-    switch (operator) {
+function ifCond(v1, operator, v2, options) {
+  switch (operator) {
     case "==":
       return v1 == v2 ? options.fn(this) : options.inverse(this);
     case "===":
@@ -45,8 +46,26 @@ export default function handlebarsHelpers(handlebars) {
       } else return options.inverse(this);
     default:
       return options.inverse(this);
-    }
+  }
+}
+/**
+ * Registers Handlebars Helpers
+ * @param {Handlebars} handlebars Templating engine
+ * @returns {void} Result of the helper operation
+ */
+
+export default function handlebarsHelpers(handlebars) {
+  // contains - if first object is in collection (second object) to return true
+  handlebars.registerHelper("contains", function (needle, haystack, options) {
+    needle = handlebars.escapeExpression(needle);
+    haystack = handlebars.escapeExpression(haystack);
+    return haystack.indexOf(needle) > -1
+      ? options.fn(this)
+      : options.inverse(this);
   });
+
+  handlebars.registerHelper("ifCond", ifCond);
+
   // isType - Checks is expected type
   handlebars.registerHelper("isType", function (value, expected, options) {
     if (value === expected) {
@@ -101,12 +120,12 @@ export default function handlebarsHelpers(handlebars) {
       var year = date.getFullYear();
       // Format date based on the format string
       switch (format) {
-      case "YYYY":
-        return `${year}`;
-      case "MMMM YYYY":
-        return `${month} ${year}`;
-      default:
-        return `${day} ${month} ${year}`;
+        case "YYYY":
+          return `${year}`;
+        case "MMMM YYYY":
+          return `${month} ${year}`;
+        default:
+          return `${day} ${month} ${year}`;
       }
     },
   );
@@ -198,27 +217,21 @@ export default function handlebarsHelpers(handlebars) {
     return durationString;
   });
 
-  // helper for extending components to set overridable data values
-  // if the value is not set in the component data.json, it will use the hds data value
-  handlebars.registerHelper('isdefined', function (value, defaultValue) {
-    return value !== undefined ? value : defaultValue;
-  });
-
   /**
    * Helper for extending components to set overridable data values
    * If the value is not set in the component data.json, it will use the hds data value
-   * 
+   *
    * @param {string} value - The value to check if it is defined
    * @param {string} defaultValue - The default value to return if value is not defined
    * @returns {string} - The value if it is defined, otherwise the default value
    */
-  handlebars.registerHelper('isdefined', function (value, defaultValue) {
+  handlebars.registerHelper("isdefined", function (value, defaultValue) {
     return value !== undefined && value !== "" ? value : defaultValue;
   });
 
   /**
    * Used to get class names added to an element based on their boolean values in an array
-   * 
+   *
    * @param {string} names - Comma-separated list of class names to check for
    * @param {array} array - Array of objects to check for true values
    * @returns {string} - Space-separated list of class names that have true values
@@ -233,7 +246,7 @@ export default function handlebarsHelpers(handlebars) {
     for (let i = 0; i < nameList.length; i++) {
       let name = nameList[i];
       // Check if any item in the array matches the name and is true
-      if(array){
+      if (array) {
         for (let j = 0; j < array.length; j++) {
           if (array[j][name] === true) {
             matchedItems.push(name); // Add to matchedItems if found and true
@@ -251,19 +264,18 @@ export default function handlebarsHelpers(handlebars) {
     }
   });
 
-
   handlebars.registerHelper("join", function (theArray, separator) {
     // Handle if a separator is not provided
     if (!separator || typeof separator !== "string") {
       separator = " ";
     }
-    
+
     // If theArray is not an array, return it as is, otherwise join it
     return !Array.isArray(theArray) ? theArray : theArray.join(separator);
   });
-  
-  handlebars.registerHelper('toCamelCase', function (text) {
-    if (typeof text !== 'string') return text;
+
+  handlebars.registerHelper("toCamelCase", function (text) {
+    if (typeof text !== "string") return text;
 
     // Remove whitespace and convert to camelCase
     return text
@@ -271,9 +283,8 @@ export default function handlebarsHelpers(handlebars) {
       .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match, index) =>
         index === 0 ? match.toLowerCase() : match.toUpperCase(),
       )
-      .replace(/\s+/g, ''); // Remove all spaces
+      .replace(/\s+/g, ""); // Remove all spaces
   });
-
 }
 
 if (typeof Handlebars !== "undefined") {

package/src/js/handlebars.partials.js

@@ -11,6 +11,7 @@ import button from "../components/bs5/button/button.hbs?raw";
 import callToAction from "../components/bs5/callToAction/callToAction.hbs?raw";
 import callout from "../components/bs5/callout/callout.hbs?raw";
 import card from "../components/bs5/card/card.hbs?raw";
+import containerLayout from "../components/bs5/containerLayout/containerLayout.hbs?raw";
 import contentFooter from "../components/bs5/contentFooter/contentFooter.hbs?raw";
 import contentFooterWrapper from "../components/bs5/contentFooterWrapper/contentFooterWrapper.hbs?raw";
 import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?raw";
@@ -24,17 +25,24 @@ import fullPage from "../components/bs5/fullPageWrapper/fullPage.hbs?raw";
 import globalAlert from "../components/bs5/globalAlert/globalAlert.hbs?raw";
 import head from "../components/bs5/head/head.hbs?raw";
 import header from "../components/bs5/header/header.hbs?raw";
+import iconLink from "../components/bs5/iconLink/iconLink.hbs?raw";
 import icon from "../components/bs5/icons/icon.hbs?raw";
 import image from "../components/bs5/image/image.hbs?raw";
 import inpageAlert from "../components/bs5/inpageAlert/inpageAlert.hbs?raw";
 import inpagenav from "../components/bs5/inpagenav/inpagenav.hbs?raw";
 import linkColumns from "../components/bs5/linkColumns/linkColumns.hbs?raw";
+import logo from "../components/bs5/logo/logo.hbs?raw";
+import logoCOALandscape from "../components/bs5/logo/logoCOALandscape.hbs?raw";
+import logoCOALandscape2Lines from "../components/bs5/logo/logoCOALandscape2Lines.hbs?raw";
 import mainContainerWrapper from "../components/bs5/mainContainerWrapper/mainContainerWrapper.hbs?raw";
 import metaDcTerms from "../components/bs5/metaDcTerms/metaDcTerms.hbs?raw";
 import metaOpenGraph from "../components/bs5/metaOpenGraph/metaOpenGraph.hbs?raw";
 import modal from "../components/bs5/modal/modal.hbs?raw";
 import navbar from "../components/bs5/navbar/navbar.hbs?raw";
 import pageLayout from "../components/bs5/pageLayout/pageLayout.hbs?raw";
+import contentPageWithForm from "../components/bs5/pageLayout/templates/contentPageWithForm.hbs?raw";
+import contentPageWithSideNavigation from "../components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs?raw";
+import fullWidthLandingPage from "../components/bs5/pageLayout/templates/fullWidthLandingPage.hbs?raw";
 import pagination from "../components/bs5/pagination/pagination.hbs?raw";
 import promotionalPanel from "../components/bs5/promotionalPanel/promotionalPanel.hbs?raw";
 import quickexit from "../components/bs5/quickexit/quickexit.hbs?raw";
@@ -69,6 +77,7 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("callToAction", callToAction);
   handlebars.registerPartial("callout", callout);
   handlebars.registerPartial("card", card);
+  handlebars.registerPartial("containerLayout", containerLayout);
   handlebars.registerPartial("contentFooter", contentFooter);
   handlebars.registerPartial("contentFooterWrapper", contentFooterWrapper);
   handlebars.registerPartial("contentWrapper", contentWrapper);
@@ -82,17 +91,24 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("globalAlert", globalAlert);
   handlebars.registerPartial("head", head);
   handlebars.registerPartial("header", header);
+  handlebars.registerPartial("iconLink", iconLink);
   handlebars.registerPartial("icon", icon);
   handlebars.registerPartial("image", image);
   handlebars.registerPartial("inpageAlert", inpageAlert);
   handlebars.registerPartial("inpagenav", inpagenav);
   handlebars.registerPartial("linkColumns", linkColumns);
+  handlebars.registerPartial("logo", logo);
+  handlebars.registerPartial("logoCOALandscape", logoCOALandscape);
+  handlebars.registerPartial("logoCOALandscape2Lines", logoCOALandscape2Lines);
   handlebars.registerPartial("mainContainerWrapper", mainContainerWrapper);
   handlebars.registerPartial("metaDcTerms", metaDcTerms);
   handlebars.registerPartial("metaOpenGraph", metaOpenGraph);
   handlebars.registerPartial("modal", modal);
   handlebars.registerPartial("navbar", navbar);
   handlebars.registerPartial("pageLayout", pageLayout);
+  handlebars.registerPartial("contentPageWithForm", contentPageWithForm);
+  handlebars.registerPartial("contentPageWithSideNavigation", contentPageWithSideNavigation);
+  handlebars.registerPartial("fullWidthLandingPage", fullWidthLandingPage);
   handlebars.registerPartial("pagination", pagination);
   handlebars.registerPartial("promotionalPanel", promotionalPanel);
   handlebars.registerPartial("quickexit", quickexit);

package/src/js/qld.bootstrap.js

@@ -8,7 +8,7 @@ import {
   videoTranscriptTitle,
 } from "./../components/bs5/video/video.functions";
 import { initializeNavbar } from "./../components/bs5/navbar/navbar.functions";
-import { initBreadcrumb } from "./../components/bs5/breadcrumbs/breadcrumb.functions";
+import { initBreadcrumb } from "./../components/bs5/breadcrumbs/breadcrumbs.functions";
 import {
   positionQuickExit,
   initQuickexit,
@@ -69,18 +69,24 @@ window.addEventListener("DOMContentLoaded", () => {
           clearTimeout(timeout);
           timeout = setTimeout(() => {
             const value = e.target.value.trim();
-            showSuggestions(value, value === '', form);
+            showSuggestions(value, value === "", form);
           }, 300);
         });
 
         // Add focus event listener to the search input
         searchInput.addEventListener("focus", function () {
           const suggestions = form.querySelector(".suggestions");
-          const dynamicSuggestionsContainer = form.querySelector(".dynamic-suggestions");
+          const dynamicSuggestionsContainer = form.querySelector(
+            ".dynamic-suggestions",
+          );
 
           if (this.value.trim() === "") {
             showSuggestions("", true, form);
-          } else if (suggestions && dynamicSuggestionsContainer && dynamicSuggestionsContainer.innerHTML.trim() !== "") {
+          } else if (
+            suggestions &&
+            dynamicSuggestionsContainer &&
+            dynamicSuggestionsContainer.innerHTML.trim() !== ""
+          ) {
             // Only show existing suggestions if there are actual dynamic suggestions populated
             suggestions.classList.remove("d-none");
           }
@@ -89,13 +95,15 @@ window.addEventListener("DOMContentLoaded", () => {
         const suggestions = form.querySelector(".suggestions");
         // If there is no suggestions renderred, do not add event listener to the document
         if (suggestions) {
-
           // Helper function to determine if suggestions should be hidden on focus change
           const shouldHideSuggestions = (newFocusTarget) => {
             if (!newFocusTarget) return true;
 
-            const isFocusInsideInput = searchInput.contains(newFocusTarget) || searchInput === newFocusTarget;
-            const isFocusInsideSuggestions = suggestions.contains(newFocusTarget);
+            const isFocusInsideInput =
+              searchInput.contains(newFocusTarget) ||
+              searchInput === newFocusTarget;
+            const isFocusInsideSuggestions =
+              suggestions.contains(newFocusTarget);
 
             return !isFocusInsideInput && !isFocusInsideSuggestions;
           };
@@ -110,10 +118,10 @@ window.addEventListener("DOMContentLoaded", () => {
           };
 
           // Attach focusout event listener to search input
-          searchInput.addEventListener('focusout', handleFocusOut);
+          searchInput.addEventListener("focusout", handleFocusOut);
 
           // Attach focusout event listener to suggestions container
-          suggestions.addEventListener('focusout', handleFocusOut);
+          suggestions.addEventListener("focusout", handleFocusOut);
         } else {
           console.warn("Required suggestions elements not found.");
         }