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

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

@@ -0,0 +1,206 @@
+// ComponentExample.stories.js
+import { Table } from "./Table.js";
+import defaultdata from "./table.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Table",
+  render: (args) => {
+    
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
+    if( typeof(args.variantClass) === 'string' ) {
+      args.variantClass = args.variantClass.replaceAll(","," ");
+    } else if ( typeof(args.variantClass) === 'object' ) {
+      args.variantClass = args.variantClass.join(" ");
+    }
+
+    return new Table(args).html;
+  
+  },
+
+  //https://storybook.js.org/docs/api/arg-types
+  argTypes: {
+    variantClass: {
+      name: "Classes",
+      description: `Settable classes for the component`,
+      control: {
+        type: "check",
+        labels: {
+          "table-dark": "Dark",
+          "table-striped": "Striped",
+        },
+      },
+      options: [
+        "table-dark",
+        "table-striped",
+      ],
+    },
+
+    caption: {
+      name: "Caption",
+      description: `Table caption`,
+      control: {
+        type: "text",
+      },
+    },
+
+    subcaption: {
+      name: "Subcaption",
+      description: `Table subcaption`,
+      control: {
+        type: "text",
+      },
+    },
+
+  },
+
+  parameters: {
+    // design: {
+    //   name: "QGDS Figma Reference",
+    //   type: "figma",
+    //   url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23167-395552&mode=design&t=qoWXcELpZe1uqHs8-0",
+    // },
+    docs: {
+      controls: {
+        exclude: ["headers", "rows", "footer"],
+      },
+    },
+  },
+};
+
+/**
+ * 
+ * For data tables with a small amount of rows use the default table:
+ *  - Align text columns and corresponding data cells to the left
+ *  - When comparing numbers in a column, align data cells and column headers to the right
+ *  - For data tables with more rows, use the striped alternative
+ * 
+ * Example full table including headers, rows and footer, caption and subcaption
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Table with striping (or banding)  <code>.table-striped</code>
+ */
+
+export const Striped = {
+  args: { 
+    ...defaultdata,
+    ...{variantClass: "table-striped"},
+  },
+};
+  
+
+/**
+ * Also known as: Quiet Table
+ * 
+ * When seeking to integrate and expand the information that accompanies a text, a borderless table can prove advantageous. It imparts a sense of continuity and cohesion, making the data feel more seamlessly integrated with the surrounding text.
+ */
+
+export const Borderless = {
+  args: { 
+	  ...defaultdata,
+	  ...{customClass: "qld-table--borderless"},
+  },
+};
+
+
+/**
+ * Table with row hover <code>.table-hover</code>
+ */
+export const WithHover = {
+  args: { 
+	  ...defaultdata,
+	  ...{variantClass: "table-hover"},
+  },
+};
+
+
+
+/**
+ * Alternate (Dark) table. <code>.table-dark</code>
+ */
+export const Dark = {
+  args: {
+    ...defaultdata,
+    ...{variantClass: "table-dark"},
+  	},
+}
+
+
+/**
+ * Alternate (Dark) table. <code>.table-dark .table-hover</code>
+ */
+export const DarkWithHover = {
+  args: {
+    ...defaultdata,
+    ...{ variantClass: ["table-dark","table-hover"] },
+  	},
+}
+
+
+/**
+ * Responsive table example <code>.table-responsive</code>
+ */
+export const Responsive = {
+  decorators: [
+    (Story) => {
+      return `
+        <div class="container-fluid"><div class="row">
+        <div class="col-6">
+        ${Story()}
+        </div>
+        </div></div>
+      `;
+    },
+  ],
+  args: {
+    ...defaultdata,
+    ...{ 
+      "headers": [
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header", 
+        "Header",
+        "Header",
+        "Header",
+        "Header",
+      ],
+      "rows": [
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+        { "cells": ["Cell", "Longer cell", "Cell", "Cell", "Longer cell", "Cell", "Cell", "Cell", "Cell", "Cell", "Longer Cell", "Cell"] },
+      ],
+      "footer": [
+        {
+          "cells": [
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+            "Footer",
+          ],
+        },
+      ],
+    },
+    ...{ variantClass: ["table-striped","table-hover"] },
+  	},
+}

