@cimpress/react-components
Version:
React components to support the MCP styleguide
30 lines • 2.19 kB
JavaScript
import * as React from 'react';
import { Drawer } from '../Drawer';
import { Button } from '../Button';
import { Tooltip } from '../Tooltip';
const meta = {
title: 'Components/Drawer',
component: Drawer,
};
export default meta;
export const Default = {
render(props) {
const [show, setShow] = React.useState(false);
return (React.createElement("div", null,
React.createElement(Button, { onClick: () => setShow(true) }, "Open Drawer"),
React.createElement(Drawer, Object.assign({ show: show, onRequestHide: () => setShow(false), closeOnClickOutside: true }, props),
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eius magnam aliquam suscipit dolor recusandae, ut consectetur quidem aliquid. Assumenda accusantium repellat cum totam quae ipsum dolor recusandae beatae excepturi! Eligendi cum accusantium magnam ad praesentium ab quam voluptatum, itaque odit consequatur amet non aliquid minima enim fuga obcaecati officiis."))));
},
};
export const WithTooltip = {
render(props) {
const [show, setShow] = React.useState(false);
return (React.createElement("div", null,
React.createElement(Button, { onClick: () => setShow(true) }, "Open Drawer"),
React.createElement(Drawer, Object.assign({ show: show, onRequestHide: () => setShow(false), closeOnClickOutside: true }, props),
React.createElement("p", { style: { marginBottom: 16 } }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis eius magnam aliquam suscipit dolor recusandae, ut consectetur quidem aliquid. Assumenda accusantium repellat cum totam quae ipsum dolor recusandae beatae excepturi! Eligendi cum accusantium magnam ad praesentium ab quam voluptatum, itaque odit consequatur amet non aliquid minima enim fuga obcaecati officiis."),
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=Drawer.stories.js.map