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

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

@@ -4,7 +4,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -19,9 +20,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -77,9 +75,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -135,9 +130,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },
@@ -194,7 +186,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -203,48 +196,134 @@
             "text": {
                 "value": "Queensland Government websites"
             },
-            "mainNavCtaOne": {
-                "value": "#",
-                "icon": {
-                    "value": "#"
-                },
-                "text": {
-                    "value": "List 1"
-                },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "list"
-                }
-            },
-            "mainNavCtaTwo": {
-                "value": "#",
-                "icon": {
-                    "value": "#"
-                },
-                "text": {
-                    "value": "List 2"
-                },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "list"
-                }
-            },
-            "mainNavCtaThree": {
-                "value": "#",
-                "icon": {
-                    "value": "ctaIcon"
+            "CTA": [
+                {
+                    "id": "CTAone",
+                    "url": {
+                        "value": "#"
+                    },
+                    "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": "Login"
+                {
+                    "id": "CTAtwo",
+                    "url": {
+                        "value": "#"
+                    },
+                    "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"
+                            }
+                        }
+                    }
                 },
-                "dropdown_enabled": true,
-                "dropdown_options": {
-                    "dropdown_type": "form",
-                    "dropdown_config": {
-                        "content": "<div></div>"
+                {
+                    "id": "CTAthree",
+                    "url": {
+                        "value": "#"
+                    },
+                    "text": {
+                        "value": "Login"
+                    },
+                    "dropdown_enabled": true,
+                    "dropdown_options": {
+                        "dropdown_type": "form",
+                        "dropdown_config": {
+                            "content": "<div></div>"
+                        }
                     }
                 }
-            }
+            ]
         },
         "siteHeader": {
             "config": {
@@ -274,9 +353,7 @@
             "placeholder": "Placeholder",
             "label": "Label",
             "formAction": {
-                "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"
+                "url": "https://www.forgov.qld.gov.au/search"
             },
             "options": {
                 "borderStyle": {
@@ -290,7 +367,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -305,9 +383,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -363,9 +438,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -421,9 +493,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },
@@ -464,9 +533,7 @@
             "placeholder": "",
             "label": "",
             "formAction": {
-                "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"
+                "url": "https://www.forgov.qld.gov.au/search"
             },
             "options": {
                 "borderStyle": {
@@ -480,7 +547,8 @@
         "icons": {
             "menu-icon": "qld__icon__mobile-menu",
             "search-icon": "qld__icon__search",
-            "close-icon": "qld__icon__close"
+            "close-icon": "qld__icon__close",
+            "chevron_down": "qld__icon__chevron-down"
         },
         "sitePreHeader": {
             "url": {
@@ -495,9 +563,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "For Queenslanders"
                     },
@@ -553,9 +618,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Business and Industry"
                     },
@@ -611,9 +673,6 @@
                     "url": {
                         "value": "#"
                     },
-                    "icon": {
-                        "value": "ctaIcon"
-                    },
                     "text": {
                         "value": "Login"
                     },

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

@@ -1,6 +1,3 @@
-import { createPopper } from '@popperjs/core';
-import { defaultSuggestions } from './_search.json';
-
 /**
  * Toggles the class on a search div based on button click.
  *
@@ -49,180 +46,4 @@ export function toggleSearch(event) {
     const isExpanded = searchDiv.classList.contains('qld__header__site-search--open');
     event.currentTarget.setAttribute('aria-expanded', isExpanded);
   }
-}
-
-/**
- * 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 async 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;
-  }
-
-  // Clear previous suggestions and services
-  suggestions.innerHTML = '';
-
-  const loadedSuggestions = defaultSuggestions;
-
-  if (isDefault) {
-    suggestions.innerHTML = `
-      <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>
-      <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>-->` : ''}
-    `;
-    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;
-  }
-
-  // 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';
-    }
-  }
-
-  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';
-    }
-  }
-}
-
-// Attach the function to the window object to make it globally accessible
-window.selectSuggestion = selectSuggestion;
+}

package/src/components/bs5/header/header.hbs

@@ -189,12 +189,12 @@
                                         href="{{url.value}}" 
                                         class="qld__header__cta-link" 
                                     {{/if}}>
-                                    {{#if icon.value}}
-                                        <span class="qld__header__cta-link-icon">
-                                            <i class="{{icon-root}}#{{icon.value}}"></i>
-                                        </span>
-                                    {{/if}}
                                     <span class="qld__header__cta-link-text">{{text.value}}</span>
+                                    {{#if dropdown_enabled}}
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__header__cta-link-icon">
+                                            <use href="{{@root.icon-root}}#{{@root.icons.chevron_down}}"></use>
+                                        </svg>
+                                    {{/if}}
                                 </a>
 
                                 {{#if dropdown_enabled}}
@@ -242,15 +242,15 @@
                 {{#if siteSearchAsset.value}}
                 <button aria-controls="qld-header-search" class="qld__header__toggle-main-nav qld__main-nav__toggle-search" aria-expanded="false">
                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
-                        <use class="icon-search" href="{{icon-root}}#{{icons.search-icon}}" style="display: block;"></use>
-                        <use class="icon-close" href="{{icon-root}}#{{icons.close-icon}}" style="display: none;"></use>
+                        <use class="icon-search" href="{{@root.icon-root}}#{{@root.icons.search-icon}}" style="display: block;"></use>
+                        <use class="icon-close" href="{{@root.icon-root}}#{{@root.icons.close-icon}}" style="display: none;"></use>
                     </svg>
                     <span class="qld__main-nav__toggle-text">Search</span>
                 </button>
                 {{/if}}
                 <button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg">
-                            <use href="{{icon-root}}#{{icons.menu-icon}}"></use>
+                            <use href="{{@root.icon-root}}#{{@root.icons.menu-icon}}"></use>
                         </svg>
                     <span class="qld__main-nav__toggle-text">Menu</span>
                 </button>
@@ -880,15 +880,13 @@
             {{/if}}
             {{#if siteSearchAsset.value}}
             <div id="qld-header-search" class="qld__header__site-search qld__header__site-search--closed">
-                  <form id="site-search" role="search" 
-          {{#if siteSearchAsset.formAction.url}}action="{{siteSearchAsset.formAction.url}}"{{/if}}
-          {{#if siteSearchAsset.formAction.suggestions}}data-suggestions="{{siteSearchAsset.formAction.suggestions}}"{{/if}} 
-          {{#if siteSearchAsset.formAction.results}}data-results-url="{{siteSearchAsset.formAction.results}}"{{/if}} novalidate="true">
-                <input type="text" class="form-control{{#if siteSearchAsset.options.borderStyle.full}} border-full{{/if}}"
-                        placeholder="{{#if siteSearchAsset.placeholder}}{{siteSearchAsset.placeholder}}{{else}}Search this site{{/if}}"
-                        id="search-input">
-                <ul id="suggestions" class="suggestions-dropdown suggestions-dropdown__group"></ul>
-                <input type="submit" class="btn btn-primary" value="{{#if siteSearchAsset.label}}{{siteSearchAsset.label}}{{else}}Search{{/if}}">
+                <form class="site-search" role="search" 
+                    {{#if siteSearchAsset.formAction.url}}
+                        action="{{siteSearchAsset.formAction.url}}"
+                    {{else}}
+                        action="https://www.qld.gov.au/search"
+                    {{/if}}>
+                        {{{ searchInput }}}
                 </form>
             </div>
             {{/if}}