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

package/dist/components/bs5/accordion/accordion.hbs

@@ -9,13 +9,13 @@
     <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>

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

@@ -49,13 +49,6 @@
           </div>
           {{/if}}
 
-          {{!-- ~A generic content block for edge cases. Allows any HTML via content variable~ --}}
-          {{#if content}}
-          <div class="banner-extra">
-            {{{ sanitise content }}}
-          </div>
-          {{/if}}
-
         </div>
         {{!-- End banner content --}}
 

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

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.0","branch":"HEAD","tag":"v2.0.0","commit":"443e15b7c2eeeac8f69bea8a5a4cb8298f6a8126","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.2","branch":"HEAD","tag":"v2.0.2","commit":"76ae36d4b0387b0e6fd2e0c8e3c664aaf0d01a96","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/bs5/quickexit/quickexit.hbs

@@ -5,7 +5,7 @@
     <div class="qld-quick-exit-inner container-fluid {{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
       <div class="qg-quick-exit__tips">
         {{#if hasIconInfo}}
-          <span class="qld-icon icon-info"></span>
+          <span class="icon-info"></span>
         {{/if}}
         <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
         <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">

package/dist/package.json

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

package/dist/sample-data/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/package.json

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

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

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

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

@@ -15,7 +15,7 @@ exports[`Accordion > Renders as expected 1`] = `
                 </button>
             </h2>
 
-            <div id="collapse-One" class="accordion-collapse collapse show" aria-labelledby="heading-One">
+            <div id="collapse-One" class="accordion-collapse collapse show" aria-labelledby="heading-One" role="region">
                 <div class="accordion-body">
                     <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> 
                 </div>
@@ -28,7 +28,7 @@ exports[`Accordion > Renders as expected 1`] = `
                 </button>
             </h2>
 
-            <div id="collapse-Two" class="accordion-collapse collapse " aria-labelledby="heading-Two">
+            <div id="collapse-Two" class="accordion-collapse collapse " aria-labelledby="heading-Two" role="region">
                 <div class="accordion-body">
                     <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>
                 </div>
@@ -41,7 +41,7 @@ exports[`Accordion > Renders as expected 1`] = `
                 </button>
             </h2>
 
-            <div id="collapse-Three" class="accordion-collapse collapse " aria-labelledby="heading-Three">
+            <div id="collapse-Three" class="accordion-collapse collapse " aria-labelledby="heading-Three" role="region">
                 <div class="accordion-body">
                     <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>
                 </div>

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

@@ -9,13 +9,13 @@
     <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>

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/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/banner/banner.hbs

@@ -49,13 +49,6 @@
           </div>
           {{/if}}
 
-          {{!-- ~A generic content block for edge cases. Allows any HTML via content variable~ --}}
-          {{#if content}}
-          <div class="banner-extra">
-            {{{ sanitise content }}}
-          </div>
-          {{/if}}
-
         </div>
         {{!-- End banner content --}}
 

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/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 {
@@ -167,6 +170,10 @@ a.btn,
     margin: 0 0.5rem;
   }
 
+  &:hover {
+    --#{$prefix}icon-color: var(--#{$prefix}icon-hover-color);
+  }
+
   &:hover,
   &:visited,
   &:focus {
@@ -196,6 +203,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/footer/Footer.mdx

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

package/src/components/bs5/footer/footer.scss

@@ -41,6 +41,7 @@
   --#{$prefix}footer-color-alt-button__hover: var(
     --#{$prefix}core-default-color-brand-primary-light-green
   );
+  --#{$prefix}footer-color-social-icon: #{$core-default-color-neutral-black};
 
   // ------------------------------------------------------------------------------------------------------------------
   // 2. Colours
@@ -85,6 +86,7 @@
     --#{$prefix}footer-color-focus: var(
       --#{$prefix}color-default-color-dark-underline-default
     );
+    --#{$prefix}footer-color-social-icon: #{$core-default-color-neutral-white};
   }
   &.dark-alt {
     --#{$prefix}footer-color-background: var(
@@ -216,17 +218,6 @@
     &:last-child {
       margin-block-end: 0;
     }
-
-    .qld-icon {
-      --#{$prefix}icon-color: var(--#{$prefix}brand-accent);
-      --qld-brand-accent: var(--#{$prefix}footer-color-alt-button);
-      display: block;
-      background-color: var(--#{$prefix}icon-color);
-
-      &:hover {
-        --qld-brand-accent: var(--#{$prefix}footer-color-alt-button__hover);
-      }
-    }
   }
 
   //Crest Logo
@@ -280,6 +271,8 @@
           }
 
           .qld-icon {
+            --#{$prefix}icon-color: var(--#{$prefix}footer-color-social-icon);
+
             // max-height: unset;
             margin-block-end: 0;