@qld-gov-au/qgds-bootstrap5 2.0.7 → 2.0.8

package/dist/components/bs5/searchInput/searchInput.hbs

@@ -4,7 +4,10 @@
 <div class="qld-search-input {{customClass}}">
     <input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
         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}}
     <div class="suggestions suggestions__group d-none">
         <div class="default-suggestions">
@@ -36,8 +39,5 @@
         <div class="dynamic-suggestions"></div>
     </div>
     {{/if}}
-    <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
-        <span class="btn-icon"></span>
-        <span class="btn-label">{{ buttonLabel }}</span>
-    </button>
+    
 </div>

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -57,26 +57,26 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^9.1.9",
-    "@storybook/addon-docs": "^9.1.9",
-    "@storybook/addon-links": "^9.1.9",
-    "@storybook/addon-themes": "^9.1.9",
-    "@storybook/cli": "^9.1.9",
-    "@storybook/html-vite": "^9.1.9",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/cli": "^9.1.13",
+    "@storybook/html-vite": "^9.1.13",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
-    "chromatic": "^11.28.2",
-    "esbuild": "0.25.5",
+    "chromatic": "^13.3.1",
+    "esbuild": "0.25.11",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "9.30.0",
+    "eslint": "9.38.0",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-storybook": "^9.1.9",
+    "eslint-plugin-storybook": "^9.1.13",
     "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
@@ -96,7 +96,7 @@
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
     "selenium-webdriver": "^4.33.0",
-    "storybook": "^9.1.9",
+    "storybook": "^9.1.13",
     "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"

package/dist/sample-data/header/header.variant.coBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isCoBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -15,25 +17,20 @@
     ]
   },
   "mainContent": {
+    "palette": "dark",
     "url": "https://qld.gov.au",
     "logo": null,
     "secondaryLogo": null,
-    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
-    "subline": ""
+    "siteTitle": "Cairns and Hinterland",
+    "subline": "Hospital and Health Service"
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.endorsed.data.json

@@ -1,6 +1,8 @@
 {
   "isEndorsedBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "default",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -108,6 +110,7 @@
     ]
   },
   "mainContent": {
+    "palette": "dark-alt",
     "url": "https://qld.gov.au",
     "logo": {
       "src": "assets/img/endorsed.svg",
@@ -121,18 +124,12 @@
     "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.masterBrand.data.json

@@ -1,5 +1,6 @@
 {
   "isMasterBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
     "palette": "dark",
     "globalLink": {
@@ -119,18 +120,12 @@
   },
 
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.standAlone.data.json

@@ -1,6 +1,8 @@
 {
   "isStandaloneBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark-alt",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -110,6 +112,7 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "siteTitle": "Standalone example",
     "subLine": "",
@@ -123,18 +126,12 @@
     }
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/dist/sample-data/header/header.variant.subBrand.data.json

@@ -1,6 +1,8 @@
 {
   "isSubBrand": true,
+  "hasDeliveringForQLDLogo": true,
   "preHeader": {
+    "palette": "dark",
     "globalLink": {
       "text": "www.qld.gov.au",
       "url": "https://qld.gov.au"
@@ -22,25 +24,20 @@
     ]
   },
   "mainContent": {
+    "palette": "default",
     "url": "https://qld.gov.au",
     "logoPath": "",
     "secondaryLogoPath": "",
-    "siteTitle": "For government",
-    "subline": "Hospital and Health Service"
+    "siteTitle": "Department of Seniors, Disability Services and Aboriginal and Torres Strait Islander Partnerships",
+    "subline": ""
   },
   "assets": {
-    "SVGSpritePath": "./assets/img/icons-sprite.svg",
     "siteSearch": {
       "value": "#",
       "placeholder": "",
       "label": "",
       "formAction": {
         "url": "https://www.forgov.qld.gov.au/search"
-      },
-      "options": {
-        "borderStyle": {
-          "full": true
-        }
       }
     }
   }

package/esbuild.js

@@ -86,7 +86,7 @@ const buildConfig = {
       ],
       indentType: "space",
       indentWidth: 2,
-      includePaths: ["./node_modules"],
+      loadPaths: ["./node_modules"],
     }),
     QDGSbuildLog(),
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "",
   "repository": {
     "type": "git",
@@ -57,26 +57,26 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/json": "^0.13.2",
     "@qld-gov-au/qgds-tokens": "^1.2.1",
-    "@storybook/addon-a11y": "^9.1.9",
-    "@storybook/addon-docs": "^9.1.9",
-    "@storybook/addon-links": "^9.1.9",
-    "@storybook/addon-themes": "^9.1.9",
-    "@storybook/cli": "^9.1.9",
-    "@storybook/html-vite": "^9.1.9",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/cli": "^9.1.13",
+    "@storybook/html-vite": "^9.1.13",
     "@vitejs/plugin-vue": "5.2.4",
     "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
-    "chromatic": "^11.28.2",
-    "esbuild": "0.25.5",
+    "chromatic": "^13.3.1",
+    "esbuild": "0.25.11",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "9.30.0",
+    "eslint": "9.38.0",
     "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-storybook": "^9.1.9",
+    "eslint-plugin-storybook": "^9.1.13",
     "globals": "16.4.0",
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
@@ -96,7 +96,7 @@
     "run-parallel": "^1.2.0",
     "sass": "^1.89.2",
     "selenium-webdriver": "^4.33.0",
-    "storybook": "^9.1.9",
+    "storybook": "^9.1.13",
     "storybook-addon-deep-controls": "^0.9.5",
     "vite": "^6.3.5",
     "vitest": "^3.2.4"

package/src/components/bs5/banner/banner.scss

@@ -283,7 +283,7 @@
     }
   }
 
-  /* 
+  /*
     Banner Images are static hero images that sit with the content.
 
     Banner Images have several variants:
@@ -478,7 +478,7 @@
   }
 
   .banner-abstract {
-    margin: 1rem 0 0 0;
+    margin: 1.25rem 0 0 0;
     max-width: 50rem; //To make readable. Clips line length for very wide viewports.
     color: var(--#{$prefix}banner-abstract-color);
 

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -99,7 +99,6 @@ $expander-icon-color: $qld-light-link;
     pointer-events: none;
     width: 360px;
     border-radius: 4px;
-    /* Transition properties */
     transition: max-height 0.5s ease-out;
   }
   .breadcrumb-vertical {
@@ -124,7 +123,9 @@ $expander-icon-color: $qld-light-link;
     text-overflow: ellipsis;
     overflow-x: hidden;
     white-space: nowrap;
-    &:focus {
+
+    //Handle outline offset when focused
+    &:focus-within {
       overflow: initial;
     }
   }
@@ -137,6 +138,10 @@ $expander-icon-color: $qld-light-link;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &:focus {
+      overflow: initial;
+    }
   }
   // Override Bootstrap's default :before pseudo element
   &:before {

package/src/components/bs5/card/card.scss

@@ -429,6 +429,7 @@
       flex-wrap: wrap;
       .tag-item {
         margin: 0;
+        font-weight: normal;
       }
     }
     /////////////////////////////////////////////
