@qld-gov-au/qgds-bootstrap5 2.0.9 → 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.9","branch":"HEAD","tag":"v2.0.9","commit":"0f12969e32431b89a0e3a8c31cb7d6eb86d06886","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.9",
+  "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/esbuild.js

@@ -21,6 +21,9 @@ import handlebarsPlugin from "esbuild-plugin-handlebars";
 import minimist from "minimist";
 const argv = minimist(process.argv.slice(2));
 
+//Package Name and Version
+const versionString = `${process.env.npm_package_name} - v${process.env.npm_package_version}`;
+
 // https://esbuild.github.io/getting-started/#build-scripts
 const buildConfig = {
   bundle: true,
@@ -59,6 +62,11 @@ const buildConfig = {
     },
   ],
 
+  footer: {
+    css: `/*# ${versionString} */`,
+    js: `//# ${versionString}`,
+  },
+
   loader: {
     ".html": "text",
     ".hbs": "text",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "2.0.9",
+  "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;