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

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/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,

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

@@ -0,0 +1,40 @@
+@use "focusable" as *;
+@use "../variables/animation";
+
+///
+/// Apply generic links styles. Ensures consistent styles including transition effects.
+@mixin make-link() {
+  color: var(--qld-link-color);
+  transition: {
+    property:
+      color, background-color, border-color, outline-color, outline-offset,
+      outline-width, text-decoration-color, text-decoration-line,
+      text-decoration-thickness, text-underline-offset, opacity;
+    duration: animation.$duration-fast;
+    timing-function: animation.$timing-function;
+  }
+
+  text-underline-offset: var(--qld-link-underline-offset);
+  text-decoration-thickness: var(--qld-link-underline-thickness);
+  text-decoration-color: var(--qld-link-underline);
+
+  @include focusable($offsetOutline: true, $outlineWidth: 2px);
+
+  &:hover {
+    text-decoration-thickness: var(--qld-link-underline-thickness-hover);
+    text-decoration-color: var(--qld-link-underline-hover);
+  }
+
+  &:visited {
+    color: var(--qld-link-visited-color);
+    text-decoration-color: var(--qld-link-underline-visited);
+
+    &:hover {
+      text-decoration-color: var(--qld-link-underline-visited-hover);
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: none;
+  }
+}

package/src/css/qld-theme.scss

@@ -7,22 +7,25 @@
   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-bg: var(--qld-default-background);
   --qld-body-color: #{$body-color};
   --qld-body-font-weight: #{$body-font-weight};
+  --qld-border-color: var(--qld-light-border);
   --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-visited-color: #{$color-default-color-light-link-visited};
   --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-visited: #{$color-default-color-light-underline-visited};
+  --qld-link-underline-visited-hover: #{$color-default-color-light-underline-visited-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);
 }
@@ -34,12 +37,19 @@
   --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-headings-color: #{$color-default-color-dark-text-heading};
+  --qld-link-color: #{$color-default-color-dark-link-default};
   --qld-link-color-rgb: 255, 255, 255;
-  --qld-link-hover-color: #fff;
+  --qld-link-hover-color: #{$color-default-color-dark-link-default};
   --qld-link-hover-color-rgb: 255, 255, 255;
-  --qld-link-visited: var(--qld-link-visited-dark);
+  --qld-link-visited-color: #{$color-default-color-dark-link-visited};
+  --qld-link-visited: var(
+    --qld-link-visited-dark
+  ); // TODO tidy up these variables, we should only use --qld-link-visited-color
+  --qld-link-underline: #{$qld-link-underline-dark};
+  --qld-link-underline-hover: #{$qld-link-underline-hover-dark};
+  --qld-link-underline-visited: #{$qld-link-underline-visited-dark};
+  --qld-link-underline-visited-hover: #{$qld-link-underline-hover-dark};
   --qld-selection-bg: var(--qld-white);
   --qld-selection-color: var(--qld-brand-primary);
 }
@@ -48,8 +58,6 @@
 :root,
 .default {
   @include light-theme-properties;
-  --qld-body-bg: var(--qld-default-background);
-  --qld-border-color: var(--qld-light-border);
 }
 
 // Light theme

package/src/css/qld-type.scss

@@ -1,6 +1,5 @@
-//Links - default root variables moved to qld-theme.scss
+@use "../css/mixins";
 
-//Content and links
 body {
   -webkit-font-smoothing: antialiased;
 }
@@ -60,50 +59,18 @@ dl.qld-content-dates {
   }
 }
 
-// Light, Light alt
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  color: var(--#{$prefix}color-default-color-light-text-heading);
+  color: var(--qld-headings-color);
 }
 
 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
-  );
-
-  &:hover {
-    text-decoration-thickness: var(--qld-link-underline-thickness-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
-    );
-
-    &:hover {
-      text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-      text-decoration-color: var(
-        --#{$prefix}color-default-color-light-underline-visited-hover
-      );
-    }
-  }
-
-  &:focus {
-    outline: 2px solid var(--qld-focus-color);
-    outline-offset: 2px;
-  }
+  @include mixins.make-link();
 }
 
 figure > figcaption {
@@ -112,43 +79,6 @@ figure > figcaption {
   line-height: 20px;
 }
 
-// Theme-specific typography styles
-.dark,
-.dark-alt {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  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
-    );
-
-    &:visited {
-      color: var(--#{$prefix}color-default-color-dark-link-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
-        );
-      }
-    }
-  }
-}
-
 a.nostyle {
   text-decoration: unset;
   text-underline-offset: unset;

package/src/css/variables/animation.scss

@@ -0,0 +1,5 @@
+// default animation variables
+// If additional values are needed, create a variant of the variable eg `$duration-fast: 0.2s`
+$duration: 0.3s;
+$duration-fast: 0.2s;
+$timing-function: ease-out;