@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/v2/components/Badge/Badge.jsx

@@ -1 +0,0 @@
-export {Badge as default} from '@chakra-ui/react';

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import Component from './Badge';
-
-export default {
-    title: 'v2/Badge',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const Template = props => (
-    <>
-        <Component variant='primary'>
-            Primary
-        </Component>
-        <br/>
-        <Component variant='warningLight'>
-            Warning Light
-        </Component>
-        <br/>
-        <Component variant='solid' colorScheme='green'>
-            Success
-        </Component>
-        <br/>
-        <Component variant='subtle' colorScheme='red'>
-            Removed
-        </Component>
-    </>
-);
-
-export const Badge = Template.bind({});

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

@@ -1,29 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    px: 1,
-    textTransform: 'reset',
-    fontSize: 'xs',
-    borderRadius: 'sm',
-    fontWeight: 'bold',
-};
-
-export const variants = {
-     primary: {
-         bg: 'primary.default',
-         color: 'white',
-     },
-    warningLight: {
-         bg: 'yellow.100',
-         color: 'black',
-    },
-};
-
-const defaultProps = {};
-
-export default merge(chakraDefaultTheme.components.Badge, {
-    variants,
-    baseStyle,
-    defaultProps,
-});

package/styles/v2/components/Button/Button.jsx

@@ -1,31 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Button as ChakraButton} from '@chakra-ui/react';
-
-import ButtonProps from './button-props';
-
-const anchorProps = (isExternal = false) => ({
-    as: 'a',
-    type: null,
-    ...(isExternal && {
-        target: '_blank',
-        rel: 'noopener noreferrer',
-    }),
-});
-
-const Button = forwardRef(({asAnchor, isExternal, ...props}, ref) => (
-    <ChakraButton
-        iconSpacing={2}
-        {...props}
-        {...((asAnchor || props.as === 'a') && anchorProps(isExternal))}
-        ref={ref}
-    />
-));
-
-Button.propTypes = ButtonProps;
-
-Button.defaultProps = {
-    variant: 'primary',
-    type: 'button',
-};
-
-export default Button;

