eventx-design-system
Version:
Design System do EventX
52 lines (51 loc) • 2.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Divider } from './Divider';
const meta = {
title: 'Components/Divider',
component: Divider,
parameters: {
layout: 'centered',
},
argTypes: {
orientation: {
control: { type: 'select' },
options: ['horizontal', 'vertical'],
},
variant: {
control: { type: 'select' },
options: ['solid', 'dashed', 'dotted'],
},
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
},
};
export default meta;
export const Horizontal = {
args: {
orientation: 'horizontal',
},
};
export const Vertical = {
args: {
orientation: 'vertical',
},
render: (args) => (_jsxs("div", { style: { height: '100px', display: 'flex', alignItems: 'center' }, children: [_jsx("span", { children: "Texto" }), _jsx(Divider, { ...args }), _jsx("span", { children: "Texto" })] })),
};
export const Dashed = {
args: {
variant: 'dashed',
},
};
export const Dotted = {
args: {
variant: 'dotted',
},
};
export const Sizes = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsxs("div", { children: [_jsx("span", { children: "Small" }), _jsx(Divider, { size: "sm" })] }), _jsxs("div", { children: [_jsx("span", { children: "Medium" }), _jsx(Divider, { size: "md" })] }), _jsxs("div", { children: [_jsx("span", { children: "Large" }), _jsx(Divider, { size: "lg" })] })] })),
};
export const AllVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsxs("div", { children: [_jsx("span", { children: "Solid" }), _jsx(Divider, { variant: "solid" })] }), _jsxs("div", { children: [_jsx("span", { children: "Dashed" }), _jsx(Divider, { variant: "dashed" })] }), _jsxs("div", { children: [_jsx("span", { children: "Dotted" }), _jsx(Divider, { variant: "dotted" })] })] })),
};