@qld-gov-au/qgds-bootstrap5 1.0.13 → 1.0.14

package/src/components/bs5/button/button.hbs

@@ -1,11 +1,32 @@
-{{#unless islink}}
-<button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-{{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
-</button>
 
-{{else}}
+    {{#unless islink}}
+    <button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'leading'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    {{label}}
+    {{#if iconClass}}
+        {{#ifCond iconPosition '==' 'trailing'}}
+            <span class="btn-icon {{iconClass}}"></span>
+        {{/ifCond}}
+    {{/if}}
+    </button>
 
-<a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}} aria-disabled="true" {{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-    {{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
-</a>
-{{/unless }}
+    {{else}}
+
+    <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}} aria-disabled="true" {{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+        {{#if iconClass}}
+            {{#ifCond iconPosition '==' 'leading'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{/ifCond}}
+        {{/if}}
+        {{label}}
+        {{#if iconClass}}
+            {{#ifCond iconPosition '==' 'trailing'}}
+                <span class="btn-icon {{iconClass}}"></span>
+            {{/ifCond}}
+        {{/if}}
+    </a>
+    {{/unless }}

package/src/components/bs5/button/button.scss

@@ -1,5 +1,8 @@
+// QGDS QOL Button
+// extends https://getbootstrap.com/docs/5.3/components/buttons/#variables
+
 .btn {
-    --#{$prefix}btn-padding-x: 1rem;
+    --#{$prefix}btn-padding-x: 1.5rem;
     --#{$prefix}btn-padding-y: 0.75rem;
     --#{$prefix}btn-font-family: #{$font-family-sans-serif};
     --#{$prefix}btn-border-width: 3px;
@@ -8,50 +11,60 @@
     --#{$prefix}btn-focus-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);
     --#{$prefix}btn-disabled-opacity: 0.5;
 
+    //Primary button variant
     &-primary {
-    --#{$prefix}btn-bg: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}button-dark-blue);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
-    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light-grey-alt);
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: transparent;
+        --#{$prefix}btn-bg: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}button-dark-blue);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-disabled-bg: var(--#{$prefix}grey);
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: transparent;
     }
+
+    //Secondary button variant
     &-secondary,
     &-outline-secondary {
-    --#{$prefix}btn-bg: transparent;
-    --#{$prefix}btn-color: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
-    --#{$prefix}btn-hover-color: var(--#{$prefix}sapphire-blue);
-    --#{$prefix}btn-hover-bg: transparent;
-    --#{$prefix}btn-hover-border-color: var(--#{$prefix}alt-button-hover);
-    --#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
-    --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-active-shadow: none;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light-grey-alt);
-    --#{$prefix}gradient: none;
+        --#{$prefix}btn-bg: transparent;
+        --#{$prefix}btn-color: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
+        --#{$prefix}btn-hover-color: var(--#{$prefix}sapphire-blue);
+        --#{$prefix}btn-hover-bg: transparent;
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}alt-button-hover);
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-active-shadow: none;
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: var(--#{$prefix}grey);
+        --#{$prefix}gradient: none;
     }
+
+    //Tertiary button variant
     &-tertiary {
-    --#{$prefix}btn-color: #{$primary};
-    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-hover-color: #{$primary};
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
-    --#{$prefix}btn-active-bg: transparent;
-    --#{$prefix}btn-active-shadow: none;
-    --#{$prefix}btn-disabled-bg: transparent;
-    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
-    --#{$prefix}btn-disabled-opacity: 1;
-    --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}gradient: none;
+        --#{$prefix}btn-color: #{$primary};
+        --#{$prefix}btn-border-color: transparent;
+        --#{$prefix}btn-hover-color: #{$primary};
+        --#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
+        --#{$prefix}btn-hover-border-color: transparent;
+        --#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
+        --#{$prefix}btn-active-bg: transparent;
+        --#{$prefix}btn-active-shadow: none;
+        --#{$prefix}btn-disabled-bg: transparent;
+        --#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
+        --#{$prefix}btn-disabled-opacity: 1;
+        --#{$prefix}btn-disabled-border-color: transparent;
+        --#{$prefix}gradient: none;
     }
-    .dark &, .dark-alt & {
+}
+
+.dark .btn,
+.dark-alt .btn {
+
+    //Primary button variant (dark mode)
     &-primary {
         --#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
         --#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
@@ -64,7 +77,9 @@
         --#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: transparent;
-        }
+    }
+
+    //Secondary button variant (dark mode)
     &-secondary,
     &-outline-secondary {
         --#{$prefix}btn-border-color: var(--#{$prefix}golden-yellow);
@@ -78,6 +93,8 @@
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
     }
+
+    //Tertiary button variant (dark mode)
     &-tertiary {
         --#{$prefix}btn-color: var(--#{$prefix}white);
         --#{$prefix}btn-bg: transparent;
@@ -91,16 +108,17 @@
         --#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
         --#{$prefix}btn-disabled-border-color: transparent;
     }
-    }
 }
+
 a.btn, .btn {
     white-space: nowrap;
+
     span[class^=icon-],
     span[class^=fa-] {
-        margin-right: 0.5rem;
+        margin: 0 0.5rem;
     }
     .btn-icon {
-        margin-right: 0.5em;
+        margin: 0 0.5em;
     }
     &:hover, &:visited, &:focus {
         color: var(--#{$prefix}btn-color);
@@ -121,6 +139,8 @@ a.btn, .btn {
     &.disabled {
         color: var(--#{$prefix}btn-disabled-color);
     }
+
+    //Primary button variant
     &-primary {
         box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2);
 
@@ -140,6 +160,8 @@ a.btn, .btn {
             box-shadow: none;
         }
     }
+
+    //Secondary button variant
     &-secondary,
     &-outline-secondary {
         .btn-icon {
@@ -169,6 +191,8 @@ a.btn, .btn {
             }
         }
     }
+
+    //Tertiary button variant
     &-tertiary {
         text-decoration: underline;
         text-underline-offset: 0.3em;
@@ -195,11 +219,14 @@ a.btn, .btn {
             }
         }
     }
+
+    //Dark mode button variants
     .dark &, .dark-alt & {
         &:focus {
             outline: var(--#{$prefix}dark-focus) solid 3px;
             outline-offset: 2px;
-            }
+        }
+
         &-secondary,
         &-outline-secondary {
             color: var(--#{$prefix}btn-disabled-color);
@@ -209,10 +236,15 @@ a.btn, .btn {
             .btn-icon {
                 color: var(--#{$prefix}golden-yellow);
             }
+            &:hover {
+                .btn-icon {
+                    color: var(--#{$prefix}dark-action-secondary-hover);
+                }
+            }
             &:active {
                 text-decoration: none;
                 .btn-icon {
-                    color: var(--#{$prefix}btn-active-color);
+                    color: var(--#{$prefix}white);
                 }
             }
             &:disabled, &.disabled {
@@ -224,3 +256,14 @@ a.btn, .btn {
     }
 }
 
+// Buttons grouping using btn-toolbar.
+.btn-toolbar .btn {
+    @include media-breakpoint-down(md) {
+        width: 100%;
+        margin: 24px 0;
+    }
+    @include media-breakpoint-up(md) {
+        margin: 1.5rem; 
+    }
+    min-width: 160px;
+}

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

@@ -2,17 +2,30 @@
 import { Button } from './Button.js';
 import defaultdata from './button.data.json';
 
+/**
+ * Define the variants for Button component.
+ * Object key: variant's CSS class.
+ * Object value: variant's label on Storybook.
+ */
+const buttonVariants = {
+  "btn-primary": "Primary",
+  "btn-secondary": "Secondary",
+  "btn-tertiary": "Tertiary",
+}
+
 export default {
   tags: ['autodocs'],
   title: 'Components/Button',
+  args: defaultdata,
   render: (args) => {
     return `
-    ${new Button(args).html}
-    ${new Button({...args, isdisabled: true}).html}
+    <div class="btn-toolbar">
+      ${new Button(args).html}
+      ${new Button({...args, isdisabled: true}).html}
+    </div>
     `//expand arguments, specifically turn isdisabled into true
   },
 
-  //https://storybook.js.org/docs/api/arg-types 
   argTypes: {
     isdisabled: {
       table: {
@@ -21,20 +34,21 @@ export default {
     },
     variantClass: {
       name: "Variants",
-      description: `Settable variant for the component`,
+      description: 'Settable variant type for Button component',
       control: {
         type: "radio",
-        labels: {
-          "btn-primary": "Primary",
-          "btn-secondary": "Secondary",
-          "btn-tertiary": "Tertiary",
-        },
+        labels: buttonVariants,
       },
-      options: [
-        "btn-primary",
-        "btn-secondary",
-        "btn-tertiary",
-      ],
+      options: Object.keys(buttonVariants),
+    },
+    iconPosition: {
+      description: 'Position of the icon placement',
+      control: "radio",
+      options: ["leading", "trailing"],
+    },
+    target: {
+      control: "select",
+      options: ["_self", "_blank", "_parent", "_top"],
     },
   },
 
@@ -44,26 +58,18 @@ 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",
     },
-    docs: {
-      controls: {
-      },
-    },
   },
-
-
 };
 
-// Default blockquote story
-export const Default = {
-  args: defaultdata,
-};
+/**
+ * Default Button story
+ */
+export const Default = {};
 
 /**
- * Dark Breadcrumbs story
+ * Dark Button story
  * */
 export const Dark = {
-  
-  args: defaultdata,
   parameters: {
     backgrounds: {
       default: 'Dark',
@@ -82,3 +88,91 @@ export const Dark = {
     },
   ],
 };
+
+/**
+ * Show all button variants in the Default Light mode.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllVariantsInDefaultMode = {
+  render:() => {
+    const states = [
+      { isdisabled: false, label: 'Enabled' },
+      { isdisabled: true, label: 'Disabled' },
+    ];
+
+    /* Return all button variants with label = variant + state */
+    return Object.entries(buttonVariants).map(([variantClass, variantLabel]) => {
+      const variantButtons = states.map(state =>
+        new Button({
+          ...defaultdata,
+          variantClass,
+          ...state,
+          label: state.label,
+        }).html,
+      ).join('');
+
+      return `<div class="d-grid mb-4">
+                <div class="fw-bold">${variantLabel}</div>
+                <div class="btn-toolbar">
+                  ${variantButtons}
+                </div>
+              </div>`;
+
+    }).join('');
+  },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+/**
+ * Show all button variants in the Dark mode.
+ * This Story can be used to help in troubleshooting.
+ */
+export const AllVariantsInDarkMode = {
+  render:() => {
+    const states = [
+      { isdisabled: false, label: 'Enabled' },
+      { isdisabled: true, label: 'Disabled' },
+    ];
+
+    /* Return all button variants with label = variant + state */
+    return Object.entries(buttonVariants).map(([variantClass, variantLabel]) => {
+      const variantButtons = states.map(state =>
+        new Button({
+          ...defaultdata,
+          variantClass,
+          ...state,
+          label: state.label,
+        }).html,
+      ).join('');
+
+      return `<div class="d-grid mb-4">
+                <div class="fw-bold">${variantLabel}</div>
+                <div class="btn-toolbar">
+                  ${variantButtons}
+                </div>
+              </div>`;
+
+    }).join('');
+  },
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+    },
+    controls: {
+      disable: true,
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

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

@@ -8,7 +8,7 @@
     --#{$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;
+    --#{$prefix}callout-spacer: 1rem;
 
     .light & {
         --#{$prefix}callout-bg-color: var(--#{$prefix}light-background-shade);

package/src/components/bs5/header/_colours.scss

@@ -2,7 +2,6 @@
     // ------------------------------------------------------------------------------------------------------------------
     //  1. Common vars
     // ------------------------------------------------------------------------------------------------------------------
-
     // Shared thickness, offset etc. 
     --#{$prefix}header-underline__thickness-thin: 0.5px;
     --#{$prefix}header-underline__thickness-thick: 2px;
@@ -11,22 +10,6 @@
     // ------------------------------------------------------------------------------------------------------------------
     //  2. Second hand variables (each variant, default, light, dark, dark-alt) using QGDS-Tokens (npm)
     // ------------------------------------------------------------------------------------------------------------------
-    //  Search inputs
-    --#{$prefix}header-site-search-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}header-site-search-btn-color: var(--#{$prefix}color-default-color-dark-text-default);
-    --#{$prefix}header-site-search-btn-bg: var(--#{$prefix}color-default-color-light-link-default);
-    --#{$prefix}header-site-search-border-color: var(--#{$prefix}color-default-color-light-action-primary-hover);
-    --#{$prefix}header-site-search-icon-color:var(--#{$prefix}color-default-color-light-text-lighter);
-    --#{$prefix}header-site-search-text-color:var(--#{$prefix}color-default-color-light-text-default);
-
-    // Search input dark
-    --#{$prefix}header-dark-site-search-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}header-dark-site-search-btn-color: var(--#{$prefix}color-default-color-light-text-default);
-    --#{$prefix}header-dark-site-search-btn-bg: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}header-dark-site-search-border-color: var(--#{$prefix}color-default-color-dark-border-default);
-    --#{$prefix}header-dark-site-search-icon-color:var(--#{$prefix}color-default-color-dark-text-lighter);
-    --#{$prefix}header-dark-site-search-text-color:var(--#{$prefix}color-default-color-dark-text-default);
-
     // Header
     --#{$prefix}header_color: var(--#{$prefix}color-default-color-light-text-default);
     --#{$prefix}header_bg: var(--#{$prefix}color-default-color-light-background-default);
@@ -80,24 +63,6 @@
     --#{$prefix}header__site-name__heading__text_color: var(--#{$prefix}color-default-color-light-site-title);
     --#{$prefix}header__site-name__subline__text_color: var(--#{$prefix}color-default-color-light-text-lighter);
 
-    // Search
-    --site-search-bg: var(--#{$prefix}header-site-search-bg);
-    --site-search-btn-color: var(--#{$prefix}header-site-search-btn-color);
-    --site-search-btn-bg: var(--#{$prefix}header-site-search-btn-bg);
-    --site-search-border-color: var(--#{$prefix}header-site-search-border-color);
-    --site-search-icon-color: var(--#{$prefix}header-site-search-icon-color);
-    --site-search-input-color: var(--#{$prefix}header-site-search-text-color);
-    --site-search-input-focus-color: var(--#{$prefix}color-default-color-light-focus-default);
-    --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
-
-    // Suggestions colours
-    --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-light-background-default-shade);
-    --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-light-border-default);
-    --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-light-accent-design-accent);
-    --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-default);
-    --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
-    --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
-
     // ------------------------------------------------------------------------------------------------------------------
     //  3. Dark/dark-alt modes
     // ------------------------------------------------------------------------------------------------------------------
@@ -147,23 +112,6 @@
 
         // COA
         --#{$prefix}header__brand-image__crest_fill: var(--#{$prefix}color-default-color-dark-crest-fill);
-        
-        // Search (dark/dark/alt)
-        --site-search-bg: var(--#{$prefix}header-dark-site-search-bg);
-        --site-search-btn-color: var(--#{$prefix}header-dark-site-search-btn-color);
-        --site-search-btn-bg: var(--#{$prefix}header-dark-site-search-btn-bg);
-        --site-search-border-color: var(--#{$prefix}header-dark-site-search-border-color);
-        --site-search-icon-color: var(--#{$prefix}header-dark-site-search-icon-color);
-        --site-search-input-color: var(--#{$prefix}header-dark-site-search-text-color);
-        --site-search-text-color: var(--#{$prefix}header-site-search-text-color);
-
-        // Suggestions colours
-        --#{$prefix}header_site-search-suggestions-bg: var(--#{$prefix}color-default-color-dark-background-default-shade);
-        --#{$prefix}header_site-search-suggestions-hover: var(--#{$prefix}color-default-color-dark-background-default);
-        --#{$prefix}header_site-search-suggestions-hover__border_color: var(--#{$prefix}color-default-color-dark-accent-design-accent);
-        --#{$prefix}header_site-search-suggestions-feature_bg: var(--#{$prefix}color-default-color-dark-background-alt);
-        --#{$prefix}header_site-search-suggestions-feature_hover: var(--#{$prefix}color-default-color-dark-background-alt-shade);
-        --#{$prefix}header_site-search-suggestions-feature_text-color: var(--#{$prefix}color-default-color-dark-text-default);
     }
 
     .dark-alt & {