@wix/design-system/dist/esm/FullScreenModalLayout/FullScreenModalLayout.story.js

@wix/design-system

import React from 'react';
import Modal from '../Modal';
import Button from '../Button';
import Text from '../Text';
import FullScreenModalLayout from './FullScreenModalLayout';
import { CloseButton, TextButton } from '..';
const meta = {
    component: FullScreenModalLayout,
};
export default meta;
const ModalWithButton = ({ isOpen: isOpenProp = false, children, }) => {
    const [isOpen, setIsOpen] = React.useState(isOpenProp);
    const close = React.useCallback(() => setIsOpen(false), []);
    return (React.createElement(React.Fragment, null,
        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal"),
        React.createElement(Modal, { isOpen: isOpen, onRequestClose: close }, children({ isOpen, close }))));
};
export const Basic = {
    render: () => {
        return (React.createElement(ModalWithButton, null, ({ close }) => (React.createElement(FullScreenModalLayout, null,
            React.createElement(FullScreenModalLayout.Header, { startNode: React.createElement(CloseButton, { skin: "dark", size: "large", onClick: close }), endNode: React.createElement(TextButton, { size: "small", onClick: close }, "Save") },
                React.createElement(Text, { size: "small", weight: "normal", ellipsis: true }, "Modal Title")),
            React.createElement(FullScreenModalLayout.Content, { padding: true },
                React.createElement(Text, null, "This is the main content area with padding.")),
            React.createElement(FullScreenModalLayout.Footer, null,
                React.createElement(Text, null, "Footer"))))));
    },
};
//# sourceMappingURL=FullScreenModalLayout.story.js.map