@qld-gov-au/qgds-bootstrap5 2.0.1 → 2.0.3

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

@@ -1,24 +1,25 @@
 {
-	"groupid": "accordion-group-1",
-	"toggleAll": true,
-	"accordionItems": [
-		{
-			"id": "One",
-			"title": "Accordion item #1",
-			"expanded": true,
-			"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas.</p><p>Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p> "
-		},
-		{
-			"id": "Two",
-			"title": "Accordion item #2",
-			"expanded": false,
-			"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
-		},
-		{
-			"id": "Three",
-			"title": "Accordion item #3",
-			"expanded": false,
-			"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><ol><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ol>"
-		}
-	]
-}
+  "groupid": "accordion-group-1",
+  "toggleAll": true,
+  "headingTag": "h2",
+  "accordionItems": [
+    {
+      "id": "One",
+      "title": "Accordion item #1",
+      "expanded": true,
+      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum efficitur egestas.</p><p>Aenean sed pretium mauris. Quisque euismod in nisl et consequat.</p> "
+    },
+    {
+      "id": "Two",
+      "title": "Accordion item #2",
+      "expanded": false,
+      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
+    },
+    {
+      "id": "Three",
+      "title": "Accordion item #3",
+      "expanded": false,
+      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.</p><ol><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ol>"
+    }
+  ]
+}

package/src/components/bs5/accordion/accordion.hbs

@@ -1,6 +1,5 @@
 <!-- QGDS Component: Accordion -->
 <div class="accordion-group">
-
     {{#if toggleAll}}
         <div class="accordion-toggle">
             <button class="accordion-toggle-btn accordion-toggle-btn--closed" type="button">Open all</button>
@@ -9,20 +8,18 @@
     <div class="accordion" id="{{groupid}}">
         {{#each accordionItems }}
         <div class="accordion-item">
-            <h2 class="accordion-header" id="heading-{{id}}">
+            <{{isdefined ../headingTag 'h2'}} class="accordion-header" id="heading-{{id}}">
                 <button class="accordion-button {{#unless expanded}}collapsed{{/unless}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{id}}" aria-expanded="{{expanded}}" aria-controls="collapse-{{id}}">
                     {{title}}
                 </button>
-            </h2>
+            </{{isdefined ../headingTag 'h2'}}>
 
-            <div id="collapse-{{id}}" class="accordion-collapse collapse {{#if expanded}}show{{/if}}" aria-labelledby="heading-{{id}}">
+            <div id="collapse-{{id}}" class="accordion-collapse collapse {{#if expanded}}show{{/if}}" aria-labelledby="heading-{{id}}" role="region">
                 <div class="accordion-body">
                     {{{content}}}
                 </div>
             </div>
         </div>
         {{/each }}
-
     </div>
-
 </div>

package/src/components/bs5/accordion/accordion.scss

@@ -19,13 +19,15 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   .dark &,
   .dark-alt & {
     --#{$prefix}focus: var(--#{$prefix}dark-focus);
-  } 
+  }
 }
 
 .accordion {
   --#{$prefix}accordion-color: var(--#{$prefix}body-color);
   --#{$prefix}accordion-bg: var(--#{$prefix}body-bg);
-  --#{$prefix}accordion-border-color: var(--#{$prefix}color-default-color-light-border-default);
+  --#{$prefix}accordion-border-color: var(
+    --#{$prefix}color-default-color-light-border-default
+  );
   --#{$prefix}accordion-border-width: 1px;
   --#{$prefix}accordion-border-radius: 0;
   --#{$prefix}accordion-inner-border-radius: 0;
@@ -34,7 +36,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   --#{$prefix}accordion-btn-color: var(--#{$prefix}link-color);
   --#{$prefix}accordion-btn-bg: var(--#{$prefix}extra-light-grey);
   --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
-  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+      $accordion-button-active-icon
+    )};
   --#{$prefix}accordion-btn-icon-width: 1.5rem;
   --#{$prefix}accordion-btn-icon-transform: rotate(180deg);
   --#{$prefix}accordion-btn-icon-transition: transform 0.25s ease-in;
