@cimpress/react-components
Version:
React components to support the MCP styleguide
69 lines • 4.4 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithTooltip = exports.StatusVariants = exports.Default = void 0;
const react_1 = __importDefault(require("react"));
const Modal_1 = require("../Modal");
const Button_1 = require("../Button");
const Tooltip_1 = require("../Tooltip");
const meta = {
title: 'Components/Modal',
component: Modal_1.Modal,
};
exports.default = meta;
function ModalStory(props) {
const [isOpen, setIsOpen] = react_1.default.useState(false);
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
react_1.default.createElement(Modal_1.Modal, Object.assign({ show: isOpen, onRequestHide: () => setIsOpen(false) }, props))));
}
exports.Default = {
render: ModalStory,
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio consectetur nam vero recusandae maiores corporis, velit quae mollitia reprehenderit odit!"))),
},
};
exports.StatusVariants = {
render(props) {
const [isInfoModalOpen, setIsInfoModalOpen] = react_1.default.useState(false);
const [isSuccessModalOpen, setIsSuccessModalOpen] = react_1.default.useState(false);
const [isDangerModalOpen, setIsDangerModalOpen] = react_1.default.useState(false);
const [isWarningModalOpen, setIsWarningModalOpen] = react_1.default.useState(false);
return (react_1.default.createElement("div", null,
react_1.default.createElement(Modal_1.Modal, Object.assign({}, props, { show: isInfoModalOpen, onRequestHide: () => setIsInfoModalOpen(false), status: "info" })),
react_1.default.createElement(Modal_1.Modal, Object.assign({}, props, { show: isSuccessModalOpen, onRequestHide: () => setIsSuccessModalOpen(false), status: "success" })),
react_1.default.createElement(Modal_1.Modal, Object.assign({}, props, { show: isDangerModalOpen, onRequestHide: () => setIsDangerModalOpen(false), status: "danger" })),
react_1.default.createElement(Modal_1.Modal, Object.assign({}, props, { show: isWarningModalOpen, onRequestHide: () => setIsWarningModalOpen(false), status: "warning" })),
react_1.default.createElement("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } },
react_1.default.createElement(Button_1.Button, { onClick: () => setIsInfoModalOpen(true) }, "Open Info Modal"),
react_1.default.createElement(Button_1.Button, { onClick: () => setIsSuccessModalOpen(true) }, "Open Success Modal"),
react_1.default.createElement(Button_1.Button, { onClick: () => setIsDangerModalOpen(true) }, "Open Danger Modal"),
react_1.default.createElement(Button_1.Button, { onClick: () => setIsWarningModalOpen(true) }, "Open Warning Modal"))));
},
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio consectetur nam vero recusandae maiores corporis, velit quae mollitia reprehenderit odit!"))),
},
};
exports.WithTooltip = {
render: ModalStory,
args: {
title: 'Modal Title',
closeButton: true,
closeOnOutsideClick: true,
children: (react_1.default.createElement("div", null,
react_1.default.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_1.default.createElement(Tooltip_1.Tooltip, { contents: react_1.default.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, exercitationem!") },
react_1.default.createElement(Button_1.Button, null, "Hover Me")))),
},
};
//# sourceMappingURL=Modal.stories.js.map