@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.15

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

@@ -1,6 +1,3 @@
-import { createPopper } from '@popperjs/core';
-import { defaultSuggestions } from './_search.json';
-
 /**
  * Toggles the class on a search div based on button click.
  *
@@ -49,180 +46,4 @@ export function toggleSearch(event) {
     const isExpanded = searchDiv.classList.contains('qld__header__site-search--open');
     event.currentTarget.setAttribute('aria-expanded', isExpanded);
   }
-}
-
-/**
- * Fetches suggestions from the provided URL.
- *
- * @param {string} url - The URL to fetch suggestions from.
- * @returns {Promise<Object>} - A promise that resolves to the fetched suggestions.
- */
-async function fetchSuggestions(url) {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Error fetching suggestions:", error);
-    return {};
-  }
-}
-
-/**
- * Fetches related services from the provided URL.
- *
- * @param {string} url - The URL to fetch related services from.
- * @returns {Promise<Object>} - A promise that resolves to the fetched services.
- */
-async function fetchServices(url) {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Error fetching services:", error);
-    return {};
-  }
-}
-
-/**
- * Sets the selected suggestion into the input field and submits the form.
- *
- * @param {string} value - The selected suggestion.
- * @returns {void}
- */
-export function selectSuggestion(value) {
-  const searchInput = document.getElementById('search-input');
-  const suggestions = document.getElementById('suggestions');
-  const form = document.getElementById('site-search');
-
-  if (searchInput && suggestions && form) {
-    searchInput.value = value;
-    suggestions.style.display = 'none';
-
-    // Construct the action URL with query and other parameters
-    const baseUrl = form.getAttribute('action');
-    const collection = 'qgov~sp-search';
-    const profile = 'qld';
-    const query = encodeURIComponent(value);
-    const actionUrl = `${baseUrl}?query=${query}&collection=${collection}&profile=${profile}`;
-
-    // Update the form's action attribute
-    form.setAttribute('action', actionUrl);
-
-    // Submit the form
-    form.submit();
-  }
-}
-
-/**
- * Shows suggestions based on the user's input.
- *
- * @param {string} value - The current input value.
- * @param {boolean} isDefault - Whether to show default suggestions or not.
- * @returns {void}
- **/
-export async function showSuggestions(value = '', isDefault = false) {
-  const suggestions = document.getElementById('suggestions');
-  const searchInput = document.getElementById('search-input');
-
-  if (!suggestions || !searchInput) {
-    console.error("Required elements not found.");
-    return;
-  }
-
-  // Clear previous suggestions and services
-  suggestions.innerHTML = '';
-
-  const loadedSuggestions = defaultSuggestions;
-
-  if (isDefault) {
-    suggestions.innerHTML = `
-      <div class="suggestions-category mt-2">
-        <strong>Popular services</strong>
-        <ul class="mt-2">${loadedSuggestions.popular_services.slice(0, 4).map(item => `<li onclick="window.selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
-      </div>
-      <hr>
-      <div class="suggestions-category mt-2">
-        <strong>Browse by category</strong>
-        <ul class="mt-2">${loadedSuggestions.categories.slice(0, 4).map(item => `<li onclick="window.selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
-      </div>
-      <!--${loadedSuggestions.options.view_more ? `<div class="suggestions-category mt-4 mb-4"><a href="${loadedSuggestions.options.href}">${loadedSuggestions.options.label}</a></div>-->` : ''}
-    `;
-    suggestions.classList.add('show');
-    createPopper(searchInput, suggestions, {
-      placement: 'bottom-start',
-    });
-    suggestions.style.display = 'block';
-    return;
-  }
-
-  if (value.length === 0) {
-    suggestions.innerHTML = '';
-    suggestions.style.display = 'none';
-    return;
-  }
-
-  // Fetch suggestions from the provided URL
-  const form = document.getElementById('site-search');
-  const suggestUrl = form.getAttribute('data-suggestions');
-  const resultsUrl = form.getAttribute('data-results-url');
-
-  if (suggestUrl) {
-    const fetchedSuggestions = await fetchSuggestions(`${suggestUrl}?collection=qgov~sp-search&fmt=json%2B%2B&alpha=0.5&profile=qld&partial_query=${encodeURIComponent(value)}`);
-
-    // Use the fetched suggestions to populate the suggestions dropdown
-    if (fetchedSuggestions.length > 0) {
-      suggestions.innerHTML = `
-        <div class="suggestions-category mt-2">
-          <strong>Suggestions</strong>
-          <ul class="mt-2">${fetchedSuggestions.slice(0, 4).map(item => {
-            if (!item.disp) return ''; // Check if item.disp is defined
-            const highlightedText = item.disp.replace(new RegExp(`(${value})`, 'gi'), '<strong>$1</strong>');
-            return `<li onclick="window.selectSuggestion('${item.disp}')"><a href="#">${highlightedText}</a></li>`;
-          }).join('')}</ul>
-        </div>
-      `;
-      suggestions.classList.add('show');
-
-      // Initialize Popper.js to manage the dropdown position
-      createPopper(searchInput, suggestions, {
-        placement: 'bottom-start',
-      });
-      suggestions.style.display = 'block';
-    } else {
-      suggestions.innerHTML = '';
-      suggestions.style.display = 'none';
-    }
-  }
-
-  if (resultsUrl) {
-    const fetchedServices = await fetchServices(`${resultsUrl}?collection=qgov~sp-search&profile=qld&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`);
-
-    // Use the fetched services to populate the services dropdown
-    if (fetchedServices.response.resultPacket && fetchedServices.response.resultPacket.results.length > 0) {
-      suggestions.innerHTML += `
-        <div class="suggestions-category feature pt-2">
-          <strong>Services</strong>
-          <ul class="mt-2">${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `<li class="pb-2" onclick="window.selectSuggestion('${item.title}')"><a href="${item.liveUrl}">${item.title}</a></li>`).join('')}</ul>
-        </div>
-      `;
-      suggestions.classList.add('show');
-
-      // Initialize Popper.js to manage the dropdown position
-      createPopper(searchInput, suggestions, {
-        placement: 'bottom-start',
-      });
-      suggestions.style.display = 'block';
-    }
-  }
-}
-
-// Attach the function to the window object to make it globally accessible
-window.selectSuggestion = selectSuggestion;
+}

package/src/components/bs5/header/header.hbs

@@ -189,12 +189,12 @@
                                         href="{{url.value}}" 
                                         class="qld__header__cta-link" 
                                     {{/if}}>
-                                    {{#if icon.value}}
-                                        <span class="qld__header__cta-link-icon">
-                                            <i class="{{icon-root}}#{{icon.value}}"></i>
-                                        </span>
-                                    {{/if}}
                                     <span class="qld__header__cta-link-text">{{text.value}}</span>
+                                    {{#if dropdown_enabled}}
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__header__cta-link-icon">
+                                            <use href="{{@root.icon-root}}#{{@root.icons.chevron_down}}"></use>
+                                        </svg>
+                                    {{/if}}
                                 </a>
 
                                 {{#if dropdown_enabled}}
@@ -242,15 +242,15 @@
                 {{#if siteSearchAsset.value}}
                 <button aria-controls="qld-header-search" class="qld__header__toggle-main-nav qld__main-nav__toggle-search" aria-expanded="false">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
-                        <use class="icon-search" href="{{icon-root}}#{{icons.search-icon}}" style="display: block;"></use>
-                        <use class="icon-close" href="{{icon-root}}#{{icons.close-icon}}" style="display: none;"></use>
+                        <use class="icon-search" href="{{@root.icon-root}}#{{@root.icons.search-icon}}" style="display: block;"></use>
+                        <use class="icon-close" href="{{@root.icon-root}}#{{@root.icons.close-icon}}" style="display: none;"></use>
                     </svg>
                     <span class="qld__main-nav__toggle-text">Search</span>
                 </button>
                 {{/if}}
                 <button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
-                            <use href="{{icon-root}}#{{icons.menu-icon}}"></use>
+                            <use href="{{@root.icon-root}}#{{@root.icons.menu-icon}}"></use>
                         </svg>
                     <span class="qld__main-nav__toggle-text">Menu</span>
                 </button>
@@ -880,15 +880,13 @@
             {{/if}}
             {{#if siteSearchAsset.value}}
             <div id="qld-header-search" class="qld__header__site-search qld__header__site-search--closed">
-                  <form id="site-search" role="search" 
-          {{#if siteSearchAsset.formAction.url}}action="{{siteSearchAsset.formAction.url}}"{{/if}}
-          {{#if siteSearchAsset.formAction.suggestions}}data-suggestions="{{siteSearchAsset.formAction.suggestions}}"{{/if}} 
-          {{#if siteSearchAsset.formAction.results}}data-results-url="{{siteSearchAsset.formAction.results}}"{{/if}} novalidate="true">
-                <input type="text" class="form-control{{#if siteSearchAsset.options.borderStyle.full}} border-full{{/if}}"
-                        placeholder="{{#if siteSearchAsset.placeholder}}{{siteSearchAsset.placeholder}}{{else}}Search this site{{/if}}"
-                        id="search-input">
-                <ul id="suggestions" class="suggestions-dropdown suggestions-dropdown__group"></ul>
-                <input type="submit" class="btn btn-primary" value="{{#if siteSearchAsset.label}}{{siteSearchAsset.label}}{{else}}Search{{/if}}">
+                <form class="site-search" role="search" 
+                    {{#if siteSearchAsset.formAction.url}}
+                        action="{{siteSearchAsset.formAction.url}}"
+                    {{else}}
+                        action="https://www.qld.gov.au/search"
+                    {{/if}}>
+                        {{{ searchInput }}}
                 </form>
             </div>
             {{/if}}

package/src/components/bs5/header/header.scss

@@ -46,7 +46,7 @@
 				color: var(--#{$prefix}header_skip-link_focus_text_color);
 				background-color: var(--#{$prefix}header_skip-link_focus_bg_color);
 				outline: 3px solid var(--#{$prefix}header_skip-link_focus_outline_color);
-				z-index: 600;
+				z-index: 999;
 			}
 		}
 	}
@@ -207,20 +207,15 @@
 				font-size: .875rem;
 				line-height: 1.42;
 				padding-left: .75rem;
+				margin: 0 .5rem;
 				align-items: center;
 				color: var(--#{$prefix}header__cta-wrapper__cta-link_text_color);
-
-				&:hover {
-					.qld__header__cta-link-icon {
-						color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_hover_color);
-					}
-				}
 			}
 
 			.qld__header__cta-link-icon {
-				height: 1.25rem;
-				width: 1.25rem;
-				margin-right: .5rem;
+				height: 1rem;
+				width: 1rem;
+				margin-left: .5rem;
 				text-align: center;
 				display: inline-block;
 				color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
@@ -475,153 +470,9 @@
 		form {
 			display: flex;
 			position: relative;
-
-			::placeholder {
-				color: var(--site-search-input-color);
-			}
-
-			//Search dropdown
-			.suggestions-dropdown {
-				position: absolute;
-				display: none;
-				left: 0;	
-				top: 100%;  
-				width: 100%;			
-				z-index: 99; 
-				border-radius: .5rem;
-				background: var(--#{$prefix}header_site-search-suggestions-bg);
-				box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
-				border-bottom: solid .25rem var(--#{$prefix}header_site-search-suggestions-hover__border_color);
-
-				.suggestions-category {
-					padding: 0 1rem;
-				}
-
-				hr {
-					margin: 0;
-				}
-
-				// Featured search result styles
-				.feature {
-					background-color: var(--#{$prefix}header_site-search-suggestions-feature_bg);
-					strong {
-						color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
-					}
-					ul {
-						li {
-							&:hover {
-								background-color: var(--#{$prefix}header_site-search-suggestions-feature_hover);
-							}
-							a {
-								color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
-							}
-						}
-					}				
-				}
-
-				// Show when active
-				&.show {
-					display: block; 
-				}
-
-				&__group {
-					padding: 0;
-
-					a, strong {
-						color: var(--site-search-input-color);
-						font-weight: 400;
-						font-size: 1rem;
-						text-decoration: none; 
-					}
-
-					strong {
-						font-weight: 600;
-					}
-
-					ul {
-						padding: 0;
-
-						li {
-							min-height: 3rem;
-							list-style: none;
-							cursor: pointer;
-
-							a {
-								vertical-align: middle;
-								vertical-align: -webkit-baseline-middle;
-								&:hover {
-									text-decoration: underline; 
-								}
-							}
-
-							&:hover {
-								background-color: var(--#{$prefix}header_site-search-suggestions-hover);
-								margin: 0 -1rem;
-								padding: 0 1rem;
-
-								a {
-									text-decoration: underline;
-								}
-
-							}
-						}
-					}
-				}
-			}
-
-			input[type="text"] {
-				box-shadow: none;
-				border: none;
-				padding-left: 3rem;
-				width: 20.62rem;
-				color: var(--site-search-input-color);
-				background: var(--site-search-bg);
-				border-radius: 0.25rem 0 0 0;
-				border-bottom: 2px solid var(--site-search-border-color);
-
-				@include media-breakpoint-down(lg) {
-					border: 2px solid var(--site-search-border-color);
-					width: 100%;
-				}
-
-				&:focus {
-					outline: 2px solid var(--site-search-input-focus-color);
-					outline-offset: 2px;
-				}
-
-				&.border-full {
-					border: 2px solid var(--site-search-border-color);
-					border-right: 0;
-					border-radius: 0.25rem 0 0 0.25rem;
-				}
-
-			}
-
-			input[type="submit"] {
-				border: none;
-				box-shadow: none;
-				border-radius: 0 0.25rem 0.25rem 0;
-				background: var(--site-search-btn-bg);
-				color: var(--site-search-btn-color);
-			}
-
-			//Icon
-			&:before {
-				content: "";
-				position: absolute;
-				top: 0;
-				left: 0;
-				bottom: 2px;
-				width: 3rem;
-				mask-position: center center;
-				mask-repeat: no-repeat;
-				mask-image: var(--icon-search);
-				background-color: var(--site-search-icon-color);
-			}
 		}
-
+		
 		@include media-breakpoint-down(lg) {
-
 			// Mobile search open class
 			&--open {
 				z-index: 1;
@@ -633,10 +484,10 @@
 				margin-top: 1rem;
 				background-color: var(--#{$prefix}header_bg);
 			}
-
 			&--closed {
 				display: none;
 			}
 		}
 	}
+
 }

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

@@ -1,19 +1,23 @@
 // Navbar.stories.js
 import { Header } from './Header.js';
 import { Navbar } from '../navbar/Navbar.js';
+import { SearchInput } from "../searchInput/SearchInput.js";
+
 import { menu_state } from '../navbar/navbar.data.json';
+import defaultdata from '../searchInput/searchInput.data.json';
+
 import { 
   masterbrand_variant, 
   subbrand_variant, 
   endorsed_variant, 
   standalone_variant } from './header.data.json';
-  
+
 export default {
   tags: ['autodocs'],
   title: 'Components/Header',
   render: (args) => {
     return `
-        ${new Header(args).html}
+        ${new Header({...args, searchInput: new SearchInput(defaultdata).html}).html}
         ${new Navbar(args).html}
         `//expand arguments, specifically turn isdisabled into true
   },
@@ -28,7 +32,7 @@ export default {
 export const MasterBrand = {
   args: {
     ...masterbrand_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -51,7 +55,7 @@ export const MasterBrand = {
 export const Subbrand = {
   args: {
     ...subbrand_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -74,7 +78,7 @@ export const Subbrand = {
 export const EndorsedBrand = {
   args: {
     ...endorsed_variant,
-    ...menu_state,
+    ...menu_state
   },
   parameters: {
     backgrounds: {
@@ -112,51 +116,7 @@ export const StandaloneBrand = {
       return `
         <style>
           :root {
-            --qld-color-light__site-title: #000000;
-            --qld-color-light__design-accent: #FF0084;
-            --qld-color-light__heading: #1C0A20;
-            --qld-color-light__text: #414141;
-            --qld-color-light__text--lighter: #333333;
-            --qld-color-light__link: #710074;
-            --qld-color-light__link--visited: #810036;
-            --qld-color-light__link--on-action: #FFFFFF;
-            --qld-color-light__action--primary: #420725;
-            --qld-color-light__action--primary-hover: #000000;
-            --qld-color-light__focus: #9C008D;
-            --qld-color-light__border: #A5A5A5;
-            --qld-color-light__background: #FFFFFF;
-            --qld-color-light__background--shade: #F6F6F6;
-            --qld-color-light__underline: #97009b;
-            --qld-color-light__underline--hover: #710074;
-            --qld-color-light__underline--visited: #94003e;
-            --qld-color-light__underline--hover-visited: #810036;
-            --qld-color-light__action--secondary: #59449A;
-            --qld-color-light__action--secondary-hover: #810036;
-            --qld-color-light__border--alt: #595959;
-            --qld-color-light__background--alt: #FFEAF5;
-            --qld-color-light__background--alt-shade: #F8E1ED;
-            --qld-color-dark__design-accent: #FF0084;
-            --qld-color-dark__heading: #FFFFFF;
-            --qld-color-dark__text: #FFFFFF;
-            --qld-color-dark__text--lighter: #FECBE5;
-            --qld-color-dark__link: #faddec;
-            --qld-color-dark__link--visited: #faddec;
-            --qld-color-dark__link--on-action: #000000;
-            --qld-color-dark__action--primary: #FC5CAF;
-            --qld-color-dark__action--primary-hover: #FFC85E;
-            --qld-color-dark__focus: #FFCAE5;
-            --qld-color-dark__border: #FFA3D2;
-            --qld-color-dark__background: #000000;
-            --qld-color-dark__background--shade: #141414;
-            --qld-color-dark__underline: #5d2158;
-            --qld-color-dark__underline--hover: #faddec;
-            --qld-color-dark__underline--visited: #5d2158;
-            --qld-color-dark__underline--hover-visited: #faddec;
-            --qld-color-dark__action--secondary: #FFFFFF;
-            --qld-color-dark__action--secondary-hover: #FFEF60;
-            --qld-color-dark__border--alt: #ffd1e8;
-            --qld-color-dark__background--alt: #34001B;
-            --qld-color-dark__background--alt-shade: #210011;
+            //Override example
           }
         </style>
         ${Story()}