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

A UI component library from Xandr.

import _ from 'lodash';
import React, { useState } from 'react';
import Overlay from './Overlay';
import Button from '../Button/Button';
export default {
    title: 'Utility/Overlay',
    component: Overlay,
    parameters: {
        docs: {
            description: {
                component: Overlay.peek.description,
            },
        },
    },
};
/* BASIC */
export const Basic = (args) => {
    const [isShown, setIsShown] = useState(false);
    const handleOpenClose = (isShown) => {
        setIsShown(isShown);
    };
    return (React.createElement("div", null,
        React.createElement(Button, { onClick: _.partial(handleOpenClose, !isShown) }, "Toggle"),
        React.createElement(Overlay, { ...args, isShown: isShown, onEscape: _.partial(handleOpenClose, false), onBackgroundClick: _.partial(handleOpenClose, false) },
            React.createElement("div", { style: { color: '#fff' } }, "User cannot interact with the background (except scrolling)."))));
};
/* No Modal */
export const NoModal = (args) => {
    const [isShown, setIsShown] = useState(false);
    const handleOpenClose = (isShown) => {
        setIsShown(isShown);
    };
    return (React.createElement("div", null,
        React.createElement(Button, { onClick: _.partial(handleOpenClose, !isShown) }, "Toggle"),
        React.createElement(Overlay, { ...args, isShown: isShown, isModal: false, onEscape: _.partial(handleOpenClose, false) },
            React.createElement("div", { style: {
                    backgroundColor: '#eee',
                    padding: '100px',
                } },
                "User can still interact with the background.",
                React.createElement(Button, { onClick: _.partial(handleOpenClose, false), style: { marginLeft: '10px' } }, "Close")))));
};
//# sourceMappingURL=Overlay.stories.js.map