lucid-ui/dist/esm/components/Dialog/Dialog.stories.js

A UI component library from Xandr.

import _ from 'lodash';
import React, { useState } from 'react';
import createClass from 'create-react-class';
import { Dialog } from './Dialog';
import Button from '../Button/Button';
import SearchableMultiSelect from '../SearchableMultiSelect/SearchableMultiSelect';
import SingleSelect from '../SingleSelect/SingleSelect';
import CheckboxLabeled from '../CheckboxLabeled/CheckboxLabeled';
import SearchField from '../SearchField/SearchField';
export default {
    title: 'Layout/Dialog',
    component: Dialog,
    parameters: {
        docs: {
            description: {
                component: Dialog.peek.description,
            },
        },
        layout: 'centered',
    },
    args: Dialog.defaultProps,
    decorators: [
        (Story) => (React.createElement("div", { style: { margin: '3em' } },
            React.createElement(Story, null))),
    ],
};
export const Basic = (args) => {
    const [isShown, setIsShown] = useState(false);
    const handleShow = (isShown) => {
        setIsShown(isShown);
    };
    return (React.createElement("div", null,
        React.createElement(Button, { size: 'large', onClick: _.partial(handleShow, !isShown) }, "Toggle"),
        React.createElement(Dialog, { ...args, isShown: isShown, handleClose: _.partial(handleShow, !isShown), Header: 'Header' },
            React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
            _.times(10).map((i) => {
                return React.createElement("div", { key: i }, "Body");
            }),
            React.createElement(Dialog.Footer, null,
                React.createElement(Button, { kind: 'invisible', onClick: _.partial(handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                React.createElement(Button, { kind: 'primary' }, "Save")))));
};
Basic.decorators = [(Story) => React.createElement("div", { style: { margin: '3em' } }, Story())];
export const Small = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), Header: 'Header' },
                    React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
                    _.times(10).map((i) => {
                        return React.createElement("div", { key: i }, "Body");
                    }),
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
/* Medium */
export const Medium = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), Header: 'Header', size: 'medium' },
                    React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
                    _.times(50).map((i) => {
                        return React.createElement("div", { key: i }, "Body");
                    }),
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
/* Large With Rich Header */
export const LargeWithRichHeader = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), size: 'large' },
                    React.createElement(Dialog.Header, null,
                        React.createElement("i", null, "Rich Header")),
                    React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
                    _.times(50).map((i) => {
                        return React.createElement("div", { key: i }, "Body");
                    }),
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
/* Complex */
export const Complex = () => {
    const style = {
        marginBottom: '3px',
    };
    const { Option } = SearchableMultiSelect;
    const { Placeholder, Option: SingleOption } = SingleSelect;
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
                flavors: ['chocolate'],
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        handleSelectedChocolate(isSelected) {
            this.setState({
                flavors: isSelected
                    ? _.concat(this.state.flavors, 'chocolate')
                    : _.without(this.state.flavors, 'chocolate'),
            });
        },
        handleSelectedStrawberry(isSelected) {
            this.setState({
                flavors: isSelected
                    ? _.concat(this.state.flavors, 'strawberry')
                    : _.without(this.state.flavors, 'strawberry'),
            });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isComplex: true, isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), Header: 'Advanced Filters', size: 'medium' },
                    React.createElement("p", { style: { fontSize: '16px' } }, "Flavor"),
                    React.createElement(CheckboxLabeled, { isSelected: _.includes(this.state.flavors, 'chocolate'), name: 'interactive-checkboxes', onSelect: this.handleSelectedChocolate, style: style },
                        React.createElement(CheckboxLabeled.Label, null, "Chocolate")),
                    React.createElement(CheckboxLabeled, { isSelected: _.includes(this.state.flavors, 'strawberry'), name: 'interactive-checkboxes', onSelect: this.handleSelectedStrawberry, style: style },
                        React.createElement(CheckboxLabeled.Label, null, "Strawberry")),
                    React.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Flavor Combination Research"),
                    React.createElement(SearchField, { placeholder: 'Sundae school...' }),
                    React.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Toppings"),
                    React.createElement(SearchableMultiSelect, { responsiveMode: 'large' },
                        React.createElement(Option, null, "cookie dough"),
                        React.createElement(Option, null, "more ice cream"),
                        React.createElement(Option, null, "mochi"),
                        React.createElement(Option, null, "peanut butter cups")),
                    React.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Ice Cream Breaks"),
                    React.createElement(SingleSelect, { onSelect: this.handleSelect },
                        React.createElement(Placeholder, null, "You must select a break..."),
                        React.createElement(SingleOption, null, "10am"),
                        React.createElement(SingleOption, null, "11am"),
                        React.createElement(SingleOption, null, "1pm"),
                        React.createElement(SingleOption, null, "2pm")),
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
/* No Modal */
export const NoModal = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isModal: false, isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), onBackgroundClick: _.partial(this.handleShow, false), onEscape: _.partial(this.handleShow, false), Header: 'Header', size: 'small' },
                    "In most cases, you'll probably just use an isModal Dialog, but this example shows that the Dialog doesn't have to be a modal. Try pressing \"escape\" to close this Dialog.",
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
/* No Footer */
export const NoFooter = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), onBackgroundClick: _.partial(this.handleShow, false), onEscape: _.partial(this.handleShow, false), Header: 'Header', size: 'medium' }, "This `Dialog` has no footer!")));
        },
    });
    return React.createElement(Component, null);
};
/* No Gutters */
export const NoGutters = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, handleClose: _.partial(this.handleShow, !this.state.isShown), onBackgroundClick: _.partial(this.handleShow, false), onEscape: _.partial(this.handleShow, false), Header: 'Header', size: 'medium', hasGutters: false }, "This `Dialog` has no gutters!")));
        },
    });
    return React.createElement(Component, null);
};
/* No Close Button */
export const NoCloseButton = () => {
    const Component = createClass({
        getInitialState() {
            return {
                isShown: false,
            };
        },
        handleShow(isShown) {
            this.setState({ isShown });
        },
        render() {
            return (React.createElement("div", null,
                React.createElement(Button, { size: 'large', onClick: _.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
                React.createElement(Dialog, { isShown: this.state.isShown, Header: 'Header', size: 'medium' },
                    React.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
                    _.times(50).map((i) => {
                        return React.createElement("div", { key: i }, "Body");
                    }),
                    React.createElement(Dialog.Footer, null,
                        React.createElement(Button, { kind: 'invisible', onClick: _.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
                        React.createElement(Button, { kind: 'primary' }, "Save")))));
        },
    });
    return React.createElement(Component, null);
};
//# sourceMappingURL=Dialog.stories.js.map