eventx-design-system
Version:
Design System do EventX
99 lines (98 loc) • 2.58 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Checkbox } from './Checkbox';
const meta = {
title: 'Components/Checkbox',
component: Checkbox,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
variant: {
control: { type: 'select' },
options: ['default', 'error', 'success'],
},
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
disabled: {
control: { type: 'boolean' },
},
},
};
export default meta;
export const Default = {
args: {
label: 'Checkbox padrão',
},
};
export const Checked = {
args: {
checked: true,
label: 'Checkbox marcado',
},
};
export const Small = {
args: {
size: 'sm',
label: 'Checkbox pequeno',
},
};
export const Large = {
args: {
size: 'lg',
label: 'Checkbox grande',
},
};
export const Disabled = {
args: {
disabled: true,
label: 'Checkbox desabilitado',
},
};
export const DisabledChecked = {
args: {
disabled: true,
checked: true,
label: 'Checkbox desabilitado e marcado',
},
};
export const Error = {
args: {
variant: 'error',
label: 'Checkbox com erro',
},
};
export const Success = {
args: {
variant: 'success',
label: 'Checkbox com sucesso',
},
};
export const WithoutLabel = {
args: {},
};
export const Controlled = {
render: () => {
const [checked, setChecked] = useState(false);
return (_jsx(Checkbox, { checked: checked, onChange: setChecked, label: "Checkbox controlado" }));
},
};
export const MultipleCheckboxes = {
render: () => {
const [checkedItems, setCheckedItems] = useState({
item1: false,
item2: false,
item3: false,
});
const handleChange = (item) => (checked) => {
setCheckedItems(prev => ({
...prev,
[item]: checked,
}));
};
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(Checkbox, { checked: checkedItems.item1, onChange: handleChange('item1'), label: "Item 1" }), _jsx(Checkbox, { checked: checkedItems.item2, onChange: handleChange('item2'), label: "Item 2" }), _jsx(Checkbox, { checked: checkedItems.item3, onChange: handleChange('item3'), label: "Item 3" })] }));
},
};