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

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

@@ -0,0 +1,156 @@
+// Accordions: https://getbootstrap.com/docs/5.3/components/accordion/#sass-variables
+// #{$prefix} defined in main.scss
+
+//SASS variables;
+$accordion-padding:             1rem;
+$accordion-icon-color:          $qld-brand-secondary-dark;
+$accordion-icon-active-color:   $qld-brand-secondary-dark;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+
+$accordion-icon-dark-color: $qld-brand-accent;
+$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-dark-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+
+
+// CSS Scoped Variables
+//--#{$prefix}{component}-{property}
+
+.accordion {
+    --#{$prefix}accordion-color: var(--#{$prefix}body-color);
+    --#{$prefix}accordion-bg: var(--#{$prefix}body-bg);
+    --#{$prefix}accordion-border-color: var(--#{$prefix}light-grey);
+    --#{$prefix}accordion-border-width: 1px;
+    --#{$prefix}accordion-border-radius: 0;
+    --#{$prefix}accordion-inner-border-radius: 0;
+    --#{$prefix}accordion-btn-padding-x: 1rem;
+    --#{$prefix}accordion-btn-padding-y: 1rem;
+    --#{$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-icon-width: 1.5rem;
+    --#{$prefix}accordion-btn-icon-transform: rotate(180deg);
+    --#{$prefix}accordion-btn-icon-transition: transform .25s ease-in;
+    --#{$prefix}accordion-btn-focus-box-shadow: none;
+    --#{$prefix}accordion-active-bg: var(--#{$prefix}accordion-btn-bg);
+    --#{$prefix}accordion-active-color: var(--#{$prefix}accordion-btn-color);
+    --#{$prefix}focus: var(--#{$prefix}light-blue);
+
+    .light & {
+        --#{$prefix}accordion-bg: var(--#{$prefix}light-background);
+        --#{$prefix}accordion-btn-bg: var(--#{$prefix}light-background-shade);
+        --#{$prefix}accordion-border-color: var(--#{$prefix}light-border);
+    }
+
+    .alt & {
+        --#{$prefix}accordion-bg: var(--#{$prefix}light-grey-alt);
+        --#{$prefix}accordion-btn-bg: var(--#{$prefix}grey);
+        --#{$prefix}accordion-border-color: var(--#{$prefix}soft-grey);
+    }
+
+    // Shared 'Dark' theme variables
+    .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-color: var(--#{$prefix}white);
+        --#{$prefix}accordion-btn-color: var(--#{$prefix}white);
+        --#{$prefix}accordion-active-color: var(--#{$prefix}white);
+        --#{$prefix}focus: var(--#{$prefix}dark-focus);
+    }
+
+    // Theme specific variables
+    .dark & {
+        --#{$prefix}accordion-bg: var(--#{$prefix}brand-primary);
+        --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-background-shade);
+        --#{$prefix}accordion-border-color: var(--#{$prefix}dark-border);
+    }
+
+    .dark-alt & {
+        --#{$prefix}accordion-bg: var(--#{$prefix}dark-blue);
+        --#{$prefix}accordion-btn-bg: var(--#{$prefix}dark-blue-shade);
+        --#{$prefix}accordion-border-color: var(--#{$prefix}dark-alt-border);
+    }
+}
+
+// Component styles
+.accordion {
+
+    margin-bottom: 2rem;
+
+    &-button {
+        font-size: 1.25rem;
+        font-weight: 400;
+        line-height: 1.2;
+        text-decoration-line: underline;
+        text-underline-offset: var(--#{$prefix}link-underline-offset);
+        text-decoration-thickness: var(--#{$prefix}link-underline-thickness);
+
+        &:hover {
+            background: var(--#{$prefix}accordion-bg);
+            text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        }
+
+        &:focus,
+        &:focus:not(:focus-visible) {
+            outline: 3px solid var(--#{$prefix}focus);
+            outline-offset: 2px;
+        }
+    }
+
+    &-header {
+        font-weight: var(--#{$prefix}body-font-weight);
+    }
+
+}
+
+// Toggle all button styles
+.accordion-toggle {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem 0;
+    font-size: 0.75rem;
+
+    .accordion-toggle-btn {
+        background-color: transparent;
+        border: none;
+        color: var(--#{$prefix}link-color);
+        font-size: inherit;
+        margin-right: 0.5rem;
+        position: relative;
+        text-decoration: underline;
+        text-underline-offset: var(--#{$prefix}link-underline-offset);
+        text-decoration-thickness: var(--#{$prefix}link-underline-thickness);
+
+        &:hover {
+            text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        }
+
+        &:after {
+            content: #{escape-svg($accordion-button-icon)};
+            display: inline-block;
+            width: 0.5rem;
+            height: 1rem;
+            position: absolute;
+            top: 50%;
+            margin-top: -0.5rem;
+            right: -0.5rem;
+            transition: transform .25s ease-in;
+
+            .dark &,
+            .dark-alt & {
+                content: #{escape-svg($accordion-button-icon-dark)};
+            }
+        }
+
+        .dark &,
+        .dark-alt & {
+            color: var(--#{$prefix}white);
+        }
+
+        &--open:after {
+            transform: rotate(180deg);
+        }
+    }
+}

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

@@ -0,0 +1,165 @@
+/**
+ * @file accordion.stories.js
+ * @description Storybook configuration file for the Accordion component.
+ * @module accordion.stories
+ */
+
+import { Accordion } from "./Accordion.js";
+import defaultdata from "./accordion.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Accordion",
+  render: (args) => new Accordion(args).html,
+  args: defaultdata,
+
+  /**
+   * 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=6276-45691&mode=design&t=crJKtPwMG2IcZf5E-4",
+    },
+  },
+};
+
+/**
+ * Default Accordion story
+ */
+export const Default = {};
+
+/**
+ * Accordion in 'Light' colour theme.
+ */
+export const Light = {
+  args: {
+    ...defaultdata,
+    groupid: "accordion-group-light",
+    accordionItems: {
+      0: { ...defaultdata.accordionItems[0], id: "light-one" },
+      1: { ...defaultdata.accordionItems[1], id: "light-two" },
+      2: { ...defaultdata.accordionItems[2], id: "light-three" },
+    },
+  },
+  parameters: {
+    backgrounds: {
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="light">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Accordion in 'Alternative' colour theme.
+ */
+export const Alternative = {
+  args: {
+    ...defaultdata,
+    groupid: "accordion-group-alt",
+    accordionItems: {
+      0: { ...defaultdata.accordionItems[0], id: "alt-one" },
+      1: { ...defaultdata.accordionItems[1], id: "alt-two" },
+      2: { ...defaultdata.accordionItems[2], id: "alt-three" },
+    },
+  },
+  parameters: {
+    backgrounds: {
+      default: "Alternative",
+      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="alt">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Accordion in 'Dark' colour theme.
+ */
+export const Dark = {
+  args: {
+    ...defaultdata,
+    groupid: "accordion-group-dark",
+    accordionItems: {
+      0: { ...defaultdata.accordionItems[0], id: "dark-one" },
+      1: { ...defaultdata.accordionItems[1], id: "dark-two" },
+      2: { ...defaultdata.accordionItems[2], id: "dark-three" },
+    },
+  },
+  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>
+      `;
+    },
+  ],
+};
+
+/**
+ * Accordion in 'Dark alternative' colour theme.
+ */
+export const DarkAlternative = {
+  args: {
+    ...defaultdata,
+    groupid: "accordion-group-dark-alt",
+    accordionItems: {
+      0: { ...defaultdata.accordionItems[0], id: "dark-alt-one" },
+      1: { ...defaultdata.accordionItems[1], id: "dark-alt-two" },
+      2: { ...defaultdata.accordionItems[2], id: "dark-alt-three" },
+    },
+  },
+  parameters: {
+    backgrounds: {
+      default: "Dark alternative",
+      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="dark-alt">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,11 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./banner.hbs?raw";
+
+export class Banner {
+  // Use the global Component class to create a new instance of the Banner 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/banner/Banner.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as BannerStories from "./banner.stories"
+
+<Meta of={BannerStories} />
+
+# Banner
+<Canvas>
+  <Story of={BannerStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [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)

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

@@ -0,0 +1,134 @@
+.qld-banner {
+
+    //Defaults variables
+    --bg-color: var(--qld-light-grey);
+    --title-color: var(--headings-color);
+    --lead-color: var(--body-color);
+    --max-width: 1600px;
+
+    // Variants (text colour and backgrounds)
+    &.alt {
+        --bg-color: var(--qld-alt-grey);
+        --bg-texture: url(assets/img/banner-texture-tile-light.png);
+    }
+
+    &.dark,
+    &.dark-alt {
+        --title-color: var(--qld-white);
+        --lead-color: var(--qld-white);
+
+        .breadcrumb {
+            //Redfine variables already scoped in .breadcrumbs
+            //These new values will only be scoped to breadcrumbs within the .banner-* class
+            --breadcrumb-color: var(--qld-white);
+            --qld-breadcrumb-divider-color: var(--qld-white);
+            --qld-breadcrumb-item-active-color: var(--qld-white); 
+            --qld-link-color-rgb: var(--qld-white);
+        }
+    }
+
+    &.dark {
+        --bg-color: var(--qld-primary);
+        --bg-texture: url(assets/img/banner-texture-tile-dark.png);
+    }
+
+    &.dark-alt {
+        --bg-color:var(--qld-dark-alt-background); //Todo, add this colour to variables.scss (?) Was defined in Figma. 
+    }
+
+    //Padding
+    --padding-top: 3rem;
+    --padding-bottom: 3rem;
+
+    @include media-breakpoint-up(md) {
+        --padding-top: 3rem;
+        --padding-bottom: 3rem;
+    }
+}
+
+
+//Component
+.qld-banner {
+
+    background-color: var(--bg-color);
+    padding: var(--padding-top) 0 var(--padding-bottom) 0;
+    position: relative;
+    max-width: var(--max-width);
+
+    &.with-pattern {
+        background-image: var(--bg-texture);
+        background-repeat: repeat;
+    }
+
+    .banner-title {
+        // Line height (52px) / Font-size (40px) = 1.3
+        line-height: 1.3;
+        color: var(--title-color);
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        max-width: 90%;
+    }
+
+    .banner-lead {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        max-width: 50rem;
+        color: var(--lead-color);
+    }
+
+    .breadcrumb {
+        color: var(--breadcrumb-color);
+        --qld-breadcrumb-padding-y: 0;
+    }
+
+    .banner-cta {
+        margin-top: 1.5rem;
+
+        .btn {
+            margin-right: 0.75rem;
+        }
+    }
+
+
+    //Image
+    .banner-image {
+        // --image-height: calc(100% + var(--padding-top) + var(--padding-bottom));
+        // width: calc(var(--image-height)/1.33);
+        // height: var(--image-height);
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 60%;
+        height: 100%;
+        background: var(--background-img);
+        background-size: cover;
+        background-position: center center;
+
+        //Optional - Add an angled edge to image, with ".banner-image .banner-image--angle" 
+        &--angle {
+            --banner-angle: 20%; //(angle in degrees)
+            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--banner-angle) 100%);
+        }
+
+    }
+
+    //Hide banner image below tablet
+    @include media-breakpoint-down(lg) {
+        .banner-image {
+            display: none;
+        }
+    }
+
+    //Stack buttons at very small viewports
+    @include media-breakpoint-down(sm) {
+        .banner-cta {
+            flex-direction: column;
+            .btn {
+                width: 100%;
+                margin-right: 0;
+                margin-bottom: 1rem;
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,160 @@
+// Banner.stories.js
+import { Banner } from './Banner.js';
+import defaultdata from './banner.data.json';
+
+//Breadcrumbs
+import { Breadcrumbs } from '../breadcrumbs/Breadcrumbs.js';
+import breadcrumbdata from '../breadcrumbs/breadcrumbs.data.json';
+
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Banner (Navigation)',
+  render: (args) => new Banner(args).html,
+  argTypes: {
+    variantClass: {
+      name: "Variant Class",
+      description: `Settable backgrounds for the banner component`,
+      control: {
+        type: "radio",
+        labels: {
+          "light": "Light",
+          "alt": "Light Alternative",
+          "dark": "Dark",
+          "dark-alt": "Dark Alternative",
+          "alt with-pattern": "Light Alternative (with pattern)",
+          "dark with-pattern": "Dark (with pattern)",
+        },
+      },
+      options: [
+        "light",
+        "alt",
+        "dark",
+        "dark-alt",
+        "alt with-pattern",
+        "dark with-pattern",
+      ],
+    },
+    image: {
+      table: {
+        disable: true,
+      },
+    },
+    breadcrumbs: {
+      table: {
+        disable: true,
+      },
+    },
+    ctabuttons: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ['image', 'breadcrumbs'],
+        hideNoControlsWarning: true,
+
+      },
+    },
+  },
+};
+
+/**
+ * Default banner with breadcrumbs
+ */
+const breadcrumbs = new Breadcrumbs(breadcrumbdata['default']);
+
+export const Default = {
+  args: {
+    ...defaultdata,
+    content: "",
+    image: false,
+    ctabuttons: false,
+    breadcrumbs: breadcrumbs.html,
+  },
+};
+
+
+/**
+ * Banner with lead content
+ */
+export const WithLeadContent = {
+  args: { 
+    ...defaultdata,
+    image: false,
+    ctabuttons: false,
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+/**
+ * Banner with background pattern
+ */
+export const WithPattern = {
+  args: { 
+    ...defaultdata,
+    title: "A long page title that wraps onto another line",
+    variantClass: "dark with-pattern",
+    image: false,
+    ctabuttons: false,
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+/**
+ * Banner with background pattern (alternative)
+ */
+export const WithPatternAlt = {
+  args: { 
+    ...defaultdata,
+    title: "A long page title that wraps onto another line",
+    variantClass: "alt with-pattern",
+    image: false,
+    ctabuttons: false,
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+/**
+ * Banner with feature image
+ */
+export const WithFeatureImage = {
+  args: { 
+    ...defaultdata,
+    ctabuttons: false,
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+/**
+ * Banner with feature image (angled)
+ */
+export const WithFeatureImageAngle = {
+  args: { 
+    ...defaultdata,
+    ctabuttons: false,
+    image: {
+      ...defaultdata.image,
+      classes: "banner-image--angle",
+    },
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+/**
+ * Banner with call to action
+ */
+export const WithCallToAction = {
+  args: { 
+    ...defaultdata,
+    breadcrumbs: breadcrumbs.html,
+  },
+}
+
+
+
+

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

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./blockquote.hbs?raw";
+
+export class Blockquote {
+
+  // Use the global Component class to create a new instance of the Blockquote 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/blockquote/Blockquote.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as BlockquoteStories from "./blockquote.stories"
+
+<Meta of={BlockquoteStories} />
+
+# Blockquote
+<Canvas>
+  <Story of={BlockquoteStories.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=11056-321340&mode=design&t=YLfxdziHdqD2Ty0o-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/callouts#section__quote-example)