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

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

@@ -228,64 +228,10 @@
                                         {{/isType}}
 
                                         {{#isType dropdown_options.dropdown_type "form"}}
-                                            {{#if dropdown_options.dropdown_config.groups}}
-                                                {{#each dropdown_options.dropdown_config.groups}}
-
-                                                    {{#if heading}}<h4 class="mt-2">{{heading}}</h4>{{/if}}
-                                                    {{#if content}}<p>{{content}}</p>{{/if}}
-
-                                                    {{#isType actionType "button"}}
-                                                        <a class="btn btn-primary" href="{{action.button_action}}" 
-                                                        {{#if action.button_targetAttr }}
-                                                            target="{{action.button_targetAttr}}"
-                                                        {{/if}}>
-                                                            <span class="btn-icon fa-solid fa-arrow-up-right-from-square"></span>
-                                                                {{action.button_label}}
-                                                        </a>
-                                                    {{/isType}}
-
-                                                    {{#each links}}
-                                                    <div class="group"> 
-                                                        <a class="mt-4 qld__header__cta-group-list" href="{{url}}"  
-                                                            {{#if action}}
-                                                                target="{{action}}"
-                                                            {{/if}}>
-                                                            {{label}}
-                                                        </a>
-                                                    </div>
-                                                    <hr>
-                                                    {{/each}}
-
-                                                    {{#isType actionType "list"}}
-                                                        {{#each list_items}}
-                                                                <ul>
-                                                                    <li class="qld__header__cta-group-list group">
-                                                                        <a href="{{url}}" 
-                                                                            {{#if action }}
-                                                                                target="{{action}}"
-                                                                            {{/if}}>
-                                                                            {{label}}
-                                                                        </a>
-                                                                    </li>
-                                                                </ul>
-                                                                <hr>
-                                                        {{/each}}
-                                                    {{/isType}}
-
-                                                    {{#isType actionType "select"}}
-                                                        <select class="qld-text-input form-select qld-select" aria-label="" required=""
-                                                            aria-required="">
-                                                                <option selected="">Please select</option>
-                                                                {{#each options}}
-                                                                    <option value="{{value}}">{{value}}</option>
-                                                                {{/each}}
-                                                        </select>
-                                                    {{/isType}}
-
-                                                {{/each}}
+                                            {{#if dropdown_options.dropdown_config.content}}
+                                                {{{dropdown_options.dropdown_config.content}}}
                                             {{/if}}
                                         {{/isType}}
-
                                     </ul>
                                 {{/if}}
                             </div>
@@ -294,22 +240,18 @@
             </div>
             <div class="qld__header__main-nav-controls">
                 {{#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 href="{{icon-root}}#{{siteSearchAsset.options.icons.search-icon}}"></use>
+                <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>
                     </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}}#{{siteSearchAsset.options.icons.menu-icon}}"></use>
-                    </svg>
+                <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>
+                        </svg>
                     <span class="qld__main-nav__toggle-text">Menu</span>
                 </button>
             </div>
@@ -938,15 +880,19 @@
             {{/if}}
             {{#if siteSearchAsset.value}}
             <div id="qld-header-search" class="qld__header__site-search qld__header__site-search--closed">
-                <form id="site-search" {{#if siteSearchAsset.formAction.url}}action="{{siteSearchAsset.formAction.url}}"{{/if}}>
-                    <input type="text" class="form-control{{#if siteSearchAsset.options.borderStyle.full}} border-full{{/if}}"
+                  <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}}">
+                <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>
             </div>
             {{/if}}
+
         </div>
     </div>
 </header>

package/src/components/bs5/header/header.scss

@@ -1,19 +1,16 @@
-// //----------------------------------------------------------------------------------------------------------------------
-// // Header
-// // Palettes and second hand variables:
+// ----------------------------------------------------------------------------------------------------------------------
+// Header - palettes and second hand variables:
 @import './colours';
 @import './icons';
-// //----------------------------------------------------------------------------------------------------------------------
+// ----------------------------------------------------------------------------------------------------------------------
 
 .qld__header {
 	color: var(--#{$prefix}header_color);
 	background: var(--#{$prefix}header_bg);
 	font-size: 1rem;
-	line-height: 1.5;
 
 	@include media-breakpoint-up(sm) {
 		font-size: 1.25rem;
-		line-height: 1.6;
 	}
 
 	.container-fluid {
@@ -483,13 +480,14 @@
 				color: var(--site-search-input-color);
 			}
 
+			//Search dropdown
 			.suggestions-dropdown {
 				position: absolute;
 				display: none;
 				left: 0;	
 				top: 100%;  
 				width: 100%;			
-				z-index: 99; // TO DO: Fix
+				z-index: 99; 
 				border-radius: .5rem;
 				background: var(--#{$prefix}header_site-search-suggestions-bg);
 				box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
@@ -499,6 +497,28 @@
 					padding: 0 1rem;
 				}
 
+				hr {
+					margin: 0;
+				}
+
+				// Featured search result styles
+				.feature {
+					background-color: var(--#{$prefix}header_site-search-suggestions-feature_bg);
+					strong {
+						color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
+					}
+					ul {
+						li {
+							&:hover {
+								background-color: var(--#{$prefix}header_site-search-suggestions-feature_hover);
+							}
+							a {
+								color: var(--#{$prefix}header_site-search-suggestions-feature_text-color);
+							}
+						}
+					}				
+				}
+
 				// Show when active
 				&.show {
 					display: block; 
@@ -522,7 +542,7 @@
 						padding: 0;
 
 						li {
-							height: 3rem;
+							min-height: 3rem;
 							list-style: none;
 							cursor: pointer;
 
@@ -537,9 +557,12 @@
 							&:hover {
 								background-color: var(--#{$prefix}header_site-search-suggestions-hover);
 								margin: 0 -1rem;
+								padding: 0 1rem;
+
 								a {
-									padding: 0 1rem;
+									text-decoration: underline;
 								}
+
 							}
 						}
 					}

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

@@ -42,17 +42,17 @@ export function initializeNavbar() {
   const overlay = document.getElementById('overlay');
 
   // Add event listeners to each dropdown item
-  if(dropdownItems) {
+  if (dropdownItems) {
     dropdownItems.forEach(item => {
       item.addEventListener('click', function(event) {
         // Stop the event from propagating - Bootstrap default click closes
-        event.stopPropagation();  
+        event.stopPropagation();
       });
     });
   }
 
   // Overlay on mobile open
-  if(overlay) {
+  if (overlay) {
     overlay.addEventListener('click', function () {
       // Check if the navbar is open
       if (navbarCollapse.classList.contains('show')) {
@@ -63,7 +63,7 @@ export function initializeNavbar() {
     });
   }
 
-  if(navbarCollapse) {
+  if (navbarCollapse) {
     // Overlay show/hide events
     navbarCollapse.addEventListener('show.bs.collapse', function () {
       overlay.classList.add('show'); // Show the overlay
@@ -74,7 +74,7 @@ export function initializeNavbar() {
     });
   }
 
-  if(dropdownToggles) {
+  if (dropdownToggles) {
     // Initialize Popper and toggle handling
     dropdownToggles.forEach(toggle => {
       toggle.addEventListener('click', (event) => {
@@ -104,7 +104,7 @@ export function initializeNavbar() {
         } else {
           siblingElement.classList.remove('show');
         }
-        
+
         // Check if a Popper instance should be activated or not
         const resizeHandler = () => {
           if (window.innerWidth > 992) {
@@ -119,7 +119,6 @@ export function initializeNavbar() {
               });
             }
           } 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
@@ -134,6 +133,26 @@ export function initializeNavbar() {
       });
     });
   }
+
+  // Reset state on resize to mobile
+  const resetNavbarState = () => {
+    if (window.innerWidth <= 992) {
+      // Remove 'show' class from all dropdowns and sibling elements
+      document.querySelectorAll('.navbar .dropdown-menu').forEach(menu => {
+        menu.classList.remove('show');
+      });
+      document.querySelectorAll('.navbar .first-element').forEach(elem => {
+        elem.classList.remove('show');
+      });
+      // Destroy all active Popper instances
+      activePoppers.forEach(popperInstance => popperInstance.destroy());
+      activePoppers = [];
+    }
+  }
+
+  // Attach resize listener to reset navbar state on resize to mobile
+  window.addEventListener('resize', resetNavbarState);
+  resetNavbarState(); // Call handler immediately to apply correct setting on init
 }
 
 // Initialize the navbar (see main.js)

package/src/components/bs5/spinner/spinner.scss

@@ -11,10 +11,8 @@
     }
 
     .qld-spinner-label {
-        @extend .h3;
-        margin-top: 0 !important;
-        margin-bottom: 0;
         font-size: 1.125rem;
+        font-weight: 600;
         color: inherit;
         font-family: inherit;
         font-weight: 600;

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

@@ -4,15 +4,19 @@
 		"tagItems": [
 			{
 				"id": "One",
-				"content": "Babies"
+				"content": "Tag text"
 			},
 			{
 				"id": "Two",
-				"content": "Maternity"
+				"content": "Tag text"
 			},
 			{
 				"id": "Three",
-				"content": "General public"
+				"content": "Tag text"
+			},
+			{
+				"id": "Four",
+				"content": "Tag text"
 			}
 		]
 	},
@@ -21,17 +25,17 @@
 		"tagItems": [
 			{
 				"id": "One",
-				"content": "Babies",
+				"content": "Tag text",
 				"classes": "tag-large"
 			},
 			{
 				"id": "Two",
-				"content": "Maternity",
+				"content": "Tag text",
 				"classes": "tag-large"
 			},
 			{
 				"id": "Three",
-				"content": "General public",
+				"content": "Tag text",
 				"classes": "tag-large"
 			}
 		]
@@ -41,17 +45,17 @@
 		"tagItems": [
 			{
 				"id": "One",
-				"content": "<a href='javascript:void(0)'>Babies</a>",
+				"content": "<a href='javascript:void(0)'>Tag text</a>",
 				"classes": "tag-link"
 			},
 			{
 				"id": "Two",
-				"content": "<a href='javascript:void(0)'>Maternity</a>",
+				"content": "<a href='javascript:void(0)'>Tag text</a>",
 				"classes": "tag-link"
 			},
 			{
 				"id": "Three",
-				"content": "<a href='javascript:void(0)'>General public</a>",
+				"content": "<a href='javascript:void(0)'>Tag text</a>",
 				"classes": "tag-link"
 			}
 		]
@@ -62,15 +66,15 @@
 		"tagItems": [
 			{
 				"id": "One",
-				"content": "Babies"
+				"content": "Tag text"
 			},
 			{
 				"id": "Two",
-				"content": "Maternity"
+				"content": "Tag text"
 			},
 			{
 				"id": "Three",
-				"content": "General public"
+				"content": "Tag text"
 			}
 		]
 	},
@@ -79,17 +83,17 @@
 		"tagItems": [
 			{
 				"id": "One",
-				"content": "Babies",
+				"content": "Tag text",
 				"classes": "tag-info"
 			},
 			{
 				"id": "Two",
-				"content": "Maternity",
+				"content": "Tag text",
 				"classes": "tag-info"
 			},
 			{
 				"id": "Three",
-				"content": "General public",
+				"content": "Tag text",
 				"classes": "tag-info"
 			}
 		]

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

@@ -6,76 +6,165 @@
     flex-wrap: wrap;
     margin: 0.5rem 0;
     padding: 30px;
-    &.tag-default {
-        .tag-item {
-            border-color: $qld-light-grey;
+
+    .tag-item {
+        border-color: $qld-light-grey;
+        color: $qld-dark-grey-muted;
+    }
+
+    .tag-item {
+        margin: 0 0.5rem 0.5rem 0;
+        list-style-type: none;
+        display: inline-block;
+        border-radius: 16px;
+        padding: 0 0.5rem;
+        border-width: 1px;
+        border-style: solid;
+        font-size: 0.875rem;
+        line-height: 1.5rem;
+        text-align: center;
+
+        &:focus-within {
+            outline: 2px solid var(--qld-focus-color);
+            outline-offset: 2px;
+            border-radius: 16px;
+        }
+
+        &.tag-large {
+            margin: 0 1rem 1rem 0;
+            line-height: 1.5;
+            font-size: 1rem;
+            padding: 0.5rem 1rem;
+            border-radius: 32px;
+        }
+
+        &.tag-link {
+            color: $qld-sapphire-blue;
+            border-color: $qld-sapphire-blue;
+
+            a {
+                text-decoration: none;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-textbox-border-color;
+
+                a {
+                    color: white;
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        &.tag-link:not(.tag-large) {
+
+            &:hover,
+            &:active,
+            &:focus {
+                text-underline-offset: 0.1rem;
+            }
+        }
+
+        &.tag-info {
             color: $qld-dark-grey-muted;
+            border: 0;
+            background-color: $qld-extra-light-grey;
         }
     }
+
     &.tag-dark {
         background-color: $qld-sapphire-blue;
+
         .tag-item {
             color: $qld-dark-text;
         }
+
+        .tag-link {
+            color: $qld-white;
+            border-color: $qld-white;
+
+            a {
+                color: white;
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-light-green-dark;
+                border-color: $qld-light-green-dark;
+
+                a {
+                    color: $qld-text-darkest;
+                }
+            }
+        }
+
+        .tag-info {
+            background-color: $qld-color-dark-background--shade;
+        }
     }
+
     &.tag-alt {
         background-color: $qld-light-grey-alt;
+
         .tag-item {
             color: $qld-dark-grey-muted;
             border-color: $qld-soft-grey;
         }
+
+        .tag-link:hover,
+        .tag-link:active,
+        .tag-link:focus {
+            color: $qld-white !important;
+        }
+
+        .tag-link {
+            color: $qld-sapphire-blue;
+            border-color: $qld-sapphire-blue;
+        }
     }
+
     &.tag-dark-alt {
         background-color: $qld-dark-blue;
+
         .tag-item {
+            a {
+                color: $qld-dark-text;
+            }
+
             color: $qld-dark-text;
             border-color: $qld-dark-border;
         }
-    }
-}
 
-.tag-item {
-    margin: 0 0.5rem 0 0;
-    list-style-type: none;
-    display: inline-block;
-    border-radius: 16px;
-    padding: 0 0.5rem;
-    border-width: 1px;
-    border-style: solid;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    text-align: center;
-    &.tag-large {
-        line-height: 1.5;
-        font-size: 1rem;
-        padding: 0.5rem 1rem;
-        border-radius: 32px;
-    }
-    &.tag-link {
-        color: $qld-sapphire-blue;
-        border-color: $qld-sapphire-blue;
-        a {
-            text-decoration: none;
+        .tag-info {
+            background-color: $qld-dark-blue-shade;
         }
-        &:hover,
-        &:active,
-        &:focus {
-            background-color: $qld-sapphire-blue;
-            a {
-                color: white;
-                text-decoration: underline;
+
+        .tag-link {
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: $qld-light-green-dark;
+                border-color: $qld-light-green-dark;
+
+                a {
+                    color: $qld-text-darkest;
+                }
             }
         }
     }
-    &.tag-info {
-        color: $qld-dark-grey-muted;
-        border-color: $qld-extra-light-grey;
-        background-color: $qld-extra-light-grey;
-    }
 }
 
 $close-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E";
 $close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z'/%3E%3C/svg%3E";
+
 .close-icon {
     mask-image: url($close-icon);
     background-color: $qld-dark-green;
@@ -85,6 +174,7 @@ $close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     border: none;
     margin-left: 0.5rem;
     cursor: pointer;
+
     &:hover {
         background-color: $qld-alt-button-hover;
         mask-image: url($close-icon-hover);

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

@@ -28,9 +28,9 @@ export const Default = {
   args: defaultdata.default,
 };
 
-// Large Tag story
-export const Large = {
-  args: defaultdata.large,
+// Info Tag story
+export const Information = {
+  args: defaultdata.info,
 };
 
 // Action Tag story
@@ -38,17 +38,17 @@ export const Action = {
   args: defaultdata.action,
 };
 
-// Dark Tag story
-export const Dark = {
-  args: defaultdata.dark,
+// Filter Tag story
+export const Filter = {
+  args: defaultdata.filter,
 };
 
-// Info Tag story
-export const Information = {
-  args: defaultdata.info,
+// Large Tag story
+export const Large = {
+  args: defaultdata.large,
 };
 
-// Filter Tag story
-export const Filter = {
-  args: defaultdata.filter,
+// Dark Tag story
+export const Dark = {
+  args: defaultdata.dark,
 };