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

package/dist/sample-data/image/image.data.json

@@ -9,7 +9,9 @@
   "height": "",
   "heightUnit": "",
   "src": "assets/img/image-example-health-workers-md.jpg",
-  "alt": "Two people are sitting in a park, interacting with a tablet-style mobile device.",
+  "alt": "Two healthcare workers sitting on a park bench reviewing information on a tablet device",
+  "caption": "Queensland Health staff using mobile technology to improve patient care and access medical records in the field",
+  "credit": "Photo by Queensland Government",
   "tabindex": "",
   "role": ""
-}
+}

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.9",
   "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:
@@ -407,52 +407,55 @@
   .banner-title-wrap {
     display: block;
     margin: 1.5rem 0 0 0;
-    font-size: 2.5rem;
-    line-height: 3.25rem;
+    font-size: $h1-font-size-mobile;
+    line-height: $h1-line-height-mobile;
 
-    // Target xs - md viewports
-    @include media-breakpoint-down(lg) {
-      font-size: $h1-font-size-mobile;
-      line-height: $h1-line-height-mobile;
+    // LG and above
+    @include media-breakpoint-up(lg) {
+      font-size: $h1-font-size;
+      line-height: $headings-line-height;
     }
 
-    //Spans inside the .banner-title-wrap H1
+    //SPANS inside H1.banner-title-wrap
     .banner-title,
     .banner-subtitle {
       display: block;
       color: var(--#{$prefix}banner-title-color);
     }
 
+    //"Block-title" visual styles
     &.as-block {
       padding: 0.5rem 1.25rem;
+      line-height: 1.5;
 
-      //Both spans
+      //Allow line breaking on both spans
       .banner-title,
       .banner-subtitle {
-        display: unset;
         box-decoration-break: clone;
+        -webkit-box-decoration-break: clone;
+        position: static; // required to allow breadcrumb dropdown to overlap
       }
 
       // First headline span
       .banner-title {
         display: inline;
-        font-weight: 600;
-        color: var(--qld-white);
-        background-color: var(--qld-dark-background);
+        color: var(--qld-dark-text-heading);
+        background-color: var(--qld-dark-background-shade);
         box-shadow:
-          8px 0px 0 6px var(--qld-dark-background),
-          -8px 0px 0 6px var(--qld-dark-background),
+          8px 0px 0 6px var(--qld-dark-background-shade),
+          -8px 0px 0 6px var(--qld-dark-background-shade),
           -12px 0px 0 6px var(--qld-light-accent),
           0px 4px 16px rgba(0, 0, 0, 0.3);
       }
 
       // Second headline span
       .banner-subtitle {
-        display: table;
+        display: block;
+        width: fit-content;
         font-weight: 400;
         color: var(--qld-light-text-text);
-        background-color: var(--qld-default-background);
-        margin-top: 0.75rem;
+        background-color: var(--qld-neutral-white);
+        margin-top: 0.5rem;
         box-shadow:
           8px 0px 0 6px var(--qld-default-background),
           -8px 0px 0 6px var(--qld-default-background),
@@ -464,21 +467,22 @@
 
   // Handles block style dark (banner-title) on dark (banner) clash
   // Changes banner-title to use a shade of the dark background
-  &.dark {
+  &.dark,
+  &.dark-alt {
     .banner-title-wrap.as-block {
       .banner-title {
         background-color: var(--qld-dark-background-shade);
         box-shadow:
           8px 0px 0 6px var(--qld-dark-background-shade),
           -8px 0px 0 6px var(--qld-dark-background-shade),
-          -12px 0px 0 6px var(--qld-light-accent),
+          -12px 0px 0 6px var(--qld-dark-accent),
           0px 4px 16px rgba(0, 0, 0, 0.3);
       }
     }
   }
 
   .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);
 
@@ -522,6 +526,11 @@
       --#{$prefix}breadcrumb-padding-y: 0;
       color: var(--#{$prefix}banner-breadcrumb-color);
     }
+
+    // Re-scope focus color for breadcrumb vertical variant inside banners
+    .breadcrumb .breadcrumb-vertical {
+      --qld-focus-color: var(--qld-light-focus);
+    }
   }
 
   .banner-extra {

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

@@ -98,15 +98,15 @@ export default {
       // Provide cards or buttons if callToAction is set to true
       switch (args.callToAction) {
         case "buttons":
-          args.buttons = exampleButtonData;
+          args.buttons = args.buttons ?? exampleButtonData;
           args.cards = false;
           break;
         case "cards":
-          args.cards = exampleCardData;
+          args.cards = args.cards ?? exampleCardData;
           args.buttons = false;
           break;
         case "cardsMixed":
-          args.cards = exampleMixedCardData;
+          args.cards = args.cards ?? exampleMixedCardData;
           args.buttons = false;
           break;
         case "none":
@@ -172,7 +172,7 @@ export default {
       options: ["none", "with-texture", "with-bg-image", "with-hero-image"],
     },
 
-    "image.classes": {
+    ["image.classes"]: {
       name: "Image Classes",
       description: `Settable classes for the hero image placement. Background Type must be set to "with-hero-image"`,
       control: {
@@ -254,7 +254,7 @@ export const NoBanner = {
     title: { table: { disable: true } },
     abstract: { table: { disable: true } },
     backgroundType: { table: { disable: true } },
-    "image.classes": { table: { disable: true } },
+    ["image.classes"]: { table: { disable: true } },
   },
 };
 
@@ -279,7 +279,7 @@ export const BannerBasic = {
     //Remove default controls that aren't needed here
     callToAction: { table: { disable: true } },
     image: { table: { disable: true } },
-    "image.classes": { table: { disable: true } },
+    ["image.classes"]: { table: { disable: true } },
     backgroundType: {
       //Remove "with-hero-image" option
       options: ["none", "with-texture", "with-bg-image"],
@@ -327,7 +327,7 @@ export const BannerBasicBackgrounds = {
       options: ["none", "with-texture", "with-bg-image"],
     },
     image: { table: { disable: true } },
-    "image.classes": { table: { disable: true } },
+    ["image.classes"]: { table: { disable: true } },
   },
 };
 
@@ -344,7 +344,7 @@ export const BannerAdvancedButtons = {
     subtitle: "",
     titleClasses: [],
     backgroundType: "with-hero-image",
-    "image.classes": "align-grid",
+    ["image.classes"]: "align-grid",
     abstract:
       "Renew your licence at a customer service centre, government office or police station.",
     callToAction: "buttons",
@@ -416,7 +416,7 @@ export const BannerAdvancedHeroImage = {
     backgroundType: "with-hero-image",
     abstract:
       "Renew your licence at a customer service centre, government office or police station.",
-    "image.classes": ["align-right", "with-gradient"],
+    ["image.classes"]: ["align-right", "with-gradient"],
   },
 
   argTypes: {
@@ -445,16 +445,25 @@ export const BannerAdvancedBlockTitle = {
     ...defaultdata,
     variantClass: "dark",
     bannerType: "banner-advanced",
-    title: "Queensland Government",
-    subtitle: "Design System",
+    title: "Disaster recovery",
+    subtitle: "and support",
+    abstract:
+      "Financial help and support services to help you recover if you're affected by a disaster.",
     titleClasses: ["as-block"],
     backgroundType: "with-texture",
-    abstract:
-      "Renew your licence at a customer service centre, government office or police station.",
-    callToAction: "cards",
-    cards: [],
+    callToAction: "buttons",
+    breadcrumbs: {
+      breadcrumbs: [
+        { link: "#", linktext: "Home" },
+        { link: "#", linktext: "Community support" },
+        { link: "#", linktext: "Disaster support and recovery" },
+        { link: "#", linktext: "Example page title 1" },
+        { link: "#", linktext: "Example page title 2" },
+        { link: "#", linktext: "Current page" },
+      ],
+    },
+    ["image.classes"]: "align-grid",
   },
-
   argTypes: {
     backgroundType: {
       name: "Background Type",

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

@@ -19,7 +19,7 @@
       },
       {
         "link": "#",
-        "linktext": "Current page is having a very long name that is longer than the others"
+        "linktext": "Current page"
       }
     ]
   },

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" },
+  },
+};