package/styles/v2/components/Button/Button.spec.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Button from './Button';
-
-describe('Button', () => {
-    it('renders the anchor version of the button', () => {
-        render(
-            <Button asAnchor href="#">
-                Button
-            </Button>
-        );
-
-        expect(screen.getByRole('link')).toBeInTheDocument();
-    });
-
-    it('renders with target and rel attributes on external anchor button', () => {
-        render(
-            <Button asAnchor isExternal href="#">
-                Button
-            </Button>
-        );
-
-        const link = screen.getByRole('link');
-
-        expect(link).toHaveAttribute('target', '_blank');
-        expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-});

package/styles/v2/components/Button/Button.styles.js

@@ -1,156 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    px: 8,
-    py: 3,
-    fontSize: 'base',
-    fontFamily: 'body',
-    lineHeight: 0.875,
-    fontWeight: 'semibold',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: '1.25rem',
-    textTransform: 'capitalize',
-    transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-    _disabled: {
-        cursor: 'not-allowed',
-        opacity: 1,
-        bg: 'gray.medium',
-        borderColor: 'gray.medium',
-        color: 'gray.dark',
-    },
-    '& svg': {
-        display: 'block',
-    },
-};
-// TODO: We need an active styling
-const disabledButtonHoverStyle = {
-    _disabled: {
-        bg: 'gray.medium',
-        borderColor: 'gray.medium',
-        color: 'gray.dark',
-    },
-};
-
-const destructiveButtonStyles = {
-    bg: 'white',
-    borderColor: 'red.default',
-    color: 'red.default',
-    _hover: {
-        borderColor: 'red.800',
-        color: 'red.800',
-        ...disabledButtonHoverStyle,
-    },
-};
-
-export const variants = {
-    primary: {
-        bg: 'primary.default',
-        borderColor: 'primary.default',
-        color: 'white',
-        _hover: {
-            bg: 'primary.600',
-            borderColor: 'primary.600',
-            color: 'white',
-            ...disabledButtonHoverStyle,
-        },
-    },
-    primaryOnDark: {
-        bg: 'yellow.default',
-        borderColor: 'yellow.default',
-        color: 'black',
-        _hover: {
-            bg: 'yellow.500',
-            borderColor: 'yellow.500',
-            color: 'black',
-            ...disabledButtonHoverStyle,
-        },
-        _focus: {
-            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
-        },
-    },
-    secondary: {
-        bg: 'white',
-        borderColor: 'gray.medium',
-        color: 'primary.default',
-        _hover: {
-            borderColor: 'primary.600',
-            color: 'primary.600',
-            ...disabledButtonHoverStyle,
-        },
-    },
-    secondaryOnDark: {
-        bg: 'none',
-        borderColor: 'white',
-        color: 'white',
-        _hover: {
-            bg: 'white',
-            borderColor: 'white',
-            color: 'black',
-            ...disabledButtonHoverStyle,
-        },
-        _focus: {
-            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
-        },
-    },
-    tertiary: {
-        bg: 'none',
-        borderWidth: 'none',
-        borderRadius: 'unset',
-        color: 'primary.default',
-        h: 'unset',
-        m: 'unset',
-        minW: 'unset',
-        p: 'unset',
-        lineHeight: 1,
-        _disabled: {
-            bg: 'none',
-            color: 'gray.dark',
-        },
-        _hover: {
-            color: 'primary.600',
-            _disabled: {
-                color: 'gray.dark',
-            },
-        },
-    },
-    tertiaryOnDark: {
-        bg: 'none',
-        borderRadius: 'unset',
-        borderWidth: 'none',
-        color: 'white',
-        h: 'unset',
-        m: 'unset',
-        minW: 'unset',
-        p: 'unset',
-        _disabled: {
-            bg: 'none',
-            color: 'white',
-            opacity: '.7',
-        },
-        _hover: {
-            color: 'white',
-            opacity: '.8',
-            _disabled: {
-                opacity: '.7',
-            },
-        },
-    },
-    destructive: {
-        ...destructiveButtonStyles,
-    },
-    destructiveOnDark: {
-        ...destructiveButtonStyles,
-    },
-};
-
-const defaultProps = {
-    size: null,
-};
-
-export default merge(chakraDefaultTheme.components.Button, {
-    variants,
-    baseStyle,
-    defaultProps,
-});

package/styles/v2/components/Button/button-props.js

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import {variants} from './Button.styles';
-
-const props = {
-    /**
-     * Alters the underlying html tag
-     */
-    as: PropTypes.string,
-    /**
-     * If `true`, the button will render as an anchor.
-     */
-    asAnchor: PropTypes.bool,
-    /**
-     * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
-     * "isExternal" is used to maintain parity with the Link component.
-     */
-    isExternal: PropTypes.bool,
-    /**
-     * If `true`, the button will show a spinner.
-     */
-    isLoading: PropTypes.bool,
-    /**
-     * If `true`, the button will be styled in its active state.
-     */
-    isActive: PropTypes.bool,
-    /**
-     * If `true`, the button will be disabled.
-     */
-    isDisabled: PropTypes.bool,
-    /**
-     * The label to show in the button when `isLoading` is true
-     * If no text is passed, it only shows the spinner
-     */
-    loadingText: PropTypes.string,
-    /**
-     * If `true`, the button will take up the full width of its container.
-     */
-    isFullWidth: PropTypes.bool,
-    /**
-     * The html button type to use.
-     */
-    type: PropTypes.oneOf(['button', 'reset', 'submit']),
-    /**
-     * If added, the button will show an icon before the button's label.
-     * @type PropTypes.node
-     */
-    leftIcon: PropTypes.node,
-    /**
-     * If added, the button will show an icon after the button's label.
-     * @type PropTypes.node
-     */
-    rightIcon: PropTypes.node,
-    /**
-     * The space between the button icon and label.
-     * @type SystemProps["marginRight"]
-     */
-    iconSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * Replace the spinner component when `isLoading` is set to `true`
-     * @type PropTypes.node
-     */
-    spinner: PropTypes.node,
-    variant: PropTypes.oneOf(Object.keys(variants)),
-};
-
-export default props;

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

@@ -1,2 +0,0 @@
-export {default as Button} from './Button';
-export {ButtonGroup} from '@chakra-ui/react';

package/styles/v2/components/Button/stories/button.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import capitalize from 'lodash/capitalize';
-import {Box, Text} from '@chakra-ui/react';
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import ButtonProps from 'v2/components/Button/button-props';
-
-const ButtonTemplate = (props, {hasDarkBackground}) => {
-    const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;
-
-    return (
-        <Box>
-            <Box mb={4}>
-                <Text
-                    mb="2"
-                    color={
-                        hasDarkBackground
-                            ? 'text.primary.dark'
-                            : 'text.primary.light'
-                    }
-                >
-                    {capitalize(props.variant)}:
-                </Text>
-                <Box>
-                    <Component {...props} variant={variant} mr={4} mb={4}>
-                        {props.variant} Variant
-                    </Component>
-
-                    <Component
-                        leftIcon={<IconCheck width="1rem" />}
-                        {...props}
-                        variant={variant}
-                        mr={4}
-                        mb={4}
-                    >
-                        {props.variant} With Icon
-                    </Component>
-
-                    <Component
-                        {...props}
-                        variant={variant}
-                        as="a"
-                        href="http://spothero.com"
-                        isExternal={false}
-                        mr={4}
-                        mb={4}
-                    >
-                        As Anchor
-                    </Component>
-                </Box>
-            </Box>
-        </Box>
-    );
-};
-
-ButtonTemplate.propTypes = ButtonProps;
-
-export default ButtonTemplate;

package/styles/v2/components/Button/stories/index.stories.js

@@ -1,82 +0,0 @@
-import ButtonTemplate from './button';
-import OverviewTemplate from './overview';
-
-import Button from '../Button';
-import disableArgs from 'storybook/utils/disable-args';
-import {createSelectControl} from 'storybook/utils/create-control';
-
-export default {
-    title: 'v2/Button',
-    component: {Button},
-    parameters: {
-        importBy: 'Button',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/form/button',
-    },
-    argTypes: {
-        ...disableArgs('children'),
-        onClick: {action: 'clicked'},
-    },
-};
-
-export const Overview = OverviewTemplate.bind({});
-
-export const Primary = ButtonTemplate.bind({});
-Primary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Primary.args = {
-    children: 'Primary',
-    variant: 'primary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Secondary = ButtonTemplate.bind({});
-Secondary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Secondary.args = {
-    children: 'Secondary',
-    variant: 'secondary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Tertiary = ButtonTemplate.bind({});
-Tertiary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Tertiary.args = {
-    children: 'tertiary',
-    variant: 'tertiary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Destructive = ButtonTemplate.bind({});
-Destructive.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Destructive.args = {
-    children: 'destructive',
-    variant: 'destructive',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};

package/styles/v2/components/Button/stories/overview.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import capitalize from 'lodash/capitalize';
-import {Box} from '@chakra-ui/react';
-
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import {variants} from '../Button.styles';
-import Text from 'v2/components/Text/Text';
-
-const variationsArray = ({baseVariantName, hasDarkBackground}) => {
-    const variant = `${baseVariantName}${hasDarkBackground ? 'OnDark' : ''}`;
-
-    return [
-        {
-            variant,
-            children: variant,
-        },
-        {
-            variant,
-            children: `${variant} isDisabled`,
-            isDisabled: true,
-        },
-        {
-            variant,
-            children: `${variant} isLoading`,
-            isLoading: true,
-            loadingText: 'loading (optional)',
-        },
-        {
-            variant,
-            children: `leftIcon`,
-            leftIcon: <IconCheck width="1rem" />,
-        },
-        {
-            variant,
-            children: `${variant} asAnchor`,
-            asAnchor: true,
-            href: '#',
-        },
-    ];
-};
-
-const OverviewTemplate = (args, {hasDarkBackground}) => (
-    <Box>
-        {Object.keys(variants)
-            .filter(name => !/ondark/i.test(name))
-            .map((baseVariantName, index) => (
-                <Box key={index} mb={4}>
-                    <Text
-                        mb="2"
-                        color={
-                            hasDarkBackground
-                                ? 'text.primary.dark'
-                                : 'text.primary.light'
-                        }
-                    >
-                        {capitalize(baseVariantName)}:
-                    </Text>
-                    <Box>
-                        {variationsArray({
-                            baseVariantName,
-                            hasDarkBackground,
-                        }).map((props, key) => (
-                            <Component key={key} {...props} mr={4} mb={4} />
-                        ))}
-                    </Box>
-                </Box>
-            ))}
-    </Box>
-);
-
-export default OverviewTemplate;

package/styles/v2/components/Card/Card.jsx

@@ -1,16 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Box} from '@chakra-ui/react';
-
-const Card = forwardRef((props, ref) => (
-    <Box
-        position="relative"
-        padding={4}
-        bgColor="background.white"
-        borderRadius="lg"
-        boxShadow="md"
-        {...props}
-        ref={ref}
-    />
-));
-
-export default Card;

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-import Component from './Card';
-
-export default {
-    title: 'v2/Card',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-/*
-    Storybook's background is white so the Card is hard to see.
-    The Card is typically displayed against a light gray background.
-*/
-const Template = props => (
-    <Box backgroundColor="gray.light" padding={8}>
-        <Component {...props} />
-    </Box>
-);
-
-Template.propTypes = {
-    children: PropTypes.node,
-};
-
-export const Card = Template.bind({});
-
-Card.args = {
-    children:
-        'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.',
-};

package/styles/v2/components/Checkbox/Checkbox.jsx

@@ -1 +0,0 @@
-export {Checkbox as default} from '@chakra-ui/react';

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Checkbox';
-
-export default {
-    title: 'v2/Checkbox',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const CheckboxTemplate = props => <Component {...props} />;
-
-CheckboxTemplate.propTypes = {
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isIndeterminate: PropTypes.bool,
-    defaultIsChecked: PropTypes.bool,
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-    children: PropTypes.node,
-};
-
-export const Checkbox = CheckboxTemplate.bind({});
-
-Checkbox.argTypes = {
-    size: {
-        options: ['sm', 'md', 'lg'],
-        control: {type: 'select'},
-    },
-};
-
-Checkbox.args = {
-    defaultIsChecked: true,
-    isChecked: true,
-    isDisabled: false,
-    isIndeterminate: false,
-    size: 'md',
-    children: 'R U Cool',
-};

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

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