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

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

@@ -46,7 +46,6 @@
     // ------------------------------------------------------------------------------------------------------------------
     //  2. Second hand variables (each variant, default, light, dark, dark-alt)
     // ------------------------------------------------------------------------------------------------------------------
-
     //  Search
     --#{$prefix}header-site-search-bg: var(--#{$prefix}header-color-light-background__shade);
     --#{$prefix}header-site-search-btn-color: var(--#{$prefix}header-color-dark-text);
@@ -55,6 +54,7 @@
     --#{$prefix}header-site-search-icon-color:var(--#{$prefix}header-color-light-text__muted);
     --#{$prefix}header-site-search-text-color:var(--#{$prefix}header-color-light-text);
 
+    // Search dark
     --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}header-color-dark-background__shade);
     --#{$prefix}header-dark-site-search-btn-color: var(--#{$prefix}header-color-light-text);
     --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}header-color-light-designAccent);
@@ -67,10 +67,10 @@
     --#{$prefix}header_bg: var(--#{$prefix}header-color-light-background);
 
     // Skip links
-    --#{$prefix}header_skip-link_color: var(--#{$prefix}header-color-light-link);
-    --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}header-color-light-focus);
-    --#{$prefix}header_skip-link_focus_text_color: var(--#{$prefix}header-color-light-link);
-    --#{$prefix}header_skip-link_focus_bg_color: var(--#{$prefix}header-color-light-background);
+    --#{$prefix}header_skip-link_color: var(--#{$prefix}header-color-dark-link);
+    --#{$prefix}header_skip-link_focus_outline_color: var(--#{$prefix}header-color-dark-focus);
+    --#{$prefix}header_skip-link_focus_text_color: var(--#{$prefix}header-color-dark-link);
+    --#{$prefix}header_skip-link_focus_bg_color: var(--#{$prefix}header-color-dark-background__shade);
 
     // Pre-header bar
     --#{$prefix}header__pre-header_text_color: var(--#{$prefix}header-color-dark-text);
@@ -89,6 +89,10 @@
     --#{$prefix}header__cta-wrapper__cta-link_text_color: var(--#{$prefix}header-color-dark-link);
     --#{$prefix}header__cta-wrapper__cta-link-icon_color: var(--#{$prefix}header-color-dark-alt-button);
     --#{$prefix}header__cta-wrapper__cta-link-icon_hover_color: var(--#{$prefix}header-color-dark-alt-button__hover);
+    --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}header-color-dark-background);
+
+    --#{$prefix}header__CTA_text_color: var(--#{$prefix}header-color-dark-link);
+    --#{$prefix}header__CTA_border_color: var(--#{$prefix}header-color-dark-border);
 
     // Toggle main navigation
     --#{$prefix}header__toggle-main-nav_text_color: var(--#{$prefix}header-color-dark-link);
@@ -121,12 +125,16 @@
     --site-search-input-focus-color: var(--#{$prefix}header-color-light-focus);
     --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
 
+    // Suggestions colours
+    --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}header-color-light-background);
+    --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}header-color-light-background__shade);
+    --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}header-color-light-designAccent);
+
     // ------------------------------------------------------------------------------------------------------------------
     //  3. Dark/dark-alt modes
     // ------------------------------------------------------------------------------------------------------------------
     .dark &,
     .dark-alt & {
-
         // Root (dark/dark-alt)
         --#{$prefix}header_color: var(--#{$prefix}header-color-dark-text);
 
@@ -158,17 +166,33 @@
         --#{$prefix}header__toggle-main-nav__hover_svg_color: var(--#{$prefix}header-color-dark-alt-button__hover);
         --#{$prefix}header__toggle-main-nav__focus_outline_color: var(--#{$prefix}header-color-dark-focus);
         --#{$prefix}header__toggle-main-nav__svg_color: var(--#{$prefix}header-color-dark-alt-button);
+        
         --#{$prefix}header__brand__anchor__hover_text_color: var(--#{$prefix}header-color-dark-link);
         --#{$prefix}header__brand__anchor__hover_brand-image__text_color: var(--#{$prefix}header-color-dark-link);
         --#{$prefix}header__brand__anchor__hover_headingsubline__text_color: var(--#{$prefix}header-color-dark-link);
         --#{$prefix}header__brand__anchor__hover_brand-image__filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)), drop-shadow(0px 13px 20px rgba(0, 0, 0, 0.08));
         --#{$prefix}header__brand-image__subtype__border_color: var(--#{$prefix}header-color-dark-designAccent);
         --#{$prefix}header__brand-image__subtype__text_color: var(--#{$prefix}header-color-dark-siteTitle);
+        
         --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}header-color-dark-siteTitle);
         --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}header-color-dark-text__muted);
 
         // COA
         --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}header-color-dark-crest-fill);
+        
+        // Search (dark/dark/alt)
+        --site-search-bg: var(--#{$prefix}header-dark-site-search-bg);
+        --site-search-btn-color: var(--#{$prefix}header-dark-site-search-btn-color);
+        --site-search-btn-bg: var(--#{$prefix}header-dark-site-search-btn-bg);
+        --site-search-border-color: var(--#{$prefix}header-dark-site-search-border-color);
+        --site-search-icon-color: var(--#{$prefix}header-dark-site-search-icon-color);
+        --site-search-input-color: var(--#{$prefix}header-dark-site-search-text-color);
+        --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
+
+        // Suggestions colours
+        --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}header-color-dark-alt-background);
+        --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}header-color-dark-background__shade);
+        --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}header-color-dark-designAccent);
     }
 
     .dark-alt & {
@@ -179,14 +203,6 @@
     .dark & {
         --#{$prefix}header_bg: var(--#{$prefix}header-color-dark-background);
         --#{$prefix}header__pre-header_bg_color: var(--#{$prefix}header-color-dark-alt-background);
-
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}header-dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}header-dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}header-dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}header-dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}header-dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}header-dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
+        --#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color: var(--#{$prefix}header-color-dark-alt-background);
     }
 }

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';
+    }
+  });
 }