@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.15

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "",
   "repository": {
     "type": "git",
-    "url": "https://github.com/qld-gov-au/qgds-qol-mvp"
+    "url": "https://github.com/qld-gov-au/qgds-bootstrap5"
   },
   "main": "index.js",
   "scripts": {
@@ -39,34 +39,35 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.19.0"
+    "material-symbols": "^0.20.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
     "@qld-gov-au/qgds-tokens": "^1.2.0",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-mdx-gfm": "^8.1.5",
-    "@storybook/addon-themes": "^8.1.5",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
+    "@storybook/addon-mdx-gfm": "^8.1.6",
+    "@storybook/addon-themes": "^8.1.6",
     "@storybook/blocks": "^8.1.2",
-    "@storybook/cli": "^8.1.5",
-    "@storybook/html": "^8.1.5",
-    "@storybook/html-vite": "^8.1.5",
-    "@storybook/manager-api": "^8.1.5",
+    "@storybook/cli": "^8.1.6",
+    "@storybook/html": "^8.1.6",
+    "@storybook/html-vite": "^8.1.6",
+    "@storybook/manager-api": "^8.1.6",
     "@storybook/test": "^8.1.2",
     "@storybook/theming": "^8.1.5",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue": "5.0.5",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.15",
     "chalk": "^5.3.0",
-    "chromatic": "^11.4.1",
+    "chromatic": "^11.5.3",
     "esbuild": "0.21.4",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
-    "esbuild-sass-plugin": "3.3.0",
+    "esbuild-sass-plugin": "3.3.1",
     "eslint": "8.57.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-storybook": "^0.8.0",
@@ -76,12 +77,12 @@
     "npm-run-all2": "^6.1.2",
     "onchange": "^7.1.0",
     "postcss": "^8.4.29",
-    "prettier": "3.2.5",
+    "prettier": "3.3.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.3",
-    "storybook": "^8.1.5",
-    "vite": "^5.2.12",
+    "sass": "^1.77.4",
+    "storybook": "^8.1.6",
+    "vite": "^5.2.13",
     "watch": "^1.0.2"
   },
   "peerDependencies": {

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

@@ -1,37 +1,66 @@
+/**
+ * Initialise the Breadcrumb component.
+ * Shorten long breadcrumbs when required.
+ *
+ * @memberof module:Breadcrumb
+ *
+ * @returns {void} Returns early when breadcrumb does not exist or its length is within set maxLength. 
+ */
+export function initBreadcrumb() {
+  // Set the standard breadcrumb length.
+  const maxLength = 4;
+
+  // Get the breadcrumb DOM element.
+  const breadcrumb = document.querySelector('.breadcrumb');
+  if (!breadcrumb) {
+    return;
+  }
+  const breadcrumbList = breadcrumb.querySelectorAll('.breadcrumb-item');
+
+  // Return when breadcrumb does not exist.
+  if (!breadcrumbList || !breadcrumbList.length) {
+    return;
+  }
+  // Shorten breadcrumb.
+  breadcrumbShorten(breadcrumbList, maxLength);
+}
+
 /**
  * Shorten long breadcrumb lists
  *
  * @memberof module:Breadcrumb
  *
- * @param  {Object}  event - The event that triggered this function.
- * @returns {void}
+ * @param  {Element} breadcrumbList - Breadcrumb DOM element.
+ * @param  {number} maxLength - Standard maximum length for breadcrumb.
+ * @returns {void} Returns early when breadcrumb does not exist or its length is within set maxLength.
  */
-export function breadcrumbShorten () {
-  let breadcrumbList = document.querySelector('.breadcrumb').querySelectorAll('.breadcrumb-item')
-
-  if (breadcrumbList.length > 4) {
-    breadcrumbList.forEach((crumb, index) => {
-      if (index > 1 && index < breadcrumbList.length - 2) {
-        crumb.classList.add('shortened')
-        crumb.querySelector('a').setAttribute('tabindex',-1)
-      }
-
-      if (index === 1) {
-        let expandCrumb = document.createElement('li'),
-          expandButton = document.createElement('a')
-
-        expandCrumb.classList.add('breadcrumb-item','breadcrumb-toggle')
-
-        expandButton.setAttribute('href', 'javascript:void(0)')
-        expandButton.setAttribute('aria-label', 'Expand the breadcrumbs')
-        expandButton.textContent = '[...]'
-        expandButton.addEventListener('click', breadcrumbExpand)
-
-        expandCrumb.appendChild(expandButton)
-        crumb.after(expandCrumb)
-      }
-    })
+export function breadcrumbShorten(breadcrumbList, maxLength = 4) {
+  // No shortening is required when breadcrumb does not exist or its length is within the maximum range.
+  if (!breadcrumbList || breadcrumbList.length <= maxLength) {
+    return;
   }
+
+  breadcrumbList.forEach((crumb, index) => {
+    if (index > 1 && index < breadcrumbList.length - 2) {
+      crumb.classList.add('shortened')
+      crumb.querySelector('a').setAttribute('tabindex',-1)
+    }
+
+    if (index === 1) {
+      let expandCrumb = document.createElement('li'),
+        expandButton = document.createElement('a')
+
+      expandCrumb.classList.add('breadcrumb-item','breadcrumb-toggle')
+
+      expandButton.setAttribute('href', 'javascript:void(0)')
+      expandButton.setAttribute('aria-label', 'Expand the breadcrumbs')
+      expandButton.textContent = '[...]'
+      expandButton.addEventListener('click', breadcrumbExpand)
+
+      expandCrumb.appendChild(expandButton)
+      crumb.after(expandCrumb)
+    }
+  })
 }
 
 /**
@@ -39,12 +68,22 @@ export function breadcrumbShorten () {
  *
  * @memberof module:Breadcrumb
  *
- * @param  {Object}  event - The event that triggered this function.
- * @returns {void}
+ * @param  {Event} event - The event that triggered this function.
+ * @returns {void} Returns early when the breadcrumb does not exist or is empty.
  */
-export function breadcrumbExpand () {
-  let breadcrumbList = document.querySelector('.breadcrumb').querySelectorAll('.breadcrumb-item')
+export function breadcrumbExpand(event) {
+  const breadcrumb = event.target.closest('.breadcrumb');
+  if (!breadcrumb) {
+    console.log('breadcrumbExpand: Breadcrumb does not exist.');
+    return;
+  }
+  const breadcrumbList = breadcrumb.querySelectorAll('.breadcrumb-item');
 
+  if (!breadcrumbList || !breadcrumbList.length) {
+    console.log('breadcrumbExpand: Breadcrumb does not exist or is empty.');
+    return;
+  }
+  
   breadcrumbList[0].parentElement.classList.add('expanded')
 
   breadcrumbList.forEach((crumb, index) => {
@@ -53,4 +92,4 @@ export function breadcrumbExpand () {
       crumb.querySelector('a').setAttribute('tabindex', 0)
     }
   })
-}
+}

package/src/components/bs5/breadcrumbs/breadcrumbs.hbs

@@ -9,7 +9,7 @@
             {{/unless}}
             {{! print the current page as plain text}}
             {{#if @last}}
-            <li class="breadcrumb-item active" aria-current="page">{{linktext}}</li>
+            <li class="breadcrumb-item active" aria-current="page" data-href="{{link}}">{{linktext}}</li>
             {{/if}}
         {{/each}}
     </ol>

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

@@ -3,7 +3,8 @@
 	"islink": true,
 	"isdisabled": false,
 	"iconClass": "fa-solid fa-arrow-up-right-from-square",
-	"href": "https://google.com",
+	"iconPosition": "leading",
 	"label": "Call to action",
+	"href": "https://google.com",
 	"target": "_blank"
 }

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

@@ -1,11 +1,32 @@
-{{#unless islink}}
-<button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-{{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
-</button>
 
-{{else}}
+    {{#unless islink}}
+    <button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'leading'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    {{label}}
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    </button>
 
-<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}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
-</a>
-{{/unless }}
+    {{else}}
+
+    <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'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{/ifCond}}
+        {{/if}}
+        {{label}}
+        {{#if iconClass}}
+            {{#ifCond iconPosition '==' 'trailing'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{/ifCond}}
+        {{/if}}
+    </a>
+    {{/unless }}

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

@@ -1,5 +1,8 @@
+// QGDS QOL Button
+// extends https://getbootstrap.com/docs/5.3/components/buttons/#variables
+
 .btn {
-    --#{$prefix}btn-padding-x: 1rem;
+    --#{$prefix}btn-padding-x: 1.5rem;
     --#{$prefix}btn-padding-y: 0.75rem;
     --#{$prefix}btn-font-family: #{$font-family-sans-serif};
     --#{$prefix}btn-border-width: 3px;
@@ -8,50 +11,60 @@
     --#{$prefix}btn-focus-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);
     --#{$prefix}btn-disabled-opacity: 0.5;
 
+    //Primary button variant
     &-primary {
-    --#{$prefix}btn-bg: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}button-dark-blue);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light-grey-alt);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: transparent;
+        --#{$prefix}btn-bg: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}button-dark-blue);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: transparent;
     }
+
+    //Secondary button variant
     &-secondary,
     &-outline-secondary {
-    --#{$prefix}btn-bg: transparent;
-    --#{$prefix}btn-color: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
-    --#{$prefix}btn-hover-color: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-hover-bg: transparent;
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}alt-button-hover);
-    --#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-shadow: none;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light-grey-alt);
-    --#{$prefix}gradient: none;
+        --#{$prefix}btn-bg: transparent;
+        --#{$prefix}btn-color: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
+        --#{$prefix}btn-hover-color: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-hover-bg: transparent;
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}alt-button-hover);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-shadow: none;
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
+        --#{$prefix}gradient: none;
     }
+
+    //Tertiary button variant
     &-tertiary {
-    --#{$prefix}btn-color: #{$primary};
-    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-hover-color: #{$primary};
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
-    --#{$prefix}btn-active-bg: transparent;
-    --#{$prefix}btn-active-shadow: none;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}gradient: none;
+        --#{$prefix}btn-color: #{$primary};
+        --#{$prefix}btn-border-color: transparent;
+        --#{$prefix}btn-hover-color: #{$primary};
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-hover-border-color: transparent;
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-active-bg: transparent;
+        --#{$prefix}btn-active-shadow: none;
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: transparent;
+        --#{$prefix}gradient: none;
     }
-    .dark &, .dark-alt & {
+}
+
+.dark .btn,
+.dark-alt .btn {
+
+    //Primary button variant (dark mode)
     &-primary {
         --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
         --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
@@ -64,7 +77,9 @@
         --#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: transparent;
-        }
+    }
+
+    //Secondary button variant (dark mode)
     &-secondary,
     &-outline-secondary {
         --#{$prefix}btn-border-color: var(--#{$prefix}golden-yellow);
@@ -78,6 +93,8 @@
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
     }
+
+    //Tertiary button variant (dark mode)
     &-tertiary {
         --#{$prefix}btn-color: var(--#{$prefix}white);
         --#{$prefix}btn-bg: transparent;
@@ -91,16 +108,17 @@
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: transparent;
     }
-    }
 }
+
 a.btn, .btn {
     white-space: nowrap;
+
     span[class^=icon-],
     span[class^=fa-] {
-        margin-right: 0.5rem;
+        margin: 0 0.5rem;
     }
     .btn-icon {
-        margin-right: 0.5em;
+        margin: 0 0.5em;
     }
     &:hover, &:visited, &:focus {
         color: var(--#{$prefix}btn-color);
@@ -121,6 +139,8 @@ a.btn, .btn {
     &.disabled {
         color: var(--#{$prefix}btn-disabled-color);
     }
+
+    //Primary button variant
     &-primary {
         box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2);
 
@@ -140,6 +160,8 @@ a.btn, .btn {
             box-shadow: none;
         }
     }
+
+    //Secondary button variant
     &-secondary,
     &-outline-secondary {
         .btn-icon {
@@ -169,6 +191,8 @@ a.btn, .btn {
             }
         }
     }
+
+    //Tertiary button variant
     &-tertiary {
         text-decoration: underline;
         text-underline-offset: 0.3em;
@@ -195,11 +219,14 @@ a.btn, .btn {
             }
         }
     }
+
+    //Dark mode button variants
     .dark &, .dark-alt & {
         &:focus {
             outline: var(--#{$prefix}dark-focus) solid 3px;
             outline-offset: 2px;
-            }
+        }
+
         &-secondary,
         &-outline-secondary {
             color: var(--#{$prefix}btn-disabled-color);
@@ -209,10 +236,15 @@ a.btn, .btn {
             .btn-icon {
                 color: var(--#{$prefix}golden-yellow);
             }
+            &:hover {
+                .btn-icon {
+                    color: var(--#{$prefix}dark-action-secondary-hover);
+                }
+            }
             &:active {
                 text-decoration: none;
                 .btn-icon {
-                    color: var(--#{$prefix}btn-active-color);
+                    color: var(--#{$prefix}white);
                 }
             }
             &:disabled, &.disabled {
@@ -224,3 +256,14 @@ a.btn, .btn {
     }
 }
 
+// Buttons grouping using btn-toolbar.
+.btn-toolbar .btn {
+    @include media-breakpoint-down(md) {
+        width: 100%;
+        margin: 24px 0;
+    }
+    @include media-breakpoint-up(md) {
+        margin: 1.5rem; 
+    }
+    min-width: 160px;
+}

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

@@ -2,17 +2,30 @@
 import { Button } from './Button.js';
 import defaultdata from './button.data.json';
 
+/**
+ * Define the variants for Button component.
+ * Object key: variant's CSS class.
+ * Object value: variant's label on Storybook.
+ */
+const buttonVariants = {
+  "btn-primary": "Primary",
+  "btn-secondary": "Secondary",
+  "btn-tertiary": "Tertiary",
+}
+
 export default {
   tags: ['autodocs'],
   title: 'Components/Button',
+  args: defaultdata,
   render: (args) => {
     return `
-    ${new Button(args).html}
-    ${new Button({...args, isdisabled: true}).html}
+    <div class="btn-toolbar">
+      ${new Button(args).html}
+      ${new Button({...args, isdisabled: true}).html}
+    </div>
     `//expand arguments, specifically turn isdisabled into true
   },
 
-  //https://storybook.js.org/docs/api/arg-types 
   argTypes: {
     isdisabled: {
       table: {
@@ -21,20 +34,21 @@ export default {
     },
     variantClass: {
       name: "Variants",
-      description: `Settable variant for the component`,
+      description: 'Settable variant type for Button component',
       control: {
         type: "radio",
-        labels: {
-          "btn-primary": "Primary",
-          "btn-secondary": "Secondary",
-          "btn-tertiary": "Tertiary",
-        },
+        labels: buttonVariants,
       },
-      options: [
-        "btn-primary",
-        "btn-secondary",
-        "btn-tertiary",
-      ],
+      options: Object.keys(buttonVariants),
+    },
+    iconPosition: {
+      description: 'Position of the icon placement',
+      control: "radio",
+      options: ["leading", "trailing"],
+    },
+    target: {
+      control: "select",
+      options: ["_self", "_blank", "_parent", "_top"],
     },
   },
 
@@ -44,26 +58,18 @@ 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",
     },
-    docs: {
-      controls: {
-      },
-    },
   },
-
-
 };
 
-// Default blockquote story
-export const Default = {
-  args: defaultdata,
-};
+/**
+ * Default Button story
+ */
+export const Default = {};
 
 /**
- * Dark Breadcrumbs story
+ * Dark Button story
  * */
 export const Dark = {
-  
-  args: defaultdata,
   parameters: {
     backgrounds: {
       default: 'Dark',
@@ -82,3 +88,91 @@ export const Dark = {
     },
   ],
 };
+
+/**
+ * Show all button variants in the Default Light mode.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllVariantsInDefaultMode = {
+  render:() => {
+    const states = [
+      { isdisabled: false, label: 'Enabled' },
+      { isdisabled: true, label: 'Disabled' },
+    ];
+
+    /* Return all button variants with label = variant + state */
+    return Object.entries(buttonVariants).map(([variantClass, variantLabel]) => {
+      const variantButtons = states.map(state =>
+        new Button({
+          ...defaultdata,
+          variantClass,
+          ...state,
+          label: state.label,
+        }).html,
+      ).join('');
+
+      return `<div class="d-grid mb-4">
+                <div class="fw-bold">${variantLabel}</div>
+                <div class="btn-toolbar">
+                  ${variantButtons}
+                </div>
+              </div>`;
+
+    }).join('');
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+/**
+ * Show all button variants in the Dark mode.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllVariantsInDarkMode = {
+  render:() => {
+    const states = [
+      { isdisabled: false, label: 'Enabled' },
+      { isdisabled: true, label: 'Disabled' },
+    ];
+
+    /* Return all button variants with label = variant + state */
+    return Object.entries(buttonVariants).map(([variantClass, variantLabel]) => {
+      const variantButtons = states.map(state =>
+        new Button({
+          ...defaultdata,
+          variantClass,
+          ...state,
+          label: state.label,
+        }).html,
+      ).join('');
+
+      return `<div class="d-grid mb-4">
+                <div class="fw-bold">${variantLabel}</div>
+                <div class="btn-toolbar">
+                  ${variantButtons}
+                </div>
+              </div>`;
+
+    }).join('');
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+    },
+    controls: {
+      disable: true,
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};