import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Button.svelte';
import '@mozaic-ds/icons-svelte/components/ChevronRight24/ChevronRight24.svelte';
import '@mozaic-ds/icons-svelte/components/Edit24/Edit24.svelte';
import '@mozaic-ds/icons-svelte/components/Search24/Search24.svelte';
const meta = {
    title: 'Action/Button',
    component: 'm-button',
    argTypes: {
        iconposition: {
            control: 'radio',
            options: ['left', 'right', 'only'],
        },
        appearance: {
            control: 'radio',
            options: ['danger', 'accent', 'inverse', 'standard'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm', 'l'],
        },
        type: {
            control: 'radio',
            options: ['button', 'reset', 'submit'],
        },
    },
    args: { default: 'Button Label' },
    render: (args) => html `
    <m-button
      iconposition=${ifDefined(args.iconposition)}
      appearance=${ifDefined(args.appearance)}
      size=${ifDefined(args.size)}
      ?disabled=${args.disabled}
      ?ghost=${args.ghost}
      ?outlined=${args.outlined}
      type=${ifDefined(args.type)}
      ?isloading=${args.isloading}
    >
      ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
    </m-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 Outline = {
    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 IconLeft = {
    args: {
        iconposition: 'left',
        icon: '<edit-24 slot="icon"></edit-24>',
    },
    parameters: {
        docs: {
            description: {
                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used in conjunction with the action verb, reinforcing its meaning.',
            },
        },
    },
};
export const IconRight = {
    args: {
        iconposition: 'right',
        icon: '<chevron-right-24 slot="icon"></chevron-right-24>',
    },
    parameters: {
        docs: {
            description: {
                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Often emphasizes the concept of navigation, guiding users effectively.',
            },
        },
    },
};
export const IconOnly = {
    args: {
        default: undefined,
        iconposition: 'only',
        icon: '<search-24 slot="icon"></search-24>',
    },
    parameters: {
        docs: {
            description: {
                story: 'An icon can enhance the action or provide a visual element that helps user understanding.<br/> Used when the action is generic enough to be understood without accompanying text.',
            },
        },
    },
};
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' },
    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' },
    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' },
    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.',
            },
        },
    },
};
export const Loading = {
    args: {
        isloading: true,
    },
    parameters: {
        docs: {
            description: {
                story: 'Visually communicates to users that a process or action is in progress. It helps set user expectations during waiting periods by indicating that the system is working. Typically used for actions that require more than a fraction of a second to complete.',
            },
        },
    },
};
