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

package/dist/components/bs5/backToTop/backToTop.hbs

@@ -0,0 +1,14 @@
+{{#unless hide_back_to_top}}
+  <div class="qld__widgets" data-min-page-height="{{isdefined min_page_height 0}}">
+    {{> button  
+      variantClass=(isdefined button.variantClass "back-to-top")
+      islink=(isdefined button.islink true)
+      isdisabled=(isdefined button.isdisabled false)
+      iconClass=(isdefined button.iconClass "")
+      iconPosition=(isdefined button.iconPosition "trailing")
+      label=(isdefined button.label "Back to top")
+      href=(isdefined button.href "#")
+      target=(isdefined button.target "_self")
+    }}
+  </div>
+{{/unless}}

package/dist/components/bs5/button/button.hbs

@@ -1,31 +1,42 @@
+{{!-- Button icon partial --}}
+{{#*inline "buttonIcon"~}}
+<span class="btn-icon {{iconClass}} {{iconPosition}}"></span>
+{{~/inline}} 
+
 {{#unless islink}}
-    <button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-    {{#if iconClass}}
-        {{#ifCond iconPosition '==' 'leading'}}
-            <span class="btn-icon {{iconClass}}"></span>
-        {{/ifCond}}
-    {{/if}}
-    {{label}}
-    {{#if iconClass}}
-        {{#ifCond iconPosition '==' 'trailing'}}
-            <span class="btn-icon {{iconClass}}"></span>
-        {{/ifCond}}
-    {{/if}}
-    </button>
+
+  <button class="btn {{variantClass}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'leading'}}
+      {{~>buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  
+  {{~label~}}
+  
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'trailing'}}
+      {{>buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  </button>
 
 {{else}}
 
-    <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}} aria-disabled="true" {{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-        {{#if iconClass}}
-            {{#ifCond iconPosition '==' 'leading'}}
-                <span class="btn-icon {{iconClass}}"></span>
-            {{~/ifCond~}}
-        {{~/if~}}
-        {{~label~}}
-        {{#if iconClass}}
-            {{#ifCond iconPosition '==' 'trailing'}}
-                <span class="btn-icon {{iconClass}}"></span>
-            {{/ifCond}}
-        {{/if}}
-    </a>
-{{/unless }}
+  <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'leading'}}
+      {{~> buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  
+  {{~label~}}
+
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'trailing'}}
+      {{~> buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  </a>
+
+{{/unless}}

package/dist/components/bs5/directionLinks/directionLinks.hbs

@@ -0,0 +1,9 @@
+{{! valid class values are: up, down, left, right}}
+<a class="qld-dir-link {{class}}" 
+    {{~#if id}} id="{{id}}" {{/if~}} 
+    href="{{href}}" 
+    {{~#if target}} target="{{target}}"{{/if~}}
+    {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
+  {{{label}}}
+  <span class="icon" aria-hidden="true"></span>
+</a>

package/dist/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.21","branch":"HEAD","tag":"v1.1.21","commit":"a3f1a8cf0304d6c7f562866d133b170b491e720c","majorVersion":"v1"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.23","branch":"HEAD","tag":"v1.1.23","commit":"7368a2c584a90cba60069072b6d04939847510fa","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/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/dist/components/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/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.28.1"
+    "material-symbols": "^0.29.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -61,12 +61,12 @@
     "@storybook/test": "^8.4.2",
     "@storybook/theming": "^8.4.2",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue": "5.2.3",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
     "chromatic": "^11.5.5",
-    "esbuild": "0.25.0",
+    "esbuild": "0.25.2",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
@@ -77,12 +77,12 @@
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
     "minimist": "^1.2.8",
-    "mocha": "^10.7.3",
-    "npm-run-all2": "^6.2.3",
+    "mocha": "^11.1.0",
+    "npm-run-all2": "^7.0.2",
     "onchange": "^7.1.0",
     "portfinder": "^1.0.32",
     "postcss": "^8.4.47",
-    "prettier": "3.3.3",
+    "prettier": "3.5.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",

package/dist/sample-data/backToTop/backToTop.data.json

@@ -0,0 +1,10 @@
+{
+    "hide_back_to_top": false,
+    "min_page_height": 0,
+    "button": {
+        "label": "Back to top",
+        "islink": true,
+        "iconClass": "btn-icon",
+        "iconPosition": "trailing"
+    }
+}

package/dist/sample-data/directionLinks/directionLinks.data.json

@@ -0,0 +1,7 @@
+{
+	"id": "",
+	"label": "Up",
+	"href": "#",
+	"target": "_blank",
+	"class": "up"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "",
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.28.1"
+    "material-symbols": "^0.29.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -61,12 +61,12 @@
     "@storybook/test": "^8.4.2",
     "@storybook/theming": "^8.4.2",
     "@stylistic/eslint-plugin-js": "2.1.0",
-    "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue": "5.2.3",
     "autoprefixer": "^10.4.20",
     "chai": "^5.2.0",
     "chalk": "^5.3.0",
     "chromatic": "^11.5.5",
-    "esbuild": "0.25.0",
+    "esbuild": "0.25.2",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-plugin-eslint": "^0.3.7",
     "esbuild-plugin-handlebars": "1.0.3",
@@ -77,12 +77,12 @@
     "handlebars": "4.7.8",
     "http-server": "^14.1.1",
     "minimist": "^1.2.8",
-    "mocha": "^10.7.3",
-    "npm-run-all2": "^6.2.3",
+    "mocha": "^11.1.0",
+    "npm-run-all2": "^7.0.2",
     "onchange": "^7.1.0",
     "portfinder": "^1.0.32",
     "postcss": "^8.4.47",
-    "prettier": "3.3.3",
+    "prettier": "3.5.3",
     "raw-loader": "^4.0.2",
     "rimraf": "^6.0.1",
     "run-parallel": "^1.2.0",

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

@@ -0,0 +1,10 @@
+{
+    "hide_back_to_top": false,
+    "min_page_height": 0,
+    "button": {
+        "label": "Back to top",
+        "islink": true,
+        "iconClass": "btn-icon",
+        "iconPosition": "trailing"
+    }
+}

package/src/components/bs5/backToTop/backToTop.functions.js

@@ -0,0 +1,23 @@
+export function backToTop() {
+  let hasBackToTop = document.getElementsByClassName("back-to-top");
+  
+  if (hasBackToTop.length > 0) {
+    let backToTop = document.querySelector(".back-to-top");
+
+    let parentValue = backToTop.closest(".qld__widgets");
+    let minHightValue = parentValue.getAttribute("data-min-page-height");
+    let minScreenHight = parseInt(window.innerHeight * minHightValue);
+    let backToTopPos = backToTop.getBoundingClientRect().top;
+
+    if (backToTopPos <= minScreenHight) {
+      backToTop.classList.add("hide");
+    } else {
+      backToTop.classList.remove("hide");
+      backToTop.onclick = function () {
+        document.body.scrollTop = 0; // For Safari
+        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+        event.preventDefault();
+      }
+    }
+  }
+}

package/src/components/bs5/backToTop/backToTop.hbs

@@ -0,0 +1,14 @@
+{{#unless hide_back_to_top}}
+  <div class="qld__widgets" data-min-page-height="{{isdefined min_page_height 0}}">
+    {{> button  
+      variantClass=(isdefined button.variantClass "back-to-top")
+      islink=(isdefined button.islink true)
+      isdisabled=(isdefined button.isdisabled false)
+      iconClass=(isdefined button.iconClass "")
+      iconPosition=(isdefined button.iconPosition "trailing")
+      label=(isdefined button.label "Back to top")
+      href=(isdefined button.href "#")
+      target=(isdefined button.target "_self")
+    }}
+  </div>
+{{/unless}}

package/src/components/bs5/backToTop/backToTop.js

@@ -0,0 +1,10 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./backToTop.hbs?raw";
+
+export class BackToTop {
+  // Instantiate Back to Top component, passing data for template rendering.
+
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

package/src/components/bs5/backToTop/backToTop.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as BackToTopStories from "./backToTop.stories"
+
+<Meta of={BackToTopStories} />
+
+# Back to Top
+<Canvas>
+  <Story of={BackToTopStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395564&t=Hc9l3zmwhJe3tqyn-0)
+- [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321317&p=f&t=k3rhuWqQX2wN7QZo-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/back-to-top)

package/src/components/bs5/backToTop/backToTop.scss

@@ -0,0 +1,101 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Widgets
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__widgets {
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  position: relative;
+  z-index: 1;
+
+  &.fixed {
+    position: fixed;
+    bottom: 0.75rem;
+    right: 0.75rem;
+    z-index: 10;
+  }
+}
+
+.qld__widgets+.qld__footer {
+  @include media-breakpoint-up(xl) {
+    padding-block-end: 4rem;
+  }
+}
+
+a.back-to-top,
+a.btn.back-to-top {
+  --qld-btn-color: var(--#{$prefix}light-action-primary);
+  --qld-btn-active-color: var(--#{$prefix}light-action-primary);
+  --qld-btn-bg: var(--#{$prefix}neutral-lightest);
+  --qld-btn-hover-bg: var(--#{$prefix}neutral-light);
+  --btn-border: 0px;
+  --btn-border-colour: var(--qld-btn-bg);
+
+  text-decoration: underline;
+  text-decoration-color: transparent;
+
+  //Icon
+  --btn-icon-color: var(--#{$prefix}light-action-secondary);
+  --btn-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0518 8.1205L6.63557 16.4361C6.44609 16.6153 6.22435 16.7076 5.97036 16.7128C5.71637 16.7183 5.49185 16.6234 5.2968 16.4282C5.1015 16.233 5.00259 16.0122 5.00006 15.7658C4.99728 15.5194 5.0948 15.2985 5.29263 15.1033L15.1755 5.35051C15.2995 5.22843 15.4286 5.13943 15.563 5.08351C15.6976 5.02784 15.8454 5 16.0066 5C16.168 5 16.3155 5.02784 16.449 5.08351C16.5826 5.13943 16.7114 5.22843 16.8353 5.35051L26.7183 15.1033C26.9012 15.2838 26.995 15.5003 26.9998 15.7527C27.0046 16.0053 26.9108 16.2305 26.7183 16.4282C26.5176 16.6234 26.2919 16.7211 26.0409 16.7211C25.7899 16.7211 25.5687 16.6234 25.3772 16.4282L16.9591 8.1205V26.0589C16.9591 26.3303 16.8687 26.555 16.6881 26.733C16.5077 26.911 16.2802 27 16.0054 27C15.7305 27 15.5028 26.911 15.3224 26.733C15.142 26.555 15.0518 26.3303 15.0518 26.0589V8.1205Z' fill='%23131212'/%3E%3C/svg%3E%0A");
+
+  margin-block-start: 0.5rem;
+  margin-inline-start: auto;
+  background-color: var(--qld-btn-bg);
+  border: var(--btn-border) solid var(--btn-border-colour);
+  padding-block: calc(0.75rem - var(--btn-border));
+  padding-inline: 1rem;
+  border-radius: 0.25rem;
+
+  transition: all 0.15s ease-in-out;
+
+  .btn-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-block;
+    vertical-align: middle;
+    background-color: var(--btn-icon-color);
+    mask-image: var(--btn-icon);
+    mask-size: contain;
+    mask-position: center;
+    margin: 0;
+
+    &.leading {
+      margin-right: 0.5rem;
+    }
+
+    &.trailing {
+      margin-left: 0.5rem;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
+    --btn-icon-color: var(--#{$prefix}light-action-secondary-hover);
+  }
+
+  &:visited {
+    color: var(--qld-btn-color);
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration-color: var(--qld-btn-color);
+    background-color: var(--qld-btn-hover-bg);
+    border-color: var(--btn-border-colour);
+  }
+
+  &.hide {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+@media print {
+  .qld__widgets {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,37 @@
+/**
+ * @file bactToTop.stories.js
+ * @description Storybook configuration file for the BackToTop component.
+ * @module backToTop.stories
+ */
+
+import { BackToTop } from "./backToTop.js";
+import defaultdata from "./backToTop.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Back to Top",
+  render: (args) => new BackToTop(args).html,
+  args: defaultdata,
+
+  /**
+   * Additional parameters for the story.
+   *
+   * @type {Object}
+   * @property {Object} design - Configuration for the design parameter.
+   * @property {string} design.name - Name of the design parameter.
+   * @property {string} design.type - Type of the design parameter.
+   * @property {string} design.url - URL of the design parameter.
+   */
+  parameters: {
+    design: {
+      name: "QGDS Figma Reference",
+      type: "figma",
+      url: "https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395564&t=VORt8BOjhLPGSoci-0",
+    },
+  },
+};
+
+/**
+ * Default backToTop story
+ */
+export const Default = {};

package/src/components/bs5/button/button.hbs

@@ -1,31 +1,42 @@
+{{!-- Button icon partial --}}
+{{#*inline "buttonIcon"~}}
+<span class="btn-icon {{iconClass}} {{iconPosition}}"></span>
+{{~/inline}} 
+
 {{#unless islink}}
-    <button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-    {{#if iconClass}}
-        {{#ifCond iconPosition '==' 'leading'}}
-            <span class="btn-icon {{iconClass}}"></span>
-        {{/ifCond}}
-    {{/if}}
-    {{label}}
-    {{#if iconClass}}
-        {{#ifCond iconPosition '==' 'trailing'}}
-            <span class="btn-icon {{iconClass}}"></span>
-        {{/ifCond}}
-    {{/if}}
-    </button>
+
+  <button class="btn {{variantClass}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'leading'}}
+      {{~>buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  
+  {{~label~}}
+  
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'trailing'}}
+      {{>buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  </button>
 
 {{else}}
 
-    <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}} aria-disabled="true" {{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
-        {{#if iconClass}}
-            {{#ifCond iconPosition '==' 'leading'}}
-                <span class="btn-icon {{iconClass}}"></span>
-            {{~/ifCond~}}
-        {{~/if~}}
-        {{~label~}}
-        {{#if iconClass}}
-            {{#ifCond iconPosition '==' 'trailing'}}
-                <span class="btn-icon {{iconClass}}"></span>
-            {{/ifCond}}
-        {{/if}}
-    </a>
-{{/unless }}
+  <a class="btn {{variantClass}} {{#if isdisabled}} disabled {{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'leading'}}
+      {{~> buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  
+  {{~label~}}
+
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'trailing'}}
+      {{~> buttonIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  </a>
+
+{{/unless}}

package/src/components/bs5/directionLinks/DirectionLinks.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Story } from "@storybook/blocks"
+import * as DirectionLinksStories from "./directionLinks.stories"
+
+<Meta of={DirectionLinksStories} />
+
+# DirectionLinks
+<Canvas>
+  <Story of={DirectionLinksStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=23167-395560&t=7cFV6FheiSfxWCL8-0)
+- [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321363&p=f&t=cQBFbBP6J97taQCN-0)
+- [Design System website](https://www.designsystem.qld.gov.au/components/direction-links)

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

@@ -0,0 +1,7 @@
+{
+	"id": "",
+	"label": "Up",
+	"href": "#",
+	"target": "_blank",
+	"class": "up"
+}

package/src/components/bs5/directionLinks/directionLinks.hbs

@@ -0,0 +1,9 @@
+{{! valid class values are: up, down, left, right}}
+<a class="qld-dir-link {{class}}" 
+    {{~#if id}} id="{{id}}" {{/if~}} 
+    href="{{href}}" 
+    {{~#if target}} target="{{target}}"{{/if~}}
+    {{~#if arialabel}} aria-label="{{arialabel}}" {{/if~}}>
+  {{{label}}}
+  <span class="icon" aria-hidden="true"></span>
+</a>

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

@@ -0,0 +1,11 @@
+import Component from "../../../js/QGDSComponent.js";
+import template from "./directionLinks.hbs?raw";
+
+export class DirectionLinks {
+  // Use the global Component class to create a new instance of the Accordion component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}