@qld-gov-au/qgds-bootstrap5 1.1.21 → 1.1.23

package/src/components/bs5/directionLinks/directionLinks.scss

@@ -0,0 +1,116 @@
+// QGDS QOL Direction Links
+
+a.qld-dir-link {
+
+  --dir-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M443.7 266.8l-165.9 176C274.5 446.3 269.1 448 265.5 448c-3.986 0-7.988-1.375-11.16-4.156c-6.773-5.938-7.275-16.06-1.118-22.59L393.9 272H16.59c-9.171 0-16.59-7.155-16.59-15.1S7.421 240 16.59 240h377.3l-140.7-149.3c-6.157-6.531-5.655-16.66 1.118-22.59c6.789-5.906 17.27-5.469 23.45 1.094l165.9 176C449.4 251.3 449.4 260.7 443.7 266.8z'/%3E%3C/svg%3E");
+  --link-colour: var(--qld-light-action-primary);
+  --icon-colour: var(--qld-light-action-secondary);
+  --icon-colour-hover: var(--qld-light-action-secondary-hover);
+
+  color: var(--link-colour);
+  text-decoration-color: var(--link-colour);
+  display: flex;
+  width: fit-content;
+  justify-content: space-between;
+  align-self: flex-start;
+
+  &:focus {
+    border-radius: 4px;
+    outline: 3px solid var(--qld-focus-color);
+    outline-offset: 2px;
+  }
+
+  &.small {
+    font-size: 0.875rem;
+    line-height: 1rem;
+
+    .icon {
+      &::after {
+        zoom: 0.7;
+        mask-position: 0;
+      }
+    }
+  }
+
+  .icon {
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 1rem;
+      height: 1.25rem;
+      mask-image: var(--dir-icon);
+      mask-repeat: no-repeat;
+      mask-position: 0 0.25rem;
+      background-color: var(--icon-colour);
+      margin-inline: 0.5rem;
+    }
+  }
+
+  &:hover {
+
+    .icon {
+      &::after {
+        background-color: var(--icon-colour-hover);
+      }
+    }
+  }
+
+  &.up {
+    .icon {
+      transform: rotate(270deg);
+    }
+  }
+
+  &.down {
+    .icon {
+      transform: rotate(90deg);
+    }
+  }
+
+  &.left {
+    flex-direction: row-reverse;
+
+    .icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &.right {
+    .icon {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.light,
+.alt {
+  .qld-dir-link {
+    --link-colour: var(--qld-light-action-primary);
+    --icon-colour: var(--qld-light-action-secondary);
+    --icon-colour-hover: var(--qld-light-action-secondary-hover);
+  }
+}
+
+.dark,
+.dark-alt {
+  .qld-dir-link {
+    --link-colour: var(--qld-dark-text);
+    --icon-colour: var(--qld-dark-action-secondary);
+    --icon-colour-hover: var(--qld-dark-action-secondary-hover);
+  }
+}
+
+li .qld-dir-link {
+  width: auto;
+}
+
+a[aria-disabled="true"] {
+  pointer-events: none;
+  color: var(--qld-dark-grey-muted);
+
+  .icon {
+    &::after {
+      background-color: var(--qld-dark-grey-muted);
+    }
+  }
+}

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

@@ -0,0 +1,157 @@
+/**
+ * @file directionLinks.stories.js
+ * @description Storybook configuration file for the Direction Links component.
+ * @module directionLinks.stories
+ */
+
+import { DirectionLinks } from "./directionLinks.js";
+import defaultdata from "./directionLinks.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Direction Links",
+  render: (args) => {
+    return `
+    <!-- Grid container -->
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          
+          <!-- Component HTML -->
+          ${new DirectionLinks({ ...args, class: "up", label: "Up" }).html}
+        
+          </div>
+        <div class="col">
+          
+          <!-- Component HTML -->
+          ${new DirectionLinks({ ...args, class: "down", label: "Down" }).html}
+        
+        </div>
+        <div class="col">
+          
+          <!-- Component HTML -->
+          ${new DirectionLinks({ ...args, class: "left", label: "Left" }).html}
+        
+        </div>
+        <div class="col">
+          
+          <!-- Component HTML -->
+          ${new DirectionLinks({ ...args, class: "right", label: "Right" }).html}
+        
+        </div>
+      </div>
+    </div>
+    `;
+  },
+  args: defaultdata,
+  argTypes: {
+    class: {
+      control: { type: "select" },
+      options: ["left", "right", "up", "down"],
+    },
+    id: { control: "text" },
+    href: { control: "text" },
+    target: {
+      control: { type: "select" },
+      options: ["_self", "_blank", "_parent", "_top"],
+    },
+    arialabel: { control: "text", name: "aria-label" },
+    label: { control: "text" },
+  },
+  parameters: {
+    design: {
+      name: "QGDS Figma Reference",
+      type: "figma",
+      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=5624-62902&t=8gBcIy6lPlfZ8NHz-0",
+    },
+  },
+};
+
+/**
+ * Default story
+ */
+export const Default = {};
+
+/**
+ * Direction Link - Light
+ * */
+export const Light = {
+  parameters: {
+    backgrounds: {
+      default: "Light",
+      values: [{ name: "Light", value: "var(--qld-light-background)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+        <div class="light">
+            ${Story()}
+        </div>
+        `;
+    },
+  ],
+};
+
+/**
+ * Direction Link - Light-Alt
+ * */
+export const LightAlt = {
+  parameters: {
+    backgrounds: {
+      default: "LightAlt",
+      values: [{ name: "LightAlt", value: "var(--qld-light-alt-background)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+        <div class="light-alt">
+            ${Story()}
+        </div>
+        `;
+    },
+  ],
+};
+
+/**
+ * Direction Link - Dark
+ * */
+export const Dark = {
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+        <div class="dark">
+            ${Story()}
+        </div>
+        `;
+    },
+  ],
+};
+
+/**
+ * Direction Link - Dark-Alt
+ * */
+export const DarkAlt = {
+  parameters: {
+    backgrounds: {
+      default: "DarkAlt",
+      values: [{ name: "DarkAlt", value: "var(--qld-dark-alt-background)" }],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark-alt">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};

package/src/css/main.scss

@@ -78,6 +78,7 @@ $enable-dark-mode: true;
 
 // 9. QLD Design System components (bootstrap overrides and custom). Please maintain naming consistency.
 @import "../components/bs5/accordion/accordion";
+@import "../components/bs5/backToTop/backToTop";
 @import "../components/bs5/banner/banner";
 @import "../components/bs5/blockquote/blockquote";
 @import "../components/bs5/breadcrumbs/breadcrumbs";
@@ -87,6 +88,7 @@ $enable-dark-mode: true;
 @import "../components/bs5/callToAction/callToAction";
 @import "../components/bs5/correctincorrect/correctincorrect";
 @import "../components/bs5/dateinput/dateinput";
+@import "../components/bs5/directionLinks/directionLinks";
 @import "../components/bs5/formcheck/formcheck";
 @import "../components/bs5/footer/footer";
 @import "../components/bs5/globalAlert/globalAlert";

package/src/css/qld-type.scss

@@ -1,6 +1,5 @@
 //Typography
-$font-family-sans-serif:
-  "Noto Sans",
+$font-family-sans-serif: "Noto Sans",
   system-ui,
   -apple-system,
   "Segoe UI",
@@ -65,7 +64,7 @@ $link-visited-color: $qld-link-visited;
   --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
   --qld-selection-color: var(--qld-white);
   --qld-selection-bg: var(--qld-brand-primary);
-  --qld-focus-color: var(--qld-light-blue);
+  --qld-focus-color: var(--qld-light-focus);
 }
 
 .dark,
@@ -100,8 +99,10 @@ body {
     margin-bottom: 1.25rem;
   }
 
-  ul, ol, p {
-      line-height: 1.75;
+  ul,
+  ol,
+  p {
+    line-height: 1.75;
   }
 
   li {
@@ -111,8 +112,22 @@ body {
 }
 
 // Apply correct bold font-weight
-h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
-strong, b, th, dt {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6,
+strong,
+b,
+th,
+dt {
   font-weight: $font-weight-bold;
 }
 
@@ -140,7 +155,12 @@ dl.qld-content-dates {
 
 // Light, Light alt
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: var(--#{$prefix}color-default-color-light-text-heading);
 }
 
@@ -155,57 +175,65 @@ a.nav-link {
     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);
-        }
+  &: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;
+  &:focus {
+    outline: 2px solid var(--qld-focus-color);
+    outline-offset: 2px;
   }
 }
 
 caption {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
 }
 
 // Dark, dark alt
 .dark,
 .dark-alt {
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: var(--#{$prefix}color-default-color-dark-text-heading);
   }
 
 
   body & {
-      color: var(--qld-body-color);
+    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,
+  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);
+      }
     }
+  }
+}
 
 caption {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
 
 }
 
@@ -228,5 +256,4 @@ a.nostyle {
   color: var(--qld-selection-color);
   background: var(--qld-selection-bg);
   text-shadow: none;
-}
-
+}

package/src/css/qld-variables.scss

@@ -29,6 +29,7 @@ $qld-light-background: $core-default-color-status-info-lightest;
 $qld-light-background-shade: $color-default-color-light-background-light-shade;
 $qld-light-border: $color-default-color-light-border-default;
 $qld-dark-focus: $color-default-color-dark-focus-default;
+$qld-light-focus: $color-default-color-light-focus-default;
 $qld-link-visited: $color-default-color-light-underline-visited;
 $qld-link-visited-dark: $color-default-color-dark-underline-visited;
 $qld-text-light-blue-dark : $core-default-color-neutral-lighter;
@@ -57,7 +58,7 @@ $qld-light-link: $color-default-color-light-link-default;
 //Should be core color rather than second hand reference (no match)
 $qld-soft-grey : $color-default-color-light-border-alt;
 
-$qld-dark-grey-muted : $color-default-color-light-text-lighter; 
+$qld-dark-grey-muted : $color-default-color-light-text-lighter;
 $qld-text-grey : $color-default-color-light-text-default;
 $qld-hint-text-color: $color-default-color-light-text-lighter;
 $qld-hint-text-color-muted: $color-default-color-dark-text-lighter;
@@ -181,6 +182,7 @@ $project-colors: (
   "alt-button-hover": $qld-alt-button-hover,
   "dark-blue-shade": $qld-dark-blue-shade,
   "dark-focus": $qld-dark-focus,
+  "light-focus": $qld-light-focus,
   "text-light-blue-dark": $qld-text-light-blue-dark,
   "light-green-dark": $qld-light-green-dark,
   "dark-green-dark": $qld-dark-green-dark,
@@ -190,8 +192,8 @@ $project-colors: (
   "dark-hover" : $qld-dark-hover,
   "light-action-primary": $qld-light-action-primary,
   "light-action-primary-hover": $qld-light-action-primary-hover,
-  "light-action-secondary":  $qld-light-action-secondary,
-  "light-action-secondary-hover":  $qld-light-action-secondary-hover,
+  "light-action-secondary": $qld-light-action-secondary,
+  "light-action-secondary-hover": $qld-light-action-secondary-hover,
   "dark-action-primary": $qld-dark-action-primary,
   "dark-action-primary-hover": $qld-dark-action-primary-hover,
   "dark-action-text": $qld-dark-action-text,
@@ -217,6 +219,16 @@ $project-colors: (
   "dark-alt-background-shade": $qld-color-dark-alt-background--shade,
   "link-visited": $qld-link-visited,
   "link-visited-dark": $qld-link-visited-dark,
+
+  //Neutrals
+  "neutral-black": $core-default-color-neutral-black,
+  "neutral-darkest": $core-default-color-neutral-darkest,
+  "neutral-darker": $core-default-color-neutral-darker,
+  "neutral-dark": $core-default-color-neutral-dark,
+  "neutral-light": $core-default-color-neutral-light,
+  "neutral-lighter": $core-default-color-neutral-lighter,
+  "neutral-lightest": $core-default-color-neutral-lightest,
+  "neutral-white": $core-default-color-neutral-white
 );
 
 // Merge maps

package/src/js/handlebars.helpers.js

@@ -182,6 +182,12 @@ export default function handlebarsHelpers(handlebars) {
     return durationString;
   });
 
+  // helper for extending components to set overridable data values
+  // if the value is not set in the component data.json, it will use the hds data value
+  handlebars.registerHelper('isdefined', function (value, defaultValue) {
+    return value !== undefined ? value : defaultValue;
+  });
+
   /**
    * Used to get class names added to an element based on their boolean values in an array
    * @param {string} names - Comma-separated list of class names to check for
@@ -214,6 +220,7 @@ export default function handlebarsHelpers(handlebars) {
     }
   });
   
+
 }
 
 if(typeof(Handlebars) !== 'undefined') {

package/src/js/handlebars.partials.js

@@ -2,6 +2,7 @@
 /** THIS IS A GENERATED FILE **/
 
 import accordion from "../components/bs5/accordion/accordion.hbs?raw";
+import backToTop from "../components/bs5/backToTop/backToTop.hbs?raw";
 import banner from "../components/bs5/banner/banner.hbs?raw";
 import blockquote from "../components/bs5/blockquote/blockquote.hbs?raw";
 import breadcrumbs from "../components/bs5/breadcrumbs/breadcrumbs.hbs?raw";
@@ -15,6 +16,7 @@ import contentFooterWrapper from "../components/bs5/contentFooterWrapper/content
 import contentWrapper from "../components/bs5/contentWrapper/contentWrapper.hbs?raw";
 import correctincorrect from "../components/bs5/correctincorrect/correctincorrect.hbs?raw";
 import dateinput from "../components/bs5/dateinput/dateinput.hbs?raw";
+import directionLinks from "../components/bs5/directionLinks/directionLinks.hbs?raw";
 import footer from "../components/bs5/footer/footer.hbs?raw";
 import footerForgov from "../components/bs5/footer/footerForgov.hbs?raw";
 import formcheck from "../components/bs5/formcheck/formcheck.hbs?raw";
@@ -51,6 +53,7 @@ import video from "../components/bs5/video/video.hbs?raw";
  */
 export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("accordion", accordion);
+  handlebars.registerPartial("backToTop", backToTop);
   handlebars.registerPartial("banner", banner);
   handlebars.registerPartial("blockquote", blockquote);
   handlebars.registerPartial("breadcrumbs", breadcrumbs);
@@ -64,6 +67,7 @@ export default function handlebarsPartials(handlebars) {
   handlebars.registerPartial("contentWrapper", contentWrapper);
   handlebars.registerPartial("correctincorrect", correctincorrect);
   handlebars.registerPartial("dateinput", dateinput);
+  handlebars.registerPartial("directionLinks", directionLinks);
   handlebars.registerPartial("footer", footer);
   handlebars.registerPartial("footerForgov", footerForgov);
   handlebars.registerPartial("formcheck", formcheck);

package/src/js/qld.bootstrap.js

@@ -10,6 +10,7 @@ import { positionQuickExit, initQuickexit } from "./../components/bs5/quickexit/
 import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
 import { toggleSearch } from "./../components/bs5/header/header.functions";
 import { showSuggestions, submitSearchForm } from "./../components/bs5/searchInput/search.functions";
+import { backToTop } from "./../components/bs5/backToTop/backToTop.functions";
 
 window.addEventListener("scroll", positionQuickExit, true);
 window.addEventListener("resize", positionQuickExit, true);
@@ -18,6 +19,7 @@ window.addEventListener("keydown", initQuickexit, true);
 
 window.addEventListener("DOMContentLoaded", () => {
   (() => {
+    backToTop();
     // Footer FormIO Action
     // Note: This is added here, as there is an issue with breadcrumbShorten() function.
     //       Will move this once that issue is fixed.