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

package/src/components/bs5/callout/callout.scss

@@ -0,0 +1,69 @@
+// Callout Vars
+
+// Default
+.callout {
+    --#{$prefix}callout-padding: 1.5rem 1rem 1.5rem 1.5rem;
+    --#{$prefix}callout-bg-color: var(--#{$prefix}extra-light-grey);
+    --#{$prefix}callout-border-color: var(--#{$prefix}brand-secondary);
+    --#{$prefix}callout-border-width: 0.25rem;
+    --#{$prefix}callout-title-color: var(--#{$prefix}headings-color);
+    --#{$prefix}callout-text-color: var(--#{$prefix}body-color);
+    --#{$prefix}callout-spacer: 1.25rem;
+
+    .light & {
+        --#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);
+    }
+
+    .alt & {
+        --#{$prefix}callout-bg-color: var(--#{$prefix}grey);
+    }
+
+    .dark &,
+    .dark-alt & {
+        --#{$prefix}callout-title-color: var(--#{$prefix}white);
+        --#{$prefix}callout-text-color: var(--#{$prefix}white);
+    }
+
+    .dark & {
+        --#{$prefix}callout-bg-color: var(--#{$prefix}dark-background-shade);
+    }
+
+    .dark-alt & {
+        --#{$prefix}callout-bg-color: var(--#{$prefix}dark-blue-shade);
+    }
+}
+
+//Dark theme
+//https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode
+
+@include color-mode(dark) {
+
+}
+
+//Define component styles
+.callout {
+
+    background-color: var(--#{$prefix}callout-bg-color);
+    border-left: solid var(--#{$prefix}callout-border-width) var(--#{$prefix}callout-border-color);
+    padding: var(--#{$prefix}callout-padding);
+
+    &-title {
+        color: var(--#{$prefix}callout-title-color);
+        margin-bottom: 0;
+    }
+
+    &-text {
+        color: var(--#{$prefix}callout-text-color);
+
+        p, ul, ol {
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &-title + &-text {
+        // Add space above text only if there is a title
+        margin-top: var(--#{$prefix}callout-spacer);
+    }
+}

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

@@ -0,0 +1,155 @@
+// callout.stories.js
+import { Callout } from './Callout.js';
+import defaultdata from './callout.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Callout',
+  render: (args) => new Callout(args).html,
+
+  argTypes: {
+    title: {
+      name: 'Title',
+      description: `H3 title text for the callout.`,
+    },
+    content: {
+      name: 'Content',
+      description: 'Text content for the callout. Can include HTML markup.',
+    },
+  },
+
+  /**
+   * 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-98115&mode=design&t=Ue7c77KjVYU1eTGj-0",
+    },
+  },
+};
+
+/**
+ * Default Callout
+ */
+export const Default = {
+  args: defaultdata.default,
+};
+
+/**
+ * Callout without title
+ */
+export const NoTitle = {
+  args: defaultdata.noTitle,
+};
+
+/**
+ * Light colour Callout
+ */
+export const Light = {
+  args: defaultdata.default,
+  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>
+      `;
+    },
+  ],
+};
+
+/**
+ * Alternative Callout
+ */
+export const Alternative = {
+  args: defaultdata.default,
+  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>
+      `;
+    },
+  ],
+};
+
+/**
+ * Dark Callout
+ */
+export const Dark = {
+  args: defaultdata.default,
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-brand-primary)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid"><div class="row"><div class="col-12">
+      <div class="dark">
+          ${Story()}
+      </div>
+      </div></div></div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Dark alternative Callout
+ */
+export const DarkAlternative = {
+  args: defaultdata.default,
+  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/card/Card.js

@@ -0,0 +1,8 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./card.hbs?raw";
+
+export class Card {
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as CardStories from "./card--no-action.stories"
+
+<Meta of={CardStories} />
+
+# Cards
+<Canvas>
+  <Story of={CardStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=6273-41238&mode=design&t=Y96ILJNKlcVOEkpC-4)
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98141&mode=design&t=d1ly5fkj79b8cqJ6-0)
+- [Design System website](https://www.design-system.health.qld.gov.au/components/cards)
+- [Bootstrap component](https://getbootstrap.com/docs/5.3/components/card/)

package/src/components/bs5/card/Cardblock.js

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

package/src/components/bs5/card/card--multi-action.stories.js

@@ -0,0 +1,82 @@
+// card--multi-action.stories.js
+import { Card } from './Card.js';
+import defaultdata from './card.data.json';
+
+// include tags for footer option
+import { Tag } from "../tag/Tag.js";
+import tagdata from "../tag/tag.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Card/Multi action",
+  render: (args) => {
+    const tags = new Tag(tagdata.action).html;
+
+    return `
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+      ${new Card(args).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-left" }).html}
+      ${new Card({ ...args, description: "" }).html}
+      ${new Card({ ...args, footer: tags }).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-top" }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre." }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", video: true, videoDuration: "2:34" }).html}
+      ${new Card({ ...args, feature: true, featureImagePosition: "left", image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", footer: tags }).html}
+      ${new Card({ ...args, feature: true, featureImagePosition: "right", image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre." }).html}
+      ${new Card({ ...args, feature: true, featureImagePosition: "left", image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", video: true, videoDuration: "2:45" }).html}
+      ${new Card({ ...args, feature: true, featureImagePosition: "right", image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", video: true, videoDuration: "2:23", footer: tags }).html}
+    </div>
+    `;
+  },
+  args: defaultdata.multiAction,
+  argTypes: {
+    date: {
+      control: "text",
+    },
+    variantClass: {
+      control: "select",
+      options: {
+        Default: "default",
+        Light: "light",
+        Alternative: "alt",
+        Dark: "dark",
+        "Dark alternative": "dark-alt",
+      },
+    },
+    action: {
+      control: "select",
+      options: {
+        None: "no",
+        Single: "single",
+        Multi: "multi",
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ["link", "arrow", "iconPosition"],
+      },
+    },
+  },
+};
+
+export const Default = { };
+
+export const Dark = {
+  name: "Dark theme",
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/card/card--no-action.stories.js

@@ -0,0 +1,64 @@
+// card--no-action.stories.js
+import { Card } from './Card.js';
+import defaultdata from './card.data.json';
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Card/No action",
+  render: (args) => {
+    return `
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+      ${new Card(args).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-left" }).html}
+      <div class="col" id="placeholder"></div>
+      ${new Card({ ...args, footer: "Footer content" }).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-top" }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre." }).html}
+    </div>
+    `;
+  },
+  args: defaultdata.noAction,
+  argTypes: {
+    date: {
+      control: "text",
+    },
+    variantClass: {
+      control: "select",
+      options: {
+        Default: "default",
+        Light: "light",
+        Alternative: "alt",
+        Dark: "dark",
+        "Dark alternative": "dark-alt",
+      },
+    },
+    action: {
+      control: "select",
+      options: {
+        None: "no",
+        Single: "single",
+        Multi: "multi",
+      },
+    },
+  },
+};
+
+export const Default = { };
+
+export const Dark = {
+  name: "Dark theme",
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+      ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/card/card--single-action.stories.js

@@ -0,0 +1,73 @@
+// card--single-action.stories.js
+import { Card } from './Card.js';
+import defaultdata from './card.data.json';
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Card/Single action",
+  render: (args) => {
+    return `
+    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+      ${new Card(args).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-left" }).html}
+      ${new Card({ ...args, arrow: true, description: "" }).html}
+      ${new Card({ ...args, footer: "Footer content" }).html}
+      ${new Card({ ...args, iconClasses: "fa-solid fa-pen-ruler", iconPosition: "icon-top" }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre." }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", video: true, videoDuration: "3:00" }).html}
+      ${new Card({ ...args, image: "./assets/img/image-placeholder.png", imageAlt: "A grey placeholder image with an icon in the centre.", date: "26 April 2024" }).html}
+    </div>
+    `;
+  },
+  args: defaultdata.singleAction,
+  argTypes: {
+    date: {
+      control: "text",
+    },
+    variantClass: {
+      control: "select",
+      options: {
+        Default: "default",
+        Light: "light",
+        Alternative: "alt",
+        Dark: "dark",
+        "Dark alternative": "dark-alt",
+      },
+    },
+    action: {
+      control: "select",
+      options: {
+        None: "no",
+        Single: "single",
+        Multi: "multi",
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ["link", "arrow", "iconPosition"],
+      },
+    },
+  },
+};
+
+export const Default = { };
+
+export const Dark = {
+  name: "Dark theme",
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};