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

package/dist/components/bs5/banner/banner.hbs

@@ -1,5 +1,5 @@
 <!-- QGDS Banner Component -->
-  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" role="banner">
+  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" >
     <div class="container-fluid">
       <div class="banner-inner">
 
@@ -10,7 +10,6 @@
         <div class="banner-content">
 
           {{#if title}}
-
           {{!-- titleClasses accepts a "title-block" class --}}
           <h1 class="banner-title-wrap {{ join titleClasses }}">
             <span class="banner-title">{{~title~}}</span>
@@ -52,14 +51,12 @@
         </div>
         {{!-- End banner content --}}
 
-        {{#if image }}
+        {{#ifAll image image.url (cond backgroundType "==" "with-hero-image")}}
         <div class="banner-image {{ join image.classes }}">
           <div class="banner-image-inner" style="background-image:url({{image.url}})" role="img"
             aria-label="{{ image.alt }}"></div>
         </div>
-        {{/if}}
-
+        {{/ifAll}}
       </div>
-
     </div>
   </div>

package/dist/components/bs5/card/card.hbs

@@ -35,13 +35,13 @@
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-                <h3 class="card-title">
+                <{{isdefined headingTag 'h3'}} class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
                     {{else}}
                     {{ title }}
                     {{/if }}
-                </h3>
+                </{{isdefined headingTag 'h3'}}>
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.10","branch":"HEAD","tag":"v2.0.10","commit":"0c2b6d8a1c3232b2314e3f6283476abe5b254c53","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.11","branch":"HEAD","tag":"v2.0.11","commit":"c1bc176e3a8502826203a87dc48aab0bc1bc8770","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/tag/tag.hbs

@@ -1,6 +1,6 @@
 <!-- QGDS Component: Tag -->
 
-<ul class="tag-list {{variant}}">
+<ul class="tag-list {{variant}} {{classes}}">
   {{#each tagItems}}
     <li class="tag-item {{classes}} {{../size}} {{../emphasis}}">
       {{{content}}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "",
   "repository": {
     "type": "git",

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

@@ -1,6 +1,7 @@
 {
   "noAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -20,6 +21,7 @@
   },
   "singleAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -39,6 +41,7 @@
   },
   "multiAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text <a href='javascript:void(0)'>lorem ipsum</a> dolor sit amet.",
     "date": "",
     "variantClass": "default",
@@ -56,4 +59,4 @@
     "footer": "<ul><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li></ul>",
     "equalHeight": false
   }
-}
+}

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

@@ -1,145 +1,151 @@
 {
-	"default": {
-		"variant": "tag-default",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text"
-			},
-			{
-				"id": "Four",
-				"content": "Tag text"
-			}
-		]
-	},
-	"large": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text",
-				"classes": "tag-large"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text",
-				"classes": "tag-large"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text",
-				"classes": "tag-large"
-			}
-		]
-	},
-	"action": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			},
-			{
-				"id": "Two",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			},
-			{
-				"id": "Three",
-				"content": "<a href='javascript:void(0)'>Tag text</a>",
-				"classes": "tag-link"
-			}
-		]
-	},
-	"dark": {
-		"classes": "",
-		"variant": "tag-dark",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text"
-			}
-		]
-	},
-	"info": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Tag text",
-				"classes": "tag-info"
-			},
-			{
-				"id": "Two",
-				"content": "Tag text",
-				"classes": "tag-info"
-			},
-			{
-				"id": "Three",
-				"content": "Tag text",
-				"classes": "tag-info"
-			}
-		]
-	},
-	"filter": {
-		"variant": "",
-		"tagItems": [
-			{
-				"id": "One",
-				"content": "Policies and procedures",
-				"classes": "tag-large",
-				"applied-filter": true
-			},
-			{
-				"id": "Two",
-				"content": "Publications",
-				"classes": "tag-large",
-				"applied-filter": true
-			}
-		]
-	},
-	"status": {
-		"variant": "tag-status",
-		"tagItems": [
-			{
-				"content": "Neutral",
-				"classes": "tag-neutral"
-			},
-			{
-				"content": "Success",
-				"classes": "tag-success"
-			},
-			{
-				"content": "Warning",
-				"classes": "tag-warning"
-			},
-			{
-				"content": "Error",
-				"classes": "tag-error"
-			},
-			{
-				"content": "Information",
-				"classes": "tag-information"
-			}
-		],
-		"size": "tag-small",
-		"emphasis": "tag-low"
-	}
+  "default": {
+    "variant": "tag-default",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text"
+      },
+      {
+        "id": "Four",
+        "content": "Tag text"
+      }
+    ]
+  },
+  "large": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text",
+        "classes": "tag-large"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text",
+        "classes": "tag-large"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text",
+        "classes": "tag-large"
+      }
+    ]
+  },
+  "action": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      },
+      {
+        "id": "Two",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      },
+      {
+        "id": "Three",
+        "content": "<a href='javascript:void(0)'>Tag text</a>",
+        "classes": "tag-link"
+      }
+    ]
+  },
+  "dark": {
+    "classes": "p-4 my-2",
+    "variant": "tag-dark",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text"
+      }
+    ]
+  },
+  "info": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Tag text",
+        "classes": "tag-info"
+      },
+      {
+        "id": "Two",
+        "content": "Tag text",
+        "classes": "tag-info"
+      },
+      {
+        "id": "Three",
+        "content": "Tag text",
+        "classes": "tag-info"
+      }
+    ]
+  },
+  "filter": {
+    "variant": "",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "id": "One",
+        "content": "Policies and procedures",
+        "classes": "tag-large",
+        "applied-filter": true
+      },
+      {
+        "id": "Two",
+        "content": "Publications",
+        "classes": "tag-large",
+        "applied-filter": true
+      }
+    ]
+  },
+  "status": {
+    "variant": "tag-status",
+    "classes": "p-4 my-2",
+    "tagItems": [
+      {
+        "content": "Neutral",
+        "classes": "tag-neutral"
+      },
+      {
+        "content": "Success",
+        "classes": "tag-success"
+      },
+      {
+        "content": "Warning",
+        "classes": "tag-warning"
+      },
+      {
+        "content": "Error",
+        "classes": "tag-error"
+      },
+      {
+        "content": "Information",
+        "classes": "tag-information"
+      }
+    ],
+    "size": "tag-small",
+    "emphasis": "tag-low"
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/bs5/banner/banner.hbs

@@ -1,5 +1,5 @@
 <!-- QGDS Banner Component -->
-  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" role="banner">
+  <div class="qld-banner qld-banner-grid {{ bannerType }} {{ variantClass }} {{ backgroundType }}" >
     <div class="container-fluid">
       <div class="banner-inner">
 
@@ -10,7 +10,6 @@
         <div class="banner-content">
 
           {{#if title}}
-
           {{!-- titleClasses accepts a "title-block" class --}}
           <h1 class="banner-title-wrap {{ join titleClasses }}">
             <span class="banner-title">{{~title~}}</span>
@@ -52,14 +51,12 @@
         </div>
         {{!-- End banner content --}}
 
-        {{#if image }}
+        {{#ifAll image image.url (cond backgroundType "==" "with-hero-image")}}
         <div class="banner-image {{ join image.classes }}">
           <div class="banner-image-inner" style="background-image:url({{image.url}})" role="img"
             aria-label="{{ image.alt }}"></div>
         </div>
-        {{/if}}
-
+        {{/ifAll}}
       </div>
-
     </div>
   </div>

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

@@ -17,7 +17,6 @@
   --#{$prefix}banner-bg-color: var(--#{$prefix}default-background);
   --#{$prefix}banner-bg-texture: url(../img/banner-texture-tile-default.png);
   --#{$prefix}banner-bg-image: url(../img/banner-desktop-default.jpg);
-  --#{$prefix}banner-bg-custom-color: #ebebeb;
 
   //Drop shadow for "block style" banner title
   --#{$prefix}title-box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.06);
@@ -28,14 +27,12 @@
     --#{$prefix}banner-bg-color: var(--#{$prefix}light-background);
     --#{$prefix}banner-bg-texture: url(../img/banner-texture-tile-light.png);
     --#{$prefix}banner-bg-image: url(../img/banner-desktop-light.jpg);
-    --#{$prefix}banner-bg-custom-color: #e6edf5;
   }
 
   &.light-alt {
     --#{$prefix}banner-bg-color: var(--#{$prefix}light-alt-background);
     --#{$prefix}banner-bg-texture: url(../img/banner-texture-tile-light-alt.png);
     --#{$prefix}banner-bg-image: url(../img/banner-desktop-light-alt.jpg);
-    --#{$prefix}banner-bg-custom-color: #dadada;
   }
 
   // .dark only
@@ -45,7 +42,6 @@
     );
     --#{$prefix}banner-bg-texture: url(../img/banner-texture-tile-dark.png);
     --#{$prefix}banner-bg-image: url(../img/banner-desktop-dark.jpg);
-    --#{$prefix}banner-bg-custom-color: #09549f;
   }
 
   // .dark-alt only
@@ -55,7 +51,6 @@
     );
     --#{$prefix}banner-bg-texture: url(../img/banner-texture-tile-dark-alt.png);
     --#{$prefix}banner-bg-image: url(../img/banner-desktop-dark-alt.jpg);
-    --#{$prefix}banner-bg-custom-color: #0c3b71;
   }
 
   &.dark,
@@ -259,8 +254,8 @@
     @include media-breakpoint-down(md) {
       background-image: none;
 
-      .banner-image {
-        margin-top: 0.75rem;
+      .banner-breadcrumbs {
+        margin-bottom: 0.75rem;
       }
 
       //On mobile, create a gap at top of .banner-inner for the background image
@@ -294,6 +289,10 @@
   */
 
   &.with-hero-image {
+    .banner-breadcrumbs {
+      margin-bottom: 0.75rem;
+    }
+
     .banner-image {
       // Pins .banner-image frame to top and bottom rails of the banner
       margin-top: calc(var(--#{$prefix}banner-padding-top) * -1);
@@ -339,6 +338,10 @@
     @include media-breakpoint-up(md) {
       overflow: hidden;
 
+      .banner-breadcrumbs {
+        margin-bottom: 0;
+      }
+
       .banner-image {
         &.align-right {
           // Removes relative positioning from this container.

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

@@ -1,8 +1,5 @@
-// Banner.stories.js
-import Handlebars from "handlebars";
-
-import template from "./banner.hbs?raw";
 import defaultdata from "./banner.data.json";
+import { Banner } from "./Banner";
 
 //Import data objects required for the banner and any nested components
 import breadcrumbdata from "../breadcrumbs/breadcrumbs.data.json";
@@ -74,7 +71,7 @@ export default {
   render: (args) => {
     //Adds breadcrumbs to all banner stories, if it isn't already defined or false
     args.breadcrumbs = args.breadcrumbs || breadcrumbdata["default"];
-    return new Handlebars.compile(template)(args);
+    return new Banner(args).html;
   },
 
   decorators: [

package/src/components/bs5/button/button.scss

@@ -1,6 +1,8 @@
-// QGDS QOL Button
+// QGDS Button
 // extends https://getbootstrap.com/docs/5.3/components/buttons/#variables
 
+@use "../../../css/mixins" as m;
+
 // QGDS specific button variables.
 .btn {
   --#{$prefix}btn-padding-x: 1.5rem;
@@ -175,10 +177,7 @@ a.btn,
     color: var(--#{$prefix}btn-active-color);
   }
 
-  &:focus {
-    outline: var(--#{$prefix}light-blue) solid 3px;
-    outline-offset: 2px;
-  }
+  @include m.focusable();
 
   &:visited {
     color: var(--#{$prefix}btn-color);
@@ -225,12 +224,6 @@ a.btn,
       display: inline;
     }
 
-    // Maintain focus styles for screen readers
-    &:focus {
-      outline: var(--#{$prefix}light-blue) solid 3px;
-      outline-offset: 2px;
-    }
-
     // Remove hover effects
     &:hover {
       text-decoration: none;

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

@@ -45,7 +45,7 @@ function buttonVariantsMarkup() {
         )
         .join("");
 
-      return `<div class="d-grid mb-4">
+      return `<div class="d-grid p-32">
               <div class="fw-bold">${variantLabel}</div>
               <div class="d-flex gap-3">
                 ${variantButtons}
@@ -61,7 +61,7 @@ export default {
   args: defaultdata,
   render: (args) => {
     return `
-    <div class="d-flex gap-3">
+    <div class="d-flex gap-3 p-32">
       ${new Button(args).html}
       ${new Button({ ...args, isdisabled: true }).html}
       ${new Button({ ...args, isprogress: true, iconClass: "", label: "Loading button", progressLabel: "Loading...", islink: false, dataatts: 'data-loading-btn="true"' }).html}
@@ -113,6 +113,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98058&mode=design&t=YBUAJHIxqF46Um9y-0",
     },
+    backgrounds: {
+      disabled: false,
+    },
   },
 };
 
@@ -125,10 +128,9 @@ export const Default = {};
  * Dark Button story
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
+      value: "dark",
     },
   },
   decorators: [
@@ -208,7 +210,7 @@ export const LongLabelsWrapping = {
           isdisabled: true,
         }).html;
 
-        return `<div class="d-grid mb-4" style="max-width: 300px;">
+        return `<div class="d-grid mb-4 " style="max-width: 300px;">
                 <div class="fw-bold">${variantLabel} - Long Labels</div>
                 <div class="d-grid gap-2">
                   ${longLabelButton}
@@ -219,7 +221,7 @@ export const LongLabelsWrapping = {
       .join("");
 
     return `
-      <div class="d-grid gap-4">
+      <div class="d-grid gap-4 p-32">
         <div>
           <h5 class="mb-3">Buttons with Long Labels (300px container)</h5>
           <div class="d-flex flex-wrap gap-4">
@@ -229,14 +231,14 @@ export const LongLabelsWrapping = {
         <div style="max-width: 200px;">
           <h5 class="mb-3">Even Narrower Container (200px)</h5>
           ${
-  new Button({
-    ...defaultdata,
-    iconClass: "", // no icon for this demo
-    variantClass: "btn-primary",
-    label: "Long button text in a narrow container",
-    isdisabled: false,
-  }).html
-}
+            new Button({
+              ...defaultdata,
+              iconClass: "", // no icon for this demo
+              variantClass: "btn-primary",
+              label: "Long button text in a narrow container",
+              isdisabled: false,
+            }).html
+          }
         </div>
       </div>
     `;