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

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

@@ -5,6 +5,10 @@ import defaultdata from './video.data.json';
 // include accordion for transcript
 import { Accordion } from "../accordion/Accordion.js";
 
+/** 
+ * Set default arguments for the Video component,
+ * which is based on YouTube arguments.
+ */
 export default {
   tags: ["autodocs"],
   title: "Components/Video",
@@ -46,6 +50,11 @@ export default {
         "Half page": "col-6",
       },
     },
+    urlParams: {
+      control: {
+        type: "object",
+      },
+    },
   },
 
   /**

package/src/js/handlebars.helpers.js

@@ -1,7 +1,7 @@
 /* global Handlebars */
 
 /**
- * Registers Handlebars Helper for 'contains', 'ifCond', 'isMultipleOfThree' and 'isEndOfRow'
+ * Registers Handlebars Helper for 'contains', 'ifCond', 'isType', 'isMultipleOfThree' and 'isEndOfRow'
  * @param {module} Handlebars Templating engine
  * @returns {void} Result of the helper operation
  */
@@ -53,6 +53,13 @@ export default function handlebarsHelpers(Handlebars) {
   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.
   });
+  Handlebars.registerHelper('isType', function (value, expected, options) {
+    if (value === expected) {
+      return options.fn(this); // Render the block if condition is true
+    } else {
+      return options.inverse(this); // Render the else block if present
+    }
+  });
 }
 
 if(typeof(Handlebars) !== 'undefined') {

package/src/main.js

@@ -11,7 +11,7 @@ import {
 
 import { initializeNavbar } from './components/bs5/navbar/navbar.functions';
 import { positionQuickExit, initQuickexit } from './components/bs5/quickexit/quickexit.functions';
-import { toggleSearch } from './components/bs5/header/header.functions'; 
+import { toggleSearch, showSuggestions } from './components/bs5/header/header.functions';
 
 window.addEventListener('scroll', positionQuickExit, true);
 window.addEventListener('resize', positionQuickExit, true);
@@ -21,11 +21,35 @@ window.addEventListener('keydown', initQuickexit, true);
 window.addEventListener("DOMContentLoaded", () => {
   (() => {
 
-    //Header
+    //Header search
     let headerSearchButton = document.querySelector('.qld__main-nav__toggle-search'); 
     if(headerSearchButton) {
       document.querySelector('.qld__main-nav__toggle-search').addEventListener('click', toggleSearch);
     }
+    
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+      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';
+        }
+      });
+    }
 
     // Navbar
     initializeNavbar();

package/dist/components/bs5/card/cardblock.hbs

@@ -1,14 +0,0 @@
-<div class="row row-cols-1 row-cols-md-3 g-4">
-
-{{#each cards}}
-  <div class="col">
-    <div class="card h-100">
-      <img src="{{image}}" class="card-img-top" alt="{{alt}}">
-      <div class="card-body">
-        <h5 class="card-title">{{#if islink}} <a href="{{link}}"> {{title}} </a> {{else}} {{title}}{{/if}} </h5>
-        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      </div>
-    </div>
-  </div>
-  {{/each}}
-</div>

package/dist/sample-data/card/cardblock.data.json

@@ -1,33 +0,0 @@
-{
-	"cards": [
-		{
-			"title": "An article title",
-			"description": "This is a wider card with supporting text below as a natural lead-in to additional content.",
-			"image": "src/assets/img/ds-example-image-1.jpg",
-			"alt": "A photo of cliffs by the ocean with trees in the foreground",
-			"link": "https://web.dev",
-			"target": "_blank",
-			"footer": false,
-			"feature": true,
-			"withdate": false,
-			"date": "00.00.0000",
-			"classes": ""
-		},
-		{
-			"title": "A longer article title",
-			"description": "This is a wider card with supporting text below as a natural lead-in to additional content.",
-			"image": "assets/img/ds-example-image-2.jpg",
-			"alt": "A photo of wheat in a field lit by soft sunlight",
-			"link": "https://web.dev",
-			"footer": false
-		},
-		{
-			"title": "A topic headline",
-			"description": "This is a supporting text below.",
-			"image": "assets/img/ds-example-image-3.jpg",
-			"alt": "A photo of the base of Uluru at sunset",
-			"link": "https://web.dev",
-			"footer": false
-		}
-	]
-}

package/src/components/bs5/card/Cardblock.js

@@ -1,14 +0,0 @@
-import Component from '../../../js/QGDSComponent.js'
-import template from "./cardblock.hbs?raw";
-// import Card from "./Card.js"
-
-export class Cardblock {
-
-  // Use the global Component class to create a new instance of the Callout component.
-  // A data object, containing the mustache placeholder replacement strings, should be provided as an argument. 
-  
-  constructor( data = {} ) {
-    return new Component(template, data);
-  }
-
-}

package/src/components/bs5/card/cardblock-hbs-backup.txt

@@ -1,29 +0,0 @@
-<div class="row row-cols-1 row-cols-md-3 g-2">
-
-    {{#each cards }}
-    <div class="col">
-        <p>Testing</p>
-        <div class="card h-100">
-            <img src="{{image}}" class="card-img-top" alt="{{alt}}" />
-            <div class="card-body">
-                <h3 class="card-title">
-                    {{#if link}}
-                    <a href="{{link}}">{{title}}</a>
-                    {{title}}
-                    {{/if}}
-                </h3>
-
-                <p class="card-text">
-                    {{description}}
-                </p>
-            </div>
-
-            {{#if footer}}
-            <div class="card-footer">{{footer}}</div>
-            {{/if }}
-
-        </div>
-    </div>
-    {{/each }}
-
-</div>

package/src/components/bs5/card/cardblock.data.json

@@ -1,33 +0,0 @@
-{
-	"cards": [
-		{
-			"title": "An article title",
-			"description": "This is a wider card with supporting text below as a natural lead-in to additional content.",
-			"image": "src/assets/img/ds-example-image-1.jpg",
-			"alt": "A photo of cliffs by the ocean with trees in the foreground",
-			"link": "https://web.dev",
-			"target": "_blank",
-			"footer": false,
-			"feature": true,
-			"withdate": false,
-			"date": "00.00.0000",
-			"classes": ""
-		},
-		{
-			"title": "A longer article title",
-			"description": "This is a wider card with supporting text below as a natural lead-in to additional content.",
-			"image": "assets/img/ds-example-image-2.jpg",
-			"alt": "A photo of wheat in a field lit by soft sunlight",
-			"link": "https://web.dev",
-			"footer": false
-		},
-		{
-			"title": "A topic headline",
-			"description": "This is a supporting text below.",
-			"image": "assets/img/ds-example-image-3.jpg",
-			"alt": "A photo of the base of Uluru at sunset",
-			"link": "https://web.dev",
-			"footer": false
-		}
-	]
-}

package/src/components/bs5/card/cardblock.hbs

@@ -1,14 +0,0 @@
-<div class="row row-cols-1 row-cols-md-3 g-4">
-
-{{#each cards}}
-  <div class="col">
-    <div class="card h-100">
-      <img src="{{image}}" class="card-img-top" alt="{{alt}}">
-      <div class="card-body">
-        <h5 class="card-title">{{#if islink}} <a href="{{link}}"> {{title}} </a> {{else}} {{title}}{{/if}} </h5>
-        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      </div>
-    </div>
-  </div>
-  {{/each}}
-</div>

package/src/components/bs5/card/cardblock.stories.js

@@ -1,60 +0,0 @@
-// Blockquote.stories.js
-import { Cardblock } from './Cardblock.js';
-// import { Card } from './Card.js';
-import defaultdata from './cardblock.data.json';
-
-export default {
-
-  tags: ['autodocs'],
-  title: 'Components/Cardblock',
-  render: (args) => new Cardblock(args).html,
-
-  argTypes: {
-    title: { // this object is configuring the field objects
-      name: 'Title', // name of the field
-    },
-    description: {
-      name: "Blank",
-      description: "Bblank",
-      control: {
-        type: "select",
-      },
-      table: { // refers to the whole table in the storybook properties section
-        disable: true, // completely removes this field
-      },
-    },
-    // image: "assets/img/ds-example-image-1.jpg",
-    // alt: "A photo of cliffs by the ocean with trees in the foreground",
-    // link: "https://web.dev",
-    // footer: false,
-    classes: {
-      name: "Classes",
-      description: `Settable classes for the component`,
-      control: {
-        type: "radio",
-        //tell it what options to show
-        labels: {
-          "": "Default",
-          "card-alternative": "Alternative",
-          "card-primary": "Dark",
-          "card-primary--dark": "Dark alternative",
-        },
-      },
-      options: [
-        "", //default, we don't need additional classes
-        "card-alternative",
-        "card-primary",
-        "card-primary--dark",
-      ],
-    },
-  },
-};
-
-export const Default = {
-  args: defaultdata,
-  parameters: {
-    backgrounds: { // from .storybook > preview.js
-      default: "dark",
-    },
-  },
-};

package/src/stories/templates/ContentPage/ContentPage.mdx

@@ -1,40 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as ContentPageStories from './ContentPage.stories';
-
-import { getCanvasMobileProps } from "../../helpers";
-
-<Meta of={ContentPageStories} />
-
-# Content Page
-
-## Default
-
-<Canvas sourceState="close">
-  <Story of={ContentPageStories.Default} />
-</Canvas>
-
-[//]: # ()
-[//]: # (## No aside)
-
-[//]: # ()
-[//]: # (<Canvas sourceState="close">)
-
-[//]: # (  <Story of={ContentPageStories.NoAside} />)
-
-[//]: # (</Canvas>)
-
-[//]: # ()
-[//]: # (## Without location)
-
-[//]: # ()
-[//]: # (<Canvas sourceState="close">)
-
-[//]: # (  <Story of={ContentPageStories.WithoutLocation} />)
-
-[//]: # (</Canvas>)
-
-## Mobile
-
-<Canvas withSource="none" >
-  <Story of={ContentPageStories.Mobile} />
-</Canvas>

package/src/stories/templates/ContentPage/ContentPage.stories.js

@@ -1,36 +0,0 @@
-import {
-  getStoryMobileParameters,
-  getStoryMobileHeight,
-} from '../../helpers';
-
-//import DefaultTemplate from '../../../templates/page/contentpage.html';
-// import NoAsideTemplate from '../../../template-pages/content-page-no-asides.html';
-// import WithoutLocationTemplate from '../../../template-pages/content-page-without-location.html';
-
-export default {
-  title: 'Templates/ContentPage',
-};
-
-export const Default = {
-  render: () => { return `
-  comingsoon
-   ` }, //DefaultTemplate,
-};
-
-// export const NoAside = {
-//   render: () => NoAsideTemplate,
-//   name: 'NoAside',
-// };
-//
-// export const WithoutLocation = {
-//   render: () => WithoutLocationTemplate,
-//   name: 'WithoutLocation',
-// };
-
-export const Mobile = {
-  render: () => { return `
-  comingsoon
-   ` }, //DefaultTemplate,
-  parameters: getStoryMobileParameters(),
-  height: getStoryMobileHeight(),
-};

package/src/stories/templates/LandingPage/LandingPage.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
-import * as LandingPageStories from './LandingPage.stories';
-
-
-
-<Meta of={LandingPageStories} />
-
-# Landing Page
-
-## Default
-
-<Canvas sourceState="close">
-  <Story of={LandingPageStories.Default} />
-</Canvas>
-
-## Mobile
-
-<Canvas withSource="none">
-  <Story of={LandingPageStories.Mobile} />
-</Canvas>

package/src/stories/templates/LandingPage/LandingPage.stories.js

@@ -1,25 +0,0 @@
-import {
-  getStoryMobileParameters,
-  getStoryMobileHeight,
-} from '../../helpers';
-
-//import DefaultTemplate from '../../../templates/page/landingpage.html';
-
-
-export default {
-  title: 'Templates/ApplicationPage',
-};
-
-export const Default = {
-  render: () => { return `
-  comingsoon
-   `}, // DefaultTemplate,
-};
-
-export const Mobile = {
-  render: () => { return `
-  comingsoon
-   `}, // DefaultTemplate,
-  parameters: getStoryMobileParameters(),
-  height: getStoryMobileHeight(),
-};