package/src/components/bs5/tag/Tag.js

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

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

package/src/components/bs5/tag/tag.scss

@@ -0,0 +1,92 @@
+.tag-list {
+    display: flex;
+    flex-direction: row;
+    padding: 0;
+    list-style-type: none;
+    flex-wrap: wrap;
+    margin: 0.5rem 0;
+    padding: 30px;
+    &.tag-default {
+        .tag-item {
+            border-color: $qld-light-grey;
+            color: $qld-dark-grey-muted;
+        }
+    }
+    &.tag-dark {
+        background-color: $qld-sapphire-blue;
+        .tag-item {
+            color: $qld-dark-text;
+        }
+    }
+    &.tag-alt {
+        background-color: $qld-light-grey-alt;
+        .tag-item {
+            color: $qld-dark-grey-muted;
+            border-color: $qld-soft-grey;
+        }
+    }
+    &.tag-dark-alt {
+        background-color: $qld-dark-blue;
+        .tag-item {
+            color: $qld-dark-text;
+            border-color: $qld-dark-border;
+        }
+    }
+}
+
+.tag-item {
+    margin: 0 0.5rem 0 0;
+    list-style-type: none;
+    display: inline-block;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+    border-width: 1px;
+    border-style: solid;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    text-align: center;
+    &.tag-large {
+        line-height: 1.5;
+        font-size: 1rem;
+        padding: 0.5rem 1rem;
+        border-radius: 32px;
+    }
+    &.tag-link {
+        color: $qld-sapphire-blue;
+        border-color: $qld-sapphire-blue;
+        a {
+            text-decoration: none;
+        }
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: $qld-sapphire-blue;
+            a {
+                color: white;
+                text-decoration: underline;
+            }
+        }
+    }
+    &.tag-info {
+        color: $qld-dark-grey-muted;
+        border-color: $qld-extra-light-grey;
+        background-color: $qld-extra-light-grey;
+    }
+}
+
+$close-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E";
+$close-icon-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM175 208.1L222.1 255.1L175 303C165.7 312.4 165.7 327.6 175 336.1C184.4 346.3 199.6 346.3 208.1 336.1L255.1 289.9L303 336.1C312.4 346.3 327.6 346.3 336.1 336.1C346.3 327.6 346.3 312.4 336.1 303L289.9 255.1L336.1 208.1C346.3 199.6 346.3 184.4 336.1 175C327.6 165.7 312.4 165.7 303 175L255.1 222.1L208.1 175C199.6 165.7 184.4 165.7 175 175C165.7 184.4 165.7 199.6 175 208.1V208.1z'/%3E%3C/svg%3E";
+.close-icon {
+    mask-image: url($close-icon);
+    background-color: $qld-dark-green;
+    height: 1.25rem;
+    width: 1.25rem;
+    vertical-align: middle;
+    border: none;
+    margin-left: 0.5rem;
+    cursor: pointer;
+    &:hover {
+        background-color: $qld-alt-button-hover;
+        mask-image: url($close-icon-hover);
+    }
+}

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

@@ -0,0 +1,54 @@
+// Tag.stories.js
+import { Tag } from './Tag.js';
+import defaultdata from './tag.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Tag',
+  render: (args) => new Tag(args).html,
+  argTypes: {
+    variant: {
+      description: `Tags theme`,
+      control: {
+        type: "radio",
+        labels: {
+          "tag-default": "Default",
+          "tag-alt": "Alt",
+          "tag-dark": "Dark",
+          "tag-dark-alt": "Dark-alt",
+        },
+      },
+      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+    },
+  },
+};
+
+// Default Tag story
+export const Default = {
+  args: defaultdata.default,
+};
+
+// Large Tag story
+export const Large = {
+  args: defaultdata.large,
+};
+
+// Action Tag story
+export const Action = {
+  args: defaultdata.action,
+};
+
+// Dark Tag story
+export const Dark = {
+  args: defaultdata.dark,
+};
+
+// Info Tag story
+export const Information = {
+  args: defaultdata.info,
+};
+
+// Filter Tag story
+export const Filter = {
+  args: defaultdata.filter,
+};

package/src/components/bs5/textarea/Textarea.js

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

