@qld-gov-au/qgds-bootstrap5 1.0.7 → 1.0.8

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

@@ -1,5 +1,5 @@
 // ------------------------------------------------------------------------------------------------------------------
-//  1. Palette colours
+//  1. Icons in header
 // ------------------------------------------------------------------------------------------------------------------
 .qld__header {
     .qld__icon {

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

@@ -0,0 +1,45 @@
+{
+    "defaultSuggestions": {
+        "popular_services": [
+            {
+                "title": "Renew vehicle or boat rego",
+                "href": "https://www.service.transport.qld.gov.au/renewregistration/public/Welcome.xhtml"
+            },
+            {
+                "title": "Check my license demerit points",
+                "href": "https://www.service.transport.qld.gov.au/checkmydemeritpoints/public/Welcome.xhtml"
+            },
+            {
+                "title": "Renew my driving license",
+                "href": "https://www.qld.gov.au/transport/licensing/driver-licensing/renew-replace/renew/online"
+            },
+            {
+                "title": "Change my address",
+                "href": "https://www.change-of-address.services.qld.gov.au/"
+            }
+        ],
+        "categories": [
+            {
+                "title": "Transport and motoring",
+                "href": "/transport"
+            },
+            {
+                "title": "Employment and jobs",
+                "href": "/jobs"
+            },
+            {
+                "title": "Education and training",
+                "href": "/education"
+            },
+            {
+                "title": "Queensland and its government",
+                "href": "/about"
+            }
+        ],
+        "options": {
+            "label": "Browse all categories",
+            "view_more": true,
+            "href": "/queenslanders"
+        }
+    }
+}

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

@@ -8,24 +8,185 @@
             "text": {
                 "value": "Queensland Government websites"
             },
-            "mainNavCtaOne": {
-                "value": "#",
-                "icon": {
-                    "value": "ctaIcon"
+            "CTA": [
+                {
+                    "id": "CTAone",
+                    "url": {
+                        "value": "#"
+                    },
+                    "icon": {
+                        "value": "ctaIcon"
+                    },
+                    "text": {
+                        "value": "For Queenslanders"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "list",
+                        "view_more_label": "Browse all information and services",
+                        "view_more_url": "https://www.qld.gov.au/queenslanders",
+                        "dropdown_config": {
+                            "groups": [
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Transport and motoring"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Employment and jobs"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Education and training"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Queensland and its government"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Health and wellbeing"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Community support"
+                                }
+                            ],
+                            "view_more": true,
+                            "view_more_options": {
+                                "url": "#",
+                                "label": "View more",
+                                "target": "_blank"
+                            }
+                        }
+                    }
                 },
-                "text": {
-                    "value": "Link 1"
-                }
-            },
-            "mainNavCtaTwo": {
-                "value": "#",
-                "icon": {
-                    "value": "ctaIcon"
+                {
+                    "id": "CTAtwo",
+                    "url": {
+                        "value": "#"
+                    },
+                    "icon": {
+                        "value": "ctaIcon"
+                    },
+                    "text": {
+                        "value": "Business and Industry"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "list",
+                        "view_more_label": "All categories",
+                        "view_more_url": "https://www.business.qld.gov.au/",
+                        "dropdown_config": {
+                            "groups": [
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Starting a business"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Running a business"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Employing people"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Payroll tax"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Industries"
+                                },
+                                {
+                                    "action": "_blank",
+                                    "url": "#",
+                                    "label": "Investing in Queensland"
+                                }
+                            ],
+                            "view_more": true,
+                            "view_more_options": {
+                                "url": "#",
+                                "label": "View more",
+                                "target": "_blank"
+                            }
+                        }
+                    }
                 },
-                "text": {
-                    "value": "Link 2"
+                {
+                    "id": "CTAthree",
+                    "url": {
+                        "value": "#"
+                    },
+                    "icon": {
+                        "value": "ctaIcon"
+                    },
+                    "text": {
+                        "value": "Login"
+                    },
+                    "dropdown_enabled": true,
+                    "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": "#"
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
                 }
-            }
+            ]
         },
         "siteHeader": {
             "config": {
@@ -49,13 +210,20 @@
         },
         "siteSearchAsset": {
             "value": "#",
-            "icons": {
-                "menu-icon": "qld__icon__mobile-menu",
-                "search-icon": "qld__icon__search",
-                "search-close-icon": "qld__icon__close"
+            "placeholder": "",
+            "label": "",
+            "formAction": {
+                "url": "https://www.forgov.qld.gov.au/search"
             },
-            "siteSearchUrl": {
-                "value": ""
+            "options": {
+                "icons": {
+                    "menu-icon": "qld__icon__mobile-menu",
+                    "search-icon": "qld__icon__search",
+                    "search-close-icon": "qld__icon__close"
+                },
+                "borderStyle": {
+                    "full": true
+                }
             }
         }
     },
@@ -74,7 +242,11 @@
                     "value": "#"
                 },
                 "text": {
-                    "value": "Link 1"
+                    "value": "List 1"
+                },
+                "dropdown_enabled": true,
+                "dropdown_options": {
+                    "dropdown_type": "list"
                 }
             },
             "mainNavCtaTwo": {
@@ -83,7 +255,43 @@
                     "value": "#"
                 },
                 "text": {
-                    "value": "Link 2"
+                    "value": "List 2"
+                },
+                "dropdown_enabled": true,
+                "dropdown_options": {
+                    "dropdown_type": "list"
+                }
+            },
+            "mainNavCtaThree": {
+                "value": "#",
+                "icon": {
+                    "value": "ctaIcon"
+                },
+                "text": {
+                    "value": "Login"
+                },
+                "dropdown_enabled": true,
+                "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"
+                            }
+                        ]
+                    }
                 }
             }
         },
