@spothero/ui 15.10.9 → 16.0.0-beta.1

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

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {build, fake} from '@jackfranklin/test-data-bot';
-
-import Component from './List';
-
-import {ListItem} from './index';
-import Spaces from 'v2/utils/Spaces';
-import Text from 'v2/components/Text/Text';
-
-import disableArgs from 'storybook/utils/disable-args';
-
-const DISABLE_TYPE = disableArgs('type');
-
-const randomListText = build('ListText', {
-    fields: {
-        text: fake(f => f.random.words(10)),
-    },
-});
-
-const Usage = ({type}) => (
-    <Text>
-        &lt;List{type ? ` type="${type}"` : ''}&gt;
-        <br />
-        <Spaces />
-        &lt;ListItem&gt;
-        <br />
-        <Spaces spaces={6} />
-        ...
-        <br />
-        <Spaces />
-        &lt;/ListItem&gt;
-        <br />
-        <Spaces />
-        ...
-        <br />
-        &lt;/List&gt;
-    </Text>
-);
-
-Usage.propTypes = {
-    type: PropTypes.string,
-};
-
-export default {
-    title: 'v2/List',
-    component: Component,
-    subcomponents: {ListItem},
-    parameters: {
-        importBy: 'List',
-        removeBaseHtmlClass: true,
-    },
-};
-
-const OverviewTemplate = props => (
-    <Component {...props}>
-        {Array(10)
-            .fill(null)
-            .map((_, index) => (
-                <ListItem key={index}>{randomListText().text}</ListItem>
-            ))}
-    </Component>
-);
-
-export const Overview = OverviewTemplate.bind({});
-Overview.parameters = {
-    usage: [<Usage key={1} />],
-};
-export const Unordered = OverviewTemplate.bind({});
-Unordered.argTypes = DISABLE_TYPE;
-Unordered.parameters = {
-    usage: [<Usage type="unordered" key={1} />],
-};
-Unordered.args = {
-    type: 'unordered',
-};
-
-export const Ordered = OverviewTemplate.bind({});
-Ordered.argTypes = DISABLE_TYPE;
-Ordered.parameters = {
-    usage: [<Usage type="ordered" key={1} />],
-};
-Ordered.args = {
-    type: 'ordered',
-};
-export const Unstyled = OverviewTemplate.bind({});
-Unstyled.parameters = {
-    usage: [<Usage key={1} />],
-};
-Unstyled.argTypes = {
-    ...DISABLE_TYPE,
-    ...disableArgs('stylePosition'),
-};
-Unstyled.args = {
-    type: 'unstyled',
-};

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

@@ -1,2 +0,0 @@
-export {default} from './List';
-export {ListItem} from '@chakra-ui/react';

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

@@ -1,12 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-import item from './item.styles';
-
-const baseStyle = {
-    item,
-};
-
-export default merge(chakraDefaultTheme.components.List, {
-    baseStyle,
-});

package/styles/v2/components/List/styles/item.styles.js

@@ -1,5 +0,0 @@
-const item = {
-    mb: 2,
-};
-
-export default item;

package/styles/v2/components/Loader/Loader.jsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {CircularProgress as ChakraCircularProgress} from '@chakra-ui/react';
-
-const Loader = ({
-    color = 'success',
-    loaderBackgroundColor = 'transparent',
-    isInfinite = true,
-    size = 12,
-    thickness = 2,
-    trackColor = 'gray.medium',
-    value = 0,
-    ...props
-}) => {
-    /* -------------------------------------------------------------------- *\
-        Note: Since most of the props for this component control multiple
-        styles at a time, it was decided that it made the most sense to set
-        up the default style-related properties here in lou of creating an
-        overly complex styles file.
-    \* -------------------------------------------------------------------- */
-    const loaderDefaultProps = {
-        color,
-        isIndeterminate: isInfinite,
-        size,
-        thickness,
-        trackColor,
-        value,
-        capIsRound: true,
-    };
-
-    return (
-        <ChakraCircularProgress
-            sx={{
-                '& svg > circle:first-of-type': {
-                    fill: loaderBackgroundColor,
-                },
-            }}
-            {...loaderDefaultProps}
-            {...props}
-        />
-    );
-};
-
-Loader.propTypes = {
-    /**
-     * The color of the Progress bar. Use color names defined within `theme/base/colors`.
-     */
-    color: PropTypes.string,
-    /**
-     * Determines if Loader spins for an infinite amount of time. If `true` value prop will be ignored.
-     */
-    isInfinite: PropTypes.bool,
-    /**
-     * Sets the background color of the Loader (inside the circle). Use color names defined within `theme/base/colors`.
-     */
-    loaderBackgroundColor: PropTypes.string,
-    /**
-     * The size of the Loader. Used as both height and width. Number corresponds to Size token.
-     */
-    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * The thickness of the Loader. Number is used as pixel width.
-     */
-    thickness: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /**
-     * The color of the Progress bar track.  Use color names defined within `theme/base/colors`.
-     */
-    trackColor: PropTypes.string,
-    /**
-     * The number passed in corresponds to the percentage "done" of the Loader.
-     */
-    value: PropTypes.number,
-};
-
-export default Loader;

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

