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

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.22","branch":"HEAD","tag":"v1.1.22","commit":"2d7f69e1a3cc163bb6c6c9c91fce83d366ef1529","majorVersion":"v1"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???

package/dist/components/handlebars.partials.js

@@ -15,6 +15,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";
@@ -64,6 +65,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.22",
   "description": "",
   "repository": {
     "type": "git",

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.22",
   "description": "",
   "repository": {
     "type": "git",

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

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

@@ -87,6 +87,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,

package/src/js/handlebars.partials.js

@@ -15,6 +15,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";
@@ -64,6 +65,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);