import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Link.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronLeft24/ChevronLeft24.svelte';
const meta = {
    title: 'Navigation/Link',
    component: 'm-link',
    argTypes: {
        iconposition: {
            control: 'radio',
            options: ['left', 'right'],
        },
        appearance: {
            control: 'radio',
            options: ['secondary', 'accent', 'inverse', 'standard'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm'],
        },
        target: {
            control: 'radio',
            options: ['_self', '_blank', '_parent', '_top'],
        },
    },
    args: {
        default: 'Stand-alone link',
        href: '#',
    },
    render: (args) => html `
    <m-link
      iconposition=${ifDefined(args.iconposition)}
      appearance=${ifDefined(args.appearance)}
      size=${ifDefined(args.size)}
      href=${ifDefined(args.href)}
      target=${ifDefined(args.target)}
      ?inline=${args.inline}
    >
      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
    </m-link>
  `,
};
export default meta;
export const Standard = {};
export const Secondary = {
    args: { appearance: 'secondary' },
};
export const Accent = {
    args: { appearance: 'accent' },
};
export const Inverse = {
    globals: {
        backgrounds: { value: 'inverse' },
    },
    args: { appearance: 'inverse' },
};
export const Size = {
    args: { size: 'm' },
};
export const Inline = {
    args: { inline: true },
};
export const IconLeft = {
    args: {
        iconposition: 'left',
        icon: '<chevron-left-24 slot="icon"></chevron-left-24>',
    },
};
export const IconRight = {
    args: {
        iconposition: 'right',
        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
    },
};
