eventx-design-system
Version:
Design System do EventX
57 lines (56 loc) • 2.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Radio } from './Radio';
const meta = {
title: 'Components/Radio',
component: Radio,
parameters: {
layout: 'centered',
},
argTypes: {
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
disabled: {
control: { type: 'boolean' },
},
},
};
export default meta;
const RadioExample = ({ size = 'md', ...props }) => {
const [checked, setChecked] = useState(false);
return (_jsx(Radio, { checked: checked, onChange: setChecked, label: "Exemplo de radio", size: size, ...props }));
};
export const Default = {
render: () => _jsx(RadioExample, {}),
};
export const Small = {
render: () => _jsx(RadioExample, { size: "sm" }),
};
export const Large = {
render: () => _jsx(RadioExample, { size: "lg" }),
};
export const WithoutLabel = {
render: () => {
const [checked, setChecked] = useState(false);
return (_jsx(Radio, { checked: checked, onChange: setChecked }));
},
};
export const Disabled = {
render: () => _jsx(RadioExample, { disabled: true }),
};
export const RadioGroup = {
render: () => {
const [selected, setSelected] = useState('option1');
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx(Radio, { checked: selected === 'option1', onChange: () => setSelected('option1'), label: "Op\u00E7\u00E3o 1", name: "radio-group", value: "option1" }), _jsx(Radio, { checked: selected === 'option2', onChange: () => setSelected('option2'), label: "Op\u00E7\u00E3o 2", name: "radio-group", value: "option2" }), _jsx(Radio, { checked: selected === 'option3', onChange: () => setSelected('option3'), label: "Op\u00E7\u00E3o 3", name: "radio-group", value: "option3" })] }));
},
};
export const AllSizes = {
render: () => {
const [checked1, setChecked1] = useState(false);
const [checked2, setChecked2] = useState(false);
const [checked3, setChecked3] = useState(false);
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(Radio, { checked: checked1, onChange: setChecked1, label: "Radio pequeno", size: "sm" }), _jsx(Radio, { checked: checked2, onChange: setChecked2, label: "Radio m\u00E9dio", size: "md" }), _jsx(Radio, { checked: checked3, onChange: setChecked3, label: "Radio grande", size: "lg" })] }));
},
};