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

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

@@ -1,6 +1,11 @@
 {
     "masterbrand_variant": {
         "icon-root": "assets/img/svg-icons.svg",
+        "icons": {
+            "menu-icon": "qld__icon__mobile-menu",
+            "search-icon": "qld__icon__search",
+            "close-icon": "qld__icon__close"
+        },
         "sitePreHeader": {
             "url": {
                 "value": "https://qld.gov.au"
@@ -140,49 +145,7 @@
                     "dropdown_options": {
                         "dropdown_type": "form",
                         "dropdown_config": {
-                            "groups": [
-                                {
-                                    "heading": "Log in to For government",
-                                    "content": "Most employees can log in using single sign on (SSO).",
-                                    "usesButton": "true",
-                                    "actionType": "button",
-                                    "action": {
-                                        "button_action": "#",
-                                        "button_targetAttr": "_blank",
-                                        "button_label": "Login"
-                                    },
-                                    "links": [
-                                        {
-                                            "action": "_blank",
-                                            "label": "If your agency doesn't use SSO.",
-                                            "url": "https://www.forgov.qld.gov.au/user#log-in"
-                                        }
-                                    ]
-                                },
-                                {
-                                    "heading": "Select your agency",
-                                    "content": "See information relevant to your agency.",
-                                    "actionType": "select",
-                                    "options": [
-                                        {
-                                            "value": "agency 1"
-                                        }
-                                    ]
-                                }
-                            ],
-                            "examples": [
-                                {
-                                    "heading": "For employees",
-                                    "actionType": "list",
-                                    "list_items": [
-                                        {
-                                            "action": "_self",
-                                            "label": "Your profile",
-                                            "href": "#"
-                                        }
-                                    ]
-                                }
-                            ]
+                            "content": "<div></div>"
                         }
                     }
                 }
@@ -215,14 +178,11 @@
             "placeholder": "",
             "label": "",
             "formAction": {
-                "url": "https://www.forgov.qld.gov.au/search"
+                "url": "https://www.forgov.qld.gov.au/search",
+                "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
+                "results": "https://discover.search.qld.gov.au/s/search.json"
             },
             "options": {
-                "icons": {
-                    "menu-icon": "qld__icon__mobile-menu",
-                    "search-icon": "qld__icon__search",
-                    "search-close-icon": "qld__icon__close"
-                },
                 "borderStyle": {
                     "full": true
                 }
@@ -231,6 +191,11 @@
     },
     "subbrand_variant": {
         "icon-root": "assets/img/svg-icons.svg",
+        "icons": {
+            "menu-icon": "qld__icon__mobile-menu",
+            "search-icon": "qld__icon__search",
+            "close-icon": "qld__icon__close"
+        },
         "sitePreHeader": {
             "url": {
                 "value": "https://qld.gov.au"
@@ -276,23 +241,7 @@
                 "dropdown_options": {
                     "dropdown_type": "form",
                     "dropdown_config": {
-                        "groups": [
-                            {
-                                "heading": "Log in to For government",
-                                "button_action": "#",
-                                "button_targetAttr": "_blank",
-                                "button_label": "Login"
-                            }
-                        ],
-                        "examples": [
-                            {
-                                "heading": "For employees",
-                                "content": "See information relevant to your agency.",
-                                "button_action": "#",
-                                "button_targetAttr": "_blank",
-                                "button_label": "Login"
-                            }
-                        ]
+                        "content": "<div></div>"
                     }
                 }
             }
@@ -325,14 +274,11 @@
             "placeholder": "Placeholder",
             "label": "Label",
             "formAction": {
-                "url": "https://www.forgov.qld.gov.au/search"
+                "url": "https://www.forgov.qld.gov.au/search",
+                "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
+                "results": "https://discover.search.qld.gov.au/s/search.json"
             },
             "options": {
-                "icons": {
-                    "menu-icon": "qld__icon__mobile-menu",
-                    "search-icon": "qld__icon__search",
-                    "search-close-icon": "qld__icon__close"
-                },
                 "borderStyle": {
                     "full": false
                 }
@@ -341,6 +287,11 @@
     },
     "endorsed_variant": {
         "icon-root": "assets/img/svg-icons.svg",
+        "icons": {
+            "menu-icon": "qld__icon__mobile-menu",
+            "search-icon": "qld__icon__search",
+            "close-icon": "qld__icon__close"
+        },
         "sitePreHeader": {
             "url": {
                 "value": "https://qld.gov.au"
@@ -480,49 +431,7 @@
                     "dropdown_options": {
                         "dropdown_type": "form",
                         "dropdown_config": {
-                            "groups": [
-                                {
-                                    "heading": "Log in to For government",
-                                    "content": "Most employees can log in using single sign on (SSO).",
-                                    "usesButton": "true",
-                                    "actionType": "button",
-                                    "action": {
-                                        "button_action": "#",
-                                        "button_targetAttr": "_blank",
-                                        "button_label": "Login"
-                                    },
-                                    "links": [
-                                        {
-                                            "action": "_blank",
-                                            "label": "If your agency doesn't use SSO.",
-                                            "url": "https://www.forgov.qld.gov.au/user#log-in"
-                                        }
-                                    ]
-                                },
-                                {
-                                    "heading": "Select your agency",
-                                    "content": "See information relevant to your agency.",
-                                    "actionType": "select",
-                                    "options": [
-                                        {
-                                            "value": "agency 1"
-                                        }
-                                    ]
-                                }
-                            ],
-                            "examples": [
-                                {
-                                    "heading": "For employees",
-                                    "actionType": "list",
-                                    "list_items": [
-                                        {
-                                            "action": "_self",
-                                            "label": "Your profile",
-                                            "href": "#"
-                                        }
-                                    ]
-                                }
-                            ]
+                            "content": "<div></div>"
                         }
                     }
                 }
@@ -555,14 +464,11 @@
             "placeholder": "",
             "label": "",
             "formAction": {
-                "url": "https://www.forgov.qld.gov.au/search"
+                "url": "https://www.forgov.qld.gov.au/search",
+                "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
+                "results": "https://discover.search.qld.gov.au/s/search.json"
             },
             "options": {
-                "icons": {
-                    "menu-icon": "qld__icon__mobile-menu",
-                    "search-icon": "qld__icon__search",
-                    "search-close-icon": "qld__icon__close"
-                },
                 "borderStyle": {
                     "full": true
                 }
@@ -571,6 +477,11 @@
     },
     "standalone_variant": {
         "icon-root": "assets/img/svg-icons.svg",
+        "icons": {
+            "menu-icon": "qld__icon__mobile-menu",
+            "search-icon": "qld__icon__search",
+            "close-icon": "qld__icon__close"
+        },
         "sitePreHeader": {
             "url": {
                 "value": "https://qld.gov.au"
@@ -710,49 +621,7 @@
                     "dropdown_options": {
                         "dropdown_type": "form",
                         "dropdown_config": {
-                            "groups": [
-                                {
-                                    "heading": "Log in to For government",
-                                    "content": "Most employees can log in using single sign on (SSO).",
-                                    "usesButton": "true",
-                                    "actionType": "button",
-                                    "action": {
-                                        "button_action": "#",
-                                        "button_targetAttr": "_blank",
-                                        "button_label": "Login"
-                                    },
-                                    "links": [
-                                        {
-                                            "action": "_blank",
-                                            "label": "If your agency doesn't use SSO.",
-                                            "url": "https://www.forgov.qld.gov.au/user#log-in"
-                                        }
-                                    ]
-                                },
-                                {
-                                    "heading": "Select your agency",
-                                    "content": "See information relevant to your agency.",
-                                    "actionType": "select",
-                                    "options": [
-                                        {
-                                            "value": "agency 1"
-                                        }
-                                    ]
-                                }
-                            ],
-                            "examples": [
-                                {
-                                    "heading": "For employees",
-                                    "actionType": "list",
-                                    "list_items": [
-                                        {
-                                            "action": "_self",
-                                            "label": "Your profile",
-                                            "href": "#"
-                                        }
-                                    ]
-                                }
-                            ]
+                            "content": "<div></div>"
                         }
                     }
                 }
@@ -788,11 +657,6 @@
                 "url": "https://www.forgov.qld.gov.au/search"
             },
             "options": {
-                "icons": {
-                    "menu-icon": "qld__icon__mobile-menu",
-                    "search-icon": "qld__icon__search",
-                    "search-close-icon": "qld__icon__close"
-                },
                 "borderStyle": {
                     "full": true
                 }

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

@@ -21,7 +21,8 @@ export function toggleSearch(event) {
   // Get the search div
   const searchDiv = document.getElementById('qld-header-search');
   const toggleButton = event.currentTarget;
-  const toggleIcon = toggleButton.querySelector('svg use');
+  const searchIcon = toggleButton.querySelector('use.icon-search');
+  const closeIcon = toggleButton.querySelector('use.icon-close');
   const toggleText = toggleButton.querySelector('.qld__main-nav__toggle-text');
 
   // Check current class and swap
@@ -31,14 +32,16 @@ export function toggleSearch(event) {
       searchDiv.classList.add('qld__header__site-search--closed');
 
       // Change icon and text back to default
-      toggleIcon.setAttribute('href', 'assets/img/svg-icons.svg#qld__icon__search');
+      searchIcon.style.display = 'block';
+      closeIcon.style.display = 'none';
       toggleText.textContent = 'Search';
     } else {
       searchDiv.classList.remove('qld__header__site-search--closed');
       searchDiv.classList.add('qld__header__site-search--open');
 
       // Change icon and text to active state
-      toggleIcon.setAttribute('href', 'assets/img/svg-icons.svg#qld__icon__close');
+      searchIcon.style.display = 'none';
+      closeIcon.style.display = 'block';
       toggleText.textContent = 'Close';
     }
 
@@ -48,14 +51,84 @@ export function toggleSearch(event) {
   }
 }
 
+/**
+ * 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 function showSuggestions(value = '', isDefault = false) {
+ **/
+export async function showSuggestions(value = '', isDefault = false) {
   const suggestions = document.getElementById('suggestions');
   const searchInput = document.getElementById('search-input');
 
@@ -64,19 +137,23 @@ export function showSuggestions(value = '', isDefault = false) {
     return;
   }
 
+  // Clear previous suggestions and services
+  suggestions.innerHTML = '';
+
   const loadedSuggestions = defaultSuggestions;
 
   if (isDefault) {
     suggestions.innerHTML = `
-      <div class="suggestions-category mt-4 mb-2">
-        <strong>Popular Services</strong>
-        <ul class="mt-2">${loadedSuggestions.popular_services.map(item => `<li onclick="selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
+      <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>
-      <div class="suggestions-category mt-4">
-        <strong>Categories</strong>
-        <ul class="mt-2">${loadedSuggestions.categories.map(item => `<li onclick="selectSuggestion('${item.title}')"><a href="${item.href}">${item.title}</a></li>`).join('')}</ul>
+      <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>` : ''}
+      <!--${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, {
@@ -92,74 +169,60 @@ export function showSuggestions(value = '', isDefault = false) {
     return;
   }
 
-  const allSuggestions = [...loadedSuggestions.popular_services, ...loadedSuggestions.categories];
-  const filteredSuggestions = allSuggestions.filter(item => item.title.toLowerCase().includes(value.toLowerCase()));
-
-  if (filteredSuggestions.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';
+    }
   }
 
-  const highlightText = (text, query) => {
-    const regex = new RegExp(`(${query})`, 'gi');
-    return text.replace(regex, '<strong>$1</strong>');
-  };
-
-  suggestions.innerHTML = `
-    <div class="suggestions-category mt-4">
-      <strong>Suggestions</strong>
-      <ul class="mt-2">${filteredSuggestions.map(item => `<li onclick="selectSuggestion('${item.title}')"><a href="${item.href}">${highlightText(item.title, value)}</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';
-}
-
-/**
- * Sets the selected suggestion into the input field.
- *
- * @param {string} value - The selected suggestion.
- * @returns {void}
- */
-export function selectSuggestion(value) {
-  const searchInput = document.getElementById('search-input');
-  const suggestions = document.getElementById('suggestions');
-
-  if (searchInput && suggestions) {
-    searchInput.value = value;
-    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';
+    }
   }
 }
 
-// Ensure the input exists before adding event listeners
-const searchInput = document.getElementById('search-input');
-if (searchInput) {
-
-  // Events
-  searchInput.addEventListener('keyup', function() {
-    showSuggestions(this.value);
-  });
-
-  searchInput.addEventListener('focus', function() {
-    showSuggestions('', true);
-  });
-
-  searchInput.addEventListener('click', function() {
-    if (this.value === '') {
-      showSuggestions('', true);
-    }
-  });
-
-  // Close suggestions when clicking outside
-  document.addEventListener('click', function(event) {
-    if (!searchInput.contains(event.target) && !document.getElementById('suggestions').contains(event.target)) {
-      document.getElementById('suggestions').style.display = 'none';
-    }
-  });
-}
+// Attach the function to the window object to make it globally accessible
+window.selectSuggestion = selectSuggestion;