@spothero/ui 14.8.3 → 14.8.5-beta.0

package/styles/v1/components/Modal/stories/Methods.stories.js

@@ -0,0 +1,44 @@
+import React, {useState, useRef} from 'react';
+import Button from 'v1/components/Button/Button';
+import Modal from '../Modal';
+import ModalContent from '../ModalContent';
+
+export default {
+    component: Modal,
+    title: 'v1/Modal/Methods',
+};
+
+export const OnHide = () => {
+    const [isOpen, setOpen] = useState(false);
+    const modal = useRef();
+
+    const onToggle = () => {
+        setOpen(prevIsOpen => !prevIsOpen);
+    };
+
+    const onHideClick = () => {
+        modal.current.hide();
+    };
+
+    return (
+        <div className="ModalHide">
+            <Button color="primary" onClick={onToggle}>
+                Open Modal
+            </Button>
+            {isOpen && (
+                <Modal ref={modal} title="Modal Title" onHidden={onToggle}>
+                    <ModalContent>
+                        <p>This is the modal content.</p>
+                        <Button
+                            className="ModalContent-hide"
+                            color="primary"
+                            onClick={onHideClick}
+                        >
+                            Hide Modal
+                        </Button>
+                    </ModalContent>
+                </Modal>
+            )}
+        </div>
+    );
+};

package/styles/v1/components/Modal/stories/Width.stories.js