@@ -1,145 +0,0 @@
-import React from 'react';
-
-import disableArgs from 'storybook/utils/disable-args';
-import {createRangeControl} from 'storybook/utils/create-control';
-
-import Component from './Loader';
-
-export default {
-    title: 'v2/Loader',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        importBy: 'Loader',
-    },
-    argTypes: {
-        color: {
-            options: [
-                'primary.default',
-                'secondary.default',
-                'white',
-                'success',
-                'warning',
-                'error',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    'primary.default': 'Primary',
-                    'secondary.default': 'Secondary',
-                    white: 'White',
-                    success: 'Success',
-                    warning: 'Warning',
-                    error: 'Error',
-                },
-            },
-        },
-        isInfinite: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        loaderBackgroundColor: {
-            options: [
-                'white',
-                'gray.light',
-                'gray.medium',
-                'gray.dark',
-                'transparent',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    white: 'White',
-                    'primary.default': 'Primary',
-                    'gray.light': 'Light Gray',
-                    'gray.medium': 'Medium Gray',
-                    'gray.dark': 'Dark Gray',
-                    transparent: 'Transparent',
-                },
-            },
-        },
-        size: {
-            options: [6, 12, 28, 48],
-            control: {
-                type: 'radio',
-                labels: {
-                    6: 'Small',
-                    12: 'Medium',
-                    28: 'Large',
-                    48: 'Extra Large',
-                },
-            },
-        },
-        trackColor: {
-            options: [
-                'primary.default',
-                'gray.light',
-                'gray.medium',
-                'gray.dark',
-                'white',
-            ],
-            control: {
-                type: 'radio',
-                labels: {
-                    'primary.default': 'Primary',
-                    'gray.light': 'Light Gray',
-                    'gray.medium': 'Medium Gray',
-                    'gray.dark': 'Dark Gray',
-                    white: 'White',
-                },
-            },
-        },
-        ...createRangeControl({
-            name: 'thickness',
-            min: 2,
-            max: 16,
-            step: 2,
-        }),
-        ...createRangeControl({name: 'value', min: 1, max: 100}),
-    },
-};
-
-const Template = props => <Component {...props} />;
-
-export const Overview = Template.bind({});
-Overview.args = {
-    color: 'success',
-    isInfinite: false,
-    loaderBackgroundColor: 'transparent',
-    size: 12,
-    thickness: 2,
-    trackColor: 'gray.medium',
-    value: 35,
-};
-
-export const FiniteLoader = Template.bind({});
-FiniteLoader.argTypes = {
-    ...disableArgs([
-        'color',
-        'isInfinite',
-        'loaderBackgroundColor',
-        'size',
-        'thickness',
-        'trackColor',
-    ]),
-};
-FiniteLoader.args = {
-    isInfinite: false,
-    value: 35,
-};
-
-export const InfiniteLoader = Template.bind({});
-InfiniteLoader.argTypes = {
-    ...disableArgs([
-        'color',
-        'loaderBackgroundColor',
-        'size',
-        'thickness',
-        'trackColor',
-        'value',
-    ]),
-};
-InfiniteLoader.args = {
-    isInfinite: true,
-};

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

@@ -1,71 +0,0 @@
-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} isMobile - Whether or not the Modal is opened in a mobile viewport
- * @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, isMobile} = props;
-
-    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 opened in a mobile viewport */
-    isMobile: PropTypes.bool.isRequired,
-    /** 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

@@ -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 '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);
-    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/v2/components/Modal/index.js

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