@@ -46,7 +50,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   .light & {
     --#{$prefix}accordion-bg: var(--#{$prefix}light-background);
     --#{$prefix}accordion-btn-bg: var(--#{$prefix}light-background-shade);
-    --#{$prefix}accordion-border-color: var(--#{$prefix}color-default-color-light-border-light);
+    --#{$prefix}accordion-border-color: var(
+      --#{$prefix}color-default-color-light-border-light
+    );
   }
 
   .alt & {
@@ -59,7 +65,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   .dark &,
   .dark-alt & {
     --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
-    --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    --#{$prefix}accordion-btn-active-icon: #{escape-svg(
+        $accordion-button-active-icon-dark
+      )};
     --#{$prefix}accordion-color: var(--#{$prefix}white);
     --#{$prefix}accordion-btn-color: var(--#{$prefix}white);
     --#{$prefix}accordion-active-color: var(--#{$prefix}white);
@@ -96,7 +104,9 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
 
     &:hover {
       background: var(--#{$prefix}accordion-bg);
-      text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+      text-decoration-thickness: var(
+        --#{$prefix}link-underline-thickness-hover
+      );
     }
 
     &:focus,
@@ -108,13 +118,14 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
 
   &-header {
     font-weight: var(--#{$prefix}body-font-weight);
+    margin-block-start: 0;
   }
 }
 
 div .accordion-body {
   padding: 1rem;
 
- :last-child {
+  :last-child {
     margin-bottom: 0;
   }
 }
@@ -124,7 +135,7 @@ div .accordion-body {
   display: flex;
   justify-content: flex-end;
   padding: 0;
-  padding-block-end: .5rem;
+  padding-block-end: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
 
@@ -144,7 +155,6 @@ div .accordion-body {
 
     &:hover {
       text-decoration: none;
-
     }
 
     &:after {

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

@@ -12,6 +12,14 @@ export default {
   title: "3. Components/Accordion",
   render: (args) => new Accordion(args).html,
   args: defaultdata,
+  argTypes: {
+    headingTag: {
+      name: "Heading Tag",
+      description: "Heading tag. Can be h2, h3, h4, h5 or h6.",
+      control: "select",
+      options: ["h2", "h3", "h4", "h5", "h6"],
+    },
+  },
 
   /**
    * Additional parameters for the story.

package/src/components/bs5/accordion/accordion.test.js

@@ -1,5 +1,7 @@
 import { expect, it, describe, test } from "vitest";
 import { JSDOM } from "jsdom";
+import Handlebars from "handlebars";
+import handlebarsHelpers from "../../../js/handlebars.helpers.js";
 import { Accordion } from "./Accordion.js";
 import mockData from "./accordion.data.json";
 import fs from "fs";
@@ -30,6 +32,9 @@ const qldBootstrapJsFile = fs.readFileSync(
   "utf-8",
 );
 
+// Register Handlebars helpers before running tests
+handlebarsHelpers(Handlebars);
+
 describe("Accordion", () => {
   const AccordionComponent = new Accordion(mockData);
   const dom = new JSDOM(

package/src/components/bs5/accordion/mdx/_designResources.mdx

@@ -0,0 +1,6 @@
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6276-45691&mode=design&t=chjWFr1CLu6KQXzg-4)
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98109&mode=design&t=ORVHLonASEFQzPeD-0)
+- [Design System website](https://www.design-system.health.qld.gov.au/components/accordions)
+- [Bootstrap component](https://getbootstrap.com/docs/5.3/components/accordion/)

package/src/components/bs5/accordion/mdx/_usageInstructions.mdx

@@ -0,0 +1,10 @@
+<h3>Usage Instructions</h3>
+<div>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat
+  gravida nulla et elementum. Vivamus ac nisl ac nunc mollis tincidunt. Maecenas
+  sagittis sit amet tellus accumsan sagittis. Duis a magna eu sem dapibus auctor
+  sit amet in eros. Ut consectetur augue vitae metus efficitur aliquam. Donec at
+  velit venenatis, vulputate ipsum id, dignissim nibh. Pellentesque nisi mauris,
+  sodales vitae blandit vel, semper eu mi. In vitae lectus nec urna condimentum
+  convallis.
+</div>

package/src/components/bs5/backToTop/backToTop.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as BackToTopStories from "./backToTop.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as BackToTopStories from "./backToTop.stories";
 
 <Meta of={BackToTopStories} />
 
 # Back to Top
-<Canvas>
-  <Story of={BackToTopStories.Default} />
-</Canvas>
+
+<Canvas of={BackToTopStories.Default} />
 
 ## Design resources
 

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

@@ -6,9 +6,7 @@ import defaultdata from "./banner.data.json";
 
 # Banner
 
-<Canvas>
-  <Story of={BannerStories.Default} />
-</Canvas>
+<Canvas of={BannerStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/blockquote/Blockquote.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as BlockquoteStories from "./blockquote.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as BlockquoteStories from "./blockquote.stories";
 
 <Meta of={BlockquoteStories} />
 
 # Blockquote
-<Canvas>
-  <Story of={BlockquoteStories.Default} />
-</Canvas>
+
+<Canvas of={BlockquoteStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/blockquote/blockquote.scss

@@ -1,9 +1,15 @@
 //PREP REUSABLE VARIABLES, SCOPED TO .blockquote
 .blockquote {
   // Colours
-  --#{$prefix}quote-border-color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-  --#{$prefix}quote-text-color: var(--#{$prefix}color-default-color-light-text-heading);
-  --#{$prefix}quote-ref-text-color: var(--#{$prefix}color-default-color-light-text-default);
+  --#{$prefix}quote-border-color: var(
+    --#{$prefix}color-default-color-light-accent-design-accent
+  );
+  --#{$prefix}quote-text-color: var(
+    --#{$prefix}color-default-color-light-text-heading
+  );
+  --#{$prefix}quote-ref-text-color: var(
+    --#{$prefix}color-default-color-light-text-default
+  );
   //Measurements
   --#{$prefix}quote-spacing: 1rem;
   --#{$prefix}quote-border-width: 0.25rem;
@@ -11,13 +17,38 @@
   // Fonts
   --#{$prefix}quote-font-size: 1rem;
   --#{$prefix}quote-heavy-font-weight: 600;
+  --#{$prefix}blockquote-bg: var(--#{$prefix}body-bg);
+
+  .light & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}light-background);
+  }
+
+  .alt & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}light-grey-alt);
+  }
+
+  .dark & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}brand-primary);
+  }
+
+  .dark-alt & {
+    --#{$prefix}blockquote-bg: var(--#{$prefix}dark-blue);
+  }
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}quote-text-color: var(--#{$prefix}white);
+    --#{$prefix}quote-ref-text-color: var(--#{$prefix}white);
+  }
 }
 
 //Ruleset for COMPONENT, reference our scoped variables, or use variables of ::root node
 .blockquote {
-  border-inline-start: var(--#{$prefix}quote-border-width) solid var(--#{$prefix}quote-border-color);
+  background: var(--#{$prefix}blockquote-bg);
+  border-inline-start: var(--#{$prefix}quote-border-width) solid
+    var(--#{$prefix}quote-border-color);
   padding-block: calc(var(--#{$prefix}quote-spacing) * 0.5);
-  padding-inline-start: calc(var(--#{$prefix}quote-spacing) * 1.5);
+  padding-inline-start: calc(var(--#{$prefix}quote-spacing) * 1.25);
   padding-inline-end: calc(var(--#{$prefix}quote-spacing) * 1);
 
   blockquote {
@@ -25,7 +56,7 @@
     margin-block-end: 0;
     color: var(--#{$prefix}quote-text-color);
     font-size: calc(var(--#{$prefix}quote-font-size) * 1.25);
-    line-height: calc(var(--#{$prefix}quote-font-size) * 1.4);
+    line-height: calc(var(--#{$prefix}quote-font-size) * 1.75);
     font-weight: var(--#{$prefix}quote-heavy-font-weight);
     p:last-child {
       margin-block-end: 0;
@@ -34,6 +65,15 @@
   .quote-source {
     color: var(--#{$prefix}quote-ref-text-color);
     font-size: calc(var(--#{$prefix}quote-font-size) * 0.875);
-    margin-block-start: calc(var(--#{$prefix}quote-spacing) * 0.625);
+    margin-block-start: calc(var(--#{$prefix}quote-spacing) * 0.75);
+  }
+
+  > figcaption {
+    background: transparent;
+    color: var(--figure-color);
+
+    display: block;
+    caption-side: bottom;
+    padding: 0;
   }
 }

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

@@ -6,9 +6,7 @@ import defaultdata from "./breadcrumbs.data.json";
 
 # Breadcrumbs
 
-<Canvas>
-  <Story of={BreadcrumbsStories.Default} />
-</Canvas>
+<Canvas of={BreadcrumbsStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/button/Button.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as ButtonStories from "./button.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as ButtonStories from "./button.stories";
 
 <Meta of={ButtonStories} />
 
 # Button
-<Canvas>
-  <Story of={ButtonStories.Default} />
-</Canvas>
+
+<Canvas of={ButtonStories.Default} />
 
 ## Design resources
 

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

@@ -12,6 +12,8 @@
   --#{$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;
+  --#{$prefix}icon-color: var(--qld-action-icon-color);
+  --#{$prefix}icon-hover-color: var(--qld-action-icon-hover-color);
 
   //Primary button variant
   &-primary {
@@ -31,8 +33,9 @@
     --#{$prefix}btn-focus-border-color: var(
       --#{$prefix}color-default-color-light-action-primary-hover
     );
+    --#{$prefix}icon-color: currentColor;
+    --#{$prefix}icon-hover-color: currentColor;
   }
-
   //Secondary button variant
   &-secondary,
   &-outline-secondary {
@@ -162,11 +165,19 @@ a.btn,
   min-height: 3.25rem;
   text-align: center;
 
+  .qld-icon {
+    flex-shrink: 0;
+  }
+
   span[class^="icon-"],
   span[class^="fa-"] {
     margin: 0 0.5rem;
   }
 
+  &:hover {
+    --#{$prefix}icon-color: var(--#{$prefix}icon-hover-color);
+  }
+
   &:hover,
   &:visited,
   &:focus {
@@ -196,6 +207,7 @@ a.btn,
   &:disabled,
   &.disabled {
     --qld-body-color: var(--#{$prefix}btn-disabled-color);
+    --#{$prefix}icon-color: currentColor;
 
     &:visited {
       color: var(--#{$prefix}btn-disabled-color);

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

@@ -6,9 +6,7 @@ import defaultdata from "./callToAction.data.json";
 
 # CallToAction
 
-<Canvas>
-  <Story of={CallToActionStories.Default} />
-</Canvas>
+<Canvas of={CallToActionStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/callout/Callout.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as CalloutStories from "./callout.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as CalloutStories from "./callout.stories";
 
 <Meta of={CalloutStories} />
 
 # Callout
-<Canvas>
-  <Story of={CalloutStories.Default} />
-</Canvas>
+
+<Canvas of={CalloutStories.Default} />
 
 ## Design resources
 

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

@@ -6,9 +6,7 @@ import defaultdata from "./card.data.json";
 
 # Cards
 
-<Canvas>
-  <Story of={CardStories.Default} />
-</Canvas>
+<Canvas of={CardStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/card/card.scss

@@ -65,37 +65,13 @@
     --#{$prefix}card-icon-line-height: 8rem;
   }
   &.card-no-action {
-    .qld-icon {
-      background-color: var(--#{$prefix}card-title-color);
-    }
+    --#{$prefix}icon-color: var(--#{$prefix}card-title-color);
   }
   &.default {
     .card-icon-background {
       background-color: var(--#{$prefix}neutral-lightest);
     }
   }
-  &.card-single-action {
-    .qld-icon {
-      background-color: var(--#{$prefix}light-action-secondary);
-    }
-    &.card-dark,
-    &.card-dark-alt {
-      .qld-icon {
-        background-color: var(--#{$prefix}dark-action-secondary);
-      }
-    }
-  }
-  &.card-multi-action {
-    .qld-icon {
-      background-color: var(--#{$prefix}light-action-secondary);
-    }
-    &.card-dark,
-    &.card-dark-alt {
-      .qld-icon {
-        background-color: var(--#{$prefix}dark-action-secondary);
-      }
-    }
-  }
   &.card-arrow {
     .card-body {
       display: flex;

package/src/components/bs5/directionLinks/DirectionLinks.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as DirectionLinksStories from "./directionLinks.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as DirectionLinksStories from "./directionLinks.stories";
 
 <Meta of={DirectionLinksStories} />
 
 # DirectionLinks
-<Canvas>
-  <Story of={DirectionLinksStories.Default} />
-</Canvas>
+
+<Canvas of={DirectionLinksStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/directionLinks/directionLinks.hbs

@@ -5,5 +5,6 @@
     {{~#if target}} target="{{target}}"{{/if~}}
     {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
   {{{label}}}
-  <span class="icon" aria-hidden="true"></span>
+  {{!-- <span class="icon" aria-hidden="true"></span> --}}
+  <span class="qld-icon qld-icon-md qld-icon-arrow-{{class}}" aria-hidden="true"></span>
 </a>