import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { action } from 'storybook/actions';
import './TileClickable.svelte';
const meta = {
    title: 'Content/Tile/Clickable',
    component: 'm-tile-clickable',
    argTypes: {
        appearance: {
            control: { type: 'radio' },
            options: ['primary', 'secondary', 'inverse'],
        },
        iconposition: {
            control: { type: 'radio' },
            options: ['right', 'bottom'],
        },
    },
    args: {
        default: `<div class="placeholder-slot">Insert a form element here to replace this slot.</div>`,
    },
    render: (args) => html `
    <m-tile-clickable
      appearance="${ifDefined(args.appearance)}"
      ?bordered="${args.bordered}"
      href="${ifDefined(args.href)}"
      ?internal="${args.internal}"
      iconposition="${ifDefined(args.iconposition)}"
      @action="${action('action')}"
    >
      ${unsafeHTML(ifDefined(args.default))}
    </m-tile-clickable>
  `,
};
export default meta;
export const Default = {};
export const WithBottomAction = {
    args: {
        iconposition: 'bottom',
    },
};
export const ExternalLink = {
    args: {
        href: '#',
    },
};
export const InternalNavigation = {
    args: {
        href: '#',
        internal: true,
    },
};
