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

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

@@ -1,4 +1,5 @@
 import { createPopper } from '@popperjs/core';
+
 /**
  * Initializes a Popper.js instance for dropdown elements.
  *
@@ -18,7 +19,7 @@ export function initializeDropdownPopper(referenceElement, popperElement) {
     }, {
       name: 'preventOverflow',
       options: {
-        boundariesElement: 'viewport',
+        boundary: 'viewport',
       },
     }],
   });
@@ -37,68 +38,74 @@ let activePoppers = [];
 export function initializeNavbar() {
   const dropdownToggles = document.querySelectorAll('.navbar .dropdown-toggle');
   const navbarCollapse = document.getElementById('navbarSupportedContent');
+  const dropdownItems = document.querySelectorAll('ul.dropdown-menu');
   const overlay = document.getElementById('overlay');
 
-  if(overlay) {
-    
-    overlay.addEventListener('click', function () {
-      // Check if the navbar is open
-      if (navbarCollapse.classList.contains('show')) {
-        // If open, close it
-        navbarCollapse.classList.remove('show');
-        overlay.classList.remove('show');
-      }
+  // Add event listeners to each dropdown item
+  dropdownItems.forEach(item => {
+    item.addEventListener('click', function(event) {
+      // Stop the event from propagating - Bootstrap default click closes
+      event.stopPropagation();  
     });
-  }
+  });
+
+  // Overlay on mobile open
+  overlay.addEventListener('click', function () {
+    // Check if the navbar is open
+    if (navbarCollapse.classList.contains('show')) {
+      // If open, close it
+      navbarCollapse.classList.remove('show');
+      overlay.classList.remove('show');
+    }
+  });
 
   // Overlay show/hide events
-  if(navbarCollapse) {
-    
-    navbarCollapse.addEventListener('show.bs.collapse', function () {
-      overlay.classList.add('show'); // Show the overlay
-    });
-    
-    navbarCollapse.addEventListener('hide.bs.collapse', function () {
-      overlay.classList.remove('show'); // Hide the overlay
-    });
+  navbarCollapse.addEventListener('show.bs.collapse', function () {
+    overlay.classList.add('show'); // Show the overlay
+  });
 
-  }
+  navbarCollapse.addEventListener('hide.bs.collapse', function () {
+    overlay.classList.remove('show'); // Hide the overlay
+  });
 
   // Initialize Popper and toggle handling
-  if(dropdownToggles.length > 0) {
-    dropdownToggles.forEach(toggle => {
-      toggle.addEventListener('click', (event) => {
-        event.preventDefault();
-        const parentUl = toggle.closest('ul.navbar-nav');
-        const firstLi = parentUl.querySelector('.nav-item-home');
-        const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu');
-
-        // Check if a Popper instance should be activated or not
-        const resizeHandler = () => {
-          if (window.innerWidth > 992) {
-            if (!dropdownMenu.dataset.popperActive) {
-              let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
-              dropdownMenu.dataset.popperActive = 'true';
-              activePoppers.push(popperInstance);
-            } else {
-              // If the Popper instance exists, update its position
-              activePoppers.forEach(popperInstance => {
-                popperInstance.update();
-              });
-            }
+  dropdownToggles.forEach(toggle => {
+    toggle.addEventListener('click', (event) => {
+      event.preventDefault();
+      const parentUl = toggle.closest('ul.navbar-nav');
+      const firstLi = parentUl.querySelector('.nav-item-home');
+      const dropdownMenu = toggle.parentNode.querySelector('.dropdown-menu');
+     
+      // Check if a Popper instance should be activated or not
+      const resizeHandler = () => {
+        if (window.innerWidth > 992) {
+          if (!dropdownMenu.dataset.popperActive) {
+            let popperInstance = initializeDropdownPopper(firstLi, dropdownMenu);
+            console.log(popperInstance);
+            dropdownMenu.dataset.popperActive = 'true';
+            activePoppers.push(popperInstance);
           } else {
-            if (dropdownMenu.dataset.popperActive) {
-              activePoppers.forEach(popperInstance => popperInstance.destroy());
-              activePoppers = []; // Clear out the array after destroying instances
-              delete dropdownMenu.dataset.popperActive;
-            }
+            // If the Popper instance exists, update its position
+            activePoppers.forEach(popperInstance => {
+              popperInstance.update();
+            });
+          }
+        } else {
+          const dropdownMenu = toggle.closest('.nav-item').querySelector('.dropdown-menu');
+          if (dropdownMenu.dataset.popperActive) {
+            activePoppers.forEach(popperInstance => popperInstance.destroy());
+            activePoppers = []; // Clear out the array after destroying instances
+            delete dropdownMenu.dataset.popperActive;
           }
         }
+      }
 
-        // Attach resize listener to update Popper on resize
-        window.addEventListener('resize', resizeHandler);
-        resizeHandler(); // Call handler immediately to apply correct setting on init
-      });
+      // Attach resize listener to update Popper on resize
+      window.addEventListener('resize', resizeHandler);
+      resizeHandler(); // Call handler immediately to apply correct setting on init
     });
-  }
+  });
 }
+
+// Initialize the navbar (see main.js)
+// document.addEventListener('DOMContentLoaded', initializeNavbar);

package/src/components/bs5/navbar/navbar.hbs

@@ -1,7 +1,7 @@
 <!-- QGDS Partial: Primary navigation -->
 
 <!-- Primary Navigation / Desktop -->
-<nav class="navbar navbar-expand-lg" aria-label="Website navigation" role="navigation">
+<nav id="main-nav" class="navbar navbar-expand-lg" aria-label="Website navigation" role="navigation">
     <div class="container navbar-contain">
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <div class="navbar__header">
@@ -31,14 +31,15 @@
                 {{#each navigation}}
                 {{#if dropdown_enabled}}
                 <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="{{target_url}}" id="menuDropdown" role="button"
+                    <!-- Desktop primary dropdown style and behaviour -->
+                    <a class="nav-link dropdown-toggle desktop-only" href="{{target_url}}" id="menuDropdown" role="button"
                         aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
                         aria-label="Toggle navigation">
                             {{title}}
                             <svg class="toggle_icon">
                                 <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
                             </svg>
-                        </a>
+                    </a>
                     {{#if navigation_items}}
                     <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu" data-bs-popper="none">
                         <div class="row dropdown-menu__inner">
@@ -85,6 +86,67 @@
                         </div>
                     </ul>
                     {{/if}}
+                    <!-- Mobile only -->
+                    <div class="nav-item-group mobile-only">
+                        <!-- Primary dropdown style and behaviour -->
+                        <a class="nav-link first-element" href="{{target_url}}">
+                            {{title}}
+                        </a>
+                        <a class="nav-link dropdown-toggle second-element" id="menuDropdown" role="button"
+                            aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
+                            aria-label="Toggle navigation">
+                            <svg class="toggle_icon">
+                                    <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
+                                </svg>
+                            <span class="visually-hidden">Expand</span>
+                        </a>
+                        {{#if navigation_items}}
+                        <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu" data-bs-popper="none">
+                            <div class="row dropdown-menu__inner">
+                                {{#if dropdown_options}}
+                                    <div class="col-12">
+                                        <a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
+                                            <span class="">{{dropdown_options.feature_link_value}}</span>
+                                            <svg class="chevron__icon">
+                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
+                                            </svg>
+                                        </a>
+                                        {{#if dropdown_options.feature_link_description}}
+                                            <p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}</p>
+                                        {{/if}}
+                                        <hr>
+                                    </div>
+                                {{/if}}
+                                {{#each navigation_items}}
+                                    <li class="col-lg-4 col-sm-12">
+                                        <a href="{{target_url}}" class="dropdown-item">
+                                            {{title}}
+                                            <svg class="chevron__icon">
+                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
+                                            </svg>
+                                        </a>
+                                        {{#if description}}
+                                            <p class="dropdown-item__description">{{description}}</p>
+                                        {{/if}}
+                                    </li>
+                                {{/each }} 
+                                {{#if dropdown_options.view_value}}
+                                    <li class="col-12 text-end">
+                                        <hr>
+                                        <a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
+                                            <span>
+                                                {{dropdown_options.view_value}}
+                                                <svg class="chevron__icon">
+                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
+                                            </svg>
+                                            </span>
+                                        </a>
+                                    </li>
+                                {{/if}}
+                            </div>
+                        </ul>
+                        {{/if}}
+                    </div>
                 </li>
                 {{else}}
                 <li class="nav-item">

package/src/components/bs5/navbar/navbar.scss

@@ -13,6 +13,41 @@
     border-bottom: var(--#{$prefix}navbar-border-width) solid var(--#{$prefix}navbar-border-accent);
     align-items: center;
 
+    // Helpers for responsive sizes
+    @include media-breakpoint-up(lg) {
+        .desktop-only {
+            display: block;
+        }
+        .nav-item-group {
+            display: block;
+            display: none;
+        }
+    }
+    @include media-breakpoint-down(lg) {
+        .desktop-only {
+            display: none;
+        }
+        .nav-item-group {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            a.first-element {
+                flex: 1 1;
+            }
+            a.second-element {
+                flex: 1 1 auto;
+            }
+            ul.dropdown-menu {
+                flex: 1 1 100%;
+            }
+            .dropdown-toggle {
+                max-width: 3.5rem;
+                border-left: solid 1px var(--#{$prefix}navbar-border-color);
+            }
+        }
+    }
+
+
     &-collapse {
         @include media-breakpoint-down(md) {
             width: 320px;
@@ -30,7 +65,7 @@
             bottom: 0;
             overflow: auto;
             background-color: var(--#{$prefix}navbar-bg-color);
-            overflow: hidden;
+            
             /* Initially positioned off-screen to the right */
             transition: transform .25s ease-in-out;
             transform: translateX(100%);
