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

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/header/header.scss

@@ -112,6 +112,10 @@
         display: none;
       }
     }
+
+    .qld-header-link + .dropdown {
+      margin-left: 0.5rem;
+    }
   }
 
   &-link {

package/src/components/bs5/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/src/components/bs5/image/image.hbs

@@ -13,12 +13,15 @@
 {{/inline}}
 
 {{#if src}}
-  {{#if caption}}
+  {{#ifAny caption credit }}
     <figure class="{{ figureClass }}" {{#if width}}style="width:{{ width }}{{ widthUnit }}"{{/if}}>
       {{> imageTag}}
-      <figcaption>{{ caption }}</figcaption>
+      <figcaption>
+        {{caption}}
+        {{#if credit}}<span class="figure-credit">{{ credit }}</span>{{/if}}
+      </figcaption>
     </figure>
   {{else}}
-    {{> imageTag}}
-  {{/if}}
-{{/if}}
+    {{>imageTag}}
+  {{/ifAny}}
+{{/if}}

package/src/components/bs5/image/image.scss

@@ -1,4 +1,11 @@
 // CSS utilities for fixed-ratio specific QGDS images
+//
+// Accessibility Notes:
+// - Static images don't require keyboard focus (not interactive)
+// - Use semantic <figure> and <figcaption> elements for proper screen reader support
+// - Alt text describes visual content; caption/description provides context
+// - Both are read by screen readers, so they should complement each other
+// - Caption text is keyboard accessible as standard HTML text (no special handling needed)
 
 /* prettier-ignore-start */
 .image-ratio-1x1 { --image-ratio: calc(1 / 1); }
@@ -20,28 +27,33 @@ img[class*="image-ratio-"] {
 
 figure {
   --figure-bg: var(--qld-neutral-lightest);
-  --figure-color: var(--qld-light-text-lighter);
+  --figure-caption-color: var(--qld-light-text-text);
+  --figure-credit-color: var(--qld-light-text-lighter);
 
   display: table;
 
   &.light {
     --figure-bg: var(--qld-light-background-shade);
-    --figure-color: var(--qld-light-text-lighter);
+    --figure-caption-color: var(--qld-light-text-text);
+    --figure-credit-color: var(--qld-light-text-lighter);
   }
 
   &.light-alt {
     --figure-bg: var(--qld-light-alt-background-shade);
-    --figure-color: var(--qld-light-text-lighter);
+    --figure-caption-color: var(--qld-light-text-text);
+    --figure-credit-color: var(--qld-light-text-lighter);
   }
 
   &.dark {
     --figure-bg: var(--qld-dark-background-shade);
-    --figure-color: var(--qld-dark-text-text);
+    --figure-caption-color: var(--qld-dark-text-text);
+    --figure-credit-color: var(--qld-dark-text-lighter);
   }
 
   &.dark-alt {
     --figure-bg: var(--qld-dark-alt-background-shade);
-    --figure-color: var(--qld-dark-text-text);
+    --figure-caption-color: var(--qld-dark-text-text);
+    --figure-credit-color: var(--qld-dark-text-lighter);
   }
 
   > img {
@@ -50,11 +62,21 @@ figure {
 
   > figcaption {
     background: var(--figure-bg);
-    color: var(--figure-color);
+    color: var(--figure-caption-color);
+    font-size: 1rem;
+    line-height: 24px;
 
     display: table-caption;
     caption-side: bottom;
-    padding: 0.5rem;
+    padding: 1rem;
+  }
+
+  .figure-credit {
+    display: block;
+    font-size: 0.875rem;
+    line-height: 20px;
+    color: var(--figure-credit-color);
+    margin-top: 0.5rem;
   }
 
   //Reset bootstrap's figure margin

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

@@ -3,10 +3,8 @@
  * Image utilities to create responsive, fixed-ratio images.
  */
 
-import Handlebars from "handlebars";
-
 import imagedata from "./image.data.json";
-import template from "./image.hbs?raw";
+import { ImageComponent } from "./Image";
 
 /**
  *
@@ -39,11 +37,11 @@ export default {
   title: "3. Components/Image",
 
   render: (args) => {
-    return Handlebars.compile(template)(args);
+    return new ImageComponent(args).html;
   },
 
   argTypes: {
-    "ratioClass": {
+    ratioClass: {
       name: "Fixed image ratio",
       description: "Set the ratio class for the image component.",
       control: {
@@ -67,21 +65,21 @@ export default {
       ],
     },
 
-    "otherClass": {
+    otherClass: {
       name: "Other Classes",
       description:
         "Optional. Any additional classes to apply to the image element for custom styling.",
       control: "text",
     },
 
-    "figureClass": {
+    figureClass: {
       name: "Figure Class",
       description:
         "Optional. Any custom class to pass to the figure element for additional styling.",
       control: "text",
     },
 
-    "positionX": {
+    positionX: {
       name: "Position X",
       description:
         "Optional. Adjust the horizontal image placement within the aspect ratio crop.",
@@ -96,7 +94,7 @@ export default {
       options: ["position-x-left", "position-x-center", "position-x-right"],
     },
 
-    "positionY": {
+    positionY: {
       name: "Position Y",
       description:
         "Optional. Adjust the vertical image placement within the aspect ratio crop.",
@@ -111,14 +109,14 @@ export default {
       options: ["position-y-top", "position-y-center", "position-y-bottom"],
     },
 
-    "width": {
+    width: {
       name: "Width",
       description:
         "Optional. Set the width of the image (e.g., '350', '100'). Use the unit fields to specify px or %.",
       control: "text",
     },
 
-    "widthUnit": {
+    widthUnit: {
       name: "Width Unit",
       description:
         "Select the unit for the width of the image. Choose 'px' for pixels or '%' for percentage.",
@@ -126,14 +124,14 @@ export default {
       options: ["px", "%"],
     },
 
-    "height": {
+    height: {
       name: "Height",
       description:
         "Optional. Set the height of the image (optional - note responsive images will scale their height). Use the unit field to specify px or %.",
       control: "text",
     },
 
-    "heightUnit": {
+    heightUnit: {
       name: "Height Unit",
       description:
         "Optional. Select the unit for the height of the image. Choose 'px' for pixels or '%' for percentage.",
@@ -141,17 +139,31 @@ export default {
       options: ["px", "%"],
     },
 
+    caption: {
+      name: "Caption",
+      description:
+        "Optional. Main caption text for the image (16px, line-height 24px). Provides context or additional information about the image. For accessibility: caption should complement (not duplicate) the alt text. Alt text describes what's in the image; caption provides context or additional information. Both are read by screen readers.",
+      control: "text",
+    },
+
+    credit: {
+      name: "Credit",
+      description:
+        "Optional. Credit/attribution text for the image (14px, line-height 20px, lighter color). Displays below the caption text.",
+      control: "text",
+    },
+
     // Disabled controls, not needed in Storybook UI
     // "tabindex", "role", "storycolumn"
-    "tabindex": {
+    tabindex: {
       table: { disable: true },
     },
 
-    "role": {
+    role: {
       table: { disable: true },
     },
 
-    "storycolumn": {
+    storycolumn: {
       table: { disable: true },
     },
   },
@@ -187,54 +199,59 @@ export const DefaultImage = {
  */
 export const UtilityClasses = {
   // Render several images, each with different ratios
-  args: {
-    image1x1: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-1x1",
-      positionX: "position-x-left",
-      positionY: "position-y-30",
-    }),
-    image3x2: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-3x2",
-    }),
-    image2x3: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-2x3",
-    }),
-    image4x3: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-4x3",
-    }),
-    image3x4: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-3x4",
-      positionX: "position-x-40",
-      positionY: "position-y-top",
-    }),
-    image16x9: Handlebars.compile(template)({
-      ...imagedata,
-      ratioClass: "image-ratio-16x9",
-    }),
-  },
+  args: imagedata,
 
   render: (args) => {
     return `
       <h2>Fixed Ratio Images with utility classes</h2>
       <div class="row">
         <strong>Default</strong><br><br>
-        <div class="col-12 col-md-6 mb-4">${args.image3x2} <br><small>.image-ratio-3x2 (Default)</small></div>
+        <div class="col-12 col-md-6 mb-4">${
+          new ImageComponent({
+            ...args,
+            ratioClass: "image-ratio-3x2",
+          }).html
+        } <br><small>.image-ratio-3x2 (Default)</small></div>
       </div>
       <div class="row">
         <strong>Horizontal</strong><br><br>
-        <div class="col-12 col-md-4 mb-4">${args.image1x1} <br><small>.image-ratio-1x1<br>.position-x-left<br>.position-y-30</small></div>
-        <div class="col-12 col-md-4 mb-4">${args.image4x3} <br><small>.image-ratio-4x3</small></div>
-        <div class="col-12 col-md-4 mb-4">${args.image16x9} <br><small>.image-ratio-16x9</small></div>
+        <div class="col-12 col-md-4 mb-4">${
+          new ImageComponent({
+            ...imagedata,
+            ratioClass: "image-ratio-1x1",
+            positionX: "position-x-left",
+            positionY: "position-y-30",
+          }).html
+        } <br><small>.image-ratio-1x1<br>.position-x-left<br>.position-y-30</small></div>
+        <div class="col-12 col-md-4 mb-4">${
+          new ImageComponent({
+            ...imagedata,
+            ratioClass: "image-ratio-4x3",
+          }).html
+        }<br><small>.image-ratio-4x3</small></div>
+        <div class="col-12 col-md-4 mb-4">${
+          new ImageComponent({
+            ...imagedata,
+            ratioClass: "image-ratio-16x9",
+          }).html
+        } <br><small>.image-ratio-16x9</small></div>
       </div>
       <div class="row">
         <strong>Vertical</strong><br><br>
-        <div class="col-12 col-md-4 mb-4">${args.image2x3} <br><small>.image-ratio-2x3</small></div>
-        <div class="col-12 col-md-4 mb-4">${args.image3x4} <br><small>.image-ratio-3x4<br>.position-x-40<br>.position-y-top</small></div>
+        <div class="col-12 col-md-4 mb-4">${
+          new ImageComponent({
+            ...imagedata,
+            ratioClass: "image-ratio-3x2",
+          }).html
+        } <br><small>.image-ratio-2x3</small></div>
+        <div class="col-12 col-md-4 mb-4">${
+          new ImageComponent({
+            ...imagedata,
+            ratioClass: "image-ratio-3x4",
+            positionX: "position-x-40",
+            positionY: "position-y-top",
+          }).html
+        } <br><small>.image-ratio-3x4<br>.position-x-40<br>.position-y-top</small></div>
       </div>
     `;
   },
@@ -242,12 +259,16 @@ export const UtilityClasses = {
 
 /**
  * Figure with Image and caption
+ *
+ * This example demonstrates the structured caption with caption and credit fields.
+ * The caption uses 16px font with 24px line-height, while the credit uses 14px font with 20px line-height and lighter color.
  */
 export const FigureWithImageCaption = {
   args: {
     ...imagedata,
     caption:
       "This is a caption for the image. It can be long or short. Longer captions, like this one, should wrap to the next line.",
+    credit: "Photo by Queensland Government",
   },
 };
 
@@ -267,11 +288,10 @@ export const FloatedImage = {
   },
 
   render: (args) => {
-    
     args.src = "assets/img/image-example-couple-beach-md.jpg";
 
-    let imageTag = Handlebars.compile(template)({ ...args, caption: null });
-    let imageTagWithCaption = Handlebars.compile(template)(args);
+    let imageTag = new ImageComponent({ ...args, caption: null }).html;
+    let imageTagWithCaption = new ImageComponent(args).html;
 
     let customTemplate = `
     <h2>Example image with caption, right aligned</h2>
@@ -282,13 +302,13 @@ export const FloatedImage = {
     </div>
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-    
+
     <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
 
     <h2>Example image without caption, left aligned</h2>
-    
+
     <!-- Bootstrap classes control layout -->
     <div class="mb-32 float-md-start me-md-32">
       ${imageTag}

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

@@ -1,6 +1,7 @@
 import { HomePage } from "./HomePage.js";
 import { ContentPageWithSideNavigation } from "./ContentPageWithSideNavigation.js";
 import { ContentPageWithForm } from "./ContentPageWithForm.js";
+
 //Data
 import masterbrand_variant from "../header/header.variant.masterBrand.data.json";
 import menu_state from "../navbar/navbar.data.json";
@@ -32,23 +33,23 @@ const sideNavData = {
   navtitlelink: "#optionallink",
   navlist: [
     {
-      link: "#https://www.qld.gov.au/transport/registration/register/heavy",
-      label: "Home page",
+      link: "#",
+      label: "Page link",
       class: "",
     },
     {
       link: "#",
-      label: "Content page (no bar)",
+      label: "Page link",
       class: "",
     },
     {
       link: "#",
-      label: "Content page (with bar)",
-      class: "",
+      label: "Active Page",
+      class: "active",
     },
     {
       link: "#",
-      label: "Page with form",
+      label: "Page link",
       class: "",
     },
   ],
@@ -70,8 +71,6 @@ const defaultData = {
   },
   contentFooter: contentFooterData,
   sidenav: sideNavData,
-  // Mapping some @root header fields to this pageLayout root object, so template partials can resolve values
-  // assets: masterbrand_variant.assets,
 };
 
 export default {
@@ -118,18 +117,7 @@ export const Default = {
       bannerType: "no-banner",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        {
-          ...sideNavData.navlist[1],
-          class: "active",
-        },
-        sideNavData.navlist[2],
-        sideNavData.navlist[3],
-      ],
-    },
+    sidenav: sideNavData,
   },
 };
 
@@ -149,7 +137,7 @@ export const Home = {
       abstract: "Your gateway to government services and information.",
       bannerType: "banner-advanced",
       backgroundType: "with-hero-image",
-      "image.classes": "align-grid",
+      ["image.classes"]: "align-grid",
       callToAction: "buttons",
       buttons: [
         {
@@ -244,18 +232,7 @@ export const ContentPageBasicBanner = {
         "Everything you need to know about registering your vehicle in Queensland.",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        sideNavData.navlist[1],
-        {
-          ...sideNavData.navlist[2],
-          class: "active",
-        },
-        sideNavData.navlist[3],
-      ],
-    },
+    sidenav: sideNavData,
   },
 };
 
@@ -281,18 +258,7 @@ export const ContentPageWithSingleForm = {
       abstract: "Get in touch with us using the form below.",
       breadcrumbs: breadcrumbsData.default,
     },
-    sidenav: {
-      ...sideNavData,
-      navlist: [
-        sideNavData.navlist[0],
-        sideNavData.navlist[1],
-        sideNavData.navlist[2],
-        {
-          ...sideNavData.navlist[3],
-          class: "active",
-        },
-      ],
-    },
+    sidenav: sideNavData,
     content: `
       <h1>Contact Form</h1>
       <p>Please fill out the form below and we'll get back to you as soon as possible.</p>