@spothero/ui 16.0.0-beta.0 → 16.0.1

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

@@ -1,278 +0,0 @@
-import React, {useState} from 'react';
-import PropTypes from 'prop-types';
-import {Box, useBreakpointValue} 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 'components/Button/Button';
-import Text from 'components/Text/Text';
-import Heading from 'components/Heading/Heading';
-import Accordion, {
-    AccordionIcon,
-    AccordionItem,
-    AccordionPanel,
-    AccordionButton,
-} from '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);
-    const isMobile = useBreakpointValue({base: true, tablet: 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>
-                    </>
-                }
-                isMobile={isMobile}
-                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);
-    const isMobile = useBreakpointValue({base: true, tablet: 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} isMobile={isMobile} 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 isMobile = useBreakpointValue({base: true, tablet: false});
-
-    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>
-                    </>
-                }
-                isMobile={isMobile}
-                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/components/Modal/index.js

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

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

@@ -1,24 +0,0 @@
-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',
-        display: 'flex',
-        ...scrollingHeaderStyles,
-    };
-};

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

@@ -1,17 +0,0 @@
-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/components/Modal/styles/dialog.js

@@ -1,10 +0,0 @@
-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/components/Modal/styles/dialogContainer.js

@@ -1,10 +0,0 @@
-export default {
-    display: 'flex',
-    zIndex: 'layer8',
-    justifyContent: 'center',
-    alignItems: {base: 'flex-end', tablet: 'center'},
-    height: '100%',
-    minHeight: '-moz-available',
-    minHeight: '-webkit-fill-available',
-    minHeight: 'fill-available',
-};

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

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

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

@@ -1,7 +0,0 @@
-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/components/Modal/styles/index.js

@@ -1,47 +0,0 @@
-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', '32%', '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/components/Modal/styles/overlay.js

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

package/styles/components/Popover/Popover.jsx

@@ -1,28 +0,0 @@
-import React, {forwardRef, cloneElement, Children} from 'react';
-import {Popover as ChakraPopover} from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-
-const Popover = forwardRef((props, ref) => {
-    const {children, ...rest} = props;
-
-    return (
-        <ChakraPopover {...rest} ref={ref}>
-            {Children.toArray(children).map((child, index) =>
-                cloneElement(child, {
-                    ref,
-                    variant: props.variant,
-                    key: `Popover-child-${index}`,
-                })
-            )}
-        </ChakraPopover>
-    );
-});
-
-Popover.propTypes = {
-    /** React children */
-    children: PropTypes.node,
-    /** Styles the Popover */
-    variant: PropTypes.oneOf(['light', 'dark']),
-};
-
-export default Popover;

package/styles/components/Popover/Popover.stories.js

@@ -1,113 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import disableArgs from 'storybook/utils/disable-args';
-import {createSelectControl} from 'storybook/utils/create-control';
-
-import {Popover, PopoverContent, PopoverTrigger} from './index';
-
-import {Flex} from '@chakra-ui/react';
-import Button from 'components/Button/Button';
-
-export default {
-    title: 'v2/Popover',
-    component: Popover,
-    subcomponents: {
-        PopoverContent,
-        PopoverTrigger,
-    },
-    parameters: {
-        importBy: 'Popover',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/overlay/popover',
-    },
-    argTypes: {
-        ...disableArgs('children'),
-    },
-};
-
-const OverviewTemplate = props => (
-    <Popover defaultIsOpen {...props}>
-        <Flex justifyContent="center" alignItems="center">
-            <PopoverTrigger>
-                <Button>Trigger</Button>
-            </PopoverTrigger>
-        </Flex>
-
-        <PopoverContent header="Confirmation!">
-            Are you sure you want to have that milkshake?
-        </PopoverContent>
-    </Popover>
-);
-
-OverviewTemplate.propTypes = {
-    variant: PropTypes.oneOf(['light', 'dark']),
-};
-
-export const Variant = OverviewTemplate.bind({});
-Variant.argTypes = {
-    ...createSelectControl('variant', ['light', 'dark']),
-};
-Variant.args = {
-    variant: 'light',
-};
-
-export const Placement = OverviewTemplate.bind({});
-Placement.argTypes = {
-    ...createSelectControl('placement', [
-        'top',
-        'right',
-        'bottom',
-        'left',
-        'auto',
-        'auto-start',
-        'auto-end',
-        'top-start',
-        'top-end',
-        'bottom-start',
-        'bottom-end',
-        'right-start',
-        'right-end',
-        'left-start',
-        'left-end',
-    ]),
-
-    ...disableArgs('variant'),
-};
-Placement.args = {
-    placement: 'bottom',
-};
-const NoHeaderTemplate = props => (
-    <Popover defaultIsOpen {...props}>
-        <PopoverTrigger>
-            <Button>Trigger</Button>
-        </PopoverTrigger>
-
-        <PopoverContent>
-            Are you sure you want to have that milkshake?
-        </PopoverContent>
-    </Popover>
-);
-
-export const NoHeader = NoHeaderTemplate.bind({});
-
-NoHeader.argTypes = {
-    ...disableArgs(['variant', 'placement']),
-};
-
-const NoCloseButtonTemplate = props => (
-    <Popover defaultIsOpen {...props}>
-        <PopoverTrigger>
-            <Button>Trigger</Button>
-        </PopoverTrigger>
-
-        <PopoverContent hideCloseButton header="Confirmation!">
-            Are you sure you want to have that milkshake?
-        </PopoverContent>
-    </Popover>
-);
-
-export const NoCloseButton = NoCloseButtonTemplate.bind({});
-NoCloseButton.argTypes = {
-    ...disableArgs(['variant', 'placement']),
-};

