@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

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

@@ -0,0 +1,36 @@
+//PREP REUSABLE VARIABLES, SCOPED TO .blockquote
+.blockquote {
+
+    //DEFAULT
+    --#{$prefix}quote-padding: 1.5rem 1rem 1.5rem 1.5rem;
+    --#{$prefix}quote-border-color: var(--qld-syntax-values);
+    --#{$prefix}quote-text-color: var(--qld-light-text-text);
+    --#{$prefix}quote-font-size: 1.25rem;
+    --#{$prefix}quote-line-height: 1.4;
+    --#{$prefix}quote-border-width: 0.25rem;
+}
+
+//Ruleset for COMPONENT, reference our scoped variables, or use variables of ::root node
+.blockquote {
+    border-left: solid var(--#{$prefix}quote-border-width) var(--#{$prefix}quote-border-color);
+    padding: var(--#{$prefix}quote-padding);
+
+    blockquote {
+
+        max-width: 54rem;
+        margin-bottom: 0;
+        color: var(--#{$prefix}quote-text-color);
+        font-size: var(--#{$prefix}quote-font-size);
+        line-height: var(--#{$prefix}quote-line-height);
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .quote-source {
+        color: var(--qld-dark-grey-muted);
+        font-size: 0.875rem;
+        margin-top: 0.625rem;
+    }
+}

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

@@ -0,0 +1,63 @@
+// Blockquote.stories.js
+import { Blockquote } from './Blockquote.js';
+import defaultdata from './blockquote.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Blockquote',
+  render: (args) => new Blockquote(args).html,
+};
+
+/**
+ * Default blockquote
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+
+/**
+ * Light colour blockquote
+ */
+export const Light = {
+  args: defaultdata,
+  parameters: {
+    backgrounds: {
+      default: 'light',
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="light">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Alternative colour blockquote
+ */
+export const Alternative = {
+  args: defaultdata,
+  parameters: {
+    backgrounds: {
+      default: 'alternative',
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="alt">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};

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

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./breadcrumbs.hbs?raw";
+
+export class Breadcrumbs {
+
+  // Use the global Component class to create a new instance of the Breadcrumbs component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as BreadcrumbsStories from "./breadcrumbs.stories"
+
+<Meta of={BreadcrumbsStories} />
+
+# Breadcrumbs
+<Canvas>
+  <Story of={BreadcrumbsStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=11185-261509&mode=design&t=NREcuP5UOBB2Y6G4-4)
+- [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/)

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

@@ -0,0 +1,96 @@
+//Breadcrumbs: https://getbootstrap.com/docs/5.3/components/breadcrumb/#sass-variables
+
+$breadcrumb-divider-color: $qld-brand-secondary-dark;
+$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#{$breadcrumb-divider-color}' d='M234.8 36.25c3.438 3.141 5.156 7.438 5.156 11.75c0 3.891-1.406 7.781-4.25 10.86L53.77 256l181.1 197.1c6 6.5 5.625 16.64-.9062 22.61c-6.5 6-16.59 5.594-22.59-.8906l-192-208c-5.688-6.156-5.688-15.56 0-21.72l192-208C218.2 30.66 228.3 30.25 234.8 36.25z'/%3E%3C/svg%3E");
+$breadcrumb-divider-flipped: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='#{$breadcrumb-divider-color}'><path d='M85.14 475.8c-3.438-3.141-5.156-7.438-5.156-11.75c0-3.891 1.406-7.781 4.25-10.86l181.1-197.1L84.23 58.86c-6-6.5-5.625-16.64 .9062-22.61c6.5-6 16.59-5.594 22.59 .8906l192 208c5.688 6.156 5.688 15.56 0 21.72l-192 208C101.7 481.3 91.64 481.8 85.14 475.8z'/></svg>");
+
+$breadcrumb-divider-dark-color: $qld-brand-accent;
+$breadcrumb-divider-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#{$breadcrumb-divider-dark-color}' d='M234.8 36.25c3.438 3.141 5.156 7.438 5.156 11.75c0 3.891-1.406 7.781-4.25 10.86L53.77 256l181.1 197.1c6 6.5 5.625 16.64-.9062 22.61c-6.5 6-16.59 5.594-22.59-.8906l-192-208c-5.688-6.156-5.688-15.56 0-21.72l192-208C218.2 30.66 228.3 30.25 234.8 36.25z'/%3E%3C/svg%3E");
+$breadcrumb-divider-dark-flipped: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='#{$breadcrumb-divider-dark-color}'><path d='M85.14 475.8c-3.438-3.141-5.156-7.438-5.156-11.75c0-3.891 1.406-7.781 4.25-10.86l181.1-197.1L84.23 58.86c-6-6.5-5.625-16.64 .9062-22.61c6.5-6 16.59-5.594 22.59 .8906l192 208c5.688 6.156 5.688 15.56 0 21.72l-192 208C101.7 481.3 91.64 481.8 85.14 475.8z'/></svg>");
+
+//OR using custom CSS properties scoped to the component
+.breadcrumb {
+    --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider)};
+    --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-flipped)};
+    --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}dark-grey-muted);
+    --#{$prefix}breadcrumb-bg: transparent;
+    --#{$prefix}breadcrumb-margin-bottom: 0;
+    --#{$prefix}breadcrumb-padding-y: 1.5rem 0 1rem;
+
+    .dark &,
+    .dark-alt & {
+        --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}white);
+        --#{$prefix}breadcrumb-divider: #{escape-svg($breadcrumb-divider-dark)};
+        --#{$prefix}breadcrumb-divider-flipped: #{escape-svg($breadcrumb-divider-dark-flipped)};
+    }
+
+}
+
+@include color-mode(dark) {
+
+}
+
+.breadcrumb {
+    font-size: 0.875rem;
+}
+
+.breadcrumb-item {
+    // Show only parent page breadcrumb on small screens
+    display: none;
+
+    &:nth-last-child(2) {
+        display: list-item;
+
+        &:before {
+            content: var(--#{$prefix}breadcrumb-divider);
+            float: left;
+            padding-right: var(--qld-breadcrumb-item-padding-x);
+            width: 1rem;
+        }
+    }
+
+    + .breadcrumb-item {
+        &:before {
+            width: 1rem;
+        }
+    }
+}
+
+@include media-breakpoint-up(md) {
+    .breadcrumb {
+        --#{$prefix}breadcrumb-padding-y: 2.5rem 0 1.5rem;
+    }
+
+    .breadcrumb-item {
+        + .breadcrumb-item:before {
+            content: var(--#{$prefix}breadcrumb-divider-flipped)
+        }
+        // Show current and parent page on medium screens
+        &:last-child {
+            display: list-item;
+        }
+
+        &:nth-last-child(2):before {
+            // Hide divider before parent page
+            content: none;
+        }
+    }
+}
+
+@include media-breakpoint-up(lg) {
+
+    .breadcrumb {
+        --#{$prefix}breadcrumb-padding-y: 3rem 0 2rem;
+
+        font-size: 1rem;
+    }
+    .breadcrumb-item {
+        // Show all breadcrumbs on large screens
+        display: list-item;
+
+        &:nth-last-child(2):not(:first-child):before {
+            // Show divider before parent page
+            content: var(--#{$prefix}breadcrumb-divider-flipped);
+        }
+    }
+}

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

@@ -0,0 +1,72 @@
+// Blockquote.stories.js
+import { Breadcrumbs } from './Breadcrumbs.js';
+import defaultdata from './breadcrumbs.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Breadcrumbs',
+  args: defaultdata.default,
+  render: (args) => new Breadcrumbs(args).html,
+
+  argTypes: {
+    breadcrumbs: {
+      name: 'Breadcrumbs',
+      control: 'object',
+      description: `Pass a JSON object containing an array of links to the component.`,
+    },
+  },
+
+  /**
+   * Additional parameters for the story.
+   *
+   * @type {Object}
+   * @property {Object} design - Configuration for the design parameter.
+   * @property {string} design.name - Name of the design parameter.
+   * @property {string} design.type - Type of the design parameter.
+   * @property {string} design.url - URL of the design parameter.
+   */
+  parameters: {
+    design: {
+      name: "QGDS Figma Reference",
+      type: "figma",
+      url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98076&mode=design&t=Ge7frKNP4uEGswUz-0",
+    },
+  },
+};
+
+/**
+ * Default Breadcrumbs story
+ * */
+export const Default = { };
+
+/**
+ * Dark Breadcrumbs story
+ * */
+export const Dark = {
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="dark">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Deep page Breadcrumbs example
+ * */
+export const DeepPage = {
+  args: defaultdata.forGov,
+};

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

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./button.hbs?raw";
+
+export class Button {
+
+  // Use the global Component class to create a new instance of the Button component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as ButtonStories from "./button.stories"
+
+<Meta of={ButtonStories} />
+
+# Button
+<Canvas>
+  <Story of={ButtonStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6274-44764&mode=design&t=NREcuP5UOBB2Y6G4-4)
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98058&mode=design&t=YLfxdziHdqD2Ty0o-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/buttons)
+- [Bootstrap component](https://getbootstrap.com/docs/5.3/components/buttons/)

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

@@ -0,0 +1,226 @@
+.btn {
+    --#{$prefix}btn-padding-x: 1rem;
+    --#{$prefix}btn-padding-y: 0.75rem;
+    --#{$prefix}btn-font-family: #{$font-family-sans-serif};
+    --#{$prefix}btn-border-width: 3px;
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$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;
+
+    &-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;
+    }
+    &-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;
+    }
+    &-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;
+    }
+    .dark &, .dark-alt & {
+    &-primary {
+        --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
+        --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
+        --#{$prefix}btn-color: var(--#{$prefix}text-darkest);
+        --#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}light-green-dark);
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}light-green-dark);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$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,
+    &-outline-secondary {
+        --#{$prefix}btn-border-color: var(--#{$prefix}golden-yellow);
+        --#{$prefix}btn-color: var(--#{$prefix}white);
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}light-yellow);
+        --#{$prefix}btn-hover-bg: transparent;
+        --#{$prefix}btn-hover-color: var(--#{$prefix}white);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
+        --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
+    }
+    &-tertiary {
+        --#{$prefix}btn-color: var(--#{$prefix}white);
+        --#{$prefix}btn-bg: transparent;
+        --#{$prefix}btn-hover-color: var(--#{$prefix}white);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}dark-background-shade);
+        --#{$prefix}btn-active-bg: transparent;
+        --#{$prefix}btn-active-border-color: transparent;
+        --#{$prefix}btn-active-color: var(--#{$prefix}white);
+        --#{$prefix}btn-focus-bg: var(--#{$prefix}dark-background-shade);
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$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;
+    }
+    .btn-icon {
+        margin-right: 0.5em;
+    }
+    &:hover, &:visited, &:focus {
+        color: var(--#{$prefix}btn-color);
+        text-decoration: underline;
+        text-underline-offset: 0.3em;
+    }
+    &:active {
+        color: var(--#{$prefix}btn-active-color);
+    }
+    &:focus {
+        outline: var(--#{$prefix}light-blue) solid 3px;
+        outline-offset: 2px;
+    }
+    &:visited {
+        color: var(--#{$prefix}btn-color);
+    }
+    &:disabled,
+    &.disabled {
+        color: var(--#{$prefix}btn-disabled-color);
+    }
+    &-primary {
+        box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            box-shadow: 7px 6px 13px rgba(0, 0, 0, 0.02), 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 13px 20px rgba(0, 0, 0, 0.1);
+
+        }
+        &:active {
+            box-shadow: 0px 1px 2px rgba(0,0,0,.2),0px 1px 3px 1px rgba(0,0,0,.1);
+            text-decoration: none;
+        }
+        &:focus {
+            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+        }
+        &:disabled,
+        &.disabled {
+            box-shadow: none;
+        }
+    }
+    &-secondary,
+    &-outline-secondary {
+        .btn-icon {
+            color: var(--#{$prefix}btn-border-color);
+        }
+        &:hover .btn-icon {
+            color: var(--#{$prefix}btn-hover-border-color);
+        }
+
+        &:focus {
+            text-decoration: underline;
+            text-underline-offset: 0.3em;
+            .btn-icon {
+                color: var(--#{$prefix}btn-hover-border-color);
+            }
+        }
+        &:active {
+            text-decoration: none;
+            .btn-icon {
+                color: var(--#{$prefix}btn-active-color);
+            }
+        }
+        &:disabled, &.disabled {
+            .btn-icon {
+                color: var(--#{$prefix}btn-disabled-color);
+
+            }
+        }
+    }
+    &-tertiary {
+        text-decoration: underline;
+        text-underline-offset: 0.3em;
+        .btn-icon {
+            color: var(--#{$prefix}dark-green);
+        }
+        &:hover, &:focus {
+            .btn-icon {
+                color: var(--#{$prefix}alt-button-hover);
+            }
+        }
+        &:active {
+            text-decoration: none;
+            color: var(--#{$prefix}btn-active-color);
+            .btn-icon {
+                color: var(--#{$prefix}btn-active-color);
+            }
+        }
+        &:disabled,
+        &.disabled {
+            text-decoration: none;
+            .btn-icon {
+                color: var(--#{$prefix}btn-disabled-color);
+            }
+        }
+    }
+    .dark &, .dark-alt & {
+        &:focus {
+            outline: var(--#{$prefix}dark-focus) solid 3px;
+            outline-offset: 2px;
+            }
+        &-secondary,
+        &-outline-secondary {
+            color: var(--#{$prefix}btn-disabled-color);
+        }
+
+        &-tertiary {
+            .btn-icon {
+                color: var(--#{$prefix}golden-yellow);
+            }
+            &:active {
+                text-decoration: none;
+                .btn-icon {
+                    color: var(--#{$prefix}btn-active-color);
+                }
+            }
+            &:disabled, &.disabled {
+                .btn-icon {
+                    color: var(--#{$prefix}btn-disabled-color);
+                }
+            }
+        }
+    }
+}
+

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

@@ -0,0 +1,84 @@
+// Button.stories.js
+import { Button } from './Button.js';
+import defaultdata from './button.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Button',
+  render: (args) => {
+    return `
+    ${new Button(args).html}
+    ${new Button({...args, isdisabled: true}).html}
+    `//expand arguments, specifically turn isdisabled into true
+  },
+
+  //https://storybook.js.org/docs/api/arg-types 
+  argTypes: {
+    isdisabled: {
+      table: {
+        disable: true,
+      },
+    },
+    variantClass: {
+      name: "Variants",
+      description: `Settable variant for the component`,
+      control: {
+        type: "radio",
+        labels: {
+          "btn-primary": "Primary",
+          "btn-secondary": "Secondary",
+          "btn-tertiary": "Tertiary",
+        },
+      },
+      options: [
+        "btn-primary",
+        "btn-secondary",
+        "btn-tertiary",
+      ],
+    },
+  },
+
+  parameters: {
+    design: {
+      name: "QGDS Figma Reference",
+      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,
+};
+
+/**
+ * Dark Breadcrumbs story
+ * */
+export const Dark = {
+  
+  args: defaultdata,
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

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

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./callout.hbs?raw";
+
+export class Callout {
+
+  // Use the global Component class to create a new instance of the Callout component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as CalloutStories from "./callout.stories"
+
+<Meta of={CalloutStories} />
+
+# Callout
+<Canvas>
+  <Story of={CalloutStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6310-45849&mode=design&t=NREcuP5UOBB2Y6G4-4)
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98115&mode=design&t=YLfxdziHdqD2Ty0o-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/callouts)