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

package/src/components/bs5/searchInput/search.functions.js

@@ -1,4 +1,4 @@
-import { createPopper } from '@popperjs/core';
+import { createPopper } from "@popperjs/core";
 
 /**
  * Fetches data from the provided URL.
@@ -11,7 +11,7 @@ async function fetchData(url, type) {
   try {
     const response = await fetch(url);
     if (!response.ok) {
-      throw new Error('Network response was not ok');
+      throw new Error("Network response was not ok");
     }
     const data = await response.json();
     return data;
@@ -29,21 +29,22 @@ async function fetchData(url, type) {
  * @returns {void}
  */
 export function selectSuggestion(value, form) {
-  const searchInput = form.querySelector('.qld-search-input input');
-  const suggestions = form.querySelector('.suggestions');
+  const searchInput = form.querySelector(".qld-search-input input");
+  const suggestions = form.querySelector(".suggestions");
 
   if (searchInput && suggestions) {
     searchInput.value = value.trim();
-    suggestions.classList.add('d-none');
+    suggestions.classList.add("d-none");
 
     // Retrieve additional params
-    const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
-    const profile = searchInput.getAttribute('data-profile') || 'qld';
-    const numRanks = searchInput.getAttribute('data-numranks') || '10';
-    const tiers = searchInput.getAttribute('data-tiers') || 'off';
+    const collection =
+      searchInput.getAttribute("data-collection") || "qgov~sp-search";
+    const profile = searchInput.getAttribute("data-profile") || "qld";
+    const numRanks = searchInput.getAttribute("data-numranks") || "10";
+    const tiers = searchInput.getAttribute("data-tiers") || "off";
 
     // Form action
-    const actionUrl = form.getAttribute('action');
+    const actionUrl = form.getAttribute("action");
 
     // Construct the URL with proper parameters
     const params = new URLSearchParams({
@@ -69,11 +70,15 @@ export function selectSuggestion(value, form) {
  * @param {HTMLFormElement} form - The form element.
  * @returns {void}
  **/
-export async function showSuggestions(value = '', isDefault = false, form) {
-  const searchInput = form.querySelector('.qld-search-input input');
-  const suggestions = form.querySelector('.suggestions');
-  const defaultSuggestionsContainer = form.querySelector('.default-suggestions');
-  const dynamicSuggestionsContainer = form.querySelector('.dynamic-suggestions');
+export async function showSuggestions(value = "", isDefault = false, form) {
+  const searchInput = form.querySelector(".qld-search-input input");
+  const suggestions = form.querySelector(".suggestions");
+  const defaultSuggestionsContainer = form.querySelector(
+    ".default-suggestions",
+  );
+  const dynamicSuggestionsContainer = form.querySelector(
+    ".dynamic-suggestions",
+  );
 
   if (!suggestions || !searchInput) {
     console.warn("Required suggestions elements not found.");
@@ -82,84 +87,109 @@ export async function showSuggestions(value = '', isDefault = false, form) {
 
   // Hide/show default suggestions
   if (isDefault) {
-    defaultSuggestionsContainer.classList.remove('d-none');
-    dynamicSuggestionsContainer.innerHTML = '';
-    dynamicSuggestionsContainer.classList.add('d-none');
+    defaultSuggestionsContainer.classList.remove("d-none");
+    dynamicSuggestionsContainer.innerHTML = "";
+    dynamicSuggestionsContainer.classList.add("d-none");
     createPopper(searchInput, suggestions, {
-      placement: 'bottom-start',
+      placement: "bottom-start",
     });
-    suggestions.classList.remove('d-none');
+    suggestions.classList.remove("d-none");
     return;
   }
 
   if (value.length === 0) {
-    dynamicSuggestionsContainer.innerHTML = '';
-    dynamicSuggestionsContainer.classList.add('d-none');
+    dynamicSuggestionsContainer.innerHTML = "";
+    dynamicSuggestionsContainer.classList.add("d-none");
     return;
   }
 
-  defaultSuggestionsContainer.classList.add('d-none');
+  defaultSuggestionsContainer.classList.add("d-none");
 
   // Fetch dynamic suggestions if available
-  const suggestUrl = searchInput.getAttribute('data-suggestions');
+  const suggestUrl = searchInput.getAttribute("data-suggestions");
   if (suggestUrl) {
-    const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
-    const profile = searchInput.getAttribute('data-profile') || 'qld';
-    const fetchedSuggestions = await fetchData(`${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`, 'suggestions');
+    const collection =
+      searchInput.getAttribute("data-collection") || "qgov~sp-search";
+    const profile = searchInput.getAttribute("data-profile") || "qld";
+    const fetchedSuggestions = await fetchData(
+      `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
+      "suggestions",
+    );
 
     if (fetchedSuggestions.length > 0) {
       dynamicSuggestionsContainer.innerHTML = `
-        <div class="suggestions-category mt-2">
-          <strong class="suggestions-category-label">Suggestions</strong>
-          <ul class="mt-2">${fetchedSuggestions.slice(0, 4).map(item => {
-    const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '<strong>$1</strong>');
-    return `<li><a href="#">${highlightedText}</a></li>`;
-  }).join('')}</ul>
+        <div class="suggestions-category mt-16">
+          <strong class="suggestions-category-label d-block">Suggestions</strong>
+          <ul class="mt-2">${fetchedSuggestions
+            .slice(0, 4)
+            .map((item) => {
+              const highlightedText = item.replace(
+                new RegExp(`(${value})`, "gi"),
+                "<strong>$1</strong>",
+              );
+              return `<li><a href="#">${highlightedText}</a></li>`;
+            })
+            .join("")}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove('d-none');
+      dynamicSuggestionsContainer.classList.remove("d-none");
       createPopper(searchInput, suggestions, {
-        placement: 'bottom-start',
+        placement: "bottom-start",
       });
-      suggestions.classList.remove('d-none');
+      suggestions.classList.remove("d-none");
 
       // Attach click event listeners to each suggestion item
-      form.querySelectorAll('.suggestions li').forEach((item) => {
-        item.addEventListener('click', () => selectSuggestion(item.innerText, form));
+      form.querySelectorAll(".suggestions li").forEach((item) => {
+        item.addEventListener("click", () =>
+          selectSuggestion(item.innerText, form),
+        );
       });
     } else {
-      dynamicSuggestionsContainer.innerHTML = '';
-      dynamicSuggestionsContainer.classList.add('d-none');
-      suggestions.classList.add('d-none');
+      dynamicSuggestionsContainer.innerHTML = "";
+      dynamicSuggestionsContainer.classList.add("d-none");
+      suggestions.classList.add("d-none");
     }
   }
 
-  const resultsUrl = searchInput.getAttribute('data-results-url');
+  const resultsUrl = searchInput.getAttribute("data-results-url");
   if (resultsUrl) {
-    const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
-    const profile = searchInput.getAttribute('data-profile') || 'qld';
-    const fetchedServices = await fetchData(`${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`, 'services');
-
-    if (fetchedServices.response.resultPacket && fetchedServices.response.resultPacket.results.length > 0) {
+    const collection =
+      searchInput.getAttribute("data-collection") || "qgov~sp-search";
+    const profile = searchInput.getAttribute("data-profile") || "qld";
+    const fetchedServices = await fetchData(
+      `${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`,
+      "services",
+    );
+
+    if (
+      fetchedServices.response.resultPacket &&
+      fetchedServices.response.resultPacket.results.length > 0
+    ) {
       dynamicSuggestionsContainer.innerHTML += `
-        <div class="suggestions-category feature pt-2">
-          <strong class="suggestions-category-label">Services</strong>
-          <ul class="mt-2">${fetchedServices.response.resultPacket.results.slice(0, 4).map(item => `<li><a href="${item.liveUrl}">${item.title}</a></li>`).join('')}</ul>
+        <div class="suggestions-category feature pt-16">
+          <strong class="suggestions-category-label d-block">Services</strong>
+          <ul class="mt-2">${fetchedServices.response.resultPacket.results
+            .slice(0, 4)
+            .map(
+              (item) => `<li><a href="${item.liveUrl}">${item.title}</a></li>`,
+            )
+            .join("")}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove('d-none');
+      dynamicSuggestionsContainer.classList.remove("d-none");
       createPopper(searchInput, suggestions, {
-        placement: 'bottom-start',
+        placement: "bottom-start",
       });
-      suggestions.classList.remove('d-none');
+      suggestions.classList.remove("d-none");
 
       // Attach click event listeners to each suggestion item
-      form.querySelectorAll('.suggestions li').forEach((item) => {
-        item.addEventListener('click', () => selectSuggestion(item.innerText, form));
+      form.querySelectorAll(".suggestions li").forEach((item) => {
+        item.addEventListener("click", () =>
+          selectSuggestion(item.innerText, form),
+        );
       });
     }
   }
 }
 
-
 /**
  * Submits the search form with proper parameters.
  *
@@ -167,13 +197,14 @@ export async function showSuggestions(value = '', isDefault = false, form) {
  * @param {HTMLFormElement} form - The form element.
  * @returns {void}
  */
-export function submitSearchForm(query = '', form) {
-  const searchInput = form.querySelector('.qld-search-input input');
+export function submitSearchForm(query = "", form) {
+  const searchInput = form.querySelector(".qld-search-input input");
 
-  const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
-  const profile = searchInput.getAttribute('data-profile') || 'qld';
-  const numRanks = searchInput.getAttribute('data-numranks') || '10';
-  const tiers = searchInput.getAttribute('data-tiers') || 'off';
+  const collection =
+    searchInput.getAttribute("data-collection") || "qgov~sp-search";
+  const profile = searchInput.getAttribute("data-profile") || "qld";
+  const numRanks = searchInput.getAttribute("data-numranks") || "10";
+  const tiers = searchInput.getAttribute("data-tiers") || "off";
 
   const params = new URLSearchParams({
     query: query.trim(),
@@ -183,7 +214,7 @@ export function submitSearchForm(query = '', form) {
     tiers: tiers,
   });
 
-  const searchUrl = `${form.getAttribute('action')}?${params.toString()}`;
+  const searchUrl = `${form.getAttribute("action")}?${params.toString()}`;
   window.location.href = searchUrl;
 }
 

package/src/components/bs5/searchInput/searchInput.data.json

@@ -1,7 +1,6 @@
 {
   "customClass": "",
   "variantClass": "",
-  "placeholder": "Search website",
   "inputID": "search",
   "inputName": "query",
   "buttonID": "search-button",
@@ -56,8 +55,8 @@
     ],
     "options": {
       "label": "Browse all categories",
-      "view_more": false,
+      "view_more": true,
       "href": "/queenslanders"
     }
   }
-}
+}

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

@@ -3,14 +3,14 @@
 -->
 <div class="container {{variantClass}}">
     <div class="qld-search-input {{customClass}} d-flex">
-        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}"
+        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text"
             autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
 
         {{#if suggestions}}
         <div class="suggestions suggestions__group d-none">
             <div class="default-suggestions">
-                <div class="suggestions-category mt-2">
-                    <strong class="suggestions-category-label">Popular services</strong>
+                <div class="suggestions-category mt-16">
+                    <strong class="suggestions-category-label d-block">Popular services</strong>
                     <ul class="mt-2">
                         {{#each default_suggestions.popular_services}}
                             <li><a href="{{link}}">{{title}}</a></li>
@@ -18,11 +18,9 @@
                     </ul>
                 </div>
 
-                <hr>
-
-                <div class="suggestions-category mt-2">
-                    <strong class="suggestions-category-label">Browse by category</strong>
-                    <ul class="mt-2">
+                <div class="suggestions-category mt-16">
+                    <strong class="suggestions-category-label d-block">Browse by category</strong>
+                    <ul class="mt-12 mb-0">
                         {{#each default_suggestions.categories}}
                             <li><a href="{{link}}">{{title}}</a></li>
                         {{/each}}
@@ -30,8 +28,8 @@
                 </div>
 
                 {{#if default_suggestions.options.view_more}}
-                    <div class="suggestions-category mt-4 mb-4">
-                        <a href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
+                    <div class="suggestions-category">
+                        <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
                     </div>
                 {{/if}}
             </div>