@qld-gov-au/qgds-bootstrap5 2.1.19 → 2.1.21

package/dist/components/bs5/details/details.hbs

@@ -0,0 +1,10 @@
+<!-- QGDS Component: Details -->
+<details class="qld-details{{#if size}} qld-details-{{size}}{{/if}}"{{#if open}} open{{/if}}>
+	<summary class="qld-details-summary">
+		<span class="qld-details-summary-text">{{summaryText}}</span>
+		
+	</summary>
+	<div class="qld-details-content">
+		{{{content}}}
+	</div>
+</details>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.19","branch":"HEAD","tag":"v2.1.19","commit":"731612952424872bfadbe60c8d4fbb02926c6029","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.1.21","branch":"HEAD","tag":"v2.1.21","commit":"f4639297b6c558a2a4aa08920273ec29f4c018e7","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/header/header.hbs

@@ -6,7 +6,8 @@
             <div class="d-flex justify-content-between">
 
                 <a class="qld-header-link align-self-center"
-                    href="{{#if preHeader.globalLink.url}}{{preHeader.globalLink.url}}{{else}}https://qld.gov.au{{/if}}">
+                    href="{{#if preHeader.globalLink.url}}{{preHeader.globalLink.url}}{{else}}https://qld.gov.au{{/if}}"
+                    aria-label="{{#if preHeader.globalLink.text}}{{preHeader.globalLink.text}}{{else}}Queensland Government{{/if}}">
                     <span class="d-none d-lg-inline">{{preHeader.globalLink.text}}</span>
                     {{#if hasDeliveringForQLDLogo}}
                     {{>logo logo="coa-delivering-for-qld" className="qld-header-logo is-delivering-for-qld" fill="currentColor"}}

package/dist/components/bs5/header/headerBrand.hbs

@@ -1,6 +1,6 @@
 
 <div class="qld-header-brand">
-    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}">
+    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}"{{#unless logo}}{{#unless siteTitle}} aria-label="Queensland Government"{{/unless}}{{/unless}}>
         <div class="qld-header-brand-image align-self-center">
             {{#if logo}}
             <img src="{{logo.src}}" height="56" alt="{{#if logo.altText}}{{logo.altText}}{{else}}Queensland government{{/if}}" />

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -70,19 +70,19 @@
     "autoprefixer": "^10.4.20",
     "chai": "^6.2.1",
     "chalk": "^5.6.2",
-    "chromatic": "^15.0.0",
-    "esbuild": "0.27.3",
+    "chromatic": "^16.3.0",
+    "esbuild": "0.28.0",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-handlebars": "1.0.3",
-    "esbuild-sass-plugin": "3.6.0",
-    "eslint": "10.0.0",
+    "esbuild-sass-plugin": "3.7.0",
+    "eslint": "10.2.1",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
-    "globals": "17.3.0",
+    "globals": "17.5.0",
     "handlebars": "4.7.9",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
     "mocha": "^11.7.5",
@@ -91,7 +91,7 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.38",
     "postcss": "^8.5.6",
-    "prettier": "3.8.1",
+    "prettier": "3.8.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",

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

@@ -0,0 +1,6 @@
+{
+  "summaryText": "Summary",
+  "open": false,
+  "size": "md",
+  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas. Aenean sed pretium mauris.</p>"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "description": "",
   "repository": {
     "type": "git",
@@ -70,19 +70,19 @@
     "autoprefixer": "^10.4.20",
     "chai": "^6.2.1",
     "chalk": "^5.6.2",
-    "chromatic": "^15.0.0",
-    "esbuild": "0.27.3",
+    "chromatic": "^16.3.0",
+    "esbuild": "0.28.0",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-handlebars": "1.0.3",
-    "esbuild-sass-plugin": "3.6.0",
-    "eslint": "10.0.0",
+    "esbuild-sass-plugin": "3.7.0",
+    "eslint": "10.2.1",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-storybook": "^10.1.10",
-    "globals": "17.3.0",
+    "globals": "17.5.0",
     "handlebars": "4.7.9",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.0.0",
     "mini-svg-data-uri": "^1.4.4",
     "minimist": "^1.2.8",
     "mocha": "^11.7.5",
@@ -91,7 +91,7 @@
     "onchange": "^7.1.0",
     "portfinder": "^1.0.38",
     "postcss": "^8.5.6",
-    "prettier": "3.8.1",
+    "prettier": "3.8.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.1.0",
     "run-parallel": "^1.2.0",

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

@@ -96,9 +96,9 @@
     --#{$prefix}banner-padding-top: 2rem;
     --#{$prefix}banner-padding-bottom: 2rem;
 
-    //No banner
+    //No banner — top matches default banner so breadcrumb position is consistent across page types
     &.no-banner {
-      --#{$prefix}banner-padding-top: 1.5rem;
+      --#{$prefix}banner-padding-top: 2rem;
       --#{$prefix}banner-padding-bottom: 1.5rem;
     }
 
@@ -117,7 +117,7 @@
     --#{$prefix}banner-padding-bottom: 3rem;
 
     &.no-banner {
-      --#{$prefix}banner-padding-top: 2rem;
+      --#{$prefix}banner-padding-top: 3rem;
       --#{$prefix}banner-padding-bottom: 2rem;
     }
 
@@ -138,7 +138,7 @@
     --#{$prefix}banner-padding-bottom: 4rem;
 
     &.no-banner {
-      --#{$prefix}banner-padding-top: 2rem;
+      --#{$prefix}banner-padding-top: 3rem;
       --#{$prefix}banner-padding-bottom: 2rem;
     }
 

package/src/components/bs5/callout/callout.scss

@@ -1,69 +1,71 @@
-// Callout Vars
+// Callout
 
 // Default
 .callout {
-    --#{$prefix}callout-padding: 1.5rem 1rem 1.5rem 1.5rem;
-    --#{$prefix}callout-bg-color: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}callout-border-color: var(--#{$prefix}brand-secondary);
-    --#{$prefix}callout-border-width: 0.25rem;
-    --#{$prefix}callout-title-color: var(--#{$prefix}headings-color);
-    --#{$prefix}callout-text-color: var(--#{$prefix}body-color);
-    --#{$prefix}callout-spacer: 1rem;
+  --#{$prefix}callout-padding: 1.5rem 1rem 1.5rem 1.5rem;
+  --#{$prefix}callout-bg-color: var(--#{$prefix}extra-light-grey);
+  --#{$prefix}callout-border-color: var(--#{$prefix}light-accent);
+  --#{$prefix}callout-border-width: 0.25rem;
+  --#{$prefix}callout-title-color: var(--#{$prefix}headings-color);
+  --#{$prefix}callout-text-color: var(--#{$prefix}body-color);
+  --#{$prefix}callout-spacer: 1rem;
 
-    .light & {
-        --#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);
-    }
+  .light & {
+    --#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);
+  }
 
-    .alt & {
-        --#{$prefix}callout-bg-color: var(--#{$prefix}grey);
-    }
+  .alt & {
+    --#{$prefix}callout-bg-color: var(--#{$prefix}grey);
+  }
 
-    .dark &,
-    .dark-alt & {
-        --#{$prefix}callout-title-color: var(--#{$prefix}white);
-        --#{$prefix}callout-text-color: var(--#{$prefix}white);
-    }
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}callout-title-color: var(--#{$prefix}white);
+    --#{$prefix}callout-text-color: var(--#{$prefix}white);
+    --#{$prefix}callout-border-color: var(--#{$prefix}dark-accent);
+  }
 
-    .dark & {
-        --#{$prefix}callout-bg-color: var(--#{$prefix}dark-background-shade);
-    }
+  .dark & {
+    --#{$prefix}callout-bg-color: var(--#{$prefix}dark-background-shade);
+  }
 
-    .dark-alt & {
-        --#{$prefix}callout-bg-color: var(--#{$prefix}dark-blue-shade);
-    }
+  .dark-alt & {
+    --#{$prefix}callout-bg-color: var(--#{$prefix}dark-blue-shade);
+  }
 }
 
 //Dark theme
 //https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode
 
 @include color-mode(dark) {
-
 }
 
 //Define component styles
 .callout {
+  background-color: var(--#{$prefix}callout-bg-color);
+  border-left: solid var(--#{$prefix}callout-border-width)
+    var(--#{$prefix}callout-border-color);
+  padding: var(--#{$prefix}callout-padding);
 
-    background-color: var(--#{$prefix}callout-bg-color);
-    border-left: solid var(--#{$prefix}callout-border-width) var(--#{$prefix}callout-border-color);
-    padding: var(--#{$prefix}callout-padding);
+  &-title {
+    color: var(--#{$prefix}callout-title-color);
+    margin-bottom: 0;
+  }
 
-    &-title {
-        color: var(--#{$prefix}callout-title-color);
-        margin-bottom: 0;
-    }
-
-    &-text {
-        color: var(--#{$prefix}callout-text-color);
+  &-text {
+    color: var(--#{$prefix}callout-text-color);
 
-        p, ul, ol {
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
+    p,
+    ul,
+    ol {
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
+  }
 
-    &-title + &-text {
-        // Add space above text only if there is a title
-        margin-top: var(--#{$prefix}callout-spacer);
-    }
+  &-title + &-text {
+    // Add space above text only if there is a title
+    margin-top: var(--#{$prefix}callout-spacer);
+  }
 }

package/src/components/bs5/details/Details.js

@@ -0,0 +1,8 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./details.hbs?raw";
+
+export class Details {
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "summaryText": "Summary",
+  "open": false,
+  "size": "md",
+  "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas. Aenean sed pretium mauris.</p>"
+}

package/src/components/bs5/details/details.hbs

@@ -0,0 +1,10 @@
+<!-- QGDS Component: Details -->
+<details class="qld-details{{#if size}} qld-details-{{size}}{{/if}}"{{#if open}} open{{/if}}>
+	<summary class="qld-details-summary">
+		<span class="qld-details-summary-text">{{summaryText}}</span>
+		
+	</summary>
+	<div class="qld-details-content">
+		{{{content}}}
+	</div>
+</details>

package/src/components/bs5/details/details.scss

@@ -0,0 +1,169 @@
+// QGDS Component: Details/Summary
+// #{$prefix} defined in main.css
+
+@use "../../../css/mixins" as m;
+@use "../../../css/functions" as f;
+
+// CSS Scoped Variables
+.qld-details {
+  --#{$prefix}details-summary-color: var(--#{$prefix}light-link);
+  --#{$prefix}details-summary-icon-color: var(
+    --#{$prefix}light-action-secondary
+  );
+  --#{$prefix}details-summary-bg: transparent;
+  --#{$prefix}details-summary-bg-hover: var(--#{$prefix}neutral-lightest);
+  --#{$prefix}details-summary-icon-hover: var(
+    --#{$prefix}light-action-secondary-hover
+  );
+
+  --#{$prefix}details-content-color: var(--#{$prefix}light-text);
+  --#{$prefix}details-icon: var(--qgds-icon-chevron-right);
+  --#{$prefix}details-icon-width: 1.25rem;
+  --#{$prefix}details-icon-transition: transform 0.2s ease-in-out;
+  --#{$prefix}details-min-height: 2.75rem; // 44px — lg / default
+  --#{$prefix}details-font-size: 1rem;
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}details-summary-color: var(--#{$prefix}dark-link, #fff);
+    --#{$prefix}details-summary-icon-color: var(
+      --#{$prefix}dark-action-secondary
+    );
+    --#{$prefix}details-summary-bg: var(--#{$prefix}dark-background);
+    
+    --#{$prefix}details-summary-icon-hover: var(
+      --#{$prefix}dark-action-secondary-hover
+    );
+
+    --#{$prefix}details-content-color: var(--#{$prefix}dark-text, #fff);
+  }
+
+  .dark & {
+    --#{$prefix}details-summary-bg-hover: var(--#{$prefix}dark-background-shade);
+  }
+
+  .dark-alt & {
+    --#{$prefix}details-summary-bg-hover: var(
+      --#{$prefix}dark-alt-background-shade
+    );
+  }
+
+  .alt & {
+    --#{$prefix}details-summary-bg-hover: var(--#{$prefix}light-alt-background-shade);
+  }
+
+  .light & {
+    --#{$prefix}details-summary-bg-hover: var(--#{$prefix}light-background-shade);
+  }
+}
+
+// Component styles
+.qld-details {
+  &-summary {
+    align-items: center;
+    
+    display: flex;
+    gap: 0.25rem;
+    //padding: 0.375rem 0.25rem;
+    //margin: -0.375rem -0.25rem;
+    min-height: var(--#{$prefix}details-min-height);
+    cursor: pointer;
+    list-style: none;
+    color: var(--#{$prefix}details-summary-color);
+    font-weight: 400;
+    font-size: var(--#{$prefix}details-font-size);
+    line-height: 1.5rem;
+    user-select: none;
+
+    // Hide native browser disclosure triangle
+    &::-webkit-details-marker,
+    &::marker {
+      display: none;
+    }
+
+    &:hover {
+      .qld-details-summary-text {
+      background-color: var(--#{$prefix}details-summary-bg-hover);
+      color: var(--#{$prefix}details-summary-color);
+      &::before {
+        background-color: var(--#{$prefix}details-summary-icon-hover);
+      }
+    }
+    }
+
+    &:focus {
+      outline: none;
+      .qld-details-summary-text {
+        outline-width: 3px;
+        outline-style: solid;
+        outline-color: var(--#{$prefix}focus-color);
+        outline-offset: 2px;
+    }
+    }
+  }
+
+  &-summary-text {
+    padding: 0.25rem;
+    display: inline-flex;
+    width: 100%;
+    gap: 4px;
+    line-height: f.snap-line-height(1.25);
+    border-radius: 0.25rem;
+
+    // Chevron icon — points right, rotates to down when open
+    &::before {
+      content: "";
+      display: inline-flex;
+      flex-shrink: 0;
+      width: var(--#{$prefix}details-icon-width);
+      height: calc(1.25 * var(--#{$prefix}details-font-size));
+      mask-image: var(--#{$prefix}details-icon);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      -webkit-mask-position: center center;
+      mask-position: center center;
+      background-color: var(--#{$prefix}details-summary-icon-color);
+      transition: var(--#{$prefix}details-icon-transition);
+      align-items: center;
+      align-self: flex-start;
+    }
+  }
+
+  // Rotate chevron to point down when open
+  &[open]  &-summary-text::before {
+    transform: rotate(90deg);
+  }
+
+  &-content {
+    padding-left: 1.5rem;
+    padding-bottom: 0.75rem;
+    font-size: 0.875rem;
+    color: var(--#{$prefix}details-content-color);
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Size variants
+  
+  &-sm {
+    --#{$prefix}details-min-height: 2.75rem; // 44px
+    --#{$prefix}details-font-size: 0.875rem; //14px
+  }
+
+  &-md {
+    --#{$prefix}details-min-height: 2.75rem; // 44px
+    --#{$prefix}details-font-size: 1rem; // default
+  }
+
+  &-lg {
+    --#{$prefix}details-min-height: 2.75rem; // 44px
+    --#{$prefix}details-font-size: 1.25rem; //20px
+  }
+
+  &-xl {
+    --#{$prefix}details-min-height: 2.75rem; // 44px
+    --#{$prefix}details-font-size: 1.5rem; //24px
+  }
+}

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

@@ -0,0 +1,99 @@
+/**
+ * @file details.stories.js
+ * @description Storybook configuration file for the Details component.
+ * @module details.stories
+ */
+
+import { Details } from "./Details.js";
+import defaultdata from "./details.data.json";
+import metadata from "./metadata.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Details",
+  render: (args) => new Details(args).html,
+  args: { ...defaultdata, size: "md" },
+  globals: {
+    backgrounds: { value: "default" },
+  },
+  parameters: {
+    coderefs: {
+      metadata,
+      partialname: "details", //{{> details }}
+    },
+    backgrounds: {
+      disable: false,
+    },
+    docs: {},
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg", "xl"],
+      description: "Size of the details component (sm=44px, md=48px, lg=52px, xl=56px)",
+      defaultValue: "md",
+    },
+  },
+};
+
+/**
+ * Default Details story (collapsed)
+ */
+export const Default = {
+  globals: { backgrounds: { value: "default" } },
+};
+
+/**
+ * Details in open/expanded state
+ */
+export const Open = {
+  args: {
+    ...defaultdata,
+    open: true,
+  },
+  globals: { backgrounds: { value: "default" } },
+};
+
+/**
+ * Details in 'Light' colour theme.
+ */
+export const Light = {
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "light" } },
+  decorators: [
+    (Story) => `<div class="container-fluid light">${Story()}</div>`,
+  ],
+};
+
+/**
+ * Details in 'Alternative' colour theme.
+ */
+export const Alternative = {
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "alt" } },
+  decorators: [
+    (Story) => `<div class="container-fluid alt">${Story()}</div>`,
+  ],
+};
+
+/**
+ * Details in 'Dark' colour theme.
+ */
+export const Dark = {
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "dark" } },
+  decorators: [
+    (Story) => `<div class="container-fluid dark">${Story()}</div>`,
+  ],
+};
+
+/**
+ * Details in 'Dark alternative' colour theme.
+ */
+export const DarkAlternative = {
+  args: { ...defaultdata },
+  globals: { backgrounds: { value: "darkAlt" } },
+  decorators: [
+    (Story) => `<div class="container-fluid dark-alt">${Story()}</div>`,
+  ],
+};

package/src/components/bs5/details/metadata.json

@@ -0,0 +1,15 @@
+{
+  "id": "qgds-details",
+  "title": "Details",
+  "title_uikit": "Details",
+  "type": "Component",
+  "scope": "Core",
+  "group": "",
+  "status": "Published",
+  "synonyms": [],
+  "description": "",
+  "refs": {
+    "uikit": "",
+    "website": ""
+  }
+}

package/src/components/bs5/globalAlert/globalAlert.scss

@@ -65,7 +65,7 @@
       text-wrap: nowrap;
     }
   }
-  
+
   .global-alert-close {
     display: inline-flex;
     justify-content: center;
@@ -107,7 +107,6 @@
       &:focus {
         outline-color: var(--focus-colour);
       }
-      
 
       @include media-breakpoint-down(lg) {
         &:hover {
@@ -200,14 +199,27 @@
 @include media-breakpoint-down(lg) {
   .global-alert {
     .global-alert-content .global-alert-action {
-      margin-inline-end: 2rem;      
+      margin-inline-end: 2rem;
     }
   }
 }
+
 @include media-breakpoint-down(md) {
   .global-alert {
     .global-alert-content {
       padding: 0;
+
+      .global-alert-action {
+        margin-inline-end: 0.5rem;
+
+        a {
+          text-wrap: auto;
+        }
+
+        .qld-icon {
+          min-width: var(--icon-size);
+        }
+      }
     }
   }
 }
@@ -229,6 +241,5 @@
         }
       }
     }
-    
   }
 }

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

@@ -6,7 +6,8 @@
             <div class="d-flex justify-content-between">
 
                 <a class="qld-header-link align-self-center"
-                    href="{{#if preHeader.globalLink.url}}{{preHeader.globalLink.url}}{{else}}https://qld.gov.au{{/if}}">
+                    href="{{#if preHeader.globalLink.url}}{{preHeader.globalLink.url}}{{else}}https://qld.gov.au{{/if}}"
+                    aria-label="{{#if preHeader.globalLink.text}}{{preHeader.globalLink.text}}{{else}}Queensland Government{{/if}}">
                     <span class="d-none d-lg-inline">{{preHeader.globalLink.text}}</span>
                     {{#if hasDeliveringForQLDLogo}}
                     {{>logo logo="coa-delivering-for-qld" className="qld-header-logo is-delivering-for-qld" fill="currentColor"}}

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

@@ -1,6 +1,6 @@
 
 <div class="qld-header-brand">
-    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}">
+    <a class="qld-header-link d-lg-inline-flex align-middle" href="{{url}}"{{#unless logo}}{{#unless siteTitle}} aria-label="Queensland Government"{{/unless}}{{/unless}}>
         <div class="qld-header-brand-image align-self-center">
             {{#if logo}}
             <img src="{{logo.src}}" height="56" alt="{{#if logo.altText}}{{logo.altText}}{{else}}Queensland government{{/if}}" />

package/src/components/bs5/icons/_icons-multicolours.list.scss

@@ -6,5 +6,5 @@ $icons-multicolour: (
   status-information,
   status-maintenance,
   status-success,
-  status-warning,
-)
+  status-warning
+);