@qld-gov-au/qgds-bootstrap5 2.0.9 → 2.0.11

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

@@ -45,7 +45,7 @@ function buttonVariantsMarkup() {
         )
         .join("");
 
-      return `<div class="d-grid mb-4">
+      return `<div class="d-grid p-32">
               <div class="fw-bold">${variantLabel}</div>
               <div class="d-flex gap-3">
                 ${variantButtons}
@@ -61,7 +61,7 @@ export default {
   args: defaultdata,
   render: (args) => {
     return `
-    <div class="d-flex gap-3">
+    <div class="d-flex gap-3 p-32">
       ${new Button(args).html}
       ${new Button({ ...args, isdisabled: true }).html}
       ${new Button({ ...args, isprogress: true, iconClass: "", label: "Loading button", progressLabel: "Loading...", islink: false, dataatts: 'data-loading-btn="true"' }).html}
@@ -113,6 +113,9 @@ export default {
       type: "figma",
       url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=5990-98058&mode=design&t=YBUAJHIxqF46Um9y-0",
     },
+    backgrounds: {
+      disabled: false,
+    },
   },
 };
 
@@ -125,10 +128,9 @@ export const Default = {};
  * Dark Button story
  * */
 export const Dark = {
-  parameters: {
+  globals: {
     backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-sapphire-blue)" }],
+      value: "dark",
     },
   },
   decorators: [
@@ -208,7 +210,7 @@ export const LongLabelsWrapping = {
           isdisabled: true,
         }).html;
 
-        return `<div class="d-grid mb-4" style="max-width: 300px;">
+        return `<div class="d-grid mb-4 " style="max-width: 300px;">
                 <div class="fw-bold">${variantLabel} - Long Labels</div>
                 <div class="d-grid gap-2">
                   ${longLabelButton}
@@ -219,7 +221,7 @@ export const LongLabelsWrapping = {
       .join("");
 
     return `
-      <div class="d-grid gap-4">
+      <div class="d-grid gap-4 p-32">
         <div>
           <h5 class="mb-3">Buttons with Long Labels (300px container)</h5>
           <div class="d-flex flex-wrap gap-4">
@@ -229,14 +231,14 @@ export const LongLabelsWrapping = {
         <div style="max-width: 200px;">
           <h5 class="mb-3">Even Narrower Container (200px)</h5>
           ${
-  new Button({
-    ...defaultdata,
-    iconClass: "", // no icon for this demo
-    variantClass: "btn-primary",
-    label: "Long button text in a narrow container",
-    isdisabled: false,
-  }).html
-}
+            new Button({
+              ...defaultdata,
+              iconClass: "", // no icon for this demo
+              variantClass: "btn-primary",
+              label: "Long button text in a narrow container",
+              isdisabled: false,
+            }).html
+          }
         </div>
       </div>
     `;

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

@@ -1,8 +1,37 @@
-import Component from '../../../js/QGDSComponent.js'
+import Component from "../../../js/QGDSComponent.js";
 import template from "./card.hbs?raw";
 
 export class Card {
-  constructor( data = {} ) {
+  constructor(data = {}) {
     return new Component(template, data);
   }
 }
+
+export const argTypes = {
+  headingTag: {
+    description: "Heading tag. Can be h2, h3, h4, h5 or h6.",
+    control: "select",
+    options: ["h2", "h3", "h4", "h5", "h6"],
+  },
+  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",
+    },
+  },
+};

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

@@ -6,6 +6,10 @@ import defaultdata from "./card.data.json";
 
 # Cards
 
+## Accessibility considerations - heading level
+
+Use the field `headingTag` to apply the correct heading level of your card title (h1 should be followed by h2, then h3 etc) and keep the semantic structure of your page correct.
+
 <Canvas of={CardStories.Default} />
 
 ## Design resources

package/src/components/bs5/card/card--icon-list-footer.stories.js

@@ -1,5 +1,5 @@
 // card--icon-list-footer.stories.js
-import { Card } from "./Card.js";
+import { Card, argTypes } from "./Card.js";
 import { Link } from "../link/link.js";
 import defaultdata from "./card.data.json";
 
@@ -95,29 +95,7 @@ export default {
     description:
       "This card demonstrates the proper nesting of an Icon List component into the Card Footer following the Figma design pattern with 0.75rem gap spacing between links and 12px gap between icons and text.",
   },
-  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",
-      },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       description: {

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

@@ -1,6 +1,6 @@
 // card--multi-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 // include tags for footer option
 import { Tag } from "../tag/Tag.js";
@@ -11,14 +11,17 @@ export default {
   tags: ["autodocs"],
   title: "3. Components/Card/Multi action",
   render: (args) => {
-    const tags = new Tag(tagdata.action).html;
+    const tags = new Tag({
+      ...tagdata.action,
+      classes: "",
+    }).html;
     const cta = new CallToAction({ label: "View all", href: "#" }).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: "qld-icon-design", iconPosition: "icon-left", footer: "Footer content" }).html}
-      ${new Card({ ...args, description: "Card body text lorem ipsum dolor sit amet.", footer: '' }).html}
+      ${new Card({ ...args, description: "Card body text lorem ipsum dolor sit amet.", footer: "" }).html}
       ${new Card({ ...args, footer: tags }).html}
       ${new Card({ ...args, description: "<ul><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li></ul>", footer: cta }).html}
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content" }).html}
@@ -35,29 +38,7 @@ export default {
     `;
   },
   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",
-      },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       controls: {
@@ -67,7 +48,7 @@ export default {
   },
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

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

@@ -1,6 +1,6 @@
 // card--no-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 export default {
   tags: ["autodocs"],
@@ -15,7 +15,7 @@ export default {
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-left", footer: "Footer content" }).html}
       <div class="col" id="placeholder"></div>
       ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top" }).html}
-      ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content"}).html}
+      ${new Card({ ...args, iconClasses: "qld-icon-design", iconPosition: "icon-top", footer: "Footer content" }).html}
       <div class="col" id="placeholder"></div>
       ${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.", footer: "Footer content" }).html}
@@ -23,32 +23,10 @@ export default {
     `;
   },
   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",
-      },
-    },
-  },
+  argTypes,
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

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

@@ -1,6 +1,6 @@
 // card--single-action.stories.js
-import { Card } from './Card.js';
-import defaultdata from './card.data.json';
+import { Card, argTypes } from "./Card.js";
+import defaultdata from "./card.data.json";
 
 export default {
   tags: ["autodocs"],
@@ -20,39 +20,10 @@ export default {
     `;
   },
   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"],
-      },
-    },
-  },
+  argTypes,
 };
 
