eventx-design-system/dist/components/Tag/Tag.stories.js

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tag } from './Tag';
const meta = {
    title: 'Components/Tag',
    component: Tag,
    parameters: {
        layout: 'centered',
    },
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: { type: 'select' },
            options: ['default', 'success', 'warning', 'error', 'info'],
        },
        size: {
            control: { type: 'select' },
            options: ['small', 'medium', 'large'],
        },
        outlined: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
export const Default = {
    args: {
        children: 'Tag',
        variant: 'default',
        size: 'medium',
        outlined: false,
    },
};
export const Success = {
    args: {
        children: 'Success',
        variant: 'success',
        size: 'medium',
        outlined: false,
    },
};
export const Warning = {
    args: {
        children: 'Warning',
        variant: 'warning',
        size: 'medium',
        outlined: false,
    },
};
export const Error = {
    args: {
        children: 'Error',
        variant: 'error',
        size: 'medium',
        outlined: false,
    },
};
export const Info = {
    args: {
        children: 'Info',
        variant: 'info',
        size: 'medium',
        outlined: false,
    },
};
export const Outlined = {
    args: {
        children: 'Outlined',
        variant: 'default',
        size: 'medium',
        outlined: true,
    },
};
export const Small = {
    args: {
        children: 'Small',
        variant: 'default',
        size: 'small',
        outlined: false,
    },
};
export const Large = {
    args: {
        children: 'Large',
        variant: 'default',
        size: 'large',
        outlined: false,
    },
};
export const Clickable = {
    args: {
        children: 'Clickable Tag',
        variant: 'default',
        size: 'medium',
        outlined: false,
        onClick: () => alert('Tag clicked!'),
    },
};
export const AllVariants = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsx(Tag, { variant: "default", children: "Default" }), _jsx(Tag, { variant: "success", children: "Success" }), _jsx(Tag, { variant: "warning", children: "Warning" }), _jsx(Tag, { variant: "error", children: "Error" }), _jsx(Tag, { variant: "info", children: "Info" })] })),
};
export const AllSizes = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'center' }, children: [_jsx(Tag, { size: "small", children: "Small" }), _jsx(Tag, { size: "medium", children: "Medium" }), _jsx(Tag, { size: "large", children: "Large" })] })),
};
export const OutlinedVariants = {
    render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsx(Tag, { variant: "default", outlined: true, children: "Default" }), _jsx(Tag, { variant: "success", outlined: true, children: "Success" }), _jsx(Tag, { variant: "warning", outlined: true, children: "Warning" }), _jsx(Tag, { variant: "error", outlined: true, children: "Error" }), _jsx(Tag, { variant: "info", outlined: true, children: "Info" })] })),
};