@spothero/ui 15.10.9 → 16.0.0-beta.1

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

@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-
-import Text from 'v2/components/Text/Text';
-import Heading from 'v2/components/Heading/Heading';
-
-import Component from './Accordion';
-import {
-    AccordionIcon,
-    AccordionItem,
-    AccordionPanel,
-    AccordionButton,
-} from './index';
-
-export default {
-    title: 'v2/Accordion',
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        accordionText: {
-            control: {
-                type: 'text',
-            },
-        },
-        allowMultiple: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        allowToggle: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        index: {
-            control: {
-                type: 'number',
-            },
-        },
-    },
-};
-
-const AccordionTemplate = ({
-    accordionText,
-    allowMultiple,
-    index,
-    allowToggle,
-}) => {
-    const multipleOptions = allowMultiple
-        ? {allowMultiple, defaultIndex: index}
-        : '';
-
-    const toggleOptions = allowToggle ? {allowToggle} : '';
-
-    return (
-        <Component {...toggleOptions} {...multipleOptions}>
-            <AccordionItem>
-                <Heading as="h3">
-                    <AccordionButton>
-                        <Box flex="1" textAlign="left">
-                            Accordion Item 1 Title
-                        </Box>
-                        <AccordionIcon />
-                    </AccordionButton>
-                </Heading>
-                <AccordionPanel>
-                    <Text>{accordionText}</Text>
-                </AccordionPanel>
-            </AccordionItem>
-            <AccordionItem>
-                <Heading as="h3">
-                    <AccordionButton>
-                        <Box flex="1" textAlign="left">
-                            Accordion Item 2 Title
-                        </Box>
-                        <AccordionIcon />
-                    </AccordionButton>
-                </Heading>
-                <AccordionPanel>
-                    <Text>{accordionText}</Text>
-                </AccordionPanel>
-            </AccordionItem>
-        </Component>
-    );
-};
-
-AccordionTemplate.propTypes = {
-    allowToggle: PropTypes.bool,
-    allowMultiple: PropTypes.bool,
-    accordionText: PropTypes.string,
-    index: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
-    defaultIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
-};
-
-export const Accordion = AccordionTemplate.bind({});
-Accordion.args = {
-    accordionText: `You must come along now, Artoo. There's really nothing more we can do. And my joints are freezing up. Don't say thing like that! Of course we'll see Master Luke again. He'll be quite all right, you'll see. Stupid little short-circuit. He'll be quite all right. Sir, all the patrols are in. There's still no contact from Skywalker or Solo. Mistress Leia, Artoo says he's been quite unable to pick up any signals, although he does admit that his own range is far too weak to abandon all hope. Your Highness, there's nothing more we can do tonight. The shield doors must be closed. Close the doors. Yes, sir.`,
-    allowMultiple: true,
-    allowToggle: true,
-    index: [1],
-};

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

@@ -1,7 +0,0 @@
-export {default} from './Accordion';
-export {
-    AccordionIcon,
-    AccordionItem,
-    AccordionPanel,
-    AccordionButton,
-} from '@chakra-ui/react';

package/styles/v2/components/Accordion/styles/button.js

@@ -1,16 +0,0 @@
-import {variants as headingVariants} from 'v2/components/Heading/Heading.styles';
-
-const button = {
-    fontSize: headingVariants.h4.fontSize,
-    fontWeight: 'semibold',
-    px: 0,
-    py: {
-        base: 4,
-        tablet: 6,
-    },
-    '& svg': {
-        color: 'primary.default',
-    },
-};
-
-export default button;

package/styles/v2/components/Accordion/styles/container.js

@@ -1,9 +0,0 @@
-const container = {
-    borderTopWidth: '1px',
-    borderColor: 'gray.medium',
-    _last: {
-        borderBottomWidth: '1px',
-    },
-};
-
-export default container;

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

@@ -1,19 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-import panel from './panel';
-import button from './button';
-import container from './container';
-
-const parts = ['container', 'button', 'panel'];
-
-const baseStyle = {
-    panel,
-    button,
-    container,
-};
-
-export default merge(chakraDefaultTheme.components.Accordion, {
-    parts,
-    baseStyle,
-});

package/styles/v2/components/Accordion/styles/panel.js

@@ -1,7 +0,0 @@
-const panel = {
-    pt: 0,
-    px: 0,
-    pb: 6,
-};
-
-export default panel;

package/styles/v2/components/Alert/Alert.jsx

