@spothero/ui 16.0.0-beta.0 → 16.0.0-beta.1

package/styles/components/Accordion/Accordion.jsx

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

package/styles/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 'components/Text/Text';
-import Heading from '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/components/Accordion/index.js

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

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

@@ -1,16 +0,0 @@
-import {variants as headingVariants} from '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/components/Accordion/styles/container.js

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

package/styles/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/components/Accordion/styles/panel.js

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

package/styles/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 'components/Button/Button';
-import Icon from '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/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/components/Alert/index.js

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

package/styles/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};