@trimble-oss/moduswebcomponents/collection/components/modus-wc-link/modus-wc-link.stories.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const meta = {
    title: 'Components/Link',
    component: 'modus-wc-link',
    args: {
        color: 'primary',
        underline: 'always',
    },
    argTypes: {
        color: {
            control: { type: 'select' },
            options: [
                'primary',
                'secondary',
                'tertiary',
                'inherit',
                'success',
                'info',
                'warning',
                'danger',
            ],
        },
        underline: {
            control: { type: 'select' },
            options: ['always', 'hover', 'none'],
        },
        target: {
            control: { type: 'select' },
            options: ['_blank', '_self', '_parent', '_top'],
        },
    },
};
export default meta;
const Template = {
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-link
  color="${args.color}"
  custom-class=${ifDefined(args['custom-class'])}
  href=${ifDefined(args.href)}
  rel=${ifDefined(args.rel)}
  target=${ifDefined(args.target)}
  title=${ifDefined(args.title)}
  underline="${args.underline}"
>Click me</modus-wc-link>
    `;
    },
};
export const Default = Object.assign({}, Template);
export const Underline = {
    render: () => {
        const underlines = ['always', 'hover', 'none'];
        // prettier-ignore
        return html `
<div style="display: flex; flex-direction: column; gap: 8px;">
  ${underlines.map((underline) => html `
  <modus-wc-link underline="${underline}">${underline}</modus-wc-link>
  `)}
</div>
    `;
    },
};
export const ExternalLink = {
    args: {
        href: 'https://www.trimble.com',
        target: '_blank',
    },
    render: (args) => {
        // prettier-ignore
        return html `
<modus-wc-link
  href=${ifDefined(args.href)}
  target=${ifDefined(args.target)}
  aria-label="Visit Trimble website, opens in a new window"
>Trimble.com</modus-wc-link>
    `;
    },
};
export const InheritColor = {
    render: () => {
        // prettier-ignore
        return html `
<p style="color: var(--modus-wc-color-base-content);">
  Body text with an
  <modus-wc-link color="inherit">inherit color link</modus-wc-link>
  inline.
</p>
    `;
    },
};