@qld-gov-au/qgds-bootstrap5 2.0.0 → 2.0.2

package/src/components/bs5/quickexit/quickexit.scss

@@ -1,3 +1,4 @@
+@use "../../../css/mixins" as m;
 // ----------------------------------------------------------------------------------------------------------------------
 // Header - palettes and second hand variables:
 @import "./colours";
@@ -58,8 +59,10 @@
       position: absolute;
     }
     .qld-tooltip-wrapper:after {
-      border-block-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-      border-inline-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+      border-block-end: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
+      border-inline-start: var(--#{$prefix}tooltip-arrow) solid
+        var(--#{$prefix}quick-exit-tooltip-bg);
       border-inline-end: var(--#{$prefix}tooltip-arrow) solid transparent;
       border-block-start: var(--#{$prefix}tooltip-arrow) solid transparent;
       inset-block-end: calc(var(--#{$prefix}tooltip-arrow) * -1);
@@ -75,7 +78,8 @@
       &:focus-within {
         outline-offset: var(--#{$prefix}quick-exit-text-outline-offset);
         box-shadow: none;
-        outline: var(--#{$prefix}quick-exit-text-outline) solid var(--#{$prefix}quick-exit-tooltip-btn-focus);
+        outline: var(--#{$prefix}quick-exit-text-outline) solid
+          var(--#{$prefix}quick-exit-tooltip-btn-focus);
         border-radius: 0;
       }
     }
@@ -84,9 +88,13 @@
       font-weight: 500;
       text-decoration-line: underline;
       text-decoration-style: solid;
-      text-underline-offset: calc(var(--#{$prefix}quick-exit-text-outline-offset) * 2);
+      text-underline-offset: calc(
+        var(--#{$prefix}quick-exit-text-outline-offset) * 2
+      );
       &:hover {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qld-tooltip-prompt {
@@ -117,6 +125,7 @@
       border-color: var(--#{$prefix}quick-exit-button-bg-colour);
       background-color: var(--#{$prefix}quick-exit-button-bg-colour);
       color: var(--#{$prefix}quick-exit-button-text-colour);
+      display: inline-block;
       &:hover {
         border-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
         background-color: var(--#{$prefix}quick-exit-button-bg-colour-hover);
@@ -129,7 +138,9 @@
       }
       &:hover,
       &:focus {
-        text-decoration-thickness: var(--#{$prefix}link-underline-thickness-hover);
+        text-decoration-thickness: var(
+          --#{$prefix}link-underline-thickness-hover
+        );
       }
     }
     .qg-quick-exit__tips {
@@ -143,9 +154,9 @@
   .icon-info {
     position: absolute;
     inset-inline-start: 0;
-    background-repeat: no-repeat;
     margin-block-start: 4px;
-    background-image: url("data:image/svg+xml,<svg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 0.25C4.00781 0.25 0 4.29297 0 9.25C0 14.2422 4.00781 18.25 9 18.25C13.957 18.25 18 14.2422 18 9.25C18 4.29297 13.957 0.25 9 0.25ZM9 17.125C4.64062 17.125 1.125 13.6094 1.125 9.25C1.125 4.92578 4.64062 1.375 9 1.375C13.3242 1.375 16.875 4.92578 16.875 9.25C16.875 13.6094 13.3242 17.125 9 17.125ZM9 6.71875C9.45703 6.71875 9.84375 6.36719 9.84375 5.875C9.84375 5.41797 9.45703 5.03125 9 5.03125C8.50781 5.03125 8.15625 5.41797 8.15625 5.875C8.15625 6.36719 8.50781 6.71875 9 6.71875ZM10.6875 12.625H9.5625V8.6875C9.5625 8.40625 9.28125 8.125 9 8.125H7.875C7.55859 8.125 7.3125 8.40625 7.3125 8.6875C7.3125 9.00391 7.55859 9.25 7.875 9.25H8.4375V12.625H7.3125C6.99609 12.625 6.75 12.9062 6.75 13.1875C6.75 13.5039 6.99609 13.75 7.3125 13.75H10.6875C10.9688 13.75 11.25 13.5039 11.25 13.1875C11.25 12.9062 10.9688 12.625 10.6875 12.625Z' fill='white'/></svg>");
+    @include m.make-icon("alert-information");
+    --#{$prefix}icon-color: #{$qld-dark-action-secondary};
   }
   @include media-breakpoint-up(lg) {
     -webkit-box-pack: justify;
@@ -188,8 +199,10 @@
       .qld-tooltip-wrapper:after {
         border-block-end: var(--#{$prefix}tooltip-arrow) solid transparent;
         border-inline-start: var(--#{$prefix}tooltip-arrow) solid transparent;
-        border-inline-end: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
-        border-block-start: var(--#{$prefix}tooltip-arrow) solid var(--#{$prefix}quick-exit-tooltip-bg);
+        border-inline-end: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
+        border-block-start: var(--#{$prefix}tooltip-arrow) solid
+          var(--#{$prefix}quick-exit-tooltip-bg);
         inset-block-end: auto;
         inset-inline-start: 25px;
         inset-block-start: calc(var(--#{$prefix}tooltip-arrow) * -1);

package/src/components/bs5/searchInput/SearchInput.mdx

@@ -1,12 +1,12 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SearchInputStories from "./searchInput.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SearchInputStories from "./searchInput.stories";
 
 <Meta of={SearchInputStories} />
 
 # Search Input
-<Canvas>
-  <Story of={SearchInputStories.Default} />
-</Canvas>
+
+<Canvas of={SearchInputStories.Default} />
 
 ## Design resources
+
 - [Component library (Figma)]https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)./searchInput.stories

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

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as SidenavStories from "./sidenav.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as SidenavStories from "./sidenav.stories";
 
 <Meta of={SidenavStories} />
 
 # Side navigation
-<Canvas>
-  <Story of={SidenavStories.Default} />
-</Canvas>
+
+<Canvas of={SidenavStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/skiplinks/SkipLinks.mdx

@@ -23,9 +23,7 @@ Each skip link's `href` attribute must reference an `id` of an element on the pa
 <main id="content" tabindex="-1">Main content</main>
 ```
 
-<Canvas>
-  <Story of={Stories.Default} />
-</Canvas>
+<Canvas of={Stories.Default} />
 
 ## See also
 

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

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TableStories from "./table.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TableStories from "./table.stories";
 
 <Meta of={TableStories} />
 
 # Table
-<Canvas>
-  <Story of={TableStories.Default} />
-</Canvas>
+
+<Canvas of={TableStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/tabs/Tabs.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TabsStories from "./tabs.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TabsStories from "./tabs.stories";
 
 <Meta of={TabsStories} />
 
 # Tabs
-<Canvas>
-  <Story of={TabsStories.Default} />
-</Canvas>
+
+<Canvas of={TabsStories.SectionTabsDefaultDark} />
 
 ## Design resources
 

package/src/components/bs5/tabs/tabs.scss

@@ -111,12 +111,17 @@
     }
     .tabs-area {
       --qld-gutter-x: 0;
+      padding-inline: 0;
       .nav-tabs {
         margin-block-end: -1px;
       }
     }
     .tab-content {
       padding: 1.25rem;
+
+      .tab-pane p:last-of-type {
+        margin-block-end: 0;
+      }
     }
   }
   &.section-tabs {
@@ -135,6 +140,7 @@
       @include media-breakpoint-down(sm) {
         padding-inline: 1rem;
       }
+      margin-inline: auto;
       border-block-end: 1px solid;
       .nav-tabs {
         max-width: fit-content;
@@ -154,10 +160,25 @@
       }
     }
     .tab-content {
+      padding-inline: 4rem;
+
+      @include media-breakpoint-down(xl) {
+        padding-inline: 3rem;
+      }
+      @include media-breakpoint-down(lg) {
+        padding-inline: 2rem;
+      }
+      @include media-breakpoint-down(sm) {
+        padding-inline: 1rem;
+      }
+      margin-inline: auto;
       background-color: var(--qld-body-bg);
       border: 0;
       border-block-start: 0;
       margin-block-start: -1px;
+      .tab-pane p:last-of-type {
+        margin-block-end: 0;
+      }
       > article {
         max-width: var(--max-width);
         margin-inline: auto;
@@ -396,7 +417,7 @@
           display: flex;
           gap: 0.5rem;
           white-space: nowrap;
-          color: var(--qld-link-color);
+          color: var(--qld-nav-link-color);
           align-items: anchor-center;
           i {
             font-size: 1.125rem;

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

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TagStories from "./tag.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TagStories from "./tag.stories";
 
 <Meta of={TagStories} />
 
 # Tag
-<Canvas>
-  <Story of={TagStories.Default} />
-</Canvas>
+
+<Canvas of={TagStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/typography/Typography.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as TypographyStories from "./typography.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as TypographyStories from "./typography.stories";
 
 <Meta of={TypographyStories} />
 
 # Typography
-<Canvas>
-  <Story of={TypographyStories.Default} />
-</Canvas>
+
+<Canvas of={TypographyStories.Default} />
 
 ## Design resources
 

package/src/components/bs5/video/Video.mdx

@@ -1,12 +1,11 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as VideoStories from "./video.stories"
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as VideoStories from "./video.stories";
 
 <Meta of={VideoStories} />
 
 # Video
-<Canvas>
-  <Story of={VideoStories.Default} />
-</Canvas>
+
+<Canvas of={VideoStories.Default} />
 
 ## Design resources
 

package/src/css/functions/_index.scss

@@ -0,0 +1 @@
+@forward "in-list";

package/src/css/functions/in-list.scss

@@ -0,0 +1,5 @@
+@use "sass:list";
+
+@function in-list($value, $list) {
+  @return list.index($list, $value) != null;
+}

package/src/css/main.scss

@@ -37,6 +37,7 @@ $enable-dark-mode: true;
 
 // 2. QLD Design System variables (Bootstrap overrides)
 @import "./qld-variables";
+@import "variables";
 
 // @import "./scss/qld-variables-dark"; //future state
 
@@ -88,6 +89,9 @@ $enable-dark-mode: true;
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "../../node_modules/bootstrap/scss/utilities/api";
 
+// Themes
+@import "qld-theme";
+
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";
 
@@ -136,8 +140,5 @@ $enable-dark-mode: true;
 // Custom utility classes
 @import "utilities";
 
-// Themes
-@import "qld-theme";
-
 // Print
 @import "qld-print";

package/src/css/mixins/_index.scss

@@ -1,4 +1,7 @@
 @forward "focusable";
 @forward "generate-color-vars";
+@forward "make-icon" with (
+  $prefix: "qld-"
+);
 @forward "register-vars";
 @forward "unset-button-styles";

package/src/css/mixins/make-icon.scss

@@ -0,0 +1,87 @@
+@use "sass:list";
+@use "sass:map";
+@use "../../components/bs5/icons/icons.list" as *;
+@use "../../components/bs5/icons/icons-multicolours.list" as *;
+@use "../../components/bs5/icons/icons.sizes" as *;
+@use "../functions" as f;
+
+$prefix: "qld-" !default;
+
+///
+/// @param {String} $name [null] - The name of icon
+/// @param {String} $size ["sm"] - The icon size, valid values are "xs" | "sm" | "md" | "lg" | "xl" | "xxl"
+/// @param {String | null} $pseudo [null] - Whether the mixin applies styles as a pseudo-element. Valid string values are "before" | "after"
+/// @param {false} $is-inline - Applies extra styles to assist with vertical alignent when used inline with text.
+/// @param {Boolean} $include-base [true] - Apply all base styles. Set to false when reusing this mixin to create modifier classes where base styles are already applied (For instance qld-icon-{name})
+@mixin make-icon(
+  $name: null,
+  $size: "sm",
+  $pseudo: null,
+  $is-inline: false,
+  $include-base: true
+) {
+  // validate $name
+  @if ($name and not f.in-list($name, $icon-names)) {
+    @error "Invalid parameter $name: " + $name;
+  }
+  // validate $include-base
+  @if (not $name and not $include-base and not $is-inline) {
+    @error "Must include either $name or $include-base or $is-inline";
+  }
+
+  //validate size
+  @if (not map.get($icon-sizes, $size)) {
+    @error "Invalid parameter $size. Use one of " + map.keys($icon-sizes);
+  }
+
+  // validate $pseudo
+  @if (not list.index(("before", "after", null), $pseudo)) {
+    @error 'Invalid $pseudo value, can only be "before", "after" or null';
+  }
+
+  @if $pseudo {
+    &::#{$pseudo} {
+      content: "";
+      // recursively call this mixin with $pseudo set to null
+      @include make-icon($name, $size, null, $is-inline, $include-base);
+    }
+  } @else {
+    @if $include-base {
+      --_icon-size: var(--icon-size, #{map.get($icon-sizes, $size)});
+      display: inline-block;
+      width: var(--_icon-size);
+      height: var(--_icon-size);
+      background-position: center center;
+      background-repeat: no-repeat;
+      mask-position: center center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      background-size: contain;
+      vertical-align: middle;
+
+      // What's going on here?
+      // These styles unify svg and mask-image implementations
+      // Color is the property we can share across both, since we can apply currentColor to backgroundColor.
+      // Preferred API to set color on icons is via --qld-icon-color property.
+      // This is not set intentionally by default, so we can inherit --qld-action-icon-color from palette context.
+      // Final fallback to inherit in case these go wrong.
+      color: var(--#{$prefix}icon-color, var(--qld-action-icon-color, inherit));
+      background-color: currentColor;
+    }
+    @if $is-inline {
+      vertical-align: baseline;
+      position: relative;
+      top: calc(calc(var(--_icon-size) / 2) - 0.5cap);
+    }
+    @if $name {
+      @if f.in-list($name, $icons-multicolour) {
+        background-image: var(--qgds-icon-#{$name});
+        -webkit-background-image: var(--qgds-icon-#{$name});
+        background-color: transparent;
+      } @else {
+        mask-image: var(--qgds-icon-#{$name});
+        -webkit-mask-image: var(--qgds-icon-#{$name});
+      }
+    }
+  }
+}

package/src/css/qld-theme.scss

@@ -1,44 +1,86 @@
-// Dark mode.  
-// Note that you can't read custom variables into media queries (as at Sep 2023).
-// Example: "background: var(--theme-background);"  
+// QLD Theme Palette Classes
+// Provides complete theme styling including color, background-color, and CSS variables
 
-// However, you can set them, however:
-// example: --theme-background: #000;
-
-//You can also fall back to SASS variable to set at compile time.
-
-@include color-mode(dark) {
-    :root {
-        --#{$prefix}body-bg: var(--qld-brand-primary-dark);
-        --#{$prefix}body-color: #FFF;
-        --#{$prefix}heading-color: #FFF;
-        --#{$prefix}link-color: #FFF;
-        --#{$prefix}link-hover-color: var(--qld-brand-accent);
-    }
+// Theme properties mixins to avoid duplication
+@mixin light-theme-properties {
+  background-color: var(--qld-body-bg);
+  color: var(--qld-body-color);
+  --qld-action-icon-color: var(--qld-light-action-secondary);
+  --qld-action-icon-hover-color: var(--qld-light-action-secondary-hover);
+  --qld-body-color: #{$body-color};
+  --qld-body-font-weight: #{$body-font-weight};
+  --qld-focus-color: var(--qld-light-focus);
+  --qld-headings-color: #{$headings-color};
+  --qld-link-color: #{$link-color};
+  --qld-link-color-rgb: #{to-rgb($link-color)};
+  --qld-link-font-weight: 400;
+  --qld-link-hover-color: var(--qld-link-color);
+  --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
+  --qld-link-underline: #{$color-default-color-light-underline-default};
+  --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
+  --qld-link-underline-offset: 0.3rem;
+  --qld-link-underline-thickness: 0.5px;
+  --qld-link-underline-thickness-hover: 2px;
+  --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
+  --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
+  --qld-selection-bg: var(--qld-brand-primary);
+  --qld-selection-color: var(--qld-white);
+}
 
-    //...etc
+@mixin dark-theme-properties {
+  background-color: var(--qld-body-bg);
+  color: var(--qld-body-color);
+  --qld-action-icon-color: var(--qld-dark-action-secondary);
+  --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
+  --qld-body-color: #fff;
+  --qld-focus-color: var(--qld-dark-focus);
+  --qld-headings-color: #fff;
+  --qld-link-color: #fff;
+  --qld-link-color-rgb: 255, 255, 255;
+  --qld-link-hover-color: #fff;
+  --qld-link-hover-color-rgb: 255, 255, 255;
+  --qld-link-visited: var(--qld-link-visited-dark);
+  --qld-selection-bg: var(--qld-white);
+  --qld-selection-color: var(--qld-brand-primary);
 }
 
+// Default theme (inherits :root variables) and root variables
+:root,
+.default {
+  @include light-theme-properties;
+  --qld-body-bg: var(--qld-default-background);
+  --qld-border-color: var(--qld-light-border);
+}
 
+// Light theme
 .light {
-    background: var(--#{$prefix}light-background);
+  @include light-theme-properties;
+  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
 }
 
+// Alt theme (light alternative)
 .alt {
-    background: var(--#{$prefix}light-alt-background);
+  @include light-theme-properties;
+  --qld-body-bg: var(--qld-light-alt-background);
+  --qld-border-color: var(--qld-soft-grey);
 }
 
-.bg-default {  background-color: var(--qld-default-background); }
-.bg-default-shade {  background-color: var(--qld-default-background-shade); }
-
-.bg-light {  background-color: var(--qld-light-background); }
-.bg-light-shade {  background-color: var(--qld-light-background-shade); }
-
-.bg-light-alt {  background-color: var(--qld-light-alt-background); }
-.bg-light-alt-shade {  background-color: var(--qld-light-alt-background-shade); }
+// Dark theme
+.dark {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-dark-background);
+  --qld-border-color: var(--qld-dark-border);
+}
 
-.bg-dark {  background-color: var(--qld-dark-background); }
-.bg-dark-shade {  background-color: var(--qld-dark-background-shade); }
+// Dark alt theme
+.dark-alt {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-dark-alt-background);
+  --qld-border-color: var(--qld-dark-alt-border);
+}
 
-.bg-dark-alt {  background-color: var(--qld-dark-alt-background); }
-.bg-dark-alt-shade {  background-color: var(--qld-dark-alt-background-shade); }
+// Bootstrap dark mode support
+:root[data-bs-theme="dark"] {
+  @include dark-theme-properties;
+  --qld-body-bg: var(--qld-brand-primary);
+}