-export const Default = { };
+export const Default = {};
 export const Light = {
   name: "Light theme",
   args: {

package/src/components/bs5/card/card.data.json

@@ -1,6 +1,7 @@
 {
   "noAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -20,6 +21,7 @@
   },
   "singleAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text",
     "date": "",
     "variantClass": "default",
@@ -39,6 +41,7 @@
   },
   "multiAction": {
     "title": "Card title",
+    "headingTag": "h3",
     "description": "Card body text <a href='javascript:void(0)'>lorem ipsum</a> dolor sit amet.",
     "date": "",
     "variantClass": "default",
@@ -56,4 +59,4 @@
     "footer": "<ul><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li><li><a href='javascript:void(0)'>Link text</a></li></ul>",
     "equalHeight": false
   }
-}
+}

package/src/components/bs5/card/card.hbs

@@ -35,13 +35,13 @@
                 {{#if date}}
                 <div class="card-date">{{date}}</div>
                 {{/if}}
-                <h3 class="card-title">
+                <{{isdefined headingTag 'h3'}} class="card-title">
                     {{#if link}}
                     <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
                     {{else}}
                     {{ title }}
                     {{/if }}
-                </h3>
+                </{{isdefined headingTag 'h3'}}>
                 {{#if description}}
                 <div class="card-text">
                     {{{description}}}

package/src/components/bs5/footer/footer_formio.scss

@@ -141,7 +141,7 @@
         border-color: $qld-textbox-border-color;
       }
       &:focus {
-        outline: 3px solid var(--#{$prefix}light-blue);
+        outline: 3px solid var(--#{$prefix}focus-color);
         outline-offset: 2px;
         background-color: var(--#{$prefix}white);
         border: 2px solid var(--#{$prefix}light-grey);
@@ -157,7 +157,7 @@
         box-shadow: none; // Overrides Bootstrap5 styling for invalid input.
 
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
         }
       }
     }
@@ -255,7 +255,7 @@
         outline: none;
 
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
           outline-offset: 3px;
         }
       }
@@ -273,7 +273,7 @@
           border-color: $qld-textbox-border-color;
         }
         &:focus {
-          outline: 3px solid var(--#{$prefix}light-blue);
+          outline: 3px solid var(--#{$prefix}focus-color);
           outline-offset: 2px;
           background-color: var(--#{$prefix}white);
           border: 2px solid var(--#{$prefix}light-grey);
@@ -289,7 +289,7 @@
           box-shadow: none; // Overrides Bootstrap5 styling for invalid input.
 
           &:focus {
-            outline: 3px solid var(--#{$prefix}light-blue);
+            outline: 3px solid var(--#{$prefix}focus-color);
           }
         }
 

package/src/components/bs5/modal/modal.scss

@@ -4,117 +4,124 @@
 
 // QGDS specific modal variables.
 .modal {
-    --#{$prefix}modal-zindex: #{$zindex-modal};
-    --#{$prefix}modal-width: #{$modal-md};
-    
-    --#{$prefix}modal-margin: #{$modal-dialog-margin};
-    --#{$prefix}modal-color: #{$modal-content-color};
-    --#{$prefix}modal-bg: #{$modal-content-bg};
-    --#{$prefix}modal-padding: 1.5rem 2rem;
-    
-    --#{$prefix}modal-border-color: var(--#{$prefix}light-grey);
-    --#{$prefix}modal-border-width: 1px;
-    --#{$prefix}modal-border-radius: 0.75rem;
-    
-    --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
-    --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
-
-    --#{$prefix}modal-header-padding: 2rem 2rem 0;
-    --#{$prefix}modal-header-border-width: 0px;
-
-    --#{$prefix}modal-title-line-height: 2rem;
-
-    --#{$prefix}modal-footer-gap: 0;
-    --#{$prefix}modal-footer-bg: none;
-    --#{$prefix}modal-footer-border-color: none; 
-    --#{$prefix}modal-footer-border-width: none;
-
-    .btn-close {
-        --#{$prefix}btn-close-icon: "data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
-        --#{$prefix}btn-close-color: var(--#{$prefix}color-default-color-light-text-lighter);
-        --#{$prefix}btn-close-width: 40px;
-        --#{$prefix}btn-border-radius: 50%;
-
-        //Hover state
-        --#{$prefix}btn-close-hover-color: var(--#{$prefix}color-default-color-light-text-heading);
-        --#{$prefix}btn-close-hover-bg: var(--#{$prefix}core-default-color-neutral-lightest);
-        --#{$prefix}btn-close-hover-bg-size: 15px;
-
-        //Focus state
-        --#{$prefix}btn-close-focus-color: var(--#{$prefix}color-default-color-light-text-heading);
-        --#{$prefix}btn-close-focus-shadow: none;
-        --#{$prefix}btn-close-focus-border: var(--#{$prefix}light-blue) solid 3px;
-    }
+  --#{$prefix}modal-zindex: #{$zindex-modal};
+  --#{$prefix}modal-width: #{$modal-md};
+
+  --#{$prefix}modal-margin: #{$modal-dialog-margin};
+  --#{$prefix}modal-color: #{$modal-content-color};
+  --#{$prefix}modal-bg: #{$modal-content-bg};
+  --#{$prefix}modal-padding: 1.5rem 2rem;
+
+  --#{$prefix}modal-border-color: var(--#{$prefix}light-grey);
+  --#{$prefix}modal-border-width: 1px;
+  --#{$prefix}modal-border-radius: 0.75rem;
+
+  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
+  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
+
+  --#{$prefix}modal-header-padding: 2rem 2rem 0;
+  --#{$prefix}modal-header-border-width: 0px;
+
+  --#{$prefix}modal-title-line-height: 2rem;
+
+  --#{$prefix}modal-footer-gap: 0;
+  --#{$prefix}modal-footer-bg: none;
+  --#{$prefix}modal-footer-border-color: none;
+  --#{$prefix}modal-footer-border-width: none;
+
+  .btn-close {
+    --#{$prefix}btn-close-icon: "data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0547 18.5938C17.8203 18.8281 17.3906 18.8281 17.1562 18.5938L12 13.3984L6.80469 18.5938C6.57031 18.8281 6.14062 18.8281 5.90625 18.5938C5.67188 18.3594 5.67188 17.9297 5.90625 17.6953L11.1016 12.5L5.90625 7.34375C5.67188 7.10938 5.67188 6.67969 5.90625 6.44531C6.14062 6.21094 6.57031 6.21094 6.80469 6.44531L12 11.6406L17.1562 6.44531C17.3906 6.21094 17.8203 6.21094 18.0547 6.44531C18.2891 6.67969 18.2891 7.10938 18.0547 7.34375L12.8594 12.5L18.0547 17.6953C18.2891 17.9297 18.2891 18.3594 18.0547 18.5938Z' /%3E%3C/svg%3E%0A";
+    --#{$prefix}btn-close-color: var(
+      --#{$prefix}color-default-color-light-text-lighter
+    );
+    --#{$prefix}btn-close-width: 40px;
+    --#{$prefix}btn-border-radius: 50%;
+
+    //Hover state
+    --#{$prefix}btn-close-hover-color: var(
+      --#{$prefix}color-default-color-light-text-heading
+    );
+    --#{$prefix}btn-close-hover-bg: var(
+      --#{$prefix}core-default-color-neutral-lightest
+    );
+    --#{$prefix}btn-close-hover-bg-size: 15px;
+
+    //Focus state
+    --#{$prefix}btn-close-focus-color: var(
+      --#{$prefix}color-default-color-light-text-heading
+    );
+    --#{$prefix}btn-close-focus-shadow: none;
+    --#{$prefix}btn-close-focus-border: var(--#{$prefix}focus-color) solid 3px;
+  }
 }
 
 // General styling rules.
 .modal {
-    .btn-close {
-        width: var(--#{$prefix}btn-close-width);
-        height: var(--#{$prefix}btn-close-width);
-        border-radius: var(--#{$prefix}btn-border-radius);
-        background-size: 12px;
-        padding: 0;
-        flex-shrink: 0;  //Flex, do not shrink this perfectly round button.
-
-        &:hover {
-            width: var(--#{$prefix}btn-close-width);
-            height: var(--#{$prefix}btn-close-width);
-            color: var(--#{$prefix}btn-close-hover-color);
-            background-size: var(--#{$prefix}btn-close-hover-bg-size);
-            background-color: var(--#{$prefix}btn-close-hover-bg);
-        }
-        &:focus {
-            width: var(--#{$prefix}btn-close-width);
-            height: var(--#{$prefix}btn-close-width);
-            color: var(--#{$prefix}btn-close-focus-color);
-            background-size: var(--#{$prefix}btn-close-hover-bg-size);
-            background-color: var(--#{$prefix}btn-close-hover-bg);
-            outline: var(--#{$prefix}btn-close-focus-border);
-            outline-offset: 2px;
-        }
-    }
+  .btn-close {
+    width: var(--#{$prefix}btn-close-width);
+    height: var(--#{$prefix}btn-close-width);
+    border-radius: var(--#{$prefix}btn-border-radius);
+    background-size: 12px;
+    padding: 0;
+    flex-shrink: 0; //Flex, do not shrink this perfectly round button.
 
-    .modal-header {
-        .modal-title {
-            line-height: var(--#{$prefix}modal-title-line-height);
-            font-size: 1.5rem;
-        }
+    &:hover {
+      width: var(--#{$prefix}btn-close-width);
+      height: var(--#{$prefix}btn-close-width);
+      color: var(--#{$prefix}btn-close-hover-color);
+      background-size: var(--#{$prefix}btn-close-hover-bg-size);
+      background-color: var(--#{$prefix}btn-close-hover-bg);
+    }
+    &:focus {
+      width: var(--#{$prefix}btn-close-width);
+      height: var(--#{$prefix}btn-close-width);
+      color: var(--#{$prefix}btn-close-focus-color);
+      background-size: var(--#{$prefix}btn-close-hover-bg-size);
+      background-color: var(--#{$prefix}btn-close-hover-bg);
+      outline: var(--#{$prefix}btn-close-focus-border);
+      outline-offset: 2px;
     }
+  }
 
-    .modal-footer {
-        padding: 0 2rem 2rem;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-        
-        .btn {
-            margin: 0 0 0 1.5rem;
-        }
+  .modal-header {
+    .modal-title {
+      line-height: var(--#{$prefix}modal-title-line-height);
+      font-size: 1.5rem;
     }
+  }
 
-    //Rescope for smaller modals 
-    .modal-dialog {
-        &.modal-sm {
-            .modal-footer {
-                flex-wrap: wrap;
-                .btn {
-                    width: 100%;
-                    margin: 1rem 0;
-                }
-            }
-        }
+  .modal-footer {
+    padding: 0 2rem 2rem;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+
+    .btn {
+      margin: 0 0 0 1.5rem;
     }
+  }
 
-    //Rescope for smaller viewports 
-    @include media-breakpoint-down(md) {
-        .modal-footer {
-            flex-wrap: wrap;
-            .btn {
-                width: 100%;
-                margin: 1rem 0;
-            }
+  //Rescope for smaller modals
+  .modal-dialog {
+    &.modal-sm {
+      .modal-footer {
+        flex-wrap: wrap;
+        .btn {
+          width: 100%;
+          margin: 1rem 0;
         }
+      }
     }
+  }
 
+  //Rescope for smaller viewports
+  @include media-breakpoint-down(md) {
+    .modal-footer {
+      flex-wrap: wrap;
+      .btn {
+        width: 100%;
+        margin: 1rem 0;
+      }
+    }
+  }
 }