feat(link): add fds-link component (#167)

src/components/link/fds-link.scss

@@ -0,0 +1,56 @@
+@import '../../styles/settings/prefix';
+@import '../../design-tokens/build/scss/tokens';
+
+.#{$prefix}-link {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-4x-small;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: inherit;
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px $link-color-focus-border;
+  }
+}
+
+:host([variant='primary']) .#{$prefix}-link {
+  color: $link-color-primary-text;
+
+  &:active {
+    color: $link-color-primary-active-text;
+  }
+}
+
+:host([variant='secondary']) .#{$prefix}-link {
+  color: $link-color-secondary-text;
+
+  &:active {
+    color: $link-color-secondary-active-text;
+  }
+}
+
+:host([variant='dark']) .#{$prefix}-link {
+  color: $link-color-dark-text;
+
+  &:active {
+    color: $link-color-dark-active-text;
+  }
+}
+
+:host([inline]) .#{$prefix}-link {
+  display: inline;
+}

src/components/link/fds-link.stories.ts

@@ -0,0 +1,98 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import './fds-link';
+import '../icon/fds-icon';
+
+export default {
+  title: 'Components/Link',
+  component: 'fds-link',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Links are a fundamental element that allows users to redirect to a different page on the interface or to an external resource directly using a sentence, paragraph, or label with the <a> (Anchor) tag.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'dark'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    withIcon: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    inline: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+    },
+    target: {
+      options: ['_self', '_blank', '_parent', '_top'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  args: {
+    variant: 'primary',
+    href: '#',
+  },
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const Base = (args: any) => html`
+  <fds-link
+    variant=${ifDefined(args.variant)}
+    ?with-icon=${args.withIcon}
+    ?inline=${args.inline}
+    href=${ifDefined(args.href)}
+    target=${ifDefined(args.target)}
+    >Link
+  </fds-link>
+`;
+
+export const Variants = {
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-link variant="primary">Primary link</fds-link>
+      <fds-link variant="secondary">Secondary link</fds-link>
+      <div style="background-color: #000;">
+        <fds-link variant="dark">Dark link</fds-link>
+      </div>
+    </div>
+  `,
+};
+
+export const Inline = {
+  render: () => html`
+    <p>
+      Your invoice credit is running low, which may affect your ability to process invoices. Please
+      top up your credits by <fds-link variant="primary" inline>viewing our plans </fds-link> to
+      avoid interruptions. If you need assistance, our
+      <fds-link variant="primary" inline>support team</fds-link> is available to help.
+    </p>
+  `,
+};
+
+export const WithIcon = {
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 1rem">
+      <fds-link variant="primary" with-icon>Primary link</fds-link>
+      <fds-link variant="secondary" with-icon>Secondary link</fds-link>
+      <div style="background-color: #000;">
+        <fds-link variant="dark" with-icon>Dark link</fds-link>
+      </div>
+    </div>
+  `,
+};

src/components/link/fds-link.ts

@@ -0,0 +1,50 @@
+import { html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import style from './fds-link.scss';
+
+export type LinkVariant = 'primary' | 'secondary' | 'dark';
+export type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
+
+@customElement('fds-link')
+export class FdsLink extends LitElement {
+  static get styles() {
+    return [unsafeCSS(style)];
+  }
+
+  @property({ type: String, reflect: true })
+  variant: LinkVariant = 'primary';
+
+  @property({ type: Boolean, reflect: true, attribute: 'with-icon' })
+  withIcon? = false;
+
+  @property({ type: Boolean, reflect: true })
+  inline? = false;
+
+  @property({ type: Boolean, reflect: true })
+  autofocus = false;
+
+  @property({ type: String, reflect: true })
+  href = '';
+
+  @property({ type: String })
+  target: LinkTarget = '_self';
+
+  render(): TemplateResult {
+    const target = this.withIcon ? '_blank' : this.target;
+
+    return html`
+      <a class="fds-link" href=${ifDefined(this.href)} target=${ifDefined(target)}>
+        <slot></slot>
+        ${this.withIcon
+          ? html`<fds-icon
+              name="arrow-up-right-from-square"
+              icon-style="far"
+              size="x-small"
+            ></fds-icon>`
+          : ''}</a
+      >
+    `;
+  }
+}

src/index.ts

@@ -2,6 +2,7 @@ export { FdsAggregate } from './components/aggregate/fds-aggregate';
 export { FdsBadge } from './components/badge/fds-badge';
 export { FdsButton } from './components/button/fds-button';
 export { FdsIcon } from './components/icon/fds-icon';
+export { FdsLink } from './components/link/fds-link';
 export { FdsList } from './components/list/fds-list';
 export { FdsListItem } from './components/list/fds-list-item';
 export { FdsProgressBar } from './components/progress-bar/fds-progress-bar';