@@ -0,0 +1,82 @@
+import React, {useState} from 'react';
+import Button from 'v1/components/Button/Button';
+import Modal from '../Modal';
+import ModalContent from '../ModalContent';
+
+export default {
+    component: Modal,
+    title: 'v1/Modal/Width',
+};
+
+export const PercentageWidth = () => {
+    const [isOpen, setOpen] = useState(false);
+
+    const onToggle = () => {
+        setOpen(prevIsOpen => !prevIsOpen);
+    };
+
+    return (
+        <div className="ModalPercentage">
+            <Button color="primary" onClick={onToggle}>
+                Open Modal with Percentage Width
+            </Button>
+            {isOpen && (
+                <Modal title="Modal Title" width="75%" onHidden={onToggle}>
+                    <ModalContent>
+                        <p>This is has 75% width.</p>
+                    </ModalContent>
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+export const PixelWidth = () => {
+    const [isOpen, setOpen] = useState(false);
+
+    const onToggle = () => {
+        setOpen(prevIsOpen => !prevIsOpen);
+    };
+
+    return (
+        <div className="ModalPixels">
+            <Button color="primary" onClick={onToggle}>
+                Open Modal with Pixel Width
+            </Button>
+            {isOpen && (
+                <Modal title="Modal Title" width={300} onHidden={onToggle}>
+                    <ModalContent>
+                        <p>This is has 300px width.</p>
+                    </ModalContent>
+                </Modal>
+            )}
+        </div>
+    );
+};
+
+export const SizeWidth = () => {
+    const [isOpen, setOpen] = useState(false);
+
+    const onToggle = () => {
+        setOpen(prevIsOpen => !prevIsOpen);
+    };
+
+    return (
+        <div className="ModalSize">
+            <Button color="primary" onClick={onToggle}>
+                Open Modal with Size Width
+            </Button>
+            {isOpen && (
+                <Modal
+                    title="Modal Title"
+                    width="extra-wide"
+                    onHidden={onToggle}
+                >
+                    <ModalContent>
+                        <p>This is has width set to extra-wide.</p>
+                    </ModalContent>
+                </Modal>
+            )}
+        </div>
+    );
+};

package/styles/v1/components/Modal/stories/helpers/ReduxConsumer.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+
+const ReduxConsumer = ({items}) => {
+    return <div className="ModalReduxConsumer">{items}</div>;
+};
+
+ReduxConsumer.propTypes = {
+    items: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => {
+    const {items} = state;
+
+    return {
+        items,
+    };
+};
+
+export default connect(mapStateToProps)(ReduxConsumer);

package/styles/v1/components/index.js

@@ -4,3 +4,4 @@ export {default as Table} from './Table/Table';
 export {default as TextButton} from './TextButton/TextButton';
 export {default as Image} from './Image/Image';
 export {default as Loader} from './Loader/Loader';
+export {Modal, ModalContent, ModalFooter} from './Modal';

package/styles/v2/components/Modal/Modal.jsx

@@ -0,0 +1,69 @@
+import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
+import {
+    Modal as ChakraModal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    useBreakpointValue,
+    Box,
+} from '@chakra-ui/react';
+import headerStyles from './styles/header';
+
+/**
+ * @param {boolean} isOpen - Whether or not the Modal is open
+ * @param {React.ReactNode} children - The header text of the modal
+ * @param {()=>void} [onClose] - Callback invoked to close the Modal. Not required, but strongly suggested.
+ * @param {('sm'|'md'|'lg')} [size] - The size of the modal. If unspecified, uses "md" styles.
+ * @param {React.ReactNode} [header] - The node for the header. Likely just a string.
+ * @param {React.ReactNode} [footer] - The node for the footer. Likely some  control buttons.
+ * @param {React.ReactNode} [hideCloseButton] - Whether or not to show the close button
+ * @returns {React.ReactElement} - The Modal component
+ */
+const Modal = forwardRef((props, ref) => {
+    const {header, footer, children, hideCloseButton} = props;
+    const isMobile = useBreakpointValue({base: true, tablet: false});
+
+    return (
+        <ChakraModal
+            motionPreset={isMobile ? 'slideInBottom' : 'scale'}
+            {...props}
+            ref={ref}
+        >
+            <ModalOverlay />
+            <ModalContent>
+                {header ? (
+                    <ModalHeader>{header}</ModalHeader>
+                ) : (
+                    <Box {...headerStyles(props)} />
+                )}
+                {hideCloseButton ? null : <ModalCloseButton />}
+                <ModalBody>{children}</ModalBody>
+
+                {footer ? <ModalFooter>{footer}</ModalFooter> : null}
+            </ModalContent>
+        </ChakraModal>
+    );
+});
+
+export default Modal;
+
+Modal.propTypes = {
+    /** Whether or not the Modal is open */
+    isOpen: PropTypes.bool.isRequired,
+    /** React children. Body of the Modal. */
+    children: PropTypes.node.isRequired,
+    /** Callback invoked to close the Modal. Not required, but strongly suggested. */
+    onClose: PropTypes.func,
+    /** The size of the modal. If unspecified, uses md styles. */
+    size: PropTypes.oneOf(['sm', 'md', 'lg']),
+    /** The node for the header. Likely just a string (optional) */
+    header: PropTypes.node,
+    /** The node for the footer. Likely some control buttons (optional) */
+    footer: PropTypes.node,
+    /** Whether or not to show the close button (optional) */
+    hideCloseButton: PropTypes.bool,
+};

package/styles/v2/components/Modal/Modal.stories.js

@@ -0,0 +1,273 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {Box} from '@chakra-ui/react';
+import disableArgs from 'storybook/utils/disable-args';
+import {createSelectControl} from 'storybook/utils/create-control';
+
+import {Modal} from './index';
+import Button from 'v2/components/Button/Button';
+import Text from 'v2/components/Text/Text';
+import Heading from 'v2/components/Heading/Heading';
+import Accordion, {
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    AccordionButton,
+} from 'v2/components/Accordion';
+
+export default {
+    title: 'v2/Modal',
+    component: Modal,
+    parameters: {
+        importBy: 'Modal',
+        removeBaseHtmlClass: true,
+        chakraLink: 'https://chakra-ui.com/docs/overlay/Modal',
+    },
+    argTypes: {
+        ...createSelectControl('size', ['sm', 'md', 'lg']),
+        ...disableArgs(['isOpen', 'onClose', 'footer']),
+        hideCloseButton: {
+            control: {
+                type: 'boolean',
+            },
+        },
+        header: {
+            control: {type: 'text'},
+        },
+        children: {
+            control: {type: 'text'},
+        },
+    },
+    args: {
+        size: 'md',
+    },
+};
+
+export const Transactional = props => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Box>
+            <Text marginBottom={2}>
+                A &quot;Transactional&quot; modal just refers to one with a{' '}
+                <code>footer</code> prop.
+            </Text>
+            <Button onClick={() => setOpen(true)}>Open Modal</Button>
+
+            <Modal
+                {...props}
+                footer={
+                    <>
+                        <Button
+                            onClick={() => setOpen(false)}
+                            variant="secondary"
+                            marginRight={4}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={() => setOpen(false)}
+                            variant="primary"
+                        >
+                            Submit
+                        </Button>
+                    </>
+                }
+                isOpen={open}
+                onClose={() => setOpen(false)}
+            >
+                {props.children}
+            </Modal>
+        </Box>
+    );
+};
+
+Transactional.propTypes = {
+    children: PropTypes.string,
+};
+
+Transactional.args = {
+    header: 'Transactional',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.',
+};
+
+export const Passive = props => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Box>
+            <Text marginBottom={2}>
+                A &quot;Passive&quot; modal just refers to one with no{' '}
+                <code>footer</code> prop.
+            </Text>
+            <Button onClick={() => setOpen(true)}>Open Modal</Button>
+
+            <Modal {...props} isOpen={open} onClose={() => setOpen(false)}>
+                {props.children}
+            </Modal>
+        </Box>
+    );
+};
+
+Passive.propTypes = {
+    children: PropTypes.string,
+};
+
+Passive.args = {
+    header: 'Passive',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt lectus et mauris viverra, nec tincidunt arcu rhoncus. Duis pellentesque vestibulum orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero. orci ut mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis vel malesuada ligula. Cras dapibus enim sem. Suspendisse potenti. Mauris tempus non tortor eu placerat. Pellentesque faucibus dui vitae purus iaculis, ac convallis turpis gravida. Ut ac massa pretium, finibus quam vitae, aliquet libero.',
+};
+
+export const TransactionalWithExpandingContent = props => {
+    const [open, setOpen] = useState(false);
+    const accordionRefs = [React.createRef(), React.createRef()];
+
+    const handleAccordionChange = index => {
+        if (accordionRefs[index]) {
+            // Timeout so that scroll doesn't happen until accordion animation complete
+            setTimeout(() => {
+                accordionRefs[index].current.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start',
+                });
+            }, 150);
+        }
+    };
+
+    return (
+        <Box>
+            <Text marginBottom={2}>
+                When content inside a modal dynamically expands, the modal
+                should scroll to that new content.
+            </Text>
+            <Text marginBottom={2}>
+                However, this is something we&apos;ll need to implement on a
+                case by case basis when it applies.
+            </Text>
+            <Text marginBottom={2}>
+                Feel free to check the code of this demo to see an example of
+                how we might do that.
+            </Text>
+            <Button onClick={() => setOpen(true)}>Open Modal</Button>
+
+            <Modal
+                {...props}
+                header="Transactional with Expanding Content"
+                footer={
+                    <>
+                        <Button
+                            onClick={() => setOpen(false)}
+                            variant="secondary"
+                            marginRight={4}
+                        >
+                            Cancel
+                        </Button>
+                        <Button variant="primary">Submit</Button>
+                    </>
+                }
+                isOpen={open}
+                onClose={() => setOpen(false)}
+            >
+                <Box>
+                    <Text marginBottom={2}>
+                        Try opening an Accordion when it is at the very bottom
+                        of the modal.
+                    </Text>
+                    <Text marginBottom={2}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Praesent tincidunt lectus et mauris viverra, nec
+                        tincidunt arcu rhoncus. Duis pellentesque vestibulum
+                        orci ut mattis. Class aptent taciti sociosqu ad litora
+                        torquent per conubia nostra, per inceptos himenaeos.
+                        Duis vel malesuada ligula. Cras dapibus enim sem.
+                        Suspendisse potenti. Mauris tempus non tortor eu
+                        placerat. Pellentesque faucibus dui vitae purus iaculis,
+                        ac convallis turpis gravida. Ut ac massa pretium,
+                        finibus quam vitae, aliquet libero. orci ut mattis.
+                        Class aptent taciti sociosqu ad litora torquent per
+                        conubia nostra, per inceptos himenaeos. Duis vel
+                        malesuada ligula. Cras dapibus enim sem. Suspendisse
+                        potenti. Mauris tempus non tortor eu placerat.
+                        Pellentesque faucibus dui vitae purus iaculis, ac
+                        convallis turpis gravida. Ut ac massa pretium, finibus
+                        quam vitae, aliquet libero.
+                    </Text>
+                    <Accordion onChange={handleAccordionChange} allowToggle>
+                        <AccordionItem ref={accordionRefs[0]}>
+                            <Heading as="h3">
+                                <AccordionButton>
+                                    <Box flex="1" textAlign="left">
+                                        Accordion 1
+                                    </Box>
+                                    <AccordionIcon />
+                                </AccordionButton>
+                            </Heading>
+                            <AccordionPanel>
+                                <Text>
+                                    Lorem ipsum dolor sit amet, consectetur
+                                    adipiscing elit. Praesent tincidunt lectus
+                                    et mauris viverra, nec tincidunt arcu
+                                    rhoncus. Duis pellentesque vestibulum orci
+                                    ut mattis. Class aptent taciti sociosqu ad
+                                    litora torquent per conubia nostra, per
+                                    inceptos himenaeos. Duis vel malesuada
+                                    ligula. Cras dapibus enim sem. Suspendisse
+                                    potenti. Mauris tempus non tortor eu
+                                    placerat. Pellentesque faucibus dui vitae
+                                    purus iaculis, ac convallis turpis gravida.
+                                    Ut ac massa pretium, finibus quam vitae,
+                                    aliquet libero. Aliquam et urna condimentum,
+                                    sagittis nisl hendrerit, elementum velit.
+                                    Nullam quis nisl dictum, suscipit ligula
+                                    nec, elementum libero. Nullam eu lorem
+                                    convallis, dictum nisl in, condimentum dui.
+                                    Lorem ipsum dolor sit amet, consectetur
+                                    adipiscing elit. Viva
+                                </Text>
+                            </AccordionPanel>
+                        </AccordionItem>
+                        <AccordionItem ref={accordionRefs[1]}>
+                            <Heading as="h3">
+                                <AccordionButton>
+                                    <Box flex="1" textAlign="left">
+                                        Accordion 2
+                                    </Box>
+                                    <AccordionIcon />
+                                </AccordionButton>
+                            </Heading>
+                            <AccordionPanel>
+                                <Text>
+                                    Lorem ipsum dolor sit amet, consectetur
+                                    adipiscing elit. Praesent tincidunt lectus
+                                    et mauris viverra, nec tincidunt arcu
+                                    rhoncus. Duis pellentesque vestibulum orci
+                                    ut mattis. Class aptent taciti sociosqu ad
+                                    litora torquent per conubia nostra, per
+                                    inceptos himenaeos. Duis vel malesuada
+                                    ligula. Cras dapibus enim sem. Suspendisse
+                                    potenti. Mauris tempus non tortor eu
+                                    placerat. Pellentesque faucibus dui vitae
+                                    purus iaculis, ac convallis turpis gravida.
+                                    Ut ac massa pretium, finibus quam vitae,
+                                    aliquet libero. Aliquam et urna condimentum,
+                                    sagittis nisl hendrerit, elementum velit.
+                                    Nullam quis nisl dictum, suscipit ligula
+                                    nec, elementum libero. Nullam eu lorem
+                                    convallis, dictum nisl in, condimentum dui.
+                                    Lorem ipsum dolor sit amet, consectetur
+                                    adipiscing elit. Viva
+                                </Text>
+                            </AccordionPanel>
+                        </AccordionItem>
+                    </Accordion>
+                </Box>
+            </Modal>
+        </Box>
+    );
+};
+
+TransactionalWithExpandingContent.argTypes = {
+    ...disableArgs(['children', 'header']),
+};

