@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/src/components/bs5/banner/Banner.mdx

@@ -1,5 +1,6 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
 import * as BannerStories from "./banner.stories";
+import defaultdata from "./banner.data.json";
 
 <Meta of={BannerStories} />
 
@@ -14,3 +15,7 @@ import * as BannerStories from "./banner.stories";
 - [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=10861-449385&mode=design&t=NREcuP5UOBB2Y6G4-4)
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6037-22593&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/banners)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

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

@@ -148,8 +148,8 @@
     }
 
     &.banner-basic {
-      --#{$prefix}banner-padding-top: 2rem;
-      --#{$prefix}banner-padding-bottom: 3rem;
+      --#{$prefix}banner-padding-top: 3rem;
+      --#{$prefix}banner-padding-bottom: 4rem;
     }
 
     // Same as default banner
@@ -478,16 +478,23 @@
   }
 
   .banner-abstract {
-    font-size: 1.5rem;
-    line-height: 2rem;
-    margin: 1.5rem 0 0 0;
+    margin: 1rem 0 0 0;
     max-width: 50rem; //To make readable. Clips line length for very wide viewports.
     color: var(--#{$prefix}banner-abstract-color);
 
-    @include media-breakpoint-down(lg) {
-      font-size: 1.25rem; //20
-      line-height: 1.75rem; //28
-      margin: 1rem 0 0 0;
+    //Mobile typography
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+
+    //Medium and up typography
+    @include media-breakpoint-up(md) {
+      font-size: 1.5rem; //24
+      line-height: 2rem; //32
+    }
+
+    // XL viewports
+    @include media-breakpoint-up(xl) {
+      margin-top: 1.5rem;
     }
   }
 

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

@@ -97,23 +97,23 @@ export default {
 
       // Provide cards or buttons if callToAction is set to true
       switch (args.callToAction) {
-      case "buttons":
-        args.buttons = exampleButtonData;
-        args.cards = false;
-        break;
-      case "cards":
-        args.cards = exampleCardData;
-        args.buttons = false;
-        break;
-      case "cardsMixed":
-        args.cards = exampleMixedCardData;
-        args.buttons = false;
-        break;
-      case "none":
-      default:
-        args.cards = false;
-        args.buttons = false;
-        break;
+        case "buttons":
+          args.buttons = exampleButtonData;
+          args.cards = false;
+          break;
+        case "cards":
+          args.cards = exampleCardData;
+          args.buttons = false;
+          break;
+        case "cardsMixed":
+          args.cards = exampleMixedCardData;
+          args.buttons = false;
+          break;
+        case "none":
+        default:
+          args.cards = false;
+          args.buttons = false;
+          break;
       }
 
       // Return the updated story

package/src/components/bs5/breadcrumbs/Breadcrumbs.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as BreadcrumbsStories from "./breadcrumbs.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as BreadcrumbsStories from "./breadcrumbs.stories";
+import defaultdata from "./breadcrumbs.data.json";
 
 <Meta of={BreadcrumbsStories} />
 
 # Breadcrumbs
+
 <Canvas>
   <Story of={BreadcrumbsStories.Default} />
 </Canvas>
@@ -14,3 +16,7 @@ import * as BreadcrumbsStories from "./breadcrumbs.stories"
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98076&mode=design&t=YLfxdziHdqD2Ty0o-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/breadcrumbs)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/breadcrumb/)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/breadcrumbs/breadcrumbs.functions.js

@@ -133,12 +133,14 @@ export function expandMenu(event) {
   const expandButton = document.querySelector(".breadcrumb-toggle-link");
   expandButton && document.addEventListener("click", collapseMenu);
 }
+
 /**
  * event listener for document click event used to collapse menu on clicking elsewhere
  * and also remove the event listener to prevent multiple listeners from being attached
  * @memberof module:Breadcrumb
  *
  * @param  {Event} event - The event that triggered this function.
+ * @returns {void} Returns nothing.
  */
 function collapseMenu(event) {
   event.stopPropagation();

package/src/components/bs5/breadcrumbs/breadcrumbs.scss

@@ -230,7 +230,7 @@ $expander-icon-color: $qld-light-link;
         transform: rotate(180deg);
         transform-origin: center;
         margin-left: -0.25rem;
-        top: 2px;
+        top: 7px;
         min-width: 1.5rem;
       }
     }

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

