import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import '@mozaic-ds/icons-svelte/components/ChevronRight20/ChevronRight20.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronRight32/ChevronRight32.svelte';
import './IconButton.svelte';
const meta = {
    title: 'Action/Icon Button',
    component: 'm-icon-button',
    tags: ['v2'],
    args: {
        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
    },
    argTypes: {
        appearance: {
            control: 'radio',
            options: ['danger', 'accent', 'inverse', 'standard'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm', 'l'],
        },
        type: {
            control: 'radio',
            options: ['button', 'reset', 'submit'],
        },
    },
    render: (args) => html `
    <m-icon-button
      appearance=${ifDefined(args.appearance)}
      size=${ifDefined(args.size)}
      ?disabled=${args.disabled}
      ?ghost=${args.ghost}
      ?outlined=${args.outlined}
      ?isloading=${args.isloading}
      type=${ifDefined(args.type)}
    >
      ${unsafeHTML(ifDefined(args.icon))}
    </m-icon-button>
  `,
};
export default meta;
export const Filled = {
    parameters: {
        docs: {
            description: {
                story: 'Most visible variant, used to emphasize the primary action on a page or a section.',
            },
        },
    },
};
export const Outlined = {
    args: { outlined: true },
    parameters: {
        docs: {
            description: {
                story: 'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
            },
        },
    },
};
export const Ghost = {
    args: { ghost: true },
    parameters: {
        docs: {
            description: {
                story: 'More discreet, should be used exclusively for canceling or ignoring a task or action.',
            },
        },
    },
};
export const Loading = {
    args: { isloading: true },
    parameters: {
        docs: {
            description: {
                story: 'A loader replaces the icon to indicate that an action is in progress. Mouse events are prohibited.',
            },
        },
    },
};
export const Standard = {
    args: { appearance: 'standard' },
    parameters: {
        docs: {
            description: {
                story: 'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
            },
        },
    },
};
export const Accent = {
    args: { appearance: 'accent' },
    parameters: {
        docs: {
            description: {
                story: 'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
            },
        },
    },
};
export const Danger = {
    args: { appearance: 'danger' },
    parameters: {
        docs: {
            description: {
                story: 'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
            },
        },
    },
};
export const Inverse = {
    globals: {
        backgrounds: { value: 'inverse' },
    },
    args: { appearance: 'inverse' },
    parameters: {
        docs: {
            description: {
                story: 'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
            },
        },
    },
};
export const Small = {
    args: {
        size: 's',
        icon: '<chevron-right-20 slot="icon"></chevron-right-20>',
    },
    parameters: {
        docs: {
            description: {
                story: 'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
            },
        },
    },
};
export const Medium = {
    args: {
        size: 'm',
        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
    },
    parameters: {
        docs: {
            description: {
                story: 'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
            },
        },
    },
};
export const Large = {
    args: {
        size: 'l',
        icon: '<chevron-right-32 slot="icon"></chevron-right-32>',
    },
    parameters: {
        docs: {
            description: {
                story: 'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
            },
        },
    },
};