@@ -1,121 +0,0 @@
-import React from 'react';
-import {
-    Alert as ChakraAlert,
-    AlertTitle,
-    AlertDescription,
-    VStack,
-    Flex,
-    useStyleConfig,
-} from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-import IconX from '@spothero/icons/times';
-import IconInfo from '@spothero/icons/filled-info-circle';
-import IconExclamation from '@spothero/icons/filled-exclamation-circle';
-import IconCheck from '@spothero/icons/filled-check-circle';
-import Button from 'v2/components/Button/Button';
-import Icon from 'v2/components/Icon/Icon';
-
-export const STATUSES = {
-    NEUTRAL: 'neutral',
-    ERROR: 'error',
-    WARNING: 'warning',
-    SUCCESS: 'success',
-};
-
-const statusIconMapping = {
-    [STATUSES.WARNING]: IconExclamation,
-    [STATUSES.SUCCESS]: IconCheck,
-    [STATUSES.ERROR]: IconExclamation,
-    [STATUSES.NEUTRAL]: IconInfo,
-};
-
-const Alert = ({
-    status,
-    title,
-    buttonProps,
-    buttonText,
-    buttonOnBottom,
-    showDismiss,
-    onDismissClick,
-    showIcon,
-    description,
-    ...props
-}) => {
-    const style = useStyleConfig('Alert', {'data-status': status});
-    const IconVariant = statusIconMapping[status];
-
-    return (
-        <ChakraAlert data-status={status} {...props}>
-            {showIcon ? <Icon sx={style.icon} as={IconVariant} /> : null}
-            <VStack spacing={0} alignItems="flex-start">
-                {title ? <AlertTitle>{title}</AlertTitle> : null}
-                {description ? (
-                    <AlertDescription>{description}</AlertDescription>
-                ) : null}
-                {buttonOnBottom && buttonText && buttonProps ? (
-                    <Button
-                        sx={style.actionButton}
-                        variant="tertiary"
-                        {...buttonProps}
-                    >
-                        {buttonText}
-                    </Button>
-                ) : null}
-            </VStack>
-            <Flex alignItems="center" marginLeft="auto">
-                {!buttonOnBottom && buttonText && buttonProps ? (
-                    <Button
-                        sx={style.actionButton}
-                        variant="tertiary"
-                        {...buttonProps}
-                    >
-                        {buttonText}
-                    </Button>
-                ) : null}
-                {showDismiss ? (
-                    <Button sx={style.dismissButton} onClick={onDismissClick}>
-                        <Icon width={3} height="auto" as={IconX} />
-                    </Button>
-                ) : null}
-            </Flex>
-        </ChakraAlert>
-    );
-};
-
-Alert.propTypes = {
-    /** Status. One of: success, neutral, warning, or error */
-    status: PropTypes.oneOf(['neutral', 'success', 'warning', 'error']),
-    /** Title Text. Will not display title if empty */
-    title: PropTypes.node,
-    /** Props to pass to button (like onClick). Will not display button if this or buttonText empty */
-    buttonProps: PropTypes.object,
-    /** Text of button. Will not display button if this or buttonProps empty */
-    buttonText: PropTypes.string,
-    /** Whether action button should be under description (as opposed to on right) */
-    buttonOnBottom: PropTypes.bool,
-    /** Whether or not to show X dismiss button */
-    showDismiss: PropTypes.bool,
-    /** Callback when X clicked */
-    onDismissClick: PropTypes.func,
-    /** Whether or not to show the icon */
-    showIcon: PropTypes.bool,
-    /** Description text. Will not display description if empty */
-    description: PropTypes.node,
-    /** Size of the text */
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-};
-
-Alert.defaultProps = {
-    status: 'neutral',
-    title: null,
-    buttonProps: null,
-    buttonText: null,
-    buttonOnBottom: false,
-    showDismiss: false,
-    onDismissClick: null,
-    showIcon: true,
-    description: null,
-    size: 'md',
-};
-
-export default Alert;

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import {VStack, Text} from '@chakra-ui/react';
-import {createSelectControl} from 'storybook/utils/create-control';
-import disableArgs from 'storybook/utils/disable-args';
-
-import Component from './Alert';
-
-export default {
-    title: 'v2/Alert',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const AlertTemplate = props => (
-    <VStack alignItems="flex-start">
-        <Text>Status: Success</Text>
-        <Component status="success" {...props} />
-        <Text>Status: Error</Text>
-        <Component status="error" {...props} />
-        <Text>Status: Warning</Text>
-        <Component status="warning" {...props} />
-        <Text>Status: Neutral</Text>
-        <Component status="neutral" {...props} />
-    </VStack>
-);
-
-AlertTemplate.propTypes = {};
-
-export const Alert = AlertTemplate.bind({});
-
-Alert.argTypes = {
-    ...createSelectControl('size', ['sm', 'md', 'lg']),
-    ...disableArgs(['buttonProps', 'onDismissClick', 'status']),
-};
-
-Alert.args = {
-    title: 'Hello',
-    buttonOnBottom: false,
-    buttonText: 'Action',
-    description: 'This is an alert.',
-    buttonProps: {
-        onClick: () => console.log('Action clicked'),
-    },
-    showDismiss: true,
-    onDismissClick: () => console.log('dismissed'),
-    showIcon: true,
-    size: 'md',
-};

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

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

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

@@ -1,166 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-import {STATUSES} from '../Alert';
-
-const baseStyle = {
-    container: {
-        paddingY: 2,
-        borderRadius: 'base',
-    },
-    actionButton: {
-        fontSize: 'sm',
-        height: 'fit-content',
-        lineHeight: '1.4',
-        color: 'primary.600',
-        _hover: {
-            color: 'primary.700',
-        },
-    },
-    dismissButton: {
-        color: 'gray.600',
-        borderColor: 'transparent',
-        borderWidth: '2px',
-        padding: 0,
-        width: 10,
-        height: 10,
-        backgroundColor: 'transparent',
-        borderRadius: 'base',
-        marginLeft: 2,
-        _hover: {
-            color: 'gray.700',
-        },
-        _focus: {
-            color: 'gray.700',
-            borderColor: 'white',
-            boxShadow: 'outline',
-        },
-    },
-    icon: {
-        width: 6,
-        marginRight: 2,
-        height: 'auto',
-    },
-    description: {
-        lineHeight: 1.4,
-    },
-    title: {
-        lineHeight: 1.4,
-    },
-};
-
-const statusStyles = status => {
-    switch (status) {
-        case STATUSES.NEUTRAL:
-            return {
-                container: {
-                    background: 'gray.light',
-                },
-                icon: {
-                    color: 'gray.dark',
-                },
-                dismissButton: {
-                    _hover: {
-                        background: 'gray.200',
-                    },
-                    _focus: {
-                        background: 'gray.200',
-                    },
-                },
-            };
-        case STATUSES.WARNING:
-            return {
-                container: {
-                    background: 'yellow.100',
-                },
-                icon: {
-                    color: 'yellow.500',
-                },
-                dismissButton: {
-                    _hover: {
-                        background: 'yellow.200',
-                    },
-                    _focus: {
-                        background: 'yellow.200',
-                    },
-                },
-            };
-        case STATUSES.ERROR:
-            return {
-                container: {
-                    background: 'red.100',
-                },
-                icon: {
-                    color: 'red.700',
-                },
-                dismissButton: {
-                    _hover: {
-                        background: 'red.200',
-                    },
-                    _focus: {
-                        background: 'red.200',
-                    },
-                },
-            };
-        case STATUSES.SUCCESS:
-            return {
-                container: {
-                    background: 'green.100',
-                },
-                icon: {
-                    color: 'green.700',
-                },
-                dismissButton: {
-                    _hover: {
-                        background: 'green.200',
-                    },
-                    _focus: {
-                        background: 'green.200',
-                    },
-                },
-            };
-
-        default:
-            return {};
-    }
-};
-
-const overrides = {
-    baseStyle: props => {
-        return merge(
-            {
-                ...chakraDefaultTheme.components.Alert.baseStyle,
-            },
-            baseStyle,
-            statusStyles(props['data-status'])
-        );
-    },
-    variants: {},
-    sizes: {
-        sm: {
-            title: {
-                fontSize: 'xs',
-            },
-            description: {
-                fontSize: 'xs',
-            },
-        },
-        md: {
-            title: {
-                fontSize: 'sm',
-            },
-            description: {
-                fontSize: 'sm',
-            },
-        },
-        lg: {
-            title: {
-                fontSize: 'base',
-            },
-            description: {
-                fontSize: 'base',
-            },
-        },
-    },
-};
-
-export default {...chakraDefaultTheme.components.Alert, ...overrides};

package/styles/v2/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -1,187 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import FormControl from '../FormControl/FormControl';
-import AsyncSelect from 'react-select/async';
-import {useTheme} from '@chakra-ui/react';
-import IconTimesCircle from '@spothero/icons/times-circle';
-
-const AutoSuggestSelect = forwardRef(
-    (
-        {
-            id,
-            label,
-            helperText,
-            errorMessage,
-            isInvalid,
-            isDisabled,
-            isRequired,
-            getOptions,
-            onChange,
-            iconSrc,
-            placeholder,
-        },
-        ref
-    ) => {
-        const {colors, fontSizes, sizes} = useTheme();
-
-        const handleChange = selectedOption => {
-            onChange(selectedOption);
-        };
-
-        const icon = (color = 'transparent') => ({
-            alignItems: 'center',
-            display: 'flex',
-
-            ':before': {
-                backgroundColor: color,
-                content: '" "',
-                display: 'block',
-                marginRight: sizes['3'],
-                height: sizes['4'],
-                width: sizes['5'],
-                mask: `url(${iconSrc}) no-repeat 50% 50%`,
-                maskSize: 'contain',
-            },
-        });
-
-        const baseText = {
-            fontSize: fontSizes.base,
-            color: colors.black,
-        };
-
-        /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
-        const customStyles = {
-            menu: provided => ({
-                ...provided,
-                ...baseText,
-            }),
-            control: (provided, state) => ({
-                ...provided,
-                borderColor: isInvalid
-                    ? colors.error
-                    : state.isFocused
-                    ? colors.primary.default
-                    : colors.gray['200'],
-                borderWidth: '1px',
-                boxShadow: 'none',
-                '&:hover': {
-                    borderColor: isInvalid
-                        ? colors.error
-                        : state.isFocused
-                        ? colors.primary.default
-                        : colors.gray['200'],
-                },
-            }),
-            input: (provided, state) => ({
-                ...provided,
-                ...baseText,
-                padding: sizes['2'],
-                backgroundColor: state.isDisabled
-                    ? colors.gray['200']
-                    : 'transparent',
-                ...(iconSrc && icon(colors.gray['600'])),
-            }),
-            placeholder: provided => ({
-                ...provided,
-                padding: sizes['2'],
-                fontSize: fontSizes.base,
-                color: colors.gray['600'],
-                ...(iconSrc && icon()),
-            }),
-            singleValue: provided => ({
-                ...provided,
-                ...baseText,
-                padding: sizes['2'],
-                ...(iconSrc && icon()),
-            }),
-            option: (provided, state) => ({
-                ...provided,
-                backgroundColor: state.isSelected
-                    ? colors.gray['200']
-                    : state.isFocused
-                    ? colors.gray['50']
-                    : 'transparent',
-                color: colors.black,
-            }),
-            clearIndicator: provided => ({
-                ...provided,
-                color: colors.gray['600'],
-            }),
-            dropdownIndicator: provided => ({
-                ...provided,
-                color: colors.gray['600'],
-            }),
-        };
-
-        const clearIndicatorStyles = {
-            width: sizes['5'],
-            display: 'flex',
-            marginRight: sizes['3'],
-            color: colors.gray['600'],
-            cursor: 'pointer',
-        };
-
-        /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
-        const ClearIndicator = ({innerRef, innerProps}) => (
-            <div style={clearIndicatorStyles} ref={innerRef} {...innerProps}>
-                <IconTimesCircle />
-            </div>
-        );
-
-        return (
-            <FormControl
-                errorMessage={errorMessage}
-                isRequired={isRequired}
-                helperText={helperText}
-                label={label}
-                inputId={id}
-            >
-                <AsyncSelect
-                    closeMenuOnSelect
-                    isClearable
-                    cacheOptions
-                    components={{
-                        DropdownIndicator: () => null,
-                        IndicatorSeparator: () => null,
-                        ClearIndicator,
-                    }}
-                    openMenuOnClick={false}
-                    loadOptions={getOptions}
-                    onChange={handleChange}
-                    isDisabled={isDisabled}
-                    id={id}
-                    placeholder={placeholder}
-                    styles={customStyles}
-                    ref={ref}
-                />
-            </FormControl>
-        );
-    }
-);
-
-AutoSuggestSelect.propTypes = {
-    /** ID applied to the select and label */
-    id: PropTypes.string.isRequired,
-    /** Label that describes the select */
-    label: PropTypes.string,
-    /** Text to use as placeholder in the input */
-    placeholder: PropTypes.string,
-    /** Optional helper text displayed below the select */
-    helperText: PropTypes.string,
-    /** Error message that would display under the select */
-    errorMessage: PropTypes.string,
-    /** Boolean that sets whether the select is valid */
-    isInvalid: PropTypes.bool,
-    /** Boolean that sets whether the select is disabled */
-    isDisabled: PropTypes.bool,
-    /** Boolean that sets whether the select is required */
-    isRequired: PropTypes.bool,
-    /** Function that is called with the value typed into the input that returns a list of options for the select */
-    getOptions: PropTypes.func.isRequired,
-    /** Function that is called when an option is selected, it returns the label and value of the selection */
-    onChange: PropTypes.func.isRequired,
-    /** Optional src to SVG to use as search icon */
-    iconSrc: PropTypes.string,
-};
-
-export default AutoSuggestSelect;

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

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