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 './StatusNotification.svelte';
import '../button/Button.svelte';
import '../link/Link.svelte';
import '@mozaic-ds/icons-svelte/components/ArrowNext20/ArrowNext20.svelte';
const meta = {
    title: 'Status/Status Notification',
    component: 'm-status-notification',
    argTypes: {
        status: {
            control: 'radio',
            options: ['info', 'success', 'warning', 'error'],
        },
        close: {
            control: false,
        },
    },
    args: {
        title: 'This is a title, be concise and use the description message to give details.',
        description: 'Description message.',
    },
    render: (args) => html ` <m-status-notification
      title=${ifDefined(args.title)}
      description=${ifDefined(args.description)}
      status=${ifDefined(args.status)}
      ?closable=${args.closable}
      @close=${action('close')}
    >
      ${unsafeHTML(ifDefined(args.footer))}
    </m-status-notification>`,
};
export default meta;
export const Info = {};
export const Success = {
    args: { status: 'success' },
};
export const Warning = {
    args: { status: 'warning' },
};
export const Error = {
    args: { status: 'error' },
};
export const Closable = {
    args: { closable: true },
};
export const Button = {
    args: {
        footer: `<m-button outlined slot="footer">Button Label</m-button>`,
    },
};
export const Buttons = {
    args: {
        footer: `
      <m-button slot="footer">Button Label</m-button>
      <m-button slot="footer" outlined="true">Button Label</m-button>
    `,
    },
};
export const Link = {
    args: {
        footer: `
      <m-link href="#" iconPosition="right" slot="footer">
        Stand-alone link

        <arrow-next-20 slot="icon"></arrow-next-20>
      </m-link>
    `,
    },
};
