@cimpress/react-components
Version:
React components to support the MCP styleguide
106 lines • 3.77 kB
JavaScript
import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import DrawerCode from '!raw-loader!./drawer.jsx';
import DrawerDemo from './drawer.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const DrawerDocs = () => {
const propInfos = [
{
name: 'show',
type: 'boolean (required)',
default: '',
description: 'Controls whether or not the drawer is displayed.',
},
{
name: 'position',
type: 'string',
default: 'right',
description: 'The side of the screen on which to display the drawer; one of "left" or "right".',
},
{
name: 'autoResize',
type: 'boolean',
default: 'true',
description: 'Whether to resize the drawer proportionally on window resize.',
},
{
name: 'size',
type: 'number',
default: '0.3',
description: `Width/height of drawer depending on drawer position i.e. [left, right] or [top, bottom] .
If autoResize is true, size is a fraction of window width/height; otherwise, size is in pixels.`,
},
{
name: 'header',
type: 'node',
default: '',
description: 'Header for the drawer. If no header is provided, the drawer will not render with a header section.',
},
{
name: 'footer',
type: 'node',
default: '',
description: `Footer for the drawer. Any buttons with actions should go here.
If no footer is provided, the drawer will not render with a footer section.`,
},
{
name: 'children',
type: 'node',
default: '',
description: "Body of the drawer. By default, this area will be vertically scrollable if it doesn't fit on the page.",
},
{
name: 'closeOnClickOutside',
type: 'boolean',
default: 'false',
description: 'Controls whether or not the drawer should close when a click occurs outside of the component.',
},
{
name: 'onRequestHide',
type: 'function',
default: '',
description: 'Function to be called when the drawer wants to close.',
},
{
name: 'headerStyle',
type: 'object',
default: '',
description: 'Inline styles to be applied to the drawer header div.',
},
{
name: 'footerStyle',
type: 'object',
default: '',
description: 'Inline styles to be applied to the drawer footer div.',
},
{
name: 'bodyStyle',
type: 'object',
default: '',
description: 'Inline styles to be applied to the drawer body div.',
},
{
name: 'style',
type: 'object',
default: '',
description: 'Inline styles to be applied to the root drawer div.',
},
{
name: 'className',
type: 'string',
default: '',
description: 'Additional class names to be applied to the drawer.',
},
{
name: 'zIndex',
type: 'number',
default: '1040',
description: 'z-index value to be be used for Drawer wrapper',
},
];
return (React.createElement(ComponentDoc, { name: "Drawer", propInfos: propInfos },
React.createElement(DrawerDemo, null),
React.createElement(CodeExample, { code: DrawerCode })));
};
export default DrawerDocs;
//# sourceMappingURL=index.js.map