@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/v2/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/v2/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/v2/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/v2/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/v2/components/Modal/styles/footer.js

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

package/styles/v2/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/v2/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/v2/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/v2/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/v2/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 'v2/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/v2/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/v2/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/v2/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/v2/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/v2/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/v2/components/Popover/styles/popover-arrow.js

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

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

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

package/styles/v2/components/Popover/styles/popover-close-button.js

@@ -1,17 +0,0 @@
-const pseudoStyles = variant => ({
-    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
-});
-
-const closeButtonStyles = ({variant}) => ({
-    color: variant === 'dark' ? 'white' : 'black',
-    fontSize: '0.5rem',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 4,
-    borderTopRightRadius: 4,
-    _hover: pseudoStyles(variant),
-    _focus: pseudoStyles(variant),
-});
-
-export default closeButtonStyles;

package/styles/v2/components/Popover/styles/popover-content.js

@@ -1,16 +0,0 @@
-const popoverContentStyles = ({variant}) => ({
-    padding: 4,
-    marginBottom: 0,
-    maxWidth: '20rem',
-    borderRadius: 'base',
-    background: variant === 'dark' ? 'secondary.default' : 'white',
-    boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
-    color: variant === 'dark' ? 'white' : 'black',
-    borderColor: 'gray.100',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
-    zIndex: 'layer10',
-});
-
-export default popoverContentStyles;

package/styles/v2/components/Popover/styles/popover-header.js

@@ -1,6 +0,0 @@
-const headerStyles = {
-    marginBottom: 2,
-    fontWeight: 'semibold',
-};
-
-export default headerStyles;

package/styles/v2/components/Popover/styles/popper.js

@@ -1,5 +0,0 @@
-const popperStyles = {
-    borderRadius: 'base',
-};
-
-export default popperStyles;

package/styles/v2/components/Radio/Radio.jsx

@@ -1,50 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Box, Radio as ChakraRadio} from '@chakra-ui/react';
-
-const Radio = forwardRef(
-    (
-        {
-            defaultChecked,
-            isChecked,
-            isDisabled,
-            value,
-            helperText,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        return (
-            <ChakraRadio
-                ref={ref}
-                defaultChecked={defaultChecked}
-                isChecked={isChecked}
-                isDisabled={isDisabled}
-                isFocusable={!isDisabled}
-                value={value}
-                alignItems="start"
-                {...props}
-            >
-                {children}
-                {helperText && (
-                    <Box color="gray.600" fontSize="xs">
-                        {helperText}
-                    </Box>
-                )}
-            </ChakraRadio>
-        );
-    }
-);
-
-Radio.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-        .isRequired,
-    defaultChecked: PropTypes.bool,
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    helperText: PropTypes.string,
-};
-
-export default Radio;

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

@@ -1,155 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Radio from './Radio';
-import RadioGroup from './RadioGroup';
-
-export default {
-    title: 'v2/Radio',
-    component: Radio,
-    parameters: {
-        importBy: 'Radio',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/components/radio',
-    },
-};
-
-export const Individual = props => {
-    return (
-        <Radio value="1" {...props}>
-            Option 1
-        </Radio>
-    );
-};
-
-Individual.argTypes = {
-    helperText: {
-        control: {type: 'text'},
-    },
-    isDisabled: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    isChecked: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    children: {
-        table: {
-            disable: true,
-        },
-    },
-    defaultChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    value: {
-        table: {
-            disable: true,
-        },
-    },
-};
-
-Individual.args = {
-    helperText: 'Helper text',
-    isDisabled: false,
-    isChecked: false,
-};
-
-Individual.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-        .isRequired,
-    defaultChecked: PropTypes.bool,
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    helperText: PropTypes.string,
-};
-
-export const Group = props => {
-    return (
-        <RadioGroup
-            name="example1"
-            defaultValue="3"
-            id="example1"
-            label="Which option?"
-            {...props}
-        >
-            <Radio value="1">Option 1</Radio>
-            <Radio value="2">Option 2</Radio>
-            <Radio value="3">Option 3</Radio>
-            <Radio value="4">Option 4</Radio>
-        </RadioGroup>
-    );
-};
-
-Group.title = 'v2/RadioGroup';
-Group.component = RadioGroup;
-Group.parameters = {
-    importBy: 'RadioGroup',
-};
-
-Group.argTypes = {
-    direction: {
-        options: ['column', 'row'],
-        control: {
-            type: 'radio',
-        },
-    },
-    isDisabled: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    children: {
-        table: {
-            disable: true,
-        },
-    },
-    defaultChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    value: {
-        table: {
-            disable: true,
-        },
-    },
-    isChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    helperText: {
-        table: {
-            disable: true,
-        },
-    },
-};
-
-Group.args = {
-    direction: 'column',
-    isDisabled: false,
-    isInvalid: false,
-    isRequired: false,
-    label: 'Label',
-    errorMessage: 'Error message',
-};
-
-Group.propTypes = {
-    children: PropTypes.node,
-    defaultValue: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    isInvalid: PropTypes.bool,
-    isRequired: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-    direction: PropTypes.oneOf(['row', 'column']),
-};