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

package/src/components/bs5/header/_header-variables.scss

@@ -1,272 +1,86 @@
-@use "../../../css/mixins" as *;
-$prefix: "qld" !default;
+@use "../../../css/mixins" as m;
 
-%header-variables {
-  // Header
-  @include register-vars(
-    "#{$prefix}header-",
-    (
-      color-text: var(--#{$prefix}color-default-color-light-text-default),
-      color-bg: var(--#{$prefix}color-default-color-light-background-default),
-    )
-  );
-
-  // Pre-header bar
-  @include register-vars(
-    "#{$prefix}header-pre-header-",
-    (
-      color-text: var(--#{$prefix}color-default-color-dark-text-default),
-      color-bg: var(--#{$prefix}color-default-color-dark-background-default),
-      boxshadow: (
-        0 1px 2px rgba(0, 0, 0, 0.2),
-        0 1px 3px 1px rgba(0, 0, 0, 0.1),
-      ),
-      color-link: var(--#{$prefix}color-default-color-dark-text-default),
-      color-outline-focus: var(
-          --#{$prefix}color-default-color-dark-focus-default
-        ),
-      color-link-decoration: var(
-          --#{$prefix}color-default-color-dark-underline-default
-        ),
-      color-link-decoration-focus: var(
-          --#{$prefix}color-default-color-dark-underline-default-hover
-        ),
-    )
-  );
-
-  // CTA Wrapper
-  @include register-vars(
-    "#{$prefix}header__cta-wrapper__cta-link",
-    (
-      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
-      -icon_color: var(--#{$prefix}color-default-color-dark-action-secondary),
-      -icon_hover_color: var(
-          --#{$prefix}color-default-color-dark-action-secondary-hover
-        ),
-      _dropdown_bg_color: var(
-          --#{$prefix}color-default-color-dark-background-default
-        ),
-    )
-  );
-
-  @include register-vars(
-    "#{$prefix}header__CTA",
-    (
-      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
-      _border_color: var(--#{$prefix}color-default-color-dark-border-default),
-    )
-  );
-
-  // Toggle main navigation
-  @include register-vars(
-    "#{$prefix}header__toggle-main-nav",
-    (
-      _text_color: var(--#{$prefix}color-default-color-dark-link-default),
-      _border_color: var(--#{$prefix}color-default-color-dark-border-default),
-      __hover_bg: var(
-          --#{$prefix}color-default-color-dark-background-default-shade
-        ),
-      __hover_svg_color: var(
-          --#{$prefix}color-default-color-dark-action-secondary-hover
-        ),
-      __focus_outline_color: var(
-          --#{$prefix}color-default-color-dark-focus-default
-        ),
-      __svg_color: var(--#{$prefix}color-default-color-dark-action-secondary),
-    )
-  );
-
-  // COA and title
-  @include register-vars(
-    "#{$prefix}header__brand-image",
-    (
-      __crest_fill: var(--#{$prefix}color-default-color-light-crest-fill),
-      __subtype__border_color: var(
-          --#{$prefix}color-default-color-light-accent-design-accent
-        ),
-      __subtype__text_color: var(
-          --#{$prefix}color-default-color-light-site-title
-        ),
-    )
-  );
-  @include register-vars(
-    "#{$prefix}header__brand__anchor",
-    (
-      __hover_text_color: var(
-          --#{$prefix}color-default-color-light-link-default
-        ),
-      __hover_brand-image__text_color: var(
-          --#{$prefix}color-default-color-light-link-default
-        ),
-      __hover_headingsubline__text_color: var(
-          --#{$prefix}color-default-color-light-link-default
-        ),
-      __hover_brand-image__filter: (
-        drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
-        drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)),
-      ),
-    )
-  );
-
-  // Sitename heading
-  @include register-vars(
-    "#{$prefix}header__site-name",
-    (
-      __heading__text_color: var(
-          --#{$prefix}color-default-color-light-site-title
-        ),
-      __subline__text_color: var(
-          --#{$prefix}color-default-color-light-text-lighter
-        ),
-    )
-  );
-
-  // ------------------------------------------------------------------------------------------------------------------
-  //  3. Dark/dark-alt modes
-  // ------------------------------------------------------------------------------------------------------------------
-  .dark &,
-  .dark-alt & {
-    // Root (dark/dark-alt)
-    @include register-vars(
-      "#{$prefix}header",
-      (
-        _color: var(--#{$prefix}color-default-color-dark-text-default),
-      )
-    );
-
-    // Pre-header bar (dark)
-    @include register-vars(
-      "#{$prefix}header__pre-header",
-      (
-        _text_color: var(--#{$prefix}color-default-color-dark-text-default),
-        _boxshadow: (
-          0 1px 2px rgba(0, 0, 0, 0.2),
-          0 1px 3px 1px rgba(0, 0, 0, 0.1),
-        ),
-        __url_text_color: var(--#{$prefix}color-default-color-dark-link-default),
-        __anchor_text_color: var(
-            --#{$prefix}color-default-color-dark-text-default
-          ),
-        __anchor__focus_text_color: var(
-            --#{$prefix}color-default-color-dark-underline-default-hover
-          ),
-        __anchor_text_decoration_color: var(
-            --#{$prefix}color-default-color-dark-underline-default
-          ),
-        __anchor_text_decoration_thickness: var(
-            --#{$prefix}header-underline__thickness-thin
-          ),
-        __anchor_text_decoration_offset: var(
-            --#{$prefix}header-underline__offset
-          ),
-        __anchor__focus_text_decoration_color: var(
-            --#{$prefix}color-default-color-dark-underline-default-hover
-          ),
-        __anchor__focus_text_decoration_thickness: var(
-            --#{$prefix}header-underline__thickness-thick
-          ),
-      )
-    );
-
-    // Pre-header CTA elements (dark/dark-alt)
-    @include register-vars(
-      "#{$prefix}header__cta-wrapper__cta-link",
+%header-main-variables {
+  &,
+  &.default {
+    @include m.register-vars(
+      $prefix,
       (
-        _text_color: var(--#{$prefix}color-default-color-dark-link-default),
-        -icon_color: var(--#{$prefix}color-default-color-dark-action-secondary),
-        -icon_hover_color: var(
-            --#{$prefix}color-default-color-dark-action-secondary-hover
-          ),
+        header-border-color: #{$color-default-color-light-accent-design-accent},
+        header-brand-divider-color:
+          #{$color-default-color-light-accent-design-accent},
+        header-logo-color: #{$core-default-color-neutral-black},
+        header-logo-color-hover: #{$core-default-color-neutral-black},
+        header-subline-color: #{$color-default-color-light-text-default},
+        site-title-color: #{$color-default-color-light-site-title},
       )
     );
+  }
 
-    // Toggle navigation (dark/dark-alt)
-    @include register-vars(
-      "#{$prefix}header__toggle-main-nav",
+  &.dark,
+  &.dark-alt {
+    @include m.register-vars(
+      $prefix,
       (
-        _text_color: var(--#{$prefix}color-default-color-dark-link-default),
-        _border_color: var(--#{$prefix}color-default-color-dark-border-default),
-        __hover_bg: var(
-            --#{$prefix}color-default-color-dark-background-default-shade
-          ),
-        __hover_svg_color: var(
-            --#{$prefix}color-default-color-dark-action-secondary-hover
-          ),
-        __focus_outline_color: var(
-            --#{$prefix}color-default-color-dark-focus-default
-          ),
-        __svg_color: var(--#{$prefix}color-default-color-dark-action-secondary),
+        header-border-color: #{$color-default-color-dark-accent-design-accent},
+        header-brand-divider-color:
+          #{$color-default-color-dark-accent-design-accent},
+        header-logo-color: #{$color-default-color-dark-site-title},
+        header-logo-color-hover: #{$color-default-color-dark-site-title},
+        header-subline-color: #{$color-default-color-dark-text-default},
+        site-title-color: #{$color-default-color-dark-site-title},
       )
     );
+  }
+}
 
-    @include register-vars(
-      "#{$prefix}header__brand__anchor",
-      (
-        __hover_text_color: var(
-            --#{$prefix}color-default-color-dark-link-default
-          ),
-        __hover_brand-image__text_color: var(
-            --#{$prefix}color-default-color-dark-link-default
-          ),
-        __hover_headingsubline__text_color: var(
-            --#{$prefix}color-default-color-dark-link-default
-          ),
-        __hover_brand-image__filter: (
-          drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)),
-          drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08)),
-        ),
-      )
-    );
-    @include register-vars(
-      "#{$prefix}header__brand-image",
-      (
-        __subtype__border_color: var(
-            --#{$prefix}color-default-color-dark-accent-design-accent
-          ),
-        __subtype__text_color: var(
-            --#{$prefix}color-default-color-dark-site-title
-          ),
-        __crest_fill: var(--#{$prefix}color-default-color-dark-crest-fill),
-      )
-    );
+%preheader-variables {
+  // variables already controlled via globaltheme
+  --qld-link-visited-color: var(--qld-link-color);
 
-    @include register-vars(
-      "#{$prefix}header__site-name",
+  &,
+  &.default {
+    @include m.register-vars(
+      $prefix,
       (
-        __heading__text_color: var(
-            --#{$prefix}color-default-color-dark-site-title
-          ),
-        __subline__text_color: var(
-            --#{$prefix}color-default-color-dark-text-lighter
-          ),
+        header-logo-color: #{$core-default-color-neutral-black},
+        header-logo-color-hover: #{$color-default-color-light-link-default},
+        header-mobile-button-bg: #{$qld-color-background},
+        header-mobile-button-bg-hover: #{$qld-color-background--shade},
       )
     );
+    --dropdown-bg: #{$qld-color-background};
+    --dropdown-bg-active: #{$qld-color-background--shade};
+    --dropdown-menu-bg: #{$qld-color-background--shade};
   }
 
-  .dark-alt & {
-    @include register-vars(
-      "#{$prefix}header-",
+  &.dark {
+    @include m.register-vars(
+      $prefix,
       (
-        color-bg: var(--#{$prefix}color-default-color-dark-background-alt),
-        pre-header-color-bg: var(
-            --#{$prefix}color-default-color-dark-background-default
-          ),
+        header-logo-color: #{$color-default-color-dark-site-title},
+        header-logo-color-hover: #{$color-default-color-dark-link-default},
+        header-mobile-button-bg: #{$qld-color-dark-background},
+        header-mobile-button-bg-hover: #{$qld-color-dark-background--shade},
       )
     );
+    --dropdown-bg: #{$qld-color-dark-background};
+    --dropdown-bg-active: #{$qld-color-dark-background--shade};
+    --dropdown-menu-bg: #{$qld-color-dark-background--shade};
   }
 
-  .dark & {
-    @include register-vars(
-      "#{$prefix}header-",
+  &.dark-alt {
+    @include m.register-vars(
+      $prefix,
       (
-        color-bg: var(--#{$prefix}color-default-color-dark-background-default),
-        pre-header-color-bg: var(
-            --#{$prefix}color-default-color-dark-background-alt
-          ),
-        __cta-wrapper__cta-link-dropdown_bg_color: var(
-            --#{$prefix}color-default-color-dark-background-alt
-          ),
+        header-logo-color: #{$color-default-color-dark-site-title},
+        header-logo-color-hover: #{$color-default-color-dark-link-default},
+        header-mobile-button-bg: #{$qld-color-dark-alt-background},
+        header-mobile-button-bg-hover: #{$qld-color-dark-alt-background--shade},
       )
     );
+    --dropdown-bg: #{$qld-color-dark-alt-background};
+    --dropdown-bg-active: #{$qld-color-dark-alt-background--shade};
+    --dropdown-menu-bg: #{$qld-color-dark-alt-background--shade};
   }
 }

package/src/components/bs5/header/header.functions.js

@@ -18,11 +18,6 @@ export function toggleSearch(event) {
   // Get the search div
   const searchDiv = document.getElementById("qld-header-search");
   const toggleButton = event.currentTarget;
-  const searchIcon = toggleButton.querySelector("use.icon-search");
-  const closeIcon = toggleButton.querySelector("use.icon-close");
-  const toggleText = toggleButton.querySelector(
-    ".qld-header-toggle-main-nav-text",
-  );
 
   // Check current class and swap
   if (searchDiv) {
@@ -31,21 +26,21 @@ export function toggleSearch(event) {
       searchDiv.classList.add("is-closed");
 
       // Change icon and text back to default
-      searchIcon.style.display = "block";
-      closeIcon.style.display = "none";
-      toggleText.textContent = "Search";
+      toggleButton.classList.remove("is-open");
+      toggleButton.classList.add("is-closed");
+      toggleButton.setAttribute("aria-expanded", false);
+      toggleButton.setAttribute("aria-label", "Open search");
+      toggleButton.textContent = "Search";
     } else {
       searchDiv.classList.remove("is-closed");
       searchDiv.classList.add("is-open");
 
       // Change icon and text to active state
-      searchIcon.style.display = "none";
-      closeIcon.style.display = "block";
-      toggleText.textContent = "Close";
+      toggleButton.classList.remove("is-closed");
+      toggleButton.classList.add("is-open");
+      toggleButton.setAttribute("aria-expanded", true);
+      toggleButton.setAttribute("aria-label", "Close search");
+      toggleButton.textContent = "Close";
     }
-
-    // Optional: Update the aria-expanded attribute for accessibility
-    const isExpanded = searchDiv.classList.contains("is-open");
-    event.currentTarget.setAttribute("aria-expanded", isExpanded);
   }
 }

package/src/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