@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.0

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

@@ -1,5 +1,3 @@
-import { createPopper } from "@popperjs/core";
-
 /**
  * Fetches data from the provided URL.
  *
@@ -28,31 +26,26 @@ async function fetchData(url, type) {
  * @param {HTMLFormElement} form - The form element.
  * @returns {void}
  */
-export function selectSuggestion(value, form) {
+export function selectDynamicSuggestion(value, form) {
   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");
-
-    // 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";
 
     // Form action
     const actionUrl = form.getAttribute("action");
 
+    //data-* attributes on search input field
+    const atts = searchInput ? searchInput.dataset : null;
+
     // Construct the URL with proper parameters
     const params = new URLSearchParams({
       query: value.trim(),
-      collection: collection,
-      profile: profile,
-      num_ranks: numRanks,
-      tiers: tiers,
+      collection: atts.collection || "qgov~sp-search",
+      profile: atts.profile || "qld",
+      num_ranks: atts.numRanks || "10",
+      tiers: atts.tiers || "off",
     });
 
     const searchUrl = `${actionUrl}?${params.toString()}`;
@@ -81,111 +74,134 @@ export async function showSuggestions(value = "", isDefault = false, form) {
   );
 
   if (!suggestions || !searchInput) {
-    console.warn("Required suggestions elements not found.");
     return;
   }
 
-  // Hide/show default suggestions
+  // Hide/show default suggestions, and return early
   if (isDefault) {
-    defaultSuggestionsContainer.classList.remove("d-none");
-    dynamicSuggestionsContainer.innerHTML = "";
-    dynamicSuggestionsContainer.classList.add("d-none");
-    createPopper(searchInput, suggestions, {
-      placement: "bottom-start",
-    });
-    suggestions.classList.remove("d-none");
+    if (defaultSuggestionsContainer) {
+      defaultSuggestionsContainer.classList.remove("d-none");
+    }
+    if (dynamicSuggestionsContainer) {
+      dynamicSuggestionsContainer.innerHTML = "";
+      dynamicSuggestionsContainer.classList.add("d-none");
+    }
     return;
   }
 
-  if (value.length === 0) {
-    dynamicSuggestionsContainer.innerHTML = "";
-    dynamicSuggestionsContainer.classList.add("d-none");
-    return;
+  // If input is empty, hide dynamic suggestions and return early
+  if (dynamicSuggestionsContainer) {
+    if (value.length === 0) {
+      dynamicSuggestionsContainer.innerHTML = "";
+      dynamicSuggestionsContainer.classList.add("d-none");
+      return;
+    }
   }
 
-  defaultSuggestionsContainer.classList.add("d-none");
+  // Script continues...dynamic suggestions is true and value.length > 0
+  defaultSuggestionsContainer?.classList.add("d-none");
+
+  //data-* attributes on search input field
+  const atts = searchInput ? searchInput.dataset : null;
 
   // Fetch dynamic suggestions if available
-  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",
-    );
-
-    if (fetchedSuggestions.length > 0) {
-      dynamicSuggestionsContainer.innerHTML = `
-        <div class="suggestions-category mt-16">
-          <strong class="suggestions-category-label d-block">Suggestions</strong>
-          <ul class="mt-2">${fetchedSuggestions
+  if (dynamicSuggestionsContainer) {
+    const suggestUrl = atts.suggestions;
+
+    if (suggestUrl) {
+      const collection = atts.collection || "qgov~sp-search";
+      const profile = atts.profile || "qld";
+
+      //Fetch data from suggestions API
+      const fetchedSuggestions = await fetchData(
+        `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
+        "suggestions",
+      );
+
+      //Rended a suggestions list
+      if (fetchedSuggestions.length > 0) {
+        dynamicSuggestionsContainer.innerHTML = `
+        <div class="suggestions-category">
+          <ul>${fetchedSuggestions
             .slice(0, 4)
             .map((item) => {
               const highlightedText = item.replace(
                 new RegExp(`(${value})`, "gi"),
                 "<strong>$1</strong>",
               );
-              return `<li><a href="#">${highlightedText}</a></li>`;
+              return `<li><a tabindex="0" href="#">${highlightedText}</a></li>`;
             })
             .join("")}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove("d-none");
-      createPopper(searchInput, suggestions, {
-        placement: "bottom-start",
-      });
-      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),
-        );
-      });
-    } else {
-      dynamicSuggestionsContainer.innerHTML = "";
-      dynamicSuggestionsContainer.classList.add("d-none");
-      suggestions.classList.add("d-none");
+
+        dynamicSuggestionsContainer.classList.remove("d-none");
+
+        // Bind an event listener to suggestions container
+        form
+          .querySelector(".suggestions .dynamic-suggestions")
+          .addEventListener("click", (event) => {
+            let linkItem = event.target.closest("a");
+            if (linkItem) {
+              event.preventDefault();
+              selectDynamicSuggestion(linkItem.innerText, form);
+            }
+          });
+      } else {
+        dynamicSuggestionsContainer.innerHTML = "";
+        dynamicSuggestionsContainer.classList.add("d-none");
+      }
     }
-  }
 
-  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
-    ) {
-      dynamicSuggestionsContainer.innerHTML += `
-        <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>
+    const resultsUrl = atts.resultsUrl; //data-results-url;
+    if (resultsUrl) {
+      const collection = atts.collection || "qgov~sp-search";
+      const profile = atts.profile || "qld";
+
+      // Fetch related services from services API
+      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 viewMoreUrl =
+          dynamicSuggestionsContainer.getAttribute("data-view-more");
+
+        // Build the services HTML safely
+        const servicesItems = fetchedServices.response.resultPacket.results
+          .slice(0, 4)
+          .map(
+            (item) =>
+              `<li><a tabindex="0" href="${item.liveUrl}">${item.title}</a></li>`,
+          )
+          .join("");
+
+        const viewMoreItem = viewMoreUrl
+          ? `<li><a tabindex="0" href="${viewMoreUrl}" class="view-more">View more</a></li>`
+          : "";
+
+        dynamicSuggestionsContainer.innerHTML += `
+        <div class="suggestions-category feature">
+          <strong class="suggestions-category-label d-block">Related services</strong>
+          <ul>${servicesItems}${viewMoreItem}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove("d-none");
-      createPopper(searchInput, suggestions, {
-        placement: "bottom-start",
-      });
-      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),
-        );
-      });
+
+        dynamicSuggestionsContainer.classList.remove("d-none");
+
+        // Attach click event listeners to each SERVICE item in list
+        form
+          .querySelector(".suggestions .dynamic-suggestions")
+          .addEventListener("click", (event) => {
+            let linkItem = event.target.closest("a");
+            if (linkItem) {
+              event.preventDefault();
+              selectDynamicSuggestion(linkItem.innerText, form);
+            }
+          });
+      }
     }
   }
 }
@@ -199,19 +215,14 @@ export async function showSuggestions(value = "", isDefault = false, form) {
  */
 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 atts = searchInput ? searchInput.dataset : null;
 
   const params = new URLSearchParams({
     query: query.trim(),
-    collection: collection,
-    profile: profile,
-    num_ranks: numRanks,
-    tiers: tiers,
+    collection: atts.collection || "qgov~sp-search",
+    profile: atts.profile || "qld",
+    num_ranks: atts.numRanks || "10",
+    tiers: atts.tiers || "off",
   });
 
   const searchUrl = `${form.getAttribute("action")}?${params.toString()}`;
@@ -219,4 +230,5 @@ export function submitSearchForm(query = "", form) {
 }
 
 // Attach the function to the window object to make it globally accessible
-window.selectSuggestion = (value, form) => selectSuggestion(value, form);
+window.selectDynamicSuggestion = (value, form) =>
+  selectDynamicSuggestion(value, form);

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

@@ -6,7 +6,7 @@
   "buttonType": "submit",
   "buttonLabel": "Search",
   "ariaLabel": "Search website",
-  "suggestions": true,
+  "placeholder": "",
   "tags": {
     "collection": "qgov~sp-search",
     "profile": "qld",
@@ -15,10 +15,20 @@
     "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
     "results-url": "https://discover.search.qld.gov.au/s/search.json"
   },
-  "default_suggestions": {
-    "popular_services": [
+  "hasDynamicSuggestions": true,
+  "hasDefaultSuggestions": true,
+  "dynamicSuggestionsServiceLink": {
+    "href": "/queenslanders"
+  },
+  "defaultSuggestions": {
+    "popularServicesTitle": "Popular",
+    "popularServicesLink": {
+      "label": "View more",
+      "href": "/queenslanders"
+    },
+    "popularServices": [
       {
-        "title": "Apply for leave",
+        "title": "Apply for leave now",
         "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application"
       },
       {
@@ -34,6 +44,11 @@
         "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment"
       }
     ],
+    "categoriesTitle": "Collection",
+    "categoriesLink": {
+      "label": "View all",
+      "href": "/queenslanders"
+    },
     "categories": [
       {
         "title": "Search for directives, policies, circulars, and guidelines",
@@ -51,11 +66,6 @@
         "title": "Career development",
         "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development"
       }
-    ],
-    "options": {
-      "label": "Browse all categories",
-      "view_more": true,
-      "href": "/queenslanders"
-    }
+    ]
   }
 }

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

@@ -3,41 +3,45 @@
 -->
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
-        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+        aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} placeholder="{{placeholder}}" />
     <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
         <span class="btn-icon"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
-    {{#if suggestions}}
-    <div class="suggestions suggestions__group d-none">
-        <div class="default-suggestions">
-            <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>
-                    {{/each}}
-                </ul>
-            </div>
-
-            <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}}
-                </ul>
-            </div>
-
-            {{#if default_suggestions.options.view_more}}
-            <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>
+    {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
+    
+    <div class="suggestions suggestions__group default">
+        {{#if hasDefaultSuggestions}}
+            <div class="default-suggestions">
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.popularServices}}
+                        <li><a tabindex="0" href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.popularServicesLink}}
+                            <li><a tabindex="0" href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
+                {{#if defaultSuggestions.categories}}
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.categories}}
+                        <li><a tabindex="0"href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.categoriesLink}}
+                            <li><a tabindex="0" href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
+                {{/if}}
             </div>
-            {{/if}}
-        </div>
-        <div class="dynamic-suggestions"></div>
+        {{/if}}
+        {{#if hasDynamicSuggestions}}
+            <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
+        {{/if}}
     </div>
-    {{/if}}
-    
+    {{/ifCond}}    
 </div>