@@ -458,7 +459,6 @@
       li.tag-link {
         border-color: var(--#{$prefix}card-link-color);
         font-size: 0.875rem;
-        font-weight: normal;
         &:hover {
           border-color: var(--#{$prefix}link-hover-colour);
           background-color: var(--#{$prefix}link-hover-colour);

package/src/components/bs5/footer/footer.hbs

@@ -38,24 +38,26 @@
        
           <div class="col-12">
             {{!-- Custom contact list --}}
-            {{#ifCond contact.showList "&&" contact.list}}
-            {{#each contact.list }}
-            <div class="footer-contact-item footer-contact-{{@key}}">
-              <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
-            </div>
-            {{/each}}
-            
-            {{else}}
-            {{!default contact list }}
-            <div class="footer-contact-item footer-contact-phone">
-              <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
-              rel="noopener">13 QGOV (13 74 68)</a>
-            </div>
-          
-            <div class="footer-contact-item footer-contact-email">
-              <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
-              href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
-            </div>
+            {{#ifCond contact.showList "!==" false}}
+              {{#ifCond contact.showList "&&" contact.list}}
+              {{#each contact.list }}
+              <div class="footer-contact-item footer-contact-{{@key}}">
+                <span class="qld-icon {{this.icon}}" aria-hidden="true"></span> {{{ this.label }}}
+              </div>
+              {{/each}}
+
+              {{else}}
+              {{!default contact list }}
+              <div class="footer-contact-item footer-contact-phone">
+                <span class="qld-icon qld-icon-phone" aria-hidden="true"></span> <b>Phone:</b> <a href="tel:137468"
+                rel="noopener">13 QGOV (13 74 68)</a>
+              </div>
+
+              <div class="footer-contact-item footer-contact-email">
+                <span class="qld-icon qld-icon-email" aria-hidden="true"></span> <b>Email:</b> <a
+                href="mailto:email@qld.gov.au" rel="noopener"><span class="user-select-all">email@qld.gov.au</span></a>
+              </div>
+              {{/ifCond}}
             {{/ifCond}}
           </div>
         </div>

package/src/components/bs5/footer/footer.scss

@@ -290,10 +290,6 @@
         padding-block-start: 0;
         padding-block-end: 0;
 
-        &:focus-visible {
-          box-shadow: 0 0 0 3px var(--#{$prefix}footer-color-border);
-        }
-
         span {
           display: block;
         }
@@ -323,7 +319,13 @@
 
     .btn {
       min-width: 10rem;
-      width: fit-content;
+      width: 100%;
+      margin-block-end: 1.5rem;
+
+      @include media-breakpoint-up(md) {
+        width: fit-content;
+        margin-block-end: 0;
+      }
     }
   }
 

package/src/components/bs5/header/Header.js

@@ -9,3 +9,28 @@ export class Header {
     return new Component(template, data);
   }
 }
+
+export const argTypes = {
+  ["preHeader.palette"]: {
+    options: ["dark", "default"],
+    control: "radio",
+    table: { category: "Pre header" },
+  },
+  ["preHeader.globalLink.text"]: {
+    table: { category: "Pre header" },
+  },
+  ["preHeader.actions"]: {
+    table: { category: "Pre header" },
+  },
+  ["mainContent.palette"]: {
+    options: ["dark", "default", "dark-alt"],
+    control: "radio",
+    table: { category: "Main content" },
+  },
+  ["mainContent.siteTitle"]: {
+    table: { category: "Main content" },
+  },
+  ["mainContent.subline"]: {
+    table: { category: "Main content" },
+  },
+};