package/styles/v2/components/Modal/index.js

@@ -0,0 +1 @@
+export {default as Modal} from './Modal';

package/styles/v2/components/Modal/styles/body.js

@@ -0,0 +1,23 @@
+export default ({footer, header, hideCloseButton}) => {
+    const scrollingHeaderStyles =
+        header || !hideCloseButton
+            ? {
+                  // The following adapted from https://lea.verou.me/2012/04/background-attachment-local/
+                  background:
+                      'linear-gradient(white 30%, white), linear-gradient(rgb(0 0 0 / 10%) 0%, white)',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundColor: 'white',
+                  backgroundSize: '100% 30px, 100% 10px',
+                  backgroundAttachment: 'local, scroll',
+              }
+            : {};
+
+    return {
+        borderBottomRadius: footer ? null : 'md',
+        paddingX: 4,
+        paddingBottom: 4,
+        flex: 1,
+        overflow: 'auto',
+        ...scrollingHeaderStyles,
+    };
+};

package/styles/v2/components/Modal/styles/closeButton.js

@@ -0,0 +1,17 @@
+export default ({header}) => ({
+    position: 'absolute',
+    top: header ? 4 : 2,
+    insetEnd: header ? 4 : 2,
+    color: 'gray.dark',
+    borderRadius: 'sm',
+    width: 8,
+    height: 8,
+
+    _focus: {
+        boxShadow: 'outline',
+    },
+
+    _hover: {
+        bg: 'gray.50',
+    },
+});

