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

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);
+}

package/src/css/qld-type.scss

@@ -1,125 +1,4 @@
-//Typography
-$font-family-sans-serif: "Noto Sans",
-  system-ui,
-  -apple-system,
-  "Segoe UI",
-  Roboto,
-  "Helvetica Neue",
-  "Noto Sans",
-  "Liberation Sans",
-  Arial,
-  sans-serif,
-  "Apple Color Emoji",
-  "Segoe UI Emoji",
-  "Segoe UI Symbol",
-  "Noto Color Emoji" !default;
-
-// Override Bootstrap font variables
-$font-weight-base: 400;
-$font-weight-bold: 600;
-$font-weight-bolder: 900;
-
-// Apply custom font weights to Bootstrap's utility classes
-$font-weights: (
-  normal: 400,
-  bold: 600,
-  bolder: 900
-);
-
-$body-color: $qld-text-grey;
-$body-font-weight: 400;
-$font-size-base: 1rem;
-
-// https: //www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=58880-54175&t=35PGuqUnIyLmf28d-0
-// Headings font weight and line height
-$headings-font-weight: 600;
-$headings-line-height: 1.3;
-
-// Headings font sizes
-$h1-font-size: $font-size-base * 2.5;
-$h2-font-size: $font-size-base * 2;
-$h3-font-size: $font-size-base * 1.5;
-$h4-font-size: $font-size-base * 1.25;
-$h5-font-size: $font-size-base * 1;
-$h6-font-size: $font-size-base * 0.875;
-
-// < 991 Mobile Tablet font sizes and line heights
-$h1-font-size-mobile: $font-size-base * 2; // 32
-$h2-font-size-mobile: $font-size-base * 1.75; // 28
-$h1-line-height-mobile: 1.25; //40
-$h2-line-height-mobile: 1.285; //36
-
-$headings-color: $qld-text-headings;
-$qld-heading-color: $core-default-color-brand-primary-light-green;
-
-
-$link-color: $qld-brand-primary;
-$link-hover-color: $qld-brand-primary;
-$link-visited-color: $qld-link-visited;
-
-//Links
-.default,
-.light,
-.alt,
-:root {
-  --qld-headings-color: #{$headings-color};
-  --qld-body-color: #{$body-color};
-  --qld-body-font-weight: #{$body-font-weight};
-  --qld-link-font-weight: 400;
-  --qld-link-color: #{$link-color};
-  --qld-link-color-rgb: #{to-rgb($link-color)};
-  --qld-link-hover-color: var(--qld-link-color);
-  --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
-  --qld-link-underline-offset: 0.3rem;
-  --qld-link-underline-thickness: 0.5px;
-  --qld-link-underline-thickness-hover: 2px;
-  --qld-link-underline: #{$color-default-color-light-underline-default};
-  --qld-link-underline-hover: #{$color-default-color-light-underline-default-hover};
-  --qld-link-underline-visited: #{$color-default-color-light-underline-visited};
-  --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-hover};
-  --qld-selection-color: var(--qld-white);
-  --qld-selection-bg: var(--qld-brand-primary);
-  --qld-focus-color: var(--qld-light-focus);
-  --qld-action-icon-color: var(--qld-light-action-secondary);
-  --qld-action-icon-hover-color: var(--qld-light-action-secondary-hover);
-}
-
-.dark,
-.dark-alt,
-:root[data-bs-theme="dark"] {
-  --qld-headings-color: #fff;
-  --qld-body-color: #fff;
-  --qld-body-bg: var(--qld-brand-primary);
-  --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-color: var(--qld-brand-primary);
-  --qld-selection-bg: var(--qld-white);
-  --qld-focus-color: var(--qld-dark-focus);
-  --qld-action-icon-color: var(--qld-dark-action-secondary);
-  --qld-action-icon-hover-color: var(--qld-dark-action-secondary-hover);
-}
-
-.default {
-  --qld-border-color: var(--qld-light-border);
-}
-.light {
-  --qld-border-color: var(--#{$prefix}color-default-color-light-border-light);
-}
-.alt {
-  --qld-body-bg: var(--qld-light-alt-background);
-  --qld-border-color: var(--qld-soft-grey);
-}
-.dark {
-  --qld-border-color: var(--qld-dark-border);
-}
-.dark-alt {
-  --qld-body-bg: var(--qld-dark-alt-background);
-  --qld-border-color: var(--qld-dark-alt-border);
-}
-
+//Links - default root variables moved to qld-theme.scss
 
 //Content and links
 body {
@@ -127,7 +6,6 @@ body {
 }
 
 .qld-content-body {
-
   p {
     margin-bottom: 1.25rem;
   }
@@ -141,7 +19,6 @@ body {
   li {
     margin-top: 0.5rem;
   }
-
 }
 
 // Apply correct bold font-weight
@@ -164,7 +41,6 @@ dt {
   font-weight: $font-weight-bold;
 }
 
-
 // Definition list
 dt {
   margin-top: 0.5rem;
@@ -182,10 +58,8 @@ dl.qld-content-dates {
   dd {
     margin-top: 0.5rem;
   }
-
 }
 
-
 // Light, Light alt
 
 h1,
@@ -197,26 +71,32 @@ h6 {
   color: var(--#{$prefix}color-default-color-light-text-heading);
 }
 
-
-
 a,
 a.nav-link {
   text-underline-offset: var(--qld-link-underline-offset);
   text-decoration-thickness: var(--qld-link-underline-thickness);
-  text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default);
+  text-decoration-color: var(
+    --#{$prefix}color-default-color-light-underline-default
+  );
 
   &:hover {
     text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-    text-decoration-color: var(--#{$prefix}color-default-color-light-underline-default-hover);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-light-underline-default-hover
+    );
   }
 
   &:visited {
     color: var(--#{$prefix}color-default-color-light-link-visited);
-    text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-light-underline-visited
+    );
 
     &:hover {
       text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-      text-decoration-color: var(--#{$prefix}color-default-color-light-underline-visited-hover);
+      text-decoration-color: var(
+        --#{$prefix}color-default-color-light-underline-visited-hover
+      );
     }
   }
 
@@ -232,10 +112,9 @@ figure > figcaption {
   line-height: 20px;
 }
 
-// Dark, dark alt
+// Theme-specific typography styles
 .dark,
 .dark-alt {
-
   h1,
   h2,
   h3,
@@ -244,25 +123,32 @@ figure > figcaption {
   h6 {
     color: var(--#{$prefix}color-default-color-dark-text-heading);
   }
+
   body & {
     color: var(--qld-body-color);
   }
+
   a,
   a.nav-link {
-    text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-dark-underline-default
+    );
 
     &:visited {
       color: var(--#{$prefix}color-default-color-dark-link-visited);
-      text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-visited);
+      text-decoration-color: var(
+        --#{$prefix}color-default-color-dark-underline-visited
+      );
 
       &:hover {
-        text-decoration-color: var(--#{$prefix}color-default-color-dark-underline-default-hover);
+        text-decoration-color: var(
+          --#{$prefix}color-default-color-dark-underline-default-hover
+        );
       }
     }
   }
 }
 
-
 a.nostyle {
   text-decoration: unset;
   text-underline-offset: unset;
@@ -282,4 +168,4 @@ a.nostyle {
   color: var(--qld-selection-color);
   background: var(--qld-selection-bg);
   text-shadow: none;
-}
+}