npm - @qld-gov-au/qgds-bootstrap5 - Versions diffs - 1.1.41 → 2.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (143) hide show

package/src/components/bs5/pageLayout/templates/contentPageWithSideNavigation.hbs CHANGED Viewed

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{title}}</title>
-    {{> head }}
 </head>
 <body>
@@ -21,80 +20,101 @@
     {{/if}}
     <main>
-        <div class="container-fluid">
-            <div class="container qld-content">
-                {{#if breadcrumbs}}
-                <div class="row">
-                    <div class="col-12">
-                        <!-- breadcrumbs -->
-                        {{> breadcrumbs breadcrumbs}}
-                    </div>
+        <div class="container mt-40 mt-lg-64">
+            {{#if breadcrumbs}}
+            <div class="row">
+                <div class="col-12">
+                    <!-- breadcrumbs -->
+                    {{> breadcrumbs breadcrumbs}}
                 </div>
-                {{/if}}
-                <!-- Main Grid Layout: Side navigation and content -->
-                <div class="row">
-                    {{#if sidenav}}
-                    <!-- Side navigation Col -->
-                    <div class="col-lg-3 col-md-4 px-0">
-                        {{> sidenav sidenav}}
-                    </div>
-                    <!-- Content Col -->
-                    <div class="col-lg-8 col-md-7 ps-32">
-                        {{else}}
-                        <div class="col-12">
-                            {{/if}}
+            </div>
+            {{/if}}
+            <!-- Main Grid Layout: Side navigation and content -->
+            <div class="row">
+                {{#if sidenav}}
+                <!-- Side navigation Col -->
+                <div class="col-12 col-lg-3 mt-5 mt-lg-0">
+                    {{> sidenav sidenav}}
+                </div>
+                <!-- Content Col -->
+                <div class="col-lg-8 col-md-7 ps-1 ps-md-32">
+                    {{else}}
+                    <div class="col-12">
+                        {{/if}}
-                            <!-- Main Content Sections -->
-                            <div class="content-section ps-32">
+                        <!-- Main Content Sections -->
+                        <div class="content-section mb-5 px-1 px-md-32">
-                                {{#if inpagenav}}
-                                <!-- inpagenav Section -->
-                                {{> inpagenav inpagenav}}
-                                {{/if}}
+                            {{#if inpagenav}}
+                            <!-- inpagenav Section -->
+                            {{> inpagenav inpagenav}}
+                            {{/if}}
-                                <h1 id="section-heading">Section heading (H1)</h1>
-                                <p>This is the main content area. It contains detailed information about the topic.</p>
+                            <h1 id="section-heading">Section heading (H1)</h1>
+                            <p>
+                                Lorem ipsum dolor sit amet consectetur. Sed facilisis purus eu convallis ut. Morbi condimentum volutpat feugiat pellentesque. Auctor amet auctor dolor metus eget diam. Facilisis vitae venenatis vestibulum libero ut. Luctus diam pellentesque ipsum accumsan amet commodo.
+                            </p>
+                            <p>
+                                Convallis et ullamcorper ac nisi ornare sed facilisis sem. Scelerisque malesuada vivamus tellus mi vitae amet ornare donec malesuada. Nascetur senectus aenean fames id turpis.
+                            </p>
+                            <h2 id="content-heading">Content heading (H2)</h2>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                                incididunt ut labore et dolore magna aliqua.</p>
+                            {{#if calloutdata}}
+                            <!-- callout Section -->
+                            {{> callout calloutdata}}
+                            {{/if}}
-                                <h2 id="content-heading">Content heading (H2)</h2>
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                                    incididunt ut labore et dolore magna aliqua.</p>
+                            <h3 id="inspection">Pre-registration inspection (H3)</h3>
+                            <p>Information about pre-registration inspection requirements.</p>
-                                <h3 id="inspection">Pre-registration inspection (H3)</h3>
-                                <p>Information about pre-registration inspection requirements.</p>
+                            <h4 id="fees-and-charges">Fees and charges (H4)</h4>
+                            <p>Details about fees and charges for vehicle registration.</p>
-                                <h4 id="fees-and-charges">Fees and charges (H4)</h4>
-                                <p>Details about fees and charges for vehicle registration.</p>
+                        </div>
-                            </div>
+                        {{#if accordionItems}}
+                        <!-- accordion Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> accordion accordionItems}}
+                        </div>
+                        {{/if}}
-                            {{#if image}}
-                            <!-- image Section -->
-                            <div class="my-4 ps-32">
-                                {{> image image}}
-                            </div>
-                            {{/if}}
+                        {{#if video}}
+                        <!-- video Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> video video}}
+                        </div>
+                        {{/if}}
-                            {{#if table}}
-                            <!-- table Section -->
-                            <div class="my-4 ps-32">
-                                {{> table table}}
-                            </div>
-                            {{/if}}
+                        <div class="my-5 p-1 p-md-32 bg-light">
+                            <h2 id="inspection">Section heading (H2)</h2>
+                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
+                                est.
+                                Tincidunt ultrices commodo vestibulum non netus. </p>
+                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
+                                condimentum adipiscing augue quisque eu.</p>
-                            {{#if video}}
-                            <!-- video Section -->
-                            <div class="my-4 ps-32">
-                                {{> video video}}
-                            </div>
-                            {{/if}}
+                            {{> callToAction callToAction}}
+                        </div>
-                            <!-- Content Footer -->
-                            {{> contentFooter contentFooter}}
+                        {{#if table}}
+                        <!-- table Section -->
+                        <div class="my-5 px-1 px-md-32">
+                            {{> table table}}
                         </div>
+                        {{/if}}
                     </div>
                 </div>
+                <!-- Content Footer -->
+                {{> contentFooter contentFooter}}
             </div>
+        </div>
     </main>
     <!-- Footer -->
     {{> footer footer}}

package/src/components/bs5/pageLayout/templates/homePage.hbs ADDED Viewed

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}</title>
+</head>
+<body>
+    {{> globalAlert globalAlert}}
+    {{> header header}}
+    {{> navbar navbar}}
+    {{#if banner}}
+    {{> banner banner}}
+    {{/if}}
+    <main>
+        <div class="container-fluid p-0">
+            {{#if cardGrid}}
+            <section class="py-5 mt-md-3">
+                <div class="container">
+                    <div class="row">
+                        {{#each cardGrid.cards}}
+                        <div class="col-md-4 mb-4">
+                            {{> card this}}
+                        </div>
+                        {{/each}}
+                    </div>
+                </div>
+            </section>
+            {{/if}}
+            {{#if linkColumns}}
+            <section class="py-5">
+                <div class="container">
+                    {{> linkColumns linkColumns}}
+                </div>
+            </section>
+            {{/if}}
+            <section class="py-5 mt-md-3 bg-light">
+                <div class="container">
+                    <h2 id="content-heading">Section heading (H2)</h2>
+                    <div class="row">
+                        <div class="col-md-4 mb-4">
+                            <h3 id="inspection">Content heading (H3)</h3>
+                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
+                                est.
+                                Tincidunt ultrices commodo vestibulum non netus. </p>
+                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
+                                condimentum adipiscing augue quisque eu.</p>
+                            {{> callToAction callToAction}}
+                        </div>
+                        <div class="col-md-4 mb-4">
+                            <h3 id="inspection">Content heading (H3)</h3>
+                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
+                                est.
+                                Tincidunt ultrices commodo vestibulum non netus. </p>
+                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
+                                condimentum adipiscing augue quisque eu.</p>
+                            {{> callToAction callToAction}}
+                        </div>
+                        <div class="col-md-4 mb-4">
+                            <h3 id="inspection">Content heading (H3)</h3>
+                            <p>Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies
+                                est.
+                                Tincidunt ultrices commodo vestibulum non netus. </p>
+                            <p>Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien
+                                condimentum adipiscing augue quisque eu.</p>
+                            {{> callToAction callToAction}}
+                        </div>
+                    </div>
+                </div>
+            </section>
+            {{#if promotionalPanel}}
+            <section class="pt-5 bg-light">
+                <div class="container">
+                    {{> promotionalPanel promotionalPanel}}
+                </div>
+            </section>
+            {{/if}}
+            {{#if cardGridBottom}}
+            <section class="py-64 dark-alt">
+                <div class="container pt-64">
+                    <div class="row">
+                        {{#each cardGridBottom.cards}}
+                        <div class="col-md-4 mb-4">
+                            {{> card this}}
+                        </div>
+                        {{/each}}
+                    </div>
+                </div>
+            </section>
+            {{/if}}
+        </div>
+    </main>
+    {{> footer footer}}
+</body>
+</html>

package/src/components/bs5/promotionalPanel/PromotionalPanel.mdx CHANGED Viewed

@@ -1,16 +1,21 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as promotionalPanelStories from "./promotionalPanel.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as promotionalPanelStories from "./promotionalPanel.stories";
+import defaultdata from "./promotionalPanel.data.json";
 <Meta of={promotionalPanelStories} />
 # Promotional Panel
 <Canvas>
   <Story of={promotionalPanelStories.Default} />
 </Canvas>
 ## Design resources
 - [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=SY0WW7uiwAl3ioEj-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23269-286312&p=f&t=nVLTSHpRu8jvVSar-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/promotional-panel)
+## Example JSON data
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap CHANGED Viewed

@@ -38,7 +38,7 @@ exports[`SearchInput > Renders as expected 1`] = `
             <div class="dynamic-suggestions"></div>
         </div>
         <button class="btn btn-primary" type="submit" id="search-button">
-            <span class="btn-icon"></span>
+            <span class="btn-icon mx-0"></span>
             <span class="btn-label">Search</span>
         </button>
     </div>

package/src/components/bs5/searchInput/searchInput.hbs CHANGED Viewed

@@ -37,7 +37,7 @@
         </div>
         {{/if}}
         <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-            <span class="btn-icon"></span>
+            <span class="btn-icon mx-0"></span>
             <span class="btn-label">{{ buttonLabel }}</span>
         </button>
     </div>

package/src/components/bs5/searchInput/searchInput.scss CHANGED Viewed

@@ -196,7 +196,7 @@
     border-radius: 0.25rem;
     border: 0.125rem solid var(--border-color);
     background: var(--background-color);
-    padding-right: 6rem;
+    padding-right: 7.5rem;
     color: var(--text-color);
     &::placeholder {
@@ -280,6 +280,7 @@
     .form-control {
       padding-left: 1rem;
+      padding-right: 4rem;
     }
     #search-button {

package/src/components/bs5/searchInput/searchInput.test.js CHANGED Viewed

@@ -43,7 +43,6 @@ describe("SearchInput", () => {
       <html>
         <head>
           <meta charset="utf-8">
-          <link rel="stylesheet" href="${__dirname}/../../../../dist/assets/css/qld.bootstrap.css">
         </head>
         <body>
           <form class="site-search" action="https://example.com/search">
@@ -401,7 +400,7 @@ describe("SearchInput", () => {
     expect(isElementVisible(suggestions)).toBe(true);
     // Click inside suggestions
-    const suggestionLink = suggestions.querySelector("a");
+    const suggestionLink = suggestions.querySelector("li");
     if (suggestionLink) {
       const clickEvent = new window.MouseEvent("click", {
         bubbles: true,

package/src/css/main.scss CHANGED Viewed

@@ -110,7 +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/link/link";
 @import "../components/bs5/header/header";
 @import "../components/bs5/icons/icons";
 @import "../components/bs5/inpageAlert/inpageAlert";
@@ -133,6 +133,9 @@ $enable-dark-mode: true;
 @import "../components/bs5/typography/typography";
 @import "../components/bs5/video/video";
+// Custom utility classes
+@import "utilities";
 // Themes
 @import "qld-theme";

package/src/css/mixins/_index.scss CHANGED Viewed

@@ -1,3 +1,4 @@
 @forward "focusable";
-@forward "unset-button-styles";
 @forward "generate-color-vars";
+@forward "register-vars";
+@forward "unset-button-styles";

package/src/css/mixins/register-vars.scss ADDED Viewed

@@ -0,0 +1,23 @@
+///
+/// Create a list of CSS custom properties, easily prepending a prefix
+/// @param {string} $prefix - Prepended to the custom property name;
+/// @param {map} $vars - a map of (string: value);
+/// @example
+///    @include register-vars(
+///    "qld-header-",
+///    (
+///      underline-thickness-thin: 0.5px,
+///      underline-thickness-thick: 2px,
+///      underline-offset: 0.3em
+///    )
+///  );
+///
+///   // output:
+///   --qld-header-underline-thickness-thin: 0.5px;
+///   --qld-header-underline-thickness-thick: 2px;
+///   --qld-header-underline-offset: 0.3em;
+@mixin register-vars($prefix, $vars) {
+  @each $key, $value in $vars {
+    --#{$prefix}#{$key}: #{$value};
+  }
+}

package/src/css/qld-variables.scss CHANGED Viewed

@@ -218,9 +218,11 @@ $project-colors: (
   "light-background-shade": $qld-light-background-shade,
   //Borders
-  "light-border": $qld-light-border,
+  //"light-border": $qld-light-border,
+  "default-border": $qld-light-border,
+  "light-border": $color-default-color-light-border-light,
   "light-border-alt": $qld-light-border-alt,
   //Links
   "light-link": $color-default-color-light-link-default,
   "dark-link": $color-default-color-dark-link-default,

package/src/css/utilities/_index.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "responsive-visually-hidden";

package/src/css/utilities/responsive-visually-hidden.scss ADDED Viewed

@@ -0,0 +1,10 @@
+@each $key, $value in $grid-breakpoints {
+  // dont need xs breakpoint as it has already has bootstrap class
+  @if ($value > 0) {
+    @include media-breakpoint-up($key) {
+      .visually-hidden-#{$key} {
+        @include visually-hidden();
+      }
+    }
+  }
+}

package/src/js/handlebars.helpers.js CHANGED Viewed

@@ -18,34 +18,34 @@
  */
 function ifCond(v1, operator, v2, options) {
   switch (operator) {
-    case "==":
-      return v1 == v2 ? options.fn(this) : options.inverse(this);
-    case "===":
-      return v1 === v2 ? options.fn(this) : options.inverse(this);
-    case "!=":
-      return v1 != v2 ? options.fn(this) : options.inverse(this);
-    case "!==":
-      return v1 !== v2 ? options.fn(this) : options.inverse(this);
-    case "<":
-      return v1 < v2 ? options.fn(this) : options.inverse(this);
-    case "<=":
-      return v1 <= v2 ? options.fn(this) : options.inverse(this);
-    case ">":
-      return v1 > v2 ? options.fn(this) : options.inverse(this);
-    case ">=":
-      return v1 >= v2 ? options.fn(this) : options.inverse(this);
-    case "&&":
-      return v1 && v2 ? options.fn(this) : options.inverse(this);
-    case "||":
-      return v1 || v2 ? options.fn(this) : options.inverse(this);
-    case "contains":
-      if (typeof v1 == "string" && typeof v2 == "string") {
-        return v1.toLowerCase().indexOf(v2.toLowerCase()) >= 0
-          ? options.fn(this)
-          : options.inverse(this);
-      } else return options.inverse(this);
-    default:
-      return options.inverse(this);
+  case "==":
+    return v1 == v2 ? options.fn(this) : options.inverse(this);
+  case "===":
+    return v1 === v2 ? options.fn(this) : options.inverse(this);
+  case "!=":
+    return v1 != v2 ? options.fn(this) : options.inverse(this);
+  case "!==":
+    return v1 !== v2 ? options.fn(this) : options.inverse(this);
+  case "<":
+    return v1 < v2 ? options.fn(this) : options.inverse(this);
+  case "<=":
+    return v1 <= v2 ? options.fn(this) : options.inverse(this);
+  case ">":
+    return v1 > v2 ? options.fn(this) : options.inverse(this);
+  case ">=":
+    return v1 >= v2 ? options.fn(this) : options.inverse(this);
+  case "&&":
+    return v1 && v2 ? options.fn(this) : options.inverse(this);
+  case "||":
+    return v1 || v2 ? options.fn(this) : options.inverse(this);
+  case "contains":
+    if (typeof v1 == "string" && typeof v2 == "string") {
+      return v1.toLowerCase().indexOf(v2.toLowerCase()) >= 0
+        ? options.fn(this)
+        : options.inverse(this);
+    } else return options.inverse(this);
+  default:
+    return options.inverse(this);
   }
 }
 /**
@@ -120,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}`;
       }
     },
   );

package/src/js/handlebars.partials.js CHANGED Viewed

@@ -18,18 +18,21 @@ import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?
 import correctincorrect from "../components/bs5/correctincorrect/correctincorrect.hbs?raw";
 import dateinput from "../components/bs5/dateinput/dateinput.hbs?raw";
 import directionLinks from "../components/bs5/directionLinks/directionLinks.hbs?raw";
+import customLinks from "../components/bs5/footer/customLinks.hbs?raw";
+import feedbackForm from "../components/bs5/footer/feedbackForm.hbs?raw";
+import followLinks from "../components/bs5/footer/followLinks.hbs?raw";
 import footer from "../components/bs5/footer/footer.hbs?raw";
-import footerForgov from "../components/bs5/footer/footerForgov.hbs?raw";
 import formcheck from "../components/bs5/formcheck/formcheck.hbs?raw";
 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 headerBrand from "../components/bs5/header/headerBrand.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 link from "../components/bs5/link/link.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";
@@ -39,10 +42,9 @@ 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 homePage from "../components/bs5/pageLayout/templates/homePage.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";
@@ -84,18 +86,21 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("correctincorrect", correctincorrect);
   handlebars.registerPartial("dateinput", dateinput);
   handlebars.registerPartial("directionLinks", directionLinks);
+  handlebars.registerPartial("customLinks", customLinks);
+  handlebars.registerPartial("feedbackForm", feedbackForm);
+  handlebars.registerPartial("followLinks", followLinks);
   handlebars.registerPartial("footer", footer);
-  handlebars.registerPartial("footerForgov", footerForgov);
   handlebars.registerPartial("formcheck", formcheck);
   handlebars.registerPartial("fullPage", fullPage);
   handlebars.registerPartial("globalAlert", globalAlert);
   handlebars.registerPartial("head", head);
   handlebars.registerPartial("header", header);
-  handlebars.registerPartial("iconLink", iconLink);
+  handlebars.registerPartial("headerBrand", headerBrand);
   handlebars.registerPartial("icon", icon);
   handlebars.registerPartial("image", image);
   handlebars.registerPartial("inpageAlert", inpageAlert);
   handlebars.registerPartial("inpagenav", inpagenav);
+  handlebars.registerPartial("link", link);
   handlebars.registerPartial("linkColumns", linkColumns);
   handlebars.registerPartial("logo", logo);
   handlebars.registerPartial("logoCOALandscape", logoCOALandscape);
@@ -105,10 +110,9 @@ export default function handlebarsPartials(handlebars) {
   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("homePage", homePage);
   handlebars.registerPartial("pagination", pagination);
   handlebars.registerPartial("promotionalPanel", promotionalPanel);
   handlebars.registerPartial("quickexit", quickexit);

package/src/js/qld.bootstrap.js CHANGED Viewed

@@ -13,7 +13,7 @@ import {
   positionQuickExit,
   initQuickexit,
 } from "./../components/bs5/quickexit/quickexit.functions";
-import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
+//import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
 import { toggleSearch } from "./../components/bs5/header/header.functions";
 import {
   showSuggestions,
@@ -40,19 +40,18 @@ window.addEventListener("DOMContentLoaded", () => {
     // Footer FormIO Action
     // Note: This is added here, as there is an issue with breadcrumbShorten() function.
     //       Will move this once that issue is fixed.
-    const footerFormio = document.getElementById("qg-feedback-toggle");
-    if (footerFormio) {
-      displayFeedbackForm();
-    }
+    /*
+      const footerFormio = document.getElementById("qg-feedback-toggle");
+      if (footerFormio) {
+        displayFeedbackForm();
+      }
+   */
     //Header search
-    let headerSearchButton = document.querySelector(
-      ".qld__main-nav__toggle-search",
+    let headerSearchButton = document.getElementById(
+      "qld-header-toggle-search-button",
     );
     if (headerSearchButton) {
-      document
-        .querySelector(".qld__main-nav__toggle-search")
-        .addEventListener("click", toggleSearch);
+      headerSearchButton.addEventListener("click", toggleSearch);
     }
     // Get all forms with the class 'site-search'