@qld-gov-au/qgds-bootstrap5 2.0.11 → 2.1.0

package/src/js/qld.bootstrap.js

@@ -51,6 +51,7 @@ window.addEventListener("DOMContentLoaded", () => {
 
     // Get all forms with the class 'site-search'
     let forms = document.querySelectorAll(".site-search");
+
     forms.forEach((form) => {
       // Get the search input within the current form
       let searchInput = form.querySelector(".qld-search-input input");
@@ -67,59 +68,6 @@ window.addEventListener("DOMContentLoaded", () => {
           }, 300);
         });
 
-        // Add focus event listener to the search input
-        searchInput.addEventListener("focus", function () {
-          const suggestions = form.querySelector(".suggestions");
-          const dynamicSuggestionsContainer = form.querySelector(
-            ".dynamic-suggestions",
-          );
-
-          if (this.value.trim() === "") {
-            showSuggestions("", true, form);
-          } else if (
-            suggestions &&
-            dynamicSuggestionsContainer &&
-            dynamicSuggestionsContainer.innerHTML.trim() !== ""
-          ) {
-            // Only show existing suggestions if there are actual dynamic suggestions populated
-            suggestions.classList.remove("d-none");
-          }
-        });
-
-        const suggestions = form.querySelector(".suggestions");
-        // If there is no suggestions renderred, do not add event listener to the document
-        if (suggestions) {
-          // Helper function to determine if suggestions should be hidden on focus change
-          const shouldHideSuggestions = (newFocusTarget) => {
-            if (!newFocusTarget) return true;
-
-            const isFocusInsideInput =
-              searchInput.contains(newFocusTarget) ||
-              searchInput === newFocusTarget;
-            const isFocusInsideSuggestions =
-              suggestions.contains(newFocusTarget);
-
-            return !isFocusInsideInput && !isFocusInsideSuggestions;
-          };
-
-          // Handle focusout event for keyboard accessibility
-          const handleFocusOut = (event) => {
-            const newFocusTarget = event.relatedTarget;
-
-            if (shouldHideSuggestions(newFocusTarget)) {
-              suggestions.classList.add("d-none");
-            }
-          };
-
-          // Attach focusout event listener to search input
-          searchInput.addEventListener("focusout", handleFocusOut);
-
-          // Attach focusout event listener to suggestions container
-          suggestions.addEventListener("focusout", handleFocusOut);
-        } else {
-          console.warn("Required suggestions elements not found.");
-        }
-
         // Attach event listener to form submit
         form.addEventListener("submit", function (event) {
           event.preventDefault();
@@ -129,9 +77,9 @@ window.addEventListener("DOMContentLoaded", () => {
       }
     });
 
-    //Header
-    // Get the <header> element
+    //Header - get the <header> element
     let header = document.querySelector("header");
+
     if (header) {
       // Get the current page URL without query string parameters
       let url = window.location.origin + window.location.pathname;

package/src/components/bs5/formcheck/_formcheck.stories.bak.js

@@ -1,432 +0,0 @@
-// Formcheck.stories.js
-import { Formcheck } from './Formcheck.js';
-
-import radiodata from './formcheck.radio.data.json';
-import checkboxdata from './formcheck.checkbox.data.json';
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Forms/Radio',
-  render: (args) => {
-    return `${new Formcheck(args).html}`
-  },
-  //https://storybook.js.org/docs/api/arg-types 
-  argTypes: {
-  },
-
-  
-};
-
-// Default story for Formcheck component
-export const Default = {
-  args: {...radiodata},
-  parameters: {
-    controls: { include: `listitems` },
-  },
-};
-
-export const RadioDark = {
-  args: {...radiodata},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
-};
-
-export const Checkbox = {
-  title: 'Components/Forms/Checkbox',
-  args: {...checkboxdata},
-};
-
-export const CheckboxDark = {
-  
-  args: {...checkboxdata},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
-};
-
-export const RadioSmall = {
-  
-  args: {...radiodata, id: "radioSmall"},
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
-};
-
-export const RadioSmallDark = {
-  
-  args: {...radiodata, id: "radioSmallDark"},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
-};
-
-export const CheckboxSmall = {
-  args: {...checkboxdata, id: "checkboxSmall"},
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
-};
-
-export const CheckboxSmallDark = {
-  args: {...checkboxdata, id: "checkboxSmallDark"},
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark">
-      <div class="small">
-          ${Story()}
-      </div>
-      </div>
-      `;
-    },
-  ],
-};
-
-export const RadioValid = {
-  args: {...radiodata, id: "radioValid"},
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `
-  },
-}
-
-export const RadioValidSmall = {
-  args: {...radiodata, id: "radioValidSmall"},
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },
-}
-
-export const RadioValidDark = {
-  args: {...radiodata, id: "radioValidDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="valid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
-}
-
-export const RadioValidSmallDark = {
-  args: {...radiodata, id: "radioValidSmallDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="valid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
-}
-
-export const CheckboxValid = {
-  args: {...checkboxdata, id: "checkboxValid"},
-  render: (args) => {
-    return `
-    <div class="valid">${new Formcheck(args).html}</div>
-    `
-  },
-}
-
-export const CheckboxValidSmall = {
-  args: {...checkboxdata, id: "checkboxValidSmall"},
-  render: (args) => {
-    return `
-    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },
-}
-
-export const CheckboxValidDark = {
-  args: {...checkboxdata, id: "checkboxValidDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="valid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
-}
-
-export const CheckboxValidSmallDark = {
-  args: {...checkboxdata, id: "checkboxValidSmallDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="valid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="valid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
-}
-
-export const RadioInvalid = {
-  args: {...radiodata, id: "radioInvalid"},
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `
-  },
-}
-
-export const RadioInvalidSmall = {
-  args: {...radiodata, id: "radioInvalidSmall"},
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },
-}
-export const RadioInvalidDark = {
-  args: {...radiodata, id: "radioInvalidDark"},
-  render: (args) => {
-    return `
-    <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="small">
-          ${Story()}
-      </div>
-      `;
-    },
-  ],
-}
-
-export const RadioInvalidSmallDark = {
-  args: {...radiodata, id: "radioInvalidSmallDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="invalid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
-}
-
-export const CheckboxInvalid = {
-  args: {...checkboxdata, id: "checkboxInvalid"},
-  render: (args) => {
-    return `
-    <div class="invalid">${new Formcheck(args).html}</div>
-    `
-  },
-}
-
-export const CheckboxInvalidSmall = {
-  args: {...checkboxdata, id: "checkboxInvalidSmall"},
-  render: (args) => {
-    return `
-    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },
-}
-
-export const CheckboxInvalidDark = {
-  args: {...checkboxdata, id: "checkboxInvalidDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="invalid">
-          ${Story()}
-      </div></div>
-      `;
-    },
-  ],
-}
-
-export const CheckboxInvalidSmallDark = {
-  args: {...checkboxdata, id: "checkboxInvalidSmallDark"},
-  render: (args) => {
-    return `
-    <div class="dark">
-    <div class="invalid">${new Formcheck(args).html}</div></div>
-    `
-  },  
-  parameters: {
-    backgrounds: {
-      default: 'Dark',
-      values: [
-        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      return `
-      <div class="dark"><div class="small"><div class="invalid">
-          ${Story()}
-      </div></div></div>
-      `;
-    },
-  ],
-}