@@ -0,0 +1,131 @@
+// ComponentExample.stories.js
+import { Textarea } from "./Textarea.js";
+import defaultdata from "./textarea.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Textarea",
+  render: (args) => {
+    
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
+
+    if( typeof(args.customClass) === 'string' ) {
+      args.customClass = args.customClass.replaceAll(","," ");
+    } else if ( typeof(args.customClass) === 'object' ) {
+      args.customClass = args.customClass.join(" ");
+    }
+  
+    return new Textarea(args).html;
+  
+  },
+
+  //https://storybook.js.org/docs/api/arg-types
+  argTypes: {
+    customClass: {
+      name: "Classes",
+      description: 'Settable classes for the component',
+      control: {
+        type: "check",
+        labels: {
+          "form-style-filled": "Filled",
+        },
+      },
+      options: [
+        "form-style-filled",
+      ],
+    },
+    states: {
+      name: "States",
+      description: `Valid/Invalid states`,
+      control: {
+        type: "radio",
+        labels: {
+          "default": "Default",
+          "qld-input-success": "Success",
+          "qld-input-error": "Error",
+        },
+      },
+      options: [
+        "default",
+        "qld-input-success",
+        "qld-input-error",
+      ],
+    },
+  },
+};
+
+/**
+ * Default textarea
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Dark themed textarea
+ */
+export const Dark = {
+  args: { 
+	  ...defaultdata,
+	  ...{isDisabled: false},
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-brand-primary)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Filled style textarea
+ */
+export const Filled = {
+  args: { 
+	  ...defaultdata,
+	  ...{customClass: "form-style-filled"},
+  },
+};
+
+
+/**
+ * Disabled textarea
+ */
+export const Disabled = {
+  args: { 
+	  ...defaultdata,
+	  ...{isDisabled: true, isRequired: false},
+  },
+};
+
+/**
+ * Valid textbox
+ */
+export const Valid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-success"},
+  },
+};
+
+/**
+ * Invalid textbox
+ */
+export const Invalid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-error"},
+  },
+};

package/src/components/bs5/textbox/Textbox.js

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

@@ -0,0 +1,131 @@
+// ComponentExample.stories.js
+import { Textbox } from "./Textbox.js";
+import defaultdata from "./textbox.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Textbox",
+  render: (args) => {
+    
+    //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 
+    //We can't use commas on our class="..." attribute, so we need to replace the commas with spaces.
+
+    if( typeof(args.customClass) === 'string' ) {
+      args.customClass = args.customClass.replaceAll(","," ");
+    } else if ( typeof(args.customClass) === 'object' ) {
+      args.customClass = args.customClass.join(" ");
+    }
+  
+    return new Textbox(args).html;
+  
+  },
+
+  //https://storybook.js.org/docs/api/arg-types
+  argTypes: {
+    customClass: {
+      name: "Classes",
+      description: 'Settable classes for the component',
+      control: {
+        type: "check",
+        labels: {
+          "form-style-filled": "Filled",
+        },
+      },
+      options: [
+        "form-style-filled",
+      ],
+    },
+    states: {
+      name: "States",
+      description: `Valid/Invalid states`,
+      control: {
+        type: "radio",
+        labels: {
+          "default": "Default",
+          "qld-input-success": "Success",
+          "qld-input-error": "Error",
+        },
+      },
+      options: [
+        "default",
+        "qld-input-success",
+        "qld-input-error",
+      ],
+    },
+  },
+};
+
+/**
+ * Default textbox
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Dark themed textbox
+ */
+export const Dark = {
+  args: { 
+	  ...defaultdata,
+	  ...{isDisabled: false},
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-brand-primary)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Filled style textbox
+ */
+export const Filled = {
+  args: { 
+	  ...defaultdata,
+	  ...{customClass: "form-style-filled"},
+  },
+};
+
+
+/**
+ * Disabled textbox
+ */
+export const Disabled = {
+  args: { 
+	  ...defaultdata,
+	  ...{isDisabled: true},
+  },
+};
+
+/**
+ * Valid textbox
+ */
+export const Valid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-success"},
+  },
+};
+
+/**
+ * Invalid textbox
+ */
+export const Invalid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-error"},
+  },
+};