eventx-design-system
Version:
Design System do EventX
52 lines (51 loc) • 2.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { Modal } from './Modal';
import { Button } from './Button';
const meta = {
title: 'Components/Modal',
component: Modal,
parameters: {
layout: 'centered',
},
argTypes: {
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg', 'xl'],
},
closeOnOverlayClick: {
control: { type: 'boolean' },
},
},
};
export default meta;
const ModalExample = ({ size = 'md', ...props }) => {
const [isOpen, setIsOpen] = useState(false);
return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Abrir Modal" }), _jsxs(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Exemplo de Modal", size: size, ...props, children: [_jsx("p", { children: "Este \u00E9 um exemplo de conte\u00FAdo do modal." }), _jsx("p", { children: "Voc\u00EA pode adicionar qualquer conte\u00FAdo aqui." }), _jsxs("div", { style: { marginTop: '16px', display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: () => setIsOpen(false), children: "Cancelar" }), _jsx(Button, { onClick: () => setIsOpen(false), children: "Confirmar" })] })] })] }));
};
export const Default = {
render: (args) => _jsx(ModalExample, { ...args }),
};
export const Small = {
render: (args) => _jsx(ModalExample, { size: "sm", ...args }),
};
export const Large = {
render: (args) => _jsx(ModalExample, { size: "lg", ...args }),
};
export const ExtraLarge = {
render: (args) => _jsx(ModalExample, { size: "xl", ...args }),
};
const ModalWithoutTitle = () => {
const [isOpen, setIsOpen] = useState(false);
return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Modal sem t\u00EDtulo" }), _jsx(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx("p", { children: "Modal sem t\u00EDtulo, apenas com bot\u00E3o de fechar." }) })] }));
};
const ModalWithoutCloseButton = () => {
const [isOpen, setIsOpen] = useState(false);
return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Modal sem bot\u00E3o fechar" }), _jsxs(Modal, { isOpen: isOpen, onClose: () => setIsOpen(false), title: "Modal sem bot\u00E3o fechar", closeOnOverlayClick: false, children: [_jsx("p", { children: "Este modal n\u00E3o pode ser fechado clicando fora ou no X." }), _jsx("p", { children: "Voc\u00EA precisa implementar sua pr\u00F3pria l\u00F3gica de fechamento." })] })] }));
};
export const WithoutTitle = {
render: () => _jsx(ModalWithoutTitle, {}),
};
export const WithoutCloseButton = {
render: () => _jsx(ModalWithoutCloseButton, {}),
};