@@ -49,7 +84,7 @@
 
     &__header {
         display: flex;
-        background-color: var(--#{$prefix}navbar-bg-color);
+        background-color: var(--#{$prefix}navbar-mobile-header-bg-color);
         color: var(--#{$prefix}navbar-text-color);
         align-items: center;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
@@ -78,6 +113,10 @@
             @include media-breakpoint-up(lg) {
                 display: none;
             }
+
+            @include media-breakpoint-down(lg) {
+                color: var(--#{$prefix}navbar-mobile-text-color);
+            }
         }
 
         // Menu open and close toggles
@@ -93,20 +132,27 @@
             background-color: transparent;
             cursor: pointer;
             align-items: center;
-            color: var(--#{$prefix}navbar-text-color);
-            border-left: solid 1px var(--#{$prefix}navbar-border-color);
-
+            
             @include media-breakpoint-up(lg) {
+                color: var(--#{$prefix}navbar-text-color);
+                border-left: solid 1px var(--#{$prefix}navbar-border-color);
                 &:focus {
                     outline: 2px solid var(--#{$prefix}navbar-text-focus-color);
                     outline-offset: 2px;
                 }
             }
 
+            @include media-breakpoint-down(lg) {
+                color: var(--#{$prefix}navbar-mobile-text-color);
+                border-left: solid 1px var(--#{$prefix}navbar-mobile-border-color);
+            }
+
             &:hover {
-                background-color: var(--#{$prefix}navbar-menuitem-hover);
-                svg {
-                    color: var(--#{$prefix}navbar-icon-hover);
+                @include media-breakpoint-down(lg) {
+                    background-color: var(--#{$prefix}navbar-mobile-menuitem-hover);
+                }
+                @include media-breakpoint-up(lg) {
+                    background-color: var(--#{$prefix}navbar-menuitem-hover);
                 }
             }
 
@@ -138,7 +184,14 @@
                 height: 1rem;
                 width: 1rem;
                 margin: 1px auto;
-                color: var(--#{$prefix}navbar-svg-color);
+                
+                @include media-breakpoint-up(lg) {
+                    color: var(--#{$prefix}navbar-svg-color);
+                }
+                
+                @include media-breakpoint-down(lg) {
+                    color: var(--#{$prefix}navbar-mobile-svg-color);
+                }
 
                 @include media-breakpoint-up(md) {
                     height: 1.25rem;
@@ -194,7 +247,7 @@
         }
     }
 
-    .navbar-nav {
+    &-nav {
         $navbar-padding-x: 0;
         $navbar-padding-y: 0;
         --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
@@ -211,13 +264,12 @@
 
     .dropdown { 
         &-menu {
-
+            background-color: var(--#{$prefix}navbar-dropdown-bg-color);
+            
             // Override the default bs-popper margin
             &[data-bs-popper] {
                 margin-top: 0;
             }
-
-            background-color: var(--#{$prefix}navbar-dropdown-bg-color);
             
             @include media-breakpoint-up(lg) {
                 left: 0;
@@ -238,7 +290,6 @@
                 -webkit-box-shadow: none;
                 padding: 0;
                 &.show {
-                    border-right: solid 2px var(--#{$prefix}navbar-border-color);
                     border-left: solid 0.25rem var(--#{$prefix}navbar-dropdown-bg-color);
                     margin-left: -0.25rem;
                 }
@@ -251,12 +302,7 @@
                     text-decoration: none;
                     font-weight: 700;
 
-                    &:hover {
-                        text-decoration: underline;
-                        text-underline-offset: 5px;
-                        background-color: inherit;
-                    }
-
+                    &:hover,
                     &:focus {
                         text-decoration: underline;
                         text-underline-offset: 5px;
@@ -289,13 +335,19 @@
                 }
 
                 li {
+
+                    @include media-breakpoint-down(lg) {
+                        padding-right: 0;
+                    } 
+                    
                     a.dropdown-item {
                         font-weight: 600;
                         padding: 1rem 0;
                         color: var(--#{$prefix}navbar-link-color);
                         border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
 
-                        &:hover {
+                        &:hover,
+                        &:focus {
                             text-decoration: underline;
                             text-underline-offset: 5px;
                             background-color: inherit;
@@ -306,12 +358,6 @@
                             }
                         }
 
-                        &:focus {
-                            text-decoration: underline;
-                            text-underline-offset: 5px;
-                            background-color: inherit;
-                        }
-
                         &::after {
                             width: 1.25rem;
                             height: 1.25rem;

package/src/components/bs5/select/Select.stories.js

@@ -22,7 +22,7 @@ export default {
 
   //https://storybook.js.org/docs/api/arg-types
   argTypes: {
-    customClass: {
+    /*customClass: {
       name: "Classes",
       description: 'Settable classes for the component',
       control: {
@@ -51,7 +51,7 @@ export default {
         "qld-input-success",
         "qld-input-error",
       ],
-    },
+    },*/
   },
 };
 
@@ -116,7 +116,7 @@ export const Disabled = {
 export const Valid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-success"},
+    ...{customClass: "qld-input-success"},
   },
 };
 
@@ -126,6 +126,6 @@ export const Valid = {
 export const Invalid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-error"},
+    ...{customClass: "qld-input-error"},
   },
 };

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

@@ -1,6 +1,7 @@
 {
 	"isDisabled": false,
 	"isRequired": true,
+	"isFilled": false,
 	"customClass": "",
 	"label-text": "Label",
 	"placeholder": "Please select",

package/src/components/bs5/select/select.hbs

@@ -12,20 +12,20 @@
 <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" states}}
+{{#contains "qld-input-success" customClass}}
 <span id="text-field-success" class="qld-input-success">
     {{successMessageText}}
 </span>
 {{/contains}}
 
-{{#contains "qld-input-error" states}}
+{{#contains "qld-input-error" customClass}}
 <span id="text-field-error" class="qld-input-error">
     {{errorMessageText}}
 </span>
 {{/contains}}
 
 <!-- First text input field, described by the hint text above -->
-<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}} {{states}}"
+<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
     aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
     <option selected>{{placeholder}}</option>
     <option value="1">Option 1</option>

package/src/components/bs5/tag/tag.hbs

@@ -1,9 +1,9 @@
 <!-- QGDS Component: Tag -->
 
-<ui class="tag-list {{variant}}">
+<ul class="tag-list {{variant}}">
   {{#each tagItems}}
   <li class="tag-item {{classes}}">
     {{{content}}}
   </li>
   {{/each }}
-</ui>
+</ul>

package/src/components/bs5/textarea/Textarea.stories.js

@@ -22,36 +22,6 @@ export default {
 
   //https://storybook.js.org/docs/api/arg-types
   argTypes: {
-    customClass: {
-      name: "Classes",
-      description: 'Settable classes for the component',
-      control: {
-        type: "check",
-        labels: {
-          "form-style-filled": "Filled",
-        },
-      },
-      options: [
-        "form-style-filled",
-      ],
-    },
-    states: {
-      name: "States",
-      description: `Valid/Invalid states`,
-      control: {
-        type: "radio",
-        labels: {
-          "default": "Default",
-          "qld-input-success": "Success",
-          "qld-input-error": "Error",
-        },
-      },
-      options: [
-        "default",
-        "qld-input-success",
-        "qld-input-error",
-      ],
-    },
   },
 };
 
@@ -116,7 +86,7 @@ export const Disabled = {
 export const Valid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-success"},
+    ...{customClass: "qld-input-success"},
   },
 };
 
@@ -126,6 +96,6 @@ export const Valid = {
 export const Invalid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-error"},
+    ...{customClass: "qld-input-error"},
   },
 };

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

@@ -1,6 +1,7 @@
 {
 	"isDisabled": false,
 	"isRequired": true,
+	"isFilled": false,
 	"customClass": "",
 	"rows": 3,
 	"label-text": "Label",

package/src/components/bs5/textarea/textarea.hbs

@@ -1,7 +1,8 @@
 <!-- QGDS Component: Textarea -->
 
 <!-- Label for the first input field -->
-<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">
+<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}"
+    for="example-1">
     {{label-text}}
     {{#if optional-text}}
     <span class="label-text-optional">({{optional-text}})</span>
@@ -13,20 +14,19 @@
 <span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
 {{/if}}
 
-{{#contains "qld-input-success" states}}
-<span class="qld-input-success">
+{{#contains "qld-input-success" customClass}}
+<span id="text-field-success" class="qld-input-success">
     {{successMessageText}}
 </span>
 {{/contains}}
 
-{{#contains "qld-input-error" states}}
-<span class="qld-input-error">
+{{#contains "qld-input-error" customClass}}
+<span id="text-field-error" class="qld-input-error">
     {{errorMessageText}}
 </span>
 {{/contains}}
 
 <!-- First text input field, described by the hint text above -->
-<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{states}}"
+<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
     placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
-    aria-required="true" {{/if}}></textarea>
-    
+    aria-required="true" {{/if}}></textarea>

package/src/components/bs5/textbox/Textbox.stories.js

@@ -22,19 +22,6 @@ export default {
 
   //https://storybook.js.org/docs/api/arg-types
   argTypes: {
-    customClass: {
-      name: "Classes",
-      description: 'Settable classes for the component',
-      control: {
-        type: "check",
-        labels: {
-          "form-style-filled": "Filled",
-        },
-      },
-      options: [
-        "form-style-filled",
-      ],
-    },
     states: {
       name: "States",
       description: `Valid/Invalid states`,
@@ -116,7 +103,7 @@ export const Disabled = {
 export const Valid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-success"},
+    ...{customClass: "qld-input-success"},
   },
 };
 
@@ -126,6 +113,6 @@ export const Valid = {
 export const Invalid = {
   args: {
 	  ...defaultdata,
-    ...{states: "qld-input-error"},
+    ...{customClass: "qld-input-error"},
   },
 };