@qld-gov-au/qgds-bootstrap5 1.1.40 → 2.0.0

package/src/components/bs5/link/link.hbs

@@ -0,0 +1,41 @@
+{{!-- Link icon partial --}}
+{{#*inline "linkIcon"~}}
+<span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
+{{~/inline}} 
+
+{{#*inline "link"~}}
+<a class="link" {{#if id}}id="{{id}}"{{/if}}
+    href="{{url}}" 
+    target="{{target}}" 
+    {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} 
+    {{#if download}}download="{{download}}"{{/if}} 
+    >
+ {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'leading'}}
+      {{~> linkIcon~}}
+    {{/ifCond}}
+  {{/if}}
+
+    {{label}}
+
+  {{#if iconClass~}}
+    {{#ifCond iconPosition '==' 'trailing'}}
+      {{~> linkIcon~}}
+    {{/ifCond}}
+  {{/if}}
+  
+</a>
+{{~/inline}} 
+
+{{#if linkList~}}
+<ul class="link-list">
+    {{#each linkList}}
+      <li class="link-item">
+        {{~> link~}}
+      </li>
+    {{/each}}
+</ul>
+        
+{{else}}
+    {{~> link~}}
+{{/if}}

package/src/components/bs5/{pageLayout/pageLayout.js → link/link.js}

@@ -1,8 +1,8 @@
 import Component from "../../../js/QGDSComponent.js";
-import template from "./pageLayout.hbs?raw";
+import template from "./link.hbs?raw";
 
 /**
- * Creates a new instance of the page layout class.
+ * Creates a new instance of the Link Column class.
  * @param {Object} data - The data object used to render the template. If no data is provided, the components example data file (component.data.json) will be used as a fallback.
  * @returns {Object} - An object containing the Handlebars template, data, and rendered HTML of the component.
  *
@@ -10,12 +10,11 @@ import template from "./pageLayout.hbs?raw";
  * See sample data file for more examples.
  */
 
-export class PageLayout {
-  // Use the global Component class to create a new instance of the page layout component.
+export class Link {
+  // Use the global Component class to create a new instance of the LinkColumn 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/link/link.mdx

@@ -0,0 +1,16 @@
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as linkStories from "./link.stories";
+
+<Meta of={linkStories} />
+
+# Icon Link
+
+<Canvas>
+  <Story of={linkStories.Default} />
+</Canvas>
+
+## Design resources
+
+- [Component library (Figma)](https://www.figma.com/design/2hnawnMhbVAHbYj91Z3S0I/00.-QLD.GOV-extended-components-and-templates?node-id=7402-2821&m=dev)
+- [Master component file (Figma)]()
+- [Design System website]()

package/src/components/bs5/link/link.scss

@@ -0,0 +1,81 @@
+.link {
+  text-underline-offset: var(--qld-link-underline-offset);
+  text-decoration-thickness: var(--qld-link-underline-thickness);
+
+  --#{$prefix}icon-background-color: var(--#{$prefix}light-action-secondary);
+  --#{$prefix}icon-background-color-hover: var(
+    --#{$prefix}light-action-secondary-hover
+  );
+  --#{$prefix}link-color: var(--#{$prefix}light-link);
+  --#{$prefix}link-text-decoration-color: var(--#{$prefix}light-link);
+  --#{$prefix}link-gap: 0.5rem;
+
+  .dark &,
+  .dark-alt & {
+    --#{$prefix}icon-background-color: var(--#{$prefix}dark-action-secondary);
+    --#{$prefix}icon-background-color-hover: var(
+      --#{$prefix}dark-action-secondary-hover
+    );
+    --#{$prefix}link-color: var(--#{$prefix}dark-link);
+    --#{$prefix}link-text-decoration-color: var(--#{$prefix}dark-link);
+    &:visited {
+      color: var(--#{$prefix}link-color);
+      text-decoration-color: var(--#{$prefix}link-text-decoration-color);
+    }
+  }
+
+  color: var(--#{$prefix}link-color);
+  text-decoration-color: var(--#{$prefix}link-text-decoration-color);
+  display: flex;
+  gap: var(--#{$prefix}link-gap);
+  align-items: center;
+  text-decoration-color: rgba(
+    var(--#{$prefix}link-color-rgb),
+    var(--#{$prefix}link-opacity, 0.5)
+  );
+  text-underline-offset: $icon-link-underline-offset;
+  backface-visibility: hidden;
+  width: fit-content;
+
+  &:hover {
+    text-decoration-thickness: var(--qld-link-underline-thickness-hover);
+    text-decoration-color: var(
+      --#{$prefix}color-default-color-light-underline-default
+    );
+    .qld-icon {
+      background-color: var(--#{$prefix}icon-background-color-hover);
+    }
+  }
+
+  &:visited {
+    color: var(--#{$prefix}link-color);
+    text-decoration-color: var(--#{$prefix}link-text-decoration-color);
+
+    &:hover {
+      text-decoration-color: var(--#{$prefix}link-text-decoration-color);
+    }
+  }
+
+  &:focus {
+    outline: 3px solid var(--qld-focus-color);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  .qld-icon {
+    background-color: var(--#{$prefix}icon-background-color);
+  }
+}
+
+.link-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  li {
+    margin-top: 0.75rem;
+    line-height: 1.5rem;
+  }
+  li:first-child {
+    margin-top: 0;
+  }
+}

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

@@ -0,0 +1,126 @@
+/**
+ * @file linkColumns.stories.js
+ * @description Storybook configuration file for the link Columns component.
+ * @module linkColumns.stories
+ */
+
+import { Link } from "./link.js";
+import defaultdata from "./link.data.json";
+
+export default {
+  tags: ["autodocs"],
+  title: "3. Components/Link",
+
+  render: (args) => new Link(args).html,
+  //   args: defaultdata,
+  argTypes: {
+    url: {
+      description: "The URL that the link points to",
+      control: { type: "text" },
+    },
+    id: { control: "text" },
+    label: {
+      description: "The text that appears for the link",
+      control: { type: "text" },
+    },
+    iconClass: {
+      description: "The icon class for the link icon",
+      control: { type: "text" },
+    },
+    iconPosition: {
+      description:
+        "The position of the icon relative to the link text. Options are 'leading' or 'trailing'",
+      control: { type: "select" },
+      options: ["leading", "trailing"],
+      defaultValue: "leading",
+    },
+    target: {
+      description:
+        "The target attribute for the link (e.g., '_self', '_blank')",
+      control: { type: "select" },
+      options: ["_self", "_blank"],
+      defaultValue: "_self",
+    },
+    arialabel: {
+      description: "The aria-label attribute for the link (for screen readers)",
+      control: { type: "text" },
+    },
+    download: {
+      description: "This decides if the file is downloaded on click",
+      control: { type: "text" },
+    },
+  },
+
+  /**
+   * 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/2hnawnMhbVAHbYj91Z3S0I/00.-QLD.GOV-extended-components-and-templates?node-id=7402-2844&m=dev",
+    },
+    pageLayout: "with-wrapper",
+    wrapperClasses: "qld-content-body",
+  },
+};
+
+/**
+ * Default Link story With Default Data
+ */
+export const Default = {
+  args: {
+    ...defaultdata.default,
+  },
+};
+
+/**
+ * Link in 'Dark' colour theme.
+ */
+export const Dark = {
+  parameters: {
+    backgrounds: {
+      default: "Dark",
+      values: [{ name: "Dark", value: "var(--qld-dark-background)" }],
+    },
+  },
+  args: {
+    ...defaultdata.default,
+    class: "dark",
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+/**
+ * List of links.
+ */
+export const LinkGroup = {
+  args: {
+    ...defaultdata.linkGroup,
+  },
+};
+
+/**
+ * Link without icon.
+ */
+export const WithoutIcon = {
+  args: {
+    ...defaultdata.default,
+    iconClass: null,
+    iconPosition: null,
+  },
+};

package/src/components/bs5/linkColumns/linkColumns.mdx

@@ -1,16 +1,21 @@
-import { Canvas, Meta, Story } from "@storybook/blocks"
-import * as linkColumnsStories from "./linkColumns.stories"
+import { Canvas, Meta, Story, Source } from "@storybook/blocks";
+import * as linkColumnsStories from "./linkColumns.stories";
+import defaultdata from "./linkColumns.data.json";
 
 <Meta of={linkColumnsStories} />
 
 # LinkColumns
+
 <Canvas>
   <Story of={linkColumnsStories.Default} />
 </Canvas>
 
 ## Design resources
 
-
 - [Component library (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6pghtHXhO8h5PAit-0)
 - [Master component file (Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QGDS-UI-kit?node-id=11056-321574&p=f&t=6sRnJtEdRnteiQXM-0)
 - [Design System website](https://www.designsystem.qld.gov.au/components/link-columns-link-list)
+
+## Example JSON data
+
+<Source language="json" code={JSON.stringify(defaultdata, null, 2)} />

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

@@ -2,5 +2,6 @@
   "logo": "coa-landscape",
   "fill": "currentColor",
   "width": "",
+  "height": "",
   "className": ""
 }