@@ -95,8 +303,7 @@
             "url": {
                 "value": "https://qld.gov.au"
             },
-            "logo": {
-            },
+            "logo": {},
             "secondaryType": {
                 "logo": {
                     "value": ""
@@ -111,13 +318,20 @@
         },
         "siteSearchAsset": {
             "value": "#",
-            "icons": {
-                "menu-icon": "qld__icon__mobile-menu",
-                "search-icon": "qld__icon__search",
-                "search-close-icon": "qld__icon__close"
+            "placeholder": "Placeholder",
+            "label": "Label",
+            "formAction": {
+                "url": "https://www.forgov.qld.gov.au/search"
             },
-            "siteSearchUrl": {
-                "value": ""
+            "options": {
+                "icons": {
+                    "menu-icon": "qld__icon__mobile-menu",
+                    "search-icon": "qld__icon__search",
+                    "search-close-icon": "qld__icon__close"
+                },
+                "borderStyle": {
+                    "full": false
+                }
             }
         }
     }

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

@@ -1,3 +1,6 @@
+import { createPopper } from '@popperjs/core';
+import { defaultSuggestions } from './_search.json';
+
 /**
  * Toggles the class on a search div based on button click.
  *
@@ -7,7 +10,6 @@
  * @returns {void}
  */
 export function toggleSearch(event) {
-
   // Prevent default action and stop event propagation
   try {
     event.preventDefault();
@@ -15,16 +17,149 @@ export function toggleSearch(event) {
   } catch (error) {
     console.error("Error in event handling:", error);
   }
-  
+
   // Get the search div
   const searchDiv = document.getElementById('qld-header-search');
-  
-  // Toggle the class for the open state
+  const toggleButton = event.currentTarget;
+  const toggleIcon = toggleButton.querySelector('svg use');
+  const toggleText = toggleButton.querySelector('.qld__main-nav__toggle-text');
+
+  // Check current class and swap
   if (searchDiv) {
-    searchDiv.classList.toggle('qld__header__site-search--open');
-  
+    if (searchDiv.classList.contains('qld__header__site-search--open')) {
+      searchDiv.classList.remove('qld__header__site-search--open');
+      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');
+      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');
+      toggleText.textContent = 'Close';
+    }
+
     // Optional: Update the aria-expanded attribute for accessibility
-    const isExpanded = event.currentTarget.getAttribute('aria-expanded') === 'true';
-    event.currentTarget.setAttribute('aria-expanded', !isExpanded);
+    const isExpanded = searchDiv.classList.contains('qld__header__site-search--open');
+    event.currentTarget.setAttribute('aria-expanded', isExpanded);
+  }
+}
+
+/**
+ * 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) {
+  const suggestions = document.getElementById('suggestions');
+  const searchInput = document.getElementById('search-input');
+
+  if (!suggestions || !searchInput) {
+    console.error("Required elements not found.");
+    return;
+  }
+
+  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>
+      <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>
+      </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;
+  }
+
+  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;
+  }
+
+  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';
+  }
+}
+
+// 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';
+    }
+  });
 }