@qld-gov-au/qgds-bootstrap5 2.0.6 → 2.0.8

package/src/components/bs5/tag/tag.scss

@@ -93,6 +93,9 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
   list-style-type: none;
   margin: 0.5rem 0;
   padding: 30px;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 
   .tag-item {
     --_padding-y: 0;
@@ -104,12 +107,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     //
     display: inline-flex;
     align-items: center;
-    color: var(--#{$prefix}dark-grey-muted);
-    margin-top: 0.5rem;
-    gap: calc(var(--_padding-x) / 2);
+    color: var(--#{$prefix}light-text-lighter);
+    // margin: 0 1rem 1rem 0;
     padding: var(--_padding-y) var(--_padding-x);
     list-style-type: none;
-    border: var(--_border-width) solid var(--#{$prefix}light-grey);
+    border: var(--_border-width) solid var(--#{$prefix}neutral-lighter);
     border-radius: 1rem;
     font-size: 0.875rem;
     line-height: 1.5;
@@ -121,14 +123,13 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       --_padding-x: 1rem;
       --_height: 2.5rem;
       --_icon-size: 1.5rem;
-      margin: 0 1rem 1rem 0;
       font-size: 1rem;
       border-radius: calc(var(--_height) / 2);
     }
 
     &.tag-link {
-      color: var(--#{$prefix}sapphire-blue);
-      border-color: var(--#{$prefix}sapphire-blue);
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
 
       a {
         text-decoration: none;
@@ -144,14 +145,13 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:active,
       &:focus,
       &:focus-within {
-        background-color: var(--#{$prefix}textbox-border-color);
-        color: var(--#{$prefix}white);
-        background-color: var(--#{$prefix}button-dark-blue);
+        color: var(--#{$prefix}light-link-on-action);
+        background-color: var(--#{$prefix}light-action-primary-hover);
         text-decoration: underline;
         text-underline-offset: var(--#{$prefix}link-underline-offset);
 
         a {
-          color: var(--#{$prefix}white);
+          color: var(--#{$prefix}light-link-on-action);
         }
       }
     }
@@ -166,9 +166,9 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
 
     &.tag-info {
-      color: var(--#{$prefix}dark-grey-muted);
+      color: var(--#{$prefix}light-text-lighter);
       border: 0;
-      background-color: var(--#{$prefix}extra-light-grey);
+      background-color: var(--#{$prefix}neutral-lightest);
     }
   }
 
@@ -266,20 +266,22 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
   }
 
-  &.tag-dark {
-    background-color: var(--#{$prefix}sapphire-blue);
+  &.tag-dark,
+  .dark &:not(.tag-dark):not(.tag-dark-alt):not(.tag-alt) {
+    background-color: var(--#{$prefix}dark-background);
 
     .tag-item {
       --qld-focus-color: #{$qld-dark-focus}; // because we use component-scoped context (.tag-dark) not global .dark, need to set focus color correctly here.
-      color: var(--#{$prefix}dark-text);
+      color: var(--#{$prefix}dark-text-lighter);
+      border-color: var(--#{$prefix}dark-alt-border);
     }
 
     .tag-link {
-      color: var(--#{$prefix}white);
-      border-color: var(--#{$prefix}white);
+      color: var(--#{$prefix}dark-link);
+      border-color: var(--#{$prefix}dark-link);
 
       a {
-        color: white;
+        color: var(--#{$prefix}dark-link);
       }
 
       &:hover,
@@ -287,17 +289,18 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:focus,
       &:focus-within {
         background-color: var(--#{$prefix}dark-action-primary-hover);
-        border-color: var(--#{$prefix}light-green-dark);
-        color: var(--#{$prefix}text-darkest);
+        border-color: var(--#{$prefix}dark-action-primary-hover);
+        color: var(--#{$prefix}dark-link-on-action);
 
         a {
-          color: var(--#{$prefix}text-darkest);
+          color: var(--#{$prefix}dark-link-on-action);
         }
       }
     }
 
     .tag-info {
-      background-color: var(--#{$prefix}color-dark-background--shade);
+      background-color: var(--#{$prefix}dark-background-shade);
+      color: var(--#{$prefix}dark-text-lighter);
     }
 
     .tag-clear-filter-button {
@@ -310,11 +313,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
   }
 
   &.tag-alt {
-    background-color: var(--#{$prefix}light-grey-alt);
+    background-color: var(--#{$prefix}light-alt-background);
 
     .tag-item {
-      color: var(--#{$prefix}dark-grey-muted);
-      border-color: var(--#{$prefix}soft-grey);
+      color: var(--#{$prefix}light-text-lighter);
+      border-color: var(--#{$prefix}light-alt-border);
     }
 
     .tag-link:hover,
@@ -324,27 +327,55 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
     }
 
     .tag-link {
-      color: var(--#{$prefix}sapphire-blue);
-      border-color: var(--#{$prefix}sapphire-blue);
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
     }
   }
 
-  &.tag-dark-alt {
-    background-color: var(--#{$prefix}dark-blue);
+  &.tag-light {
+    background-color: var(--#{$prefix}light-background);
+
+    .tag-item {
+      color: var(--#{$prefix}light-text-lighter);
+      border-color: var(--#{$prefix}light-border);
+    }
+
+    .tag-link {
+      color: var(--#{$prefix}light-link);
+      border-color: var(--#{$prefix}light-link);
+    }
+
+    .tag-info {
+      background-color: var(--#{$prefix}light-background-shade);
+    }
+
+    .tag-clear-filter-button {
+      color: var(--#{$prefix}light-action-secondary);
+
+      &:hover {
+        color: var(--#{$prefix}light-action-secondary-hover);
+      }
+    }
+  }
+
+  &.tag-dark-alt,
+  .dark-alt &:not(.tag-dark, .tag-dark-alt, .tag-alt) {
+    background-color: var(--#{$prefix}dark-alt-background);
 
     .tag-item {
       --qld-focus-color: #{$qld-dark-focus}; // because we use component-scoped context (.tag-dark) not global .dark, need to set focus color correctly here.
 
       a {
-        color: var(--#{$prefix}dark-text);
+        color: var(--#{$prefix}dark-text-lighter);
       }
 
-      color: var(--#{$prefix}dark-text);
+      color: var(--#{$prefix}dark-text-lighter);
       border-color: var(--#{$prefix}dark-border);
     }
 
     .tag-info {
-      background-color: var(--#{$prefix}dark-blue-shade);
+      background-color: var(--#{$prefix}dark-alt-background-shade);
+      color: var(--#{$prefix}dark-text-lighter);
     }
 
     .tag-link {
@@ -353,11 +384,11 @@ $_icon-status-cancel: url('data:image/svg+xml,<svg width="32" height="32" viewBo
       &:focus,
       &:focus-within {
         background-color: var(--#{$prefix}dark-action-primary-hover);
-        border-color: var(--#{$prefix}light-green-dark);
-        color: var(--#{$prefix}text-darkest);
+        border-color: var(--#{$prefix}dark-link-on-action);
+        color: var(--#{$prefix}dark-link-on-action);
 
         a {
-          color: var(--#{$prefix}text-darkest);
+          color: var(--#{$prefix}dark-link-on-action);
         }
       }
     }

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

@@ -1,64 +1,10 @@
 // Tag.stories.js
-import { Tag } from './Tag.js';
-import defaultdata from './tag.data.json';
-
-const sizes = {
-  "": "Small (Default)",
-  "tag-large": "Large",
-};
-
-const emphasis = {
-  "tag-low": "Low",
-  "tag-high": "High",
-};
-
-const types = {
-  "tag-neutral": "Neutral",
-  "tag-success": "Success",
-  "tag-warning": "Warning",
-  "tag-error": "Error",
-  "tag-information": "Information",
-}
-
-/**
- * Construct Status tag for all possible variants with various sizes, emphasis levels, and types.
- * @returns {HTML} HTMLMarkup of the tags.
- */
-function statusVariantsMarkup() {
-  //Map through the emphasis levels and sizes objects.
-  return Object.entries(emphasis).map(([emClass, emLabel]) => {
-    return Object.entries(sizes).map(([sizeClass, sizeLabel]) => {
-      //Construct tagItems for each types.
-      let tagItems = [];
-      Object.entries(types).map(([typeClass, typeLabel]) => {
-        tagItems.push({
-          content: `${typeLabel}`,
-          classes: `${typeClass}`,
-        });
-      });
-
-      //Generate Tag component markup from all possible tag types.
-      const tagHtml =  new Tag({
-        variant: defaultdata.status.variant,
-        tagItems: tagItems,
-        size: sizeClass,
-        emphasis: emClass,
-      }).html;
-
-      //Return Tag component markup in grid with tag's emphasis and size as label. 
-      return `<div class="d-grid mb-4">
-                <div class="fw-bold">${emLabel} ${sizeLabel}</div>
-                <div class="btn-toolbar">
-                  ${tagHtml}
-                </div>
-              </div>`;
-    }).join('')
-  }).join('');
-}
+import { Tag } from "./Tag.js";
+import defaultdata from "./tag.data.json";
 
 export default {
-  tags: ['autodocs'],
-  title: '3. Components/Tag',
+  tags: ["autodocs"],
+  title: "3. Components/Tag",
   render: (args) => new Tag(args).html,
   argTypes: {
     variant: {
@@ -67,12 +13,19 @@ export default {
         type: "radio",
         labels: {
           "tag-default": "Default",
+          "tag-light": "Light",
           "tag-alt": "Alt",
           "tag-dark": "Dark",
           "tag-dark-alt": "Dark-alt",
         },
       },
-      options: ["tag-default", "tag-alt", "tag-dark", "tag-dark-alt"],
+      options: [
+        "tag-default",
+        "tag-light",
+        "tag-alt",
+        "tag-dark",
+        "tag-dark-alt",
+      ],
     },
   },
 };
@@ -82,61 +35,71 @@ export const Default = {
   args: defaultdata.default,
 };
 
-// Info Tag story
-export const Information = {
-  args: defaultdata.info,
-};
-
-// Action Tag story
-export const Action = {
-  args: defaultdata.action,
-};
-
 // Filter Tag story
 export const Filter = {
   args: defaultdata.filter,
 };
 
-// Large Tag story
-export const Large = {
-  args: defaultdata.large,
-};
+export const ParentContextComparison = {
+  name: "Parent Context vs Component Variant Comparison",
+  render: () => {
+    const testTags = {
+      variant: "",
+      tagItems: [
+        {
+          content: "default",
+          classes: "",
+        },
+        {
+          content: "Information",
+          classes: "tag-info",
+        },
+        {
+          content: "<a href='javascript:void(0)'>Action</a>",
+          classes: "tag-link",
+        },
+        {
+          content: "Filter",
+          classes: "tag-large",
+          "applied-filter": true,
+        },
+        {
+          content: "Large",
+          classes: "tag-info tag-large",
+        },
+        {
+          content: "Large",
+          classes: "tag-link tag-large",
+        },
+      ],
+    };
 
-// Dark Tag story
-export const Dark = {
-  args: defaultdata.dark,
-};
+    return `
+      <div class="mb-4">
+        <h6>Default</h6>
+        ${new Tag(testTags).html}
+      </div>
 
-// Status Tag story
-export const Status = {
-  args: defaultdata.status,
-  argTypes: {
-    size: {
-      description: "Size",
-      control: {
-        type: "radio",
-        labels: sizes,
-      },
-      options: Object.keys(sizes),
-    },
-    emphasis: {
-      description: "Emphasis",
-      control: {
-        type: "radio",
-        labels: emphasis,
-      },
-      options: Object.keys(emphasis),
-    },
-  },
-};
+      <div class="mb-4">
+        <h6>Component Variant: tag-light</h6>
+        ${new Tag({ ...testTags, variant: "tag-light" }).html}
+      </div>
+
+      <div class="mb-4">
+        <h6>Component Variant: tag-alt</h6>
+        ${new Tag({ ...testTags, variant: "tag-alt" }).html}
+      </div>
+
+      <div class="mb-4">
+        <h6>Component Variant: tag-dark</h6>
+        ${new Tag({ ...testTags, variant: "tag-dark" }).html}
+      </div>
 
-/**
- * Show the Default mode of Status tags in all possible variants. 
- * This Story can be used to help in troubleshooting.
- */
-export const AllStatusVariantsInDefaultMode = {
-  render:() => {
-    return statusVariantsMarkup();
+      <div class="mb-4">
+        <h6>Component Variant: tag-dark-alt</h6>
+        ${new Tag({ ...testTags, variant: "tag-dark-alt" }).html}
+      </div>
+    `;
   },
   parameters: {
     controls: {

package/src/components/bs5/textarea/manifest.json

@@ -0,0 +1 @@
+{}

package/src/components/bs5/textbox/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as TypographyStories from "./typography.stories";
 
 <Meta of={TypographyStories} />

package/src/components/bs5/typography/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1 @@
+{}

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

@@ -68,6 +68,8 @@ export default {
         url: "https://www.figma.com/file/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?type=design&node-id=23805-301553&mode=design&t=5REJ3QGtTW1K0fGT-4",
       },
     ],
+    backgrounds: { disable: false },
+    globals: { backgrounds: { value: "default" } },
   },
 };
 
@@ -80,12 +82,7 @@ export const Default = {};
  * Light colour Callout
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -103,12 +100,7 @@ export const Light = {
  * Alternative Callout
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -126,12 +118,7 @@ export const Alternative = {
  * Dark Callout
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -149,12 +136,7 @@ export const Dark = {
  * Dark alternative Callout
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

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

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import * as VideoStories from "./video.stories";
 
 <Meta of={VideoStories} />

package/src/components/bs5/video/manifest.json

@@ -0,0 +1 @@
+{}

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

@@ -84,7 +84,9 @@ export default {
     controls: {
       exclude: ["transcriptAccordion"],
     },
+    backgrounds: { disable: false },
   },
+  globals: { backgrounds: { value: "default" } },
 };
 
 /**
@@ -110,12 +112,7 @@ export const Custom = {
  * Light colour Video
  */
 export const Light = {
-  parameters: {
-    backgrounds: {
-      default: "Light",
-      values: [{ name: "Light", value: "var(--qld-light-background)" }],
-    },
-  },
+  globals: { backgrounds: { value: "light" } },
   decorators: [
     (Story) => {
       return `
@@ -131,12 +128,7 @@ export const Light = {
  * Alternative Video
  */
 export const Alternative = {
-  parameters: {
-    backgrounds: {
-      default: "Alternative",
-      values: [{ name: "Alternative", value: "var(--qld-light-grey-alt)" }],
-    },
-  },
+  globals: { backgrounds: { value: "alt" } },
   decorators: [
     (Story) => {
       return `
@@ -152,12 +144,7 @@ export const Alternative = {
  * Dark Video
  */
 export const Dark = {
-  parameters: {
-    backgrounds: {
-      default: "Dark",
-      values: [{ name: "Dark", value: "var(--qld-brand-primary)" }],
-    },
-  },
+  globals: { backgrounds: { value: "dark" } },
   decorators: [
     (Story) => {
       return `
@@ -173,12 +160,7 @@ export const Dark = {
  * Dark alternative Video
  */
 export const DarkAlternative = {
-  parameters: {
-    backgrounds: {
-      default: "Dark alternative",
-      values: [{ name: "Dark alternative", value: "var(--qld-dark-blue)" }],
-    },
-  },
+  globals: { backgrounds: { value: "darkAlt" } },
   decorators: [
     (Story) => {
       return `

package/src/css/main.scss

@@ -18,7 +18,7 @@
 $qld-tokens: meta.module-variables("qld-tokens") !default;
 
 // External fonts
-@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700;900&display=swap");
 $font-family-sans-serif:
   "Noto Sans",
   system-ui,
@@ -34,7 +34,7 @@ $font-family-sans-serif:
   "Segoe UI Emoji",
   "Segoe UI Symbol",
   "Noto Color Emoji" !default;
-$font-family-sitename: "Fira Sans";
+$font-family-sitename: $font-family-sans-serif;
 
 //Prefix to namespace design-system classes
 $prefix: "qld-";

package/src/css/mixins/_index.scss

@@ -3,5 +3,6 @@
 @forward "make-icon" with (
   $prefix: "qld-"
 );
+@forward "make-link";
 @forward "register-vars";
 @forward "unset-button-styles";

package/src/css/mixins/focusable.scss

@@ -2,16 +2,17 @@
 /// Default focus styles for use in buttons etc. Resets :focus and uses :focus-visible instead which only appears on keyboard interaction.
 /// @param {Boolean} $offsetOutline [true] - Offset the focus ring by 2px.
 /// @param {Boolean} $isFocusWithin [false] - Optionally apply styles via :focus-within rather than :focus-visible
+/// @param {String} $outlineWidth: [3px] The width of the outline.
 /// @param {String} $customSelector [null] - If passed, will override $isFocusWithin and apply focus styles instead to a custom selector string. @see SearchInput
+
 @mixin focusable(
   $offsetOutline: true,
   $isFocusWithin: false,
+  $outlineWidth: 3px,
   $customSelector: null
 ) {
   // outline styles without the pseudo state to allow for transition animations.
-
-  $outline-width: 3px;
-  $initial-offset: 0 - $outline-width;
+  $initial-offset: 0 - $outlineWidth;
 
   @if $offsetOutline == true {
     $offsetOutline: 2px;
@@ -19,7 +20,7 @@
     $offsetOutline: $initial-offset;
   }
 
-  outline: $outline-width solid transparent;
+  outline: $outlineWidth solid transparent;
   outline-offset: $initial-offset;
 
   $selector: if(
@@ -30,7 +31,7 @@
 
   &#{$selector} {
     outline: {
-      width: $outline-width;
+      width: $outlineWidth;
       style: solid;
       color: var(
         --qld-focus-color,