package/styles/components/Popover/PopoverArrow.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {PopoverArrow as ChakraPopoverArrow} from '@chakra-ui/react';
-
-import styles from './styles/popover-arrow';
-
-const PopoverArrow = forwardRef((props, ref) => {
-    return <ChakraPopoverArrow ref={ref} {...props} {...styles(props)} />;
-});
-
-export default PopoverArrow;

package/styles/components/Popover/PopoverCloseButton.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {PopoverCloseButton as ChakraPopoverCloseButton} from '@chakra-ui/react';
-
-import styles from './styles/popover-close-button';
-
-const PopoverCloseButton = forwardRef((props, ref) => {
-    return <ChakraPopoverCloseButton ref={ref} {...props} {...styles(props)} />;
-});
-
-export default PopoverCloseButton;

package/styles/components/Popover/PopoverContent.jsx

@@ -1,41 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {
-    PopoverBody,
-    PopoverHeader,
-    PopoverContent as ChakraPopoverContent,
-} from '@chakra-ui/react';
-
-import PopoverArrow from './PopoverArrow';
-import PopoverCloseButton from './PopoverCloseButton';
-
-const PopoverContent = forwardRef((props, ref) => {
-    const {header, variant, children, hideCloseButton, ...rest} = props;
-
-    return (
-        <ChakraPopoverContent {...rest} ref={ref}>
-            <PopoverArrow variant={variant} />
-            {hideCloseButton ? null : <PopoverCloseButton variant={variant} />}
-            {header ? <PopoverHeader>{header}</PopoverHeader> : null}
-            <PopoverBody>{children}</PopoverBody>
-        </ChakraPopoverContent>
-    );
-});
-
-PopoverContent.propTypes = {
-    /** React children */
-    children: PropTypes.node,
-    /** Whether or not to hide the close button */
-    hideCloseButton: PropTypes.bool,
-    /** Styles the Popover */
-    variant: PropTypes.oneOf(['light', 'dark']),
-    /** The string or node for the header (optional) */
-    header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-};
-
-PopoverContent.defaultProps = {
-    variant: 'light',
-    hideCloseButton: false,
-};
-
-export default PopoverContent;

package/styles/components/Popover/index.js

@@ -1,3 +0,0 @@
-export {PopoverTrigger, PopoverAnchor} from '@chakra-ui/react';
-export {default as Popover} from './Popover';
-export {default as PopoverContent} from './PopoverContent';

package/styles/components/Popover/styles/index.js

@@ -1,21 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-import popper from './popper';
-import body from './popover-body';
-import header from './popover-header';
-import content from './popover-content';
-
-const parts = ['popper', 'content', 'header', 'body'];
-
-const baseStyle = props => ({
-    header,
-    content: content(props),
-    body: body(props),
-    popper,
-});
-
-export default merge(chakraDefaultTheme.components.Popover, {
-    parts,
-    baseStyle,
-});

package/styles/components/Popover/styles/popover-arrow.js

@@ -1,5 +0,0 @@
-const arrowStyles = ({variant}) => ({
-    backgroundColor: variant === 'dark' ? 'secondary.default' : 'white',
-});
-
-export default arrowStyles;

package/styles/components/Popover/styles/popover-body.js

@@ -1,5 +0,0 @@
-const body = props => ({
-    fontSize: 'sm',
-});
-
-export default body;