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

package/src/components/bs5/quickexit/quickexit.stories.js

@@ -6,18 +6,16 @@ export default {
   tags: ["autodocs"],
   title: "Components/Quickexit",
   render: (args) => {
-    
-    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.
     //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
 
-    if( typeof(args.customClass) === 'string' ) {
-      args.customClass = args.customClass.replaceAll(","," ");
-    } else if ( typeof(args.customClass) === 'object' ) {
+    if (typeof args.customClass === "string") {
+      args.customClass = args.customClass.replaceAll(",", " ");
+    } else if (typeof args.customClass === "object") {
       args.customClass = args.customClass.join(" ");
     }
-  
+
     return new Quickexit(args).html;
-  
   },
 };
 
@@ -32,15 +30,39 @@ export const Default = {
  * Dark themed Loading Quickexit
  */
 export const Dark = {
-  args: { 
-	  ...defaultdata,
+  args: {
+    ...defaultdata,
+  },
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Forgov Quickexit
+ */
+export const Forgov = {
+  args: {
+    ...defaultdata,
+    hasIconInfo: false,
+    hasTooltip: false,
   },
   parameters: {
     backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-brand-primary)' },
-      ],
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
     },
   },
   decorators: [

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

@@ -0,0 +1,63 @@
+.qld-search-input {
+    // ------------------------------------------------------------------------------------------------------------------
+    //  1. Common vars
+    // ------------------------------------------------------------------------------------------------------------------
+    //  Search inputs
+    --#{$prefix}site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
+    --#{$prefix}site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
+    --#{$prefix}site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
+    --#{$prefix}site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
+    --#{$prefix}site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
+    --#{$prefix}site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}site-search_boxshadow: 0 1px 2px rgba(0, 0, 0, .2), 0 1px 3px 1px rgba(0, 0, 0, .1);
+
+    // Search input dark
+    --#{$prefix}dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
+    --#{$prefix}dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
+    --#{$prefix}dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+    --#{$prefix}dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
+    --#{$prefix}dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
+    
+    // Dropdown
+    --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
+    --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
+    --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
+    --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
+    --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
+
+    // Search bootstrap variables
+    --site-search-bg: var(--#{$prefix}site-search-bg);
+    --site-search-btn-color: var(--#{$prefix}site-search-btn-color);
+    --site-search-btn-bg: var(--#{$prefix}site-search-btn-bg);
+    --site-search-border-color: var(--#{$prefix}site-search-border-color);
+    --site-search-icon-color: var(--#{$prefix}site-search-icon-color);
+    --site-search-input-color: var(--#{$prefix}site-search-text-color);
+    --site-search-text-color: var(--#{$prefix}site-search-text-color);
+    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
+
+    
+    // ------------------------------------------------------------------------------------------------------------------
+    //  2. Colour modes
+    // ------------------------------------------------------------------------------------------------------------------
+    .dark &,
+    .dark-alt & {
+        // Search (dark/dark/alt)
+        --site-search-bg: var(--#{$prefix}dark-site-search-bg);
+        --site-search-btn-color: var(--#{$prefix}dark-site-search-btn-color);
+        --site-search-btn-bg: var(--#{$prefix}dark-site-search-btn-bg);
+        --site-search-border-color: var(--#{$prefix}dark-site-search-border-color);
+        --site-search-icon-color: var(--#{$prefix}dark-site-search-icon-color);
+        --site-search-input-color: var(--#{$prefix}dark-site-search-text-color);
+        --site-search-text-color: var(--#{$prefix}dark-site-search-text-color);
+
+        // Suggestions colours
+        --#{$prefix}site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
+        --#{$prefix}site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
+        --#{$prefix}site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
+        --#{$prefix}site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
+        --#{$prefix}site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
+        --#{$prefix}site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
+    }
+}

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

@@ -0,0 +1,170 @@
+import { createPopper } from '@popperjs/core';
+import { defaultSuggestions } from './search.json';
+
+/**
+ * Fetches data from the provided URL.
+ *
+ * @param {string} url - The URL to fetch data from.
+ * @param {string} type - The type of data to fetch (suggestions or services).
+ * @returns {Promise<Object>} - A promise that resolves to the fetched data.
+ */
+async function fetchData(url, type) {
+  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 ${type}:`, 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 form = document.querySelector('.site-search');
+  const searchInput = form.querySelector('.qld-search-input input');
+  const suggestions = form.querySelector('.suggestions');
+
+  if (searchInput && suggestions && form) {
+    searchInput.value = value.trim();
+    suggestions.style.display = 'none';
+
+    // Retrieve additional params
+    const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search';
+    const profile = searchInput.getAttribute('data-profile') || 'qld';
+    const numRanks = searchInput.getAttribute('data-numranks') || '10';
+    const tiers = searchInput.getAttribute('data-tiers') || 'off';
+
+    // Form action
+    const actionUrl = form.getAttribute('action');
+
+    // Construct the URL with proper parameters
+    const params = new URLSearchParams({
+      query: value.trim(),
+      collection: collection,
+      profile: profile,
+      num_ranks: numRanks,
+      tiers: tiers
+    });
+
+    const searchUrl = `${actionUrl}?${params.toString()}`;
+
+    // Manually set the window location to the constructed URL
+    window.location.href = searchUrl;
+  }
+}
+
+/**
+ * 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 form = document.querySelector('.site-search');
+  const searchInput = form.querySelector('.qld-search-input input');
+  const suggestions = form.querySelector('.suggestions');
+
+  // Search input attributes
+  const collection = searchInput.getAttribute('data-collection') || 'qgov~sp-search'; 
+  const profile = searchInput.getAttribute('data-profile') || 'qld';
+  const suggestUrl = searchInput.getAttribute('data-suggestions') || '10';
+  const resultsUrl = searchInput.getAttribute('data-results-url') || 'off';
+
+  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;
+  }
+
+  if (suggestUrl) {
+    
+    const fetchedSuggestions = await fetchData(`${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`, 'suggestions');
+
+    // 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 => {
+            const highlightedText = item.replace(new RegExp(`(${value})`, 'gi'), '<strong>$1</strong>');
+            return `<li onclick="window.selectSuggestion('${item}')"><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 fetchData(`${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`, 'services');
+
+    // 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/searchInput/searchInput.data.json

@@ -7,5 +7,14 @@
 	"buttonID": "search-button",
 	"buttonType": "submit",
 	"buttonLabel": "Search",
-	"ariaLabel": "Search website"
+	"ariaLabel": "Search website",
+	"suggestions": true,
+	"tags": {
+		"collection": "qgov~sp-search",
+		"profile": "qld",
+		"numranks": "10",
+		"tiers": "off",
+		"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
+		"results-url": "https://discover.search.qld.gov.au/s/search.json"
+	}
 }

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

@@ -2,15 +2,21 @@
     QGDS Component: Search input 
 -->
 <div class="container {{variantClass}}">
-    
+
     <div class="qld-search-input {{customClass}}">
 
-        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}" aria-label="{{ ariaLabel }}" />
-    
+        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}"
+            aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+
         <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
             <span class="btn-icon"></span>
             <span class="btn-label">{{ buttonLabel }}</span>
         </button>
 
+        {{#if suggestions}}
+        <ul class="suggestions suggestions__group"></ul>
+        {{/if}}
+
     </div>
+
 </div>

package/src/components/bs5/searchInput/searchInput.scss

@@ -1,5 +1,9 @@
-.qld-search-input {
+// ----------------------------------------------------------------------------------------------------------------------
+// Header - palettes and second hand variables:
+@import './colours';
+// ----------------------------------------------------------------------------------------------------------------------
 
+.qld-search-input {
     //Default state - unfocused, unhovered
     --text-color: var(--qld-dark-grey-muted);
     --placeholder-color: var(--qld-dark-grey-muted);
@@ -11,8 +15,101 @@
     --icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5C11.5 4.71875 10.5312 3.09375 9 2.1875C7.4375 1.28125 5.53125 1.28125 4 2.1875C2.4375 3.09375 1.5 4.71875 1.5 6.5C1.5 8.3125 2.4375 9.9375 4 10.8438C5.53125 11.75 7.4375 11.75 9 10.8438C10.5312 9.9375 11.5 8.3125 11.5 6.5ZM10.5312 11.625C9.40625 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.4375 11.5938 10.5625L15.7812 14.7188C16.0625 15.0312 16.0625 15.5 15.7812 15.7812C15.4688 16.0938 15 16.0938 14.7188 15.7812L10.5312 11.625Z' fill='%23414141'/%3E%3C/svg%3E%0A");
 
     position: relative;
-    min-width: 15rem; 
-    max-width: 40rem; 
+    min-width: 22.5rem;
+
+    //Search dropdown
+    .suggestions {
+        position: absolute;
+        display: none;
+        left: 0;
+        top: 100%;
+        width: 100%;
+        z-index: 1;
+        border-radius: .5rem;
+        background: var(--#{$prefix}site-search-suggestions-bg);
+        box-shadow: var(--#{$prefix}site-search_boxshadow);
+        border-bottom: solid .25rem var(--#{$prefix}site-search-suggestions-hover__border_color);
+
+        .suggestions-category {
+            padding: 0 1rem;
+        }
+
+        hr {
+            margin: 0;
+        }
+
+        // Featured search result styles
+        .feature {
+            background-color: var(--#{$prefix}site-search-suggestions-feature_bg);
+
+            strong {
+                color: var(--#{$prefix}site-search-suggestions-feature_text-color);
+            }
+
+            ul {
+                li {
+                    &:hover {
+                        background-color: var(--#{$prefix}site-search-suggestions-feature_hover);
+                    }
+
+                    a {
+                        color: var(--#{$prefix}site-search-suggestions-feature_text-color);
+                    }
+                }
+            }
+        }
+
+        // Show when active
+        &.show {
+            display: block;
+        }
+
+        &__group {
+            padding: 0;
+
+            a,
+            strong {
+                color: var(--site-search-input-color);
+                font-weight: 400;
+                font-size: 1rem;
+                text-decoration: none;
+            }
+
+            strong {
+                font-weight: 600;
+            }
+
+            ul {
+                padding: 0;
+
+                li {
+                    min-height: 3rem;
+                    list-style: none;
+                    cursor: pointer;
+
+                    a {
+                        vertical-align: middle;
+                        vertical-align: -webkit-baseline-middle;
+
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+
+                    &:hover {
+                        background-color: var(--#{$prefix}site-search-suggestions-hover);
+                        margin: 0 -1rem;
+                        padding: 0 1rem;
+
+                        a {
+                            text-decoration: underline;
+                        }
+
+                    }
+                }
+            }
+        }
+    }
 
     &.full-width {
         max-width: 100%;
@@ -27,20 +124,24 @@
         left: calc(1rem - 2px);
         width: 1.5rem;
         height: 1.5rem;
-        background-color: var(--icon-color); 
+        background-color: var(--icon-color);
         mask: var(--icon) center center / 1.25rem no-repeat;
     }
 
     //Icon color is scoped against the parent container, not the input :( 
-    &:has(.form-control:hover) { --icon-color: var(--qld-dark-grey-muted); }
-    &:has(.form-control:focus) { --icon-color: var(--qld-text-grey); }
+    &:has(.form-control:hover) {
+        --icon-color: var(--qld-dark-grey-muted);
+    }
 
-    .form-control {
+    &:has(.form-control:focus) {
+        --icon-color: var(--qld-text-grey);
+    }
 
+    .form-control {
         padding: 0.75rem 1rem 0.75rem 3rem;
         border-radius: 0.25rem;
         border: 2px solid var(--border-color);
-        background: var(--background-color); 
+        background: var(--background-color);
         padding-right: 6rem;
         color: var(--text-color);
 
@@ -64,19 +165,18 @@
             --placeholder-color: var(--qld-text-grey);
             --border-color: var(--qld-soft-grey);
             --background-color: var(--qld-white);
-            
+
             outline: 3px solid var(--outline-color);
             outline-offset: 2px;
         }
 
-        + button {
+        +button {
             position: absolute;
             top: 0;
             bottom: 0;
             right: 0;
-            z-index: 10;
             border-radius: 0 0.25rem 0.25rem 0;
-    
+
             // Adjust button padding to allow for input borders of 2px top and bottom
             padding-top: calc(0.75rem - 2px);
             padding-bottom: calc(0.75rem - 2px);
@@ -88,7 +188,7 @@
                 height: 1.5rem;
                 height: 1.5rem;
                 margin-right: 0;
-                background-color: var(--icon-color-on-btn); 
+                background-color: var(--icon-color-on-btn);
                 mask: var(--icon) center center / 1.25rem no-repeat;
             }
         }
@@ -102,10 +202,11 @@
         .form-control {
             padding-left: 1rem;
 
-            + button {
+            +button {
                 span.btn-label {
                     display: none;
                 }
+
                 //Show the search icon (on button) on small screens
                 span.btn-icon {
                     display: block;
@@ -127,7 +228,7 @@
     .qld-search-input {
 
         // Rescope colours inside a dark container
-        
+
         // Default state - unfocused, unhovered
         --icon-color: #DEEBF9;
         --icon-color-on-btn: var(--qld-dark-action-text);
@@ -136,13 +237,13 @@
         --placeholder-color: #DEEBF9;
         --border-color: var(--qld-dark-alt-border);
         --background-color: var(--qld-dark-background);
-        
+
         //Icon color is scoped against the parent container, not the input :( 
-        &:has(.form-control:hover) { 
+        &:has(.form-control:hover) {
             --icon-color: var(--qld-white);
         }
-        
-        &:has(.form-control:focus) { 
+
+        &:has(.form-control:focus) {
             --icon-color: var(--qld-text-grey);
             --text-color: var(--qld-text-grey);
         }
@@ -163,7 +264,7 @@
                 --border-color: var(--qld-light-grey);
                 --background-color: var(--qld-white);
             }
-    
+
         }
     }
-}
+}

package/src/components/bs5/searchInput/searchInput.stories.js

@@ -6,7 +6,7 @@ export default {
   tags: ["autodocs"],
   title: "Components/Search Input",
   render: (args) => {
-    return new SearchInput(args).html;
+    return `<form class="site-search">${new SearchInput(args).html}</form>`;
   },
 
   argTypes: {

package/src/components/bs5/tag/tag.scss

@@ -54,10 +54,12 @@
             &:active,
             &:focus {
                 background-color: $qld-textbox-border-color;
+                color: $qld-white;
+                text-decoration: underline;
+                text-underline-offset: var(--qld-link-underline-offset);
 
                 a {
-                    color: white;
-                    text-decoration: underline;
+                    color: $qld-white;
                 }
             }
         }

package/src/js/handlebars.helpers.js

@@ -1,13 +1,13 @@
 /* global Handlebars */
 
 /**
- * Registers Handlebars Helper for 'contains', 'ifCond', 'isType', 'isMultipleOfThree' and 'isEndOfRow'
+ * Registers Handlebars Helpers
  * @param {module} Handlebars Templating engine
  * @returns {void} Result of the helper operation
  */
 
 export default function handlebarsHelpers(Handlebars) {
-  
+  // Contains - 
   Handlebars.registerHelper("contains", function (needle, haystack, options) {
     needle = Handlebars.escapeExpression(needle);
     haystack = Handlebars.escapeExpression(haystack);
@@ -15,6 +15,7 @@ export default function handlebarsHelpers(Handlebars) {
       ? options.fn(this)
       : options.inverse(this);
   });
+  // ifCond - checks conditions 
   Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
     switch (operator) {
     case "==":
@@ -47,12 +48,7 @@ export default function handlebarsHelpers(Handlebars) {
       return options.inverse(this);
     }
   });
-  Handlebars.registerHelper('isMultipleOfThree', function(index) {
-    return (index % 3 === 0); // This will check if the index of the current item in the iteration is a multiple of three (nav dropdown)
-  });
-  Handlebars.registerHelper('isEndOfRow', function(index) {
-    return ((index + 1) % 3 === 0); // Since index is zero-based, add 1 to check if it's the end of a row.
-  });
+  // Checks is expected type
   Handlebars.registerHelper('isType', function (value, expected, options) {
     if (value === expected) {
       return options.fn(this); // Render the block if condition is true