eventx-design-system
Version:
Design System do EventX
64 lines (63 loc) • 2.12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Loading } from './Loading';
const meta = {
title: 'Components/Loading',
component: Loading,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
variant: {
control: { type: 'select' },
options: ['spinner', 'dots', 'pulse'],
},
size: {
control: { type: 'select' },
options: ['small', 'medium', 'large'],
},
},
};
export default meta;
export const Default = {
args: {
variant: 'spinner',
size: 'medium',
},
};
export const Spinner = {
args: {
variant: 'spinner',
size: 'medium',
},
};
export const Dots = {
args: {
variant: 'dots',
size: 'medium',
},
};
export const Pulse = {
args: {
variant: 'pulse',
size: 'medium',
},
};
export const Small = {
args: {
variant: 'spinner',
size: 'small',
},
};
export const Large = {
args: {
variant: 'spinner',
size: 'large',
},
};
export const AllVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', gap: '2rem', alignItems: 'center' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Spinner" }), _jsx(Loading, { variant: "spinner", size: "medium" })] }), _jsxs("div", { children: [_jsx("h4", { children: "Dots" }), _jsx(Loading, { variant: "dots", size: "medium" })] }), _jsxs("div", { children: [_jsx("h4", { children: "Pulse" }), _jsx(Loading, { variant: "pulse", size: "medium" })] })] })),
};
export const AllSizes = {
render: () => (_jsxs("div", { style: { display: 'flex', gap: '2rem', alignItems: 'center' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Small" }), _jsx(Loading, { variant: "spinner", size: "small" })] }), _jsxs("div", { children: [_jsx("h4", { children: "Medium" }), _jsx(Loading, { variant: "spinner", size: "medium" })] }), _jsxs("div", { children: [_jsx("h4", { children: "Large" }), _jsx(Loading, { variant: "spinner", size: "large" })] })] })),
};