package/styles/v2/components/Modal/styles/dialog.js

@@ -0,0 +1,10 @@
+export default ({footer}) => ({
+    borderRadius: 'md',
+    borderBottomRadius: {base: '0', tablet: 'md'},
+    background: 'white',
+    color: 'inherit',
+    marginY: 0,
+    zIndex: 'layer8',
+    boxShadow: 'lg',
+    paddingBottom: footer ? 0 : 4,
+});

package/styles/v2/components/Modal/styles/dialogContainer.js

@@ -0,0 +1,7 @@
+export default {
+    display: 'flex',
+    zIndex: 'layer8',
+    justifyContent: 'center',
+    alignItems: {base: 'flex-end', tablet: 'center'},
+    overflow: 'hidden',
+};

package/styles/v2/components/Modal/styles/footer.js

@@ -0,0 +1,5 @@
+export default {
+    borderTop: '1px',
+    borderColor: 'gray.100',
+    padding: 4,
+};

package/styles/v2/components/Modal/styles/header.js

@@ -0,0 +1,7 @@
+export default ({hideCloseButton, header}) => ({
+    padding: !hideCloseButton || header ? 4 : 2,
+    fontSize: 'xl',
+    fontWeight: 'semibold',
+    // If just close button, still have 'header' section at top
+    minHeight: header || hideCloseButton ? null : 12,
+});