@@ -1,10 +1,12 @@
 {
-	"variantClass": "btn-primary",
-	"islink": true,
-	"isdisabled": false,
-	"iconClass": "qld-icon-external-link",
-	"iconPosition": "leading",
-	"label": "Call to action",
-	"href": "https://google.com",
-	"target": "_blank"
+  "variantClass": "btn-primary",
+  "islink": true,
+  "isdisabled": false,
+  "isprogress": false,
+  "progressLabel": "Loading",
+  "iconClass": "qld-icon-external-link",
+  "iconPosition": "leading",
+  "label": "Call to action",
+  "href": "https://google.com",
+  "target": "_blank"
 }

package/src/components/bs5/button/button.hbs

@@ -3,40 +3,58 @@
 <span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
 {{~/inline}} 
 
+{{!-- Progress spinner partial --}}
+{{#*inline "progressSpinner"~}}
+<div class="spinner-border"></div>
+{{~/inline}}
+
 {{#unless islink}}
 
-  <button class="btn {{variantClass}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'leading'}}
-      {{~>buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  
-  {{~label~}}
-  
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'trailing'}}
-      {{>buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
+  <button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
+    {{#if isprogress}}
+      {{~>progressSpinner~}}
+    {{else}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'leading'}}
+          {{~>buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/if}}
+    
+    <span class="btn-label-default">{{~label~}}</span>
+    {{#if isprogress}}
+      <span class="btn-label-progress">{{~progressLabel~}}</span>
+    {{/if}}
+    {{#unless isprogress}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+          {{~>buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/unless}}
   </button>
 
 {{else}}
+  <a class="btn {{variantClass}} {{#if isdisabled}}disabled {{/if}}{{#if isprogress}}disabled btn-progress{{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} {{#if isprogress}}aria-live="polite"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}} {{{dataatts}}}>
+    {{#if isprogress}}
+      {{~>progressSpinner~}}
+    {{else}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'leading'}}
+          {{~> buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/if}}
+    
+    <span class="btn-label-default">{{~label~}}</span>
+    <span class="btn-label-progress">{{~progressLabel~}}</span>
 
-  <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'leading'}}
-      {{~> buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  
-  {{~label~}}
-
-  {{#if iconClass~}}
-    {{#ifCond iconPosition '==' 'trailing'}}
-      {{~> buttonIcon~}}
-    {{/ifCond}}
-  {{/if}}
-  </a>
-
+    {{#unless isprogress}}
+      {{#if iconClass~}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+          {{~> buttonIcon~}}
+        {{/ifCond}}
+      {{/if}}
+    {{/unless}}
+    </a>
 {{/unless}}

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

@@ -11,6 +11,7 @@
   --#{$prefix}btn-border-radius: 0.25rem;
   --#{$prefix}btn-focus-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   --#{$prefix}btn-disabled-opacity: 0.5;
+  --#{$prefix}btn-spinner-icon-size__md: 1.5rem;
 
   //Primary button variant
   &-primary {
@@ -196,6 +197,10 @@ a.btn,
   &.disabled {
     --qld-body-color: var(--#{$prefix}btn-disabled-color);
 
+    &:visited {
+      color: var(--#{$prefix}btn-disabled-color);
+    }
+
     &:focus {
       background-color: var(--#{$prefix}btn-disabled-bg) !important;
       border-color: var(--#{$prefix}btn-disabled-border-color) !important;
@@ -205,6 +210,46 @@ a.btn,
     }
   }
 
+  // Progress state styles
+  &.btn-progress {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .spinner-border {
+      width: var(--#{$prefix}btn-spinner-icon-size__md);
+      height: var(--#{$prefix}btn-spinner-icon-size__md);
+      --qld-spinner-border-width: 0.094rem;
+    }
+
+    .btn-label-default {
+      display: none;
+    }
+
+    .btn-label-progress {
+      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;
+    }
+  }
+
+  // Default state - hide progress label
+  .btn-label-progress {
+    display: none;
+  }
+
+  .btn-label-default {
+    display: inline;
+  }
+
   //Primary button variant
   &-primary {
     box-shadow:
@@ -315,6 +360,12 @@ a.btn,
     outline-offset: 2px;
   }
 
+  // Progress state focus for dark mode
+  &.btn-progress:focus {
+    outline: var(--#{$prefix}dark-focus) solid 3px;
+    outline-offset: 2px;
+  }
+
   &-primary {
     &:focus {
       background-color: var(--#{$prefix}btn-focus-bg);
@@ -362,3 +413,13 @@ a.btn,
     }
   }
 }
+
+// Spinner animation
+@keyframes btn-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -17,8 +17,14 @@ const buttonVariants = {
  * Define different status of button
  */
 const statuses = [
-  { isdisabled: false, label: "Enabled" },
-  { isdisabled: true, label: "Disabled" },
+  { isdisabled: false, isprogress: false, label: "Enabled" },
+  { isdisabled: true, isprogress: false, label: "Disabled" },
+  {
+    isdisabled: false,
+    isprogress: true,
+    progressLabel: "Loading",
+    label: "Progress",
+  },
 ];
 
 /**
@@ -58,6 +64,7 @@ export default {
     <div class="d-flex gap-3">
       ${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}
     </div>
     `; //expand arguments, specifically turn isdisabled into true
   },
@@ -68,6 +75,18 @@ export default {
         disable: true,
       },
     },
+    isprogress: {
+      name: "Progress State",
+      description: "Show loading spinner and progress label",
+      control: "boolean",
+    },
+    progressLabel: {
+      name: "Progress Label",
+      description:
+        "Text to show when in progress state (e.g., 'Loading', 'Saving', 'Please wait')",
+      control: "text",
+      if: { arg: "isprogress", truthy: true },
+    },
     variantClass: {
       name: "Variants",
       description: "Settable variant type for Button component",
@@ -210,14 +229,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>
     `;

package/src/components/bs5/callToAction/callToAction.mdx

@@ -1,16 +1,21 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as CallToActionStories from "./callToAction.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as CallToActionStories from "./callToAction.stories";
+import defaultdata from "./callToAction.data.json";
 
 <Meta of={CallToActionStories} />
 
 # CallToAction
+
 <Canvas>
   <Story of={CallToActionStories.Default} />
 </Canvas>
 
 ## Design resources
 
-
 - [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395565&t=TIV8Ku0uZZw4wtEa-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321367&p=f&t=PtLTzZO7iSzsq4Qn-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/call-to-action-cta)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/card/Card.mdx

@@ -1,9 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as CardStories from "./card--no-action.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as CardStories from "./card--no-action.stories";
+import defaultdata from "./card.data.json";
 
 <Meta of={CardStories} />
 
 # Cards
+
 <Canvas>
   <Story of={CardStories.Default} />
 </Canvas>
@@ -14,3 +16,7 @@ import * as CardStories from "./card--no-action.stories"
 - [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98141&mode=design&t=d1ly5fkj79b8cqJ6-0)
 - [Design System website](https://www.design-system.health.qld.gov.au/components/cards)
 - [Bootstrap component](https://getbootstrap.com/docs/5.3/components/card/)
+
+## Example Component data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

package/src/components/bs5/card/card.hbs

@@ -1,28 +1,23 @@
 <!-- QGDS Partial: card -->
 
 <div class="col{{#if feature}}-md-12 col-lg-12{{/if}}">
-
     <div class="card card-{{variantClass}} {{variantClass}} {{iconPosition}} card-{{action}}-action{{#if arrow}} card-arrow{{/if}}{{#if equalHeight}} h-100{{/if}}{{#if feature}} card-feature card-feature-{{featureImagePosition}}{{/if}}{{#if video}} card-video{{/if}}">
-
         {{#if image}}
         <div class="card-img ratio ratio-16x9">
             <div class="{{#if feature}}card-img-{{featureImagePosition}}{{else}}card-img-top{{/if}}"
             style="--card-image:url({{image}})" alt="{{imageAlt}}"></div>
-
             {{#if video}}
             <div class="video-overlay">
                 <div class="video-nav">
-                    <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
-
+                    <div class="video-watch"><span class="qld-icon qld-icon-lg qld-icon-video" aria-hidden="true"></span><span>Watch</span></div>
                     {{#if videoDuration}}
-                        <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{videoDuration}}</span></div>
+                        <div title="Video duration" class="video-duration"><span class="qld-icon qld-icon-sm qld-icon-clock" aria-hidden="true"></span><span>{{videoDuration}}</span></div>
                     {{/if}}
                 </div>
             </div>
             {{/if}}
         </div>
         {{/if}}
-
         {{#if iconClasses}}
             {{#ifCond iconPosition '==' 'icon-top'}}
                 <div class="card-icon-background">
@@ -35,14 +30,11 @@
                 </div>
             {{/ifCond}}
         {{/if}}
-
         {{#if feature}}<div class="card-inner">{{/if}}
-
             <div class="card-body">
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-
                 <h3 class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
@@ -50,26 +42,20 @@
                     {{ title }}
                     {{/if }}
                 </h3>
-
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}
                 </div>
                 {{/if}}
-
                 {{#if arrow}}
-                <div class="card-icon icon-arrow"></div>
+                    <div class="qld-icon qld-icon-md qld-icon-arrow-right"></div>
                 {{/if}}
             </div>
-
             {{#if footer}}
             <div class="card-footer">
                 {{{footer}}}
             </div>
             {{/if }}
-
         {{#if feature}}</div>{{/if}}
-
     </div>
-
 </div>