diff --git a/src/components/link/fds-link.scss b/src/components/link/fds-link.scss new file mode 100644 index 00000000..fa1da96d --- /dev/null +++ b/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; +} diff --git a/src/components/link/fds-link.stories.ts b/src/components/link/fds-link.stories.ts new file mode 100644 index 00000000..a071e1a0 --- /dev/null +++ b/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 (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` + Link + +`; + +export const Variants = { + render: () => html` +
+ Primary link + Secondary link +
+ Dark link +
+
+ `, +}; + +export const Inline = { + render: () => html` +

+ Your invoice credit is running low, which may affect your ability to process invoices. Please + top up your credits by viewing our plans to + avoid interruptions. If you need assistance, our + support team is available to help. +

+ `, +}; + +export const WithIcon = { + render: () => html` +
+ Primary link + Secondary link +
+ Dark link +
+
+ `, +}; diff --git a/src/components/link/fds-link.ts b/src/components/link/fds-link.ts new file mode 100644 index 00000000..6b07cdad --- /dev/null +++ b/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` + + + ${this.withIcon + ? html`` + : ''} + `; + } +} diff --git a/src/index.ts b/src/index.ts index 65b8f5e5..9f9a4fe3 100644 --- a/src/index.ts +++ b/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';