package/styles/v2/components/Modal/styles/index.js

@@ -0,0 +1,47 @@
+import merge from 'lodash/merge';
+import chakraDefaultTheme from '@chakra-ui/theme';
+
+import overlay from './overlay';
+import dialogContainer from './dialogContainer';
+import dialog from './dialog';
+import header from './header';
+import closeButton from './closeButton';
+import body from './body';
+import footer from './footer';
+
+const baseStyle = props => ({
+    overlay,
+    dialogContainer,
+    dialog: dialog(props),
+    header: header(props),
+    closeButton: closeButton(props),
+    body: body(props),
+    footer,
+});
+
+const sizes = {
+    sm: {
+        dialog: {
+            // Would have preferred object syntax here and below, but wasn't working for whatever reason
+            maxWidth: ['100%', '100%', '48%', '32%', '24%'],
+            maxHeight: ['100%', '100%', '60%', '48%', '32%'],
+            minHeight: ['auto', 'auto', '48%', '32%', '24%'],
+        },
+    },
+    md: {
+        dialog: {
+            maxWidth: ['100%', '100%', '84%', '60%', '48%'],
+            maxHeight: ['100%', '100%', '96%', '84%', '60%'],
+            minHeight: ['auto', 'auto', '84%', '60%', '48%'],
+        },
+    },
+    lg: {
+        dialog: {
+            maxWidth: ['100%', '100%', '96%', '84%', '72%'],
+            maxHeight: ['100%', '100%', '96%', '96%', '84%'],
+            minHeight: ['auto', 'auto', '96%', '84%', '72%'],
+        },
+    },
+};
+
+export default merge(chakraDefaultTheme.components.Modal, {baseStyle, sizes});

package/styles/v2/components/Modal/styles/overlay.js

@@ -0,0 +1,4 @@
+export default {
+    background: 'rgba(0, 45, 91, 0.3)', // secondary.default at 30%
+    zIndex: 'layer8',
+};

package/styles/v2/components/index.js

@@ -24,6 +24,7 @@ export {default as Loader} from './Loader/Loader';
 export {default as Checkbox} from './Checkbox';
 export {default as Input} from './Input';
 export {Popover, PopoverTrigger, PopoverContent} from './Popover';
+export {Modal} from './Modal';
 
 // generic chakra reexports
 export {

package/styles/v2/components/styles.js

@@ -12,3 +12,4 @@ export {default as Select} from './Select/styles';
 export {default as Checkbox} from './Checkbox/styles';
 export {default as Popover} from './Popover/styles';
 export {default as Input} from './Input/styles';
+export {default as Modal} from './Modal/styles';