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

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

@@ -0,0 +1,55 @@
+// ComponentExample.stories.js
+import { Quickexit } from "./Quickexit.js";
+import defaultdata from "./quickexit.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Quickexit",
+  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 Quickexit(args).html;
+  
+  },
+};
+
+/**
+ * Default Loading Quickexit
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Dark themed Loading Quickexit
+ */
+export const Dark = {
+  args: { 
+	  ...defaultdata,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-brand-primary)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/select/Select.js

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

@@ -0,0 +1,131 @@
+// ComponentExample.stories.js
+import { Select } from "./Select.js";
+import defaultdata from "./select.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Select",
+  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 Select(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 select
+ */
+export const Filled = {
+  args: { 
+	  ...defaultdata,
+	  ...{customClass: "form-style-filled"},
+  },
+};
+
+
+/**
+ * Disabled select
+ */
+export const Disabled = {
+  args: { 
+	  ...defaultdata,
+	  ...{isDisabled: true},
+  },
+};
+
+/**
+ * Valid select
+ */
+export const Valid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-success"},
+  },
+};
+
+/**
+ * Invalid select
+ */
+export const Invalid = {
+  args: {
+	  ...defaultdata,
+    ...{states: "qld-input-error"},
+  },
+};

package/src/components/bs5/sidenav/Sidenav.js

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

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as SidenavStories from "./sidenav.stories"
+
+<Meta of={SidenavStories} />
+
+# Side navigation
+<Canvas>
+  <Story of={SidenavStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Master component file (Figma)](https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5631-91296&mode=design&t=ZMHBH7jduYY4PqYh-0)
+- [Design System website](https://www.design-system.health.qld.gov.au/components/side-navigation)

package/src/components/bs5/sidenav/sidenav.scss

@@ -0,0 +1,160 @@
+.nav {
+    --#{$prefix}nav-link-color: var(--#{$prefix}brand-primary);
+}
+
+@include color-mode(dark) {
+    .nav {
+        --#{$prefix}nav-link-color: #FFF;
+    }
+}
+
+
+.qld-side-navigation {
+
+    --sidenav-level-one-left-padding: 0;
+    --sidenav-level-two-padding: 2rem;
+    --sidenav-level-three-padding: 3.5rem;
+    --sidenav-navlink-padding: 1rem;
+
+    --sidenav-hover-bg: var(--#{$prefix}extra-light-grey);
+    --sidenav-hover-color: var(--#{$prefix}brand-primary);
+
+    --sidenav-heading-border-color: #{$qld-brand-secondary};
+    --sidenav-item-border-color: #{$qld-soft-grey};
+    --sidenav-subitem-border-color: #{$qld-light-grey};
+
+    --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='var(--#{$prefix}color-light-border)' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");
+
+    --sidenav-active-item-color: var(--light-text-heading);
+
+}
+
+.dark,
+.dark-alt {
+    .qld-side-navigation {
+        --sidenav-submenu-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2309ACFE' d='M2 10h12v1H2zM2 5h1v5H2z'/%3E%3C/svg%3E");        
+        
+        --sidenav-hover-bg: var(--#{$prefix}brand-primary-dark);
+        --sidenav-hover-color: var(--#{$prefix}white);
+        --sidenav-heading-border-color: var(--#{$prefix}brand-secondary);
+        --sidenav-item-border-color:    var(--#{$prefix}brand-primary-light);
+        --sidenav-subitem-border-color: var(--#{$prefix}brand-primary-light);
+        --sidenav-active-item-color: var(--#{$prefix}white);
+    }
+}
+
+@include color-mode(dark) {
+    
+}
+
+
+
+.qld-side-navigation {
+
+    .nav-title {
+        color: var(--#{$prefix}-headings-color);
+        font-size: 1rem;
+        line-height: 1.5;
+        padding: 1rem;
+        margin: 0;
+        border-bottom: 2px solid var(--sidenav-heading-border-color);
+
+        a {
+            color: var(--#{$prefix}headings-color);
+            text-decoration: none;
+            font-weight: inherit;
+        }
+    }
+
+    //Side navigation (ul.nav) 
+    
+    ul.nav {
+
+        //Side navigation all items remove all bullets
+        //Reset all left padding  
+        ul, ol {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        display: flex;
+        flex-direction: column;
+
+        //Specifically target the first level LI's only
+        > li.nav-item {
+
+            border-top: 1px solid var(--sidenav-item-border-color);
+
+            &:first-child {
+                border-top: none;
+            }
+
+        }
+
+        //All nav items, all levels
+        li.nav-item {
+
+            //Level two menu LI's
+            > ul > li { border-top: 1px solid var(--sidenav-subitem-border-color) }
+            > ul > li  > .nav-link { padding-left: var( --sidenav-level-two-padding); }
+            
+            //Level three menu LI's
+            > ul > li > ul > li { border-top: none }
+            > ul > li > ul > li > .nav-link {  padding-left: var( --sidenav-level-three-padding); }
+
+            //All nav item links, all levels
+            .nav-link {
+                padding: var(--sidenav-navlink-padding);
+                font-size: 0.875rem;
+                color: var(--body-color);
+                text-decoration: none;
+                transition-duration: 0s;
+
+                //.nav-link Hover state
+                &:hover {
+                    background-color: var(--sidenav-hover-bg);
+                    color: var(--sidenav-hover-color);
+                    text-decoration: underline;
+                    text-underline-offset: 0.25rem;
+                    text-decoration-thickness: 2px;
+                }
+
+            }
+
+             //li .nav-link.active
+             &.active {
+                .nav-link {
+                    font-weight: 600;
+                    color: var(--light-text-heading);
+                    text-decoration: none;
+                }
+            }
+
+        }
+
+        //Add stalks to a UL menu (usually level 3) 
+        // <ul class="nav ... with-stalks">...</ul> 
+        .with-stalks {
+
+            .nav-item {
+                
+                position: relative;
+            
+                &:before {
+                    content: "";
+                    position: absolute;
+                    background: escape-svg(var(--sidenav-submenu-divider));
+                    background-repeat: no-repeat;
+                    // background-position: center center;
+                    top: 1rem;
+                    left: 2rem;
+                    bottom: 0;
+                    width: 1rem;
+                }
+            }
+        }
+
+    }
+
+}
+

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

@@ -0,0 +1,67 @@
+// ComponentExample.stories.js
+import { Sidenav } from "./Sidenav.js";
+import defaultdata from "./sidenav.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Side navigation",
+  render: (args) => {
+    return new Sidenav(args).html;  
+  },
+
+  argTypes: {
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+        exclude: ["navlist", "navtitlelink"],
+      },
+    },
+  },
+};
+
+/**
+ * Default side navigation
+ * 
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+        <div class="col-lg-4 col-md-5">
+          ${Story()}
+        </div>
+        </div>
+      </div>
+      `;
+    },
+  ],
+};
+
+
+/**
+ * Dark side navigation
+ * 
+ */
+export const Dark = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+      <div class="container-fluid">
+        <div class="row">
+        <div class="col-lg-4 col-md-5">
+        <div class="dark">
+          ${Story()}
+        </div>
+        </div>
+        </div>
+      </div>
+      `;
+    },
+  ],
+};

package/src/components/bs5/spinner/Spinner.js

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

@@ -0,0 +1,76 @@
+// ComponentExample.stories.js
+import { Spinner } from "./Spinner.js";
+import defaultdata from "./spinner.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "Components/Spinner",
+  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 Spinner(args).html;
+  
+  },
+};
+
+/**
+ * Default Loading Spinner
+ */
+export const Default = {
+  args: defaultdata,
+};
+
+/**
+ * Dark themed Loading Spinner
+ */
+export const Dark = {
+  args: { 
+	  ...defaultdata,
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-brand-primary)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * Minimal Loading Spinner
+ */
+export const Minimal = {
+  args: {
+	  ...defaultdata,
+	  ...{minimal: true},
+  },
+};
+
+/**
+ * Stacked Loading Spinner
+ */
+export const Stacked = {
+  args: { 
+	  ...defaultdata,
+	  ...{stacked: true},
+  },
+};
+

package/src/components/bs5/spinner/spinner.scss

@@ -0,0 +1,37 @@
+.qld-spinner {
+    text-align: left;
+    display: flex;
+    align-items: center;
+
+    .spinner-border {
+        color: #9ac02c;
+        width: 30px;
+        height: 30px;
+        margin-right: 1rem;
+    }
+
+    .qld-spinner-label {
+        @extend .h3;
+        margin-top: 0 !important;
+        margin-bottom: 0;
+        font-size: 1.125rem;
+        color: inherit;
+        font-family: inherit;
+        font-weight: 600;
+        line-height: 1.3;
+        display: block;
+    }
+
+    &.align-center {
+        text-align: center;
+        display: block;
+
+        .spinner-border {
+            margin-right: 0;
+        }
+
+        .qld-spinner-label {
+            margin-top: 0.75rem !important;
+        }
+    }
+}

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

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

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

package/src/components/bs5/table/table.scss

@@ -0,0 +1,77 @@
+.qld-table {
+
+    border: 1px solid var(--qld-light-grey);
+    border-radius: 0.75rem;
+    margin-bottom: 1rem;
+
+    // DS includes a version of the table without borders ("quiet table").
+    // This is achieved by setting the border on a wrapping .qld-table--borderless class
+    &--borderless {
+        border: 1px solid transparent;
+    }
+
+
+    // @media (prefers-color-scheme: dark) {
+    //     --qld-table-border-color: var(--qld-white);
+    // }
+
+    .table {
+
+        --qld-table-border-color: var(--qld-light-grey);
+
+        margin-bottom: 0;
+        border-radius: 0.75rem;
+
+        //required to maintain effective border-radius on the table
+        overflow: hidden;
+
+        caption {
+            caption-side: top;
+            color: var(--qld-headings-color);
+            padding: 0.75rem;
+            line-height: 2rem;
+            font-size: 1.25rem;
+        }
+
+        .sub-caption {
+            color: var(--qld-dark-grey-muted);
+            font-size: 0.875rem;
+            font-weight: 400;
+            line-height: 1.25rem;
+            display: table-row;
+        }
+
+        thead th,
+        thead td {
+            border-bottom: 2px solid $qld-brand-secondary;
+        }
+
+        tfoot th,
+        tfoot td {
+            border-top: 2px solid $qld-brand-secondary;
+            border-bottom: 0;
+        }
+    }
+
+
+    //Build a bootstrap ".table-dark" class dynamically, passing in a background colour
+    @include table-variant("dark", #09549F);
+
+    //Then, we extend .table-dark with some additional rules 
+    .table-dark {
+
+        caption,
+        .sub-caption {
+            background-color: #09549F;
+            color: #FFF;
+
+        }
+
+        thead th {
+            background-color: #04498F;
+            border-top: 1px solid var(--qld-table-border-color);
+        }
+    }
+
+
+}