@cimpress/react-components
Version:
React components to support the MCP styleguide
63 lines • 3.71 kB
JavaScript
import React from 'react';
import { Modal } from '../Modal';
import { Button } from '../Button';
import { Tooltip } from '../Tooltip';
const meta = {
title: 'Components/Modal',
component: Modal,
};
export default meta;
function ModalStory(props) {
const [isOpen, setIsOpen] = React.useState(false);
return (React.createElement("div", null,
React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
React.createElement(Modal, Object.assign({ show: isOpen, onRequestHide: () => setIsOpen(false) }, props))));
}
export const Default = {
render: ModalStory,
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (React.createElement("div", null,
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio consectetur nam vero recusandae maiores corporis, velit quae mollitia reprehenderit odit!"))),
},
};
export const StatusVariants = {
render(props) {
const [isInfoModalOpen, setIsInfoModalOpen] = React.useState(false);
const [isSuccessModalOpen, setIsSuccessModalOpen] = React.useState(false);
const [isDangerModalOpen, setIsDangerModalOpen] = React.useState(false);
const [isWarningModalOpen, setIsWarningModalOpen] = React.useState(false);
return (React.createElement("div", null,
React.createElement(Modal, Object.assign({}, props, { show: isInfoModalOpen, onRequestHide: () => setIsInfoModalOpen(false), status: "info" })),
React.createElement(Modal, Object.assign({}, props, { show: isSuccessModalOpen, onRequestHide: () => setIsSuccessModalOpen(false), status: "success" })),
React.createElement(Modal, Object.assign({}, props, { show: isDangerModalOpen, onRequestHide: () => setIsDangerModalOpen(false), status: "danger" })),
React.createElement(Modal, Object.assign({}, props, { show: isWarningModalOpen, onRequestHide: () => setIsWarningModalOpen(false), status: "warning" })),
React.createElement("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } },
React.createElement(Button, { onClick: () => setIsInfoModalOpen(true) }, "Open Info Modal"),
React.createElement(Button, { onClick: () => setIsSuccessModalOpen(true) }, "Open Success Modal"),
React.createElement(Button, { onClick: () => setIsDangerModalOpen(true) }, "Open Danger Modal"),
React.createElement(Button, { onClick: () => setIsWarningModalOpen(true) }, "Open Warning Modal"))));
},
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (React.createElement("div", null,
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio consectetur nam vero recusandae maiores corporis, velit quae mollitia reprehenderit odit!"))),
},
};
export const WithTooltip = {
render: ModalStory,
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (React.createElement("div", null,
React.createElement("p", { style: { marginBottom: 16 } }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio consectetur nam vero recusandae maiores corporis, velit quae mollitia reprehenderit odit!"),
React.createElement(Tooltip, { contents: React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, exercitationem!") },
React.createElement(Button, null, "Hover Me")))),
},
};
//# sourceMappingURL=Modal.stories.js.map