@spothero/ui 15.10.9 → 16.0.0-beta.1

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

@@ -1,31 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    control: {
-        borderWidth: '2px',
-        borderStyle: 'solid',
-        borderImage: 'initial',
-        borderRadius: 'var(--chakra-radii-sm)',
-        borderColor: 'gray.200',
-        _hover: {borderColor: 'gray.300'},
-        _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
-        _disabled: {
-            opacity: 0.4,
-            cursor: 'not-allowed',
-            _hover: {borderColor: 'gray.200'},
-        },
-        _focus: {
-            zIndex: 1,
-            borderColor: 'primary.400',
-            boxShadow: t => `0 0 0 1px ${t.colors.primary['400']}`,
-        },
-    },
-    label: {
-        _disabled: {opacity: 0.4, cursor: 'not-allowed'},
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Checkbox, {
-    baseStyle,
-});

package/styles/v2/components/Container/Container.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Container as ChakraContainer} from '@chakra-ui/react';
-
-import styleProps from './Container.styles';
-
-const Container = forwardRef((props, ref) => (
-    <ChakraContainer {...styleProps} {...props} ref={ref} />
-));
-
-export default Container;

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import Component from './Container';
-import {useTheme, useToken, useBreakpointValue} from '@chakra-ui/react';
-import {createSelectControl} from 'storybook/utils/create-control';
-import {getAllColors} from 'storybook/utils/get-all-colors';
-import {getAllSizes} from 'storybook/utils/get-all-sizes';
-import PropTypes from 'prop-types';
-
-import styleProps from './Container.styles';
-
-export default {
-    title: 'v2/Container',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const ContainerTemplate = props => {
-    const {remToPixels} = useTheme();
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const size = useToken('sizes', breakpoint);
-    const isMobile = breakpoint?.includes('base');
-    const headingText = size
-        ? `Container: ${size}${isMobile ? '' : ` - ${remToPixels(size)}px`}`
-        : '';
-
-    return <Component {...props}>{headingText}</Component>;
-};
-
-ContainerTemplate.propTypes = {
-    color: PropTypes.oneOf(getAllColors),
-    bg: PropTypes.oneOf(getAllColors),
-    h: PropTypes.oneOf(getAllSizes),
-    centerContent: PropTypes.bool,
-    children: PropTypes.node,
-};
-
-export const Container = ContainerTemplate.bind({});
-
-Container.argTypes = {
-    ...createSelectControl('color', getAllColors),
-    ...createSelectControl('bg', getAllColors),
-    ...createSelectControl('h', getAllSizes),
-};
-
-Container.args = {
-    color: 'white',
-    bg: 'secondary.default',
-    h: '20',
-    centerContent: true,
-};

package/styles/v2/components/Container/Container.styles.js

@@ -1,11 +0,0 @@
-const styles = {
-    px: 4,
-    mx: 'auto',
-    maxW: {
-        base: 'container.base',
-        tablet: 'container.tablet',
-        desktop: 'container.desktop',
-    },
-};
-
-export default styles;

package/styles/v2/components/Divider/Divider.jsx

@@ -1,31 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Divider as ChakraDivider} from '@chakra-ui/react';
-import {colorScheme} from './Divider.styles';
-
-const Divider = forwardRef(
-    ({variant, colorScheme: borderColor, ...props}, ref) => {
-        return (
-            <ChakraDivider
-                {...colorScheme[borderColor]}
-                variant={variant}
-                {...props}
-                ref={ref}
-            />
-        );
-    }
-);
-
-Divider.propTypes = {
-    /** Color scheme used */
-    colorScheme: PropTypes.oneOf(['low', 'medium']),
-    /** The styling that will be applied to the HR tag */
-    variant: PropTypes.oneOf(['solid', 'dashed']),
-};
-
-Divider.defaultProps = {
-    variant: 'solid',
-    colorScheme: 'medium',
-};
-
-export default Divider;

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

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import {colorScheme} from './Divider.styles';
-
-import Component from './Divider';
-
-import {Box, Text} from '@chakra-ui/react';
-
-export default {
-    title: 'v2/Divider',
-    component: Component,
-    argTypes: {
-        colorScheme: {
-            control: {
-                type: 'select',
-                options: Object.keys(colorScheme),
-            },
-        },
-        variant: {
-            control: {
-                type: 'select',
-                options: ['solid', 'dashed'],
-            },
-        },
-    },
-};
-
-const Template = props => (
-    <Box>
-        <Text>Over HowdyHowdyHowdy</Text>
-        <Component {...props} />
-        <Text>Under HowdyHowdyHowdy</Text>
-    </Box>
-);
-
-export const Divider = Template.bind({});
-
-Divider.args = {
-    variant: 'solid',
-    colorScheme: 'medium',
-};

package/styles/v2/components/Divider/Divider.styles.js

@@ -1,15 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-export const colorScheme = {
-    low: {
-        borderColor: 'gray.100',
-    },
-    medium: {
-        borderColor: 'gray.200',
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Divider, {
-    colorScheme,
-});

package/styles/v2/components/FormControl/FormControl.jsx

@@ -1,77 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {
-    FormControl as ChakraFormControl,
-    FormHelperText,
-    FormLabel,
-    FormErrorMessage,
-    Text,
-} from '@chakra-ui/react';
-
-const FormControl = forwardRef(
-    (
-        {
-            children,
-            label,
-            inputId,
-            helperText,
-            errorMessage,
-            isFieldset,
-            ...props
-        },
-        ref
-    ) => (
-        <ChakraFormControl
-            {...props}
-            ref={ref}
-            as={isFieldset ? 'fieldset' : 'div'}
-            borderWidth="0"
-        >
-            {label && (
-                <FormLabel
-                    color="gray.600"
-                    fontWeight="semibold"
-                    marginBottom={helperText ? 0 : 1}
-                    fontSize="sm"
-                    htmlFor={inputId}
-                    as={isFieldset ? 'legend' : 'label'}
-                    requiredIndicator=""
-                    optionalIndicator={
-                        props?.isOptional && !props?.isRequired ? (
-                            <Text
-                                marginLeft={1}
-                                as="span"
-                                variant="caption"
-                                color="text.secondary.light"
-                            >
-                                Optional
-                            </Text>
-                        ) : null
-                    }
-                >
-                    {label}
-                </FormLabel>
-            )}
-            {helperText && (
-                <FormHelperText color="gray.600" marginBottom={1} fontSize="xs">
-                    {helperText}
-                </FormHelperText>
-            )}
-            {children}
-            <FormErrorMessage color="error" mt={1} fontSize="xs">
-                {errorMessage}
-            </FormErrorMessage>
-        </ChakraFormControl>
-    )
-);
-
-FormControl.propTypes = {
-    inputId: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    children: PropTypes.element,
-    isFieldset: PropTypes.bool,
-};
-
-export default FormControl;

package/styles/v2/components/Grid/Grid.jsx

@@ -1,25 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Grid as ChakraGrid} from '@chakra-ui/react';
-
-import {baseStyles, compactStyles} from './Grid.styles';
-
-const Grid = forwardRef(({isCompact, ...props}, ref) => (
-    <ChakraGrid
-        {...baseStyles}
-        {...(isCompact && compactStyles)}
-        {...props}
-        ref={ref}
-    />
-));
-
-Grid.propTypes = {
-    /** This will reduce the grid gap by half */
-    isCompact: PropTypes.bool,
-};
-
-Grid.defaultProps = {
-    isCompact: false,
-};
-
-export default Grid;

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

@@ -1,128 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-
-import GridComponent from './Grid';
-
-import {GridItem as GridItemComponent, Container} from 'v2/components';
-
-const rangeControl = (max, min = 1) => ({
-    control: {
-        max,
-        min,
-        step: 1,
-        type: 'range',
-    },
-});
-
-const SHARED_CHILD_PROPS = {
-    isCompact: PropTypes.bool,
-};
-
-const spanMap = {
-    1: 12,
-    2: 6,
-    3: 4,
-    4: 3,
-};
-
-export default {
-    title: 'v2/Grid',
-    component: GridComponent,
-    subcomponents: {GridItemComponent},
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        isCompact: {
-            control: 'boolean',
-        },
-    },
-};
-const GridTemplate = (args, {hasDarkBackground}) => (
-    <Container>
-        <GridComponent
-            {...args}
-            bg={hasDarkBackground ? 'secondary.700' : 'secondary.default'}
-        >
-            {Array(12)
-                .fill(null)
-                .map((Item, index) => (
-                    <GridItemComponent key={`GridItem-${index}`} colSpan={1}>
-                        <Box
-                            h="20rem"
-                            bg={
-                                hasDarkBackground
-                                    ? 'primary.400'
-                                    : 'primary.default'
-                            }
-                        />
-                    </GridItemComponent>
-                ))}
-        </GridComponent>
-    </Container>
-);
-
-export const Grid = GridTemplate.bind({});
-
-const GridItemTemplate = ({isCompact, ...args}) => (
-    <Container>
-        <GridComponent bg="secondary.default" isCompact={isCompact}>
-            <GridItemComponent {...args}>
-                <Box h="20rem" bg="primary.default" />
-            </GridItemComponent>
-        </GridComponent>
-    </Container>
-);
-
-GridItemTemplate.propTypes = SHARED_CHILD_PROPS;
-
-export const GridItemSpan = GridItemTemplate.bind({});
-GridItemSpan.storyName = 'GridItem - span prop';
-GridItemSpan.argTypes = {
-    colSpan: rangeControl(12),
-};
-GridItemSpan.args = {
-    colSpan: 12,
-};
-
-export const GridItemStartEnd = GridItemTemplate.bind({});
-GridItemStartEnd.storyName = 'GridItem - start/end prop';
-GridItemStartEnd.argTypes = {
-    colStart: rangeControl(12),
-    colEnd: rangeControl(13, 2),
-};
-GridItemStartEnd.args = {
-    colStart: 1,
-    colEnd: 2,
-};
-
-const ColumnLayoutTemplate = ({numberOfColumns}) => (
-    <Container>
-        <GridComponent bg="secondary.default">
-            {Array(numberOfColumns)
-                .fill(null)
-                .map((item, index) => (
-                    <GridItemComponent
-                        key={`GridItem-${index}`}
-                        colSpan={spanMap[numberOfColumns]}
-                    >
-                        <Box h="20rem" bg="primary.default" />
-                    </GridItemComponent>
-                ))}
-        </GridComponent>
-    </Container>
-);
-
-ColumnLayoutTemplate.propTypes = {
-    numberOfColumns: PropTypes.number,
-};
-
-export const GridColumnLayout = ColumnLayoutTemplate.bind({});
-GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
-GridColumnLayout.argTypes = {
-    numberOfColumns: rangeControl(4),
-};
-GridColumnLayout.args = {
-    numberOfColumns: 2,
-};

package/styles/v2/components/Grid/Grid.styles.js

@@ -1,12 +0,0 @@
-// NOTE: considering adding a specifc prop for grid row padding
-export const baseStyles = {
-    gap: {
-        base: 4,
-        tablet: 8,
-    },
-    templateColumns: 'repeat(12, 1fr)',
-};
-
-export const compactStyles = {
-    gap: 4,
-};

package/styles/v2/components/Grid/GridItem.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {GridItem as ChakraGridItem} from '@chakra-ui/react';
-
-import styles from './GridItem.styles';
-
-const GridItem = forwardRef((props, ref) => (
-    <ChakraGridItem {...styles} {...props} ref={ref} />
-));
-
-export default GridItem;

package/styles/v2/components/Grid/GridItem.styles.js

@@ -1,8 +0,0 @@
-// NOTE: styles NOT in the Chakra's base styles do not need to explicitly export baseStyles
-// TODO: move this comment to the readme
-
-const styles = {
-    colSpan: 12,
-};
-
-export default styles;

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

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

package/styles/v2/components/Heading/Heading.jsx

@@ -1,23 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Heading as ChakraHeading} from '@chakra-ui/react';
-
-import {variants} from './Heading.styles';
-
-const Heading = forwardRef((props, ref) => (
-    <ChakraHeading
-        {...props}
-        ref={ref}
-        variant={props.variant || props.as || 'h2'}
-    />
-));
-
-Heading.propTypes = {
-    /** The React node that will render inside the element */
-    children: PropTypes.node,
-    /** Controls the underlying level of the html heading tag */
-    as: PropTypes.oneOf(Object.keys(variants)),
-    /** The styling that will be applied to the component regardless of the underlying html */
-    variant: PropTypes.oneOf(Object.keys(variants)),
-};
-export default Heading;

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

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import {variants} from './Heading.styles';
-
-import Component from './Heading';
-
-export default {
-    title: 'v2/Heading',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        as: {
-            control: {
-                type: 'select',
-                options: Object.keys(variants),
-            },
-        },
-        variant: {
-            control: {
-                type: 'select',
-                options: Object.keys(variants),
-            },
-        },
-        children: {
-            control: {
-                type: 'text',
-            },
-        },
-    },
-};
-
-const Template = props => <Component {...props} />;
-
-export const Heading = Template.bind({});
-
-Heading.args = {
-    children: 'Heading',
-};

package/styles/v2/components/Heading/Heading.styles.js

@@ -1,61 +0,0 @@
-import {fontSizes, fontWeights} from 'v2/theme/base/typography';
-
-const baseStyle = {
-    lineHeight: 1.5,
-    fontWeight: fontWeights.semibold,
-};
-
-export const variants = {
-    h1: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes['2xl'],
-            desktop: fontSizes['3xl'],
-        },
-    },
-    h2: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes.xl,
-            desktop: fontSizes['2xl'],
-        },
-    },
-    h3: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes.lg,
-            desktop: fontSizes.xl,
-        },
-    },
-    h4: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes.base,
-            desktop: fontSizes.lg,
-        },
-    },
-    h5: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes.base,
-            desktop: fontSizes.base,
-        },
-    },
-    h6: {
-        ...baseStyle,
-        fontSize: {
-            base: fontSizes.sm,
-            desktop: fontSizes.sm,
-        },
-    },
-};
-
-const defaultProps = {
-    variant: variants.h2,
-};
-
-export default {
-    variants,
-    baseStyle,
-    defaultProps,
-};

package/styles/v2/components/Icon/Icon.jsx

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

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import {S4BLogo, HeroCar, Shield} from '@spothero/icons';
-import Component from './Icon';
-
-export default {
-    title: 'v2/Icon',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const Template = props => (
-    <>
-        <Component
-            as={HeroCar}
-            color="primary.default"
-            height="24"
-            width="24"
-        />
-        <Component
-            as={S4BLogo}
-            color="gray.dark"
-            height="24"
-            width="24"
-            paddingLeft="16"
-        />
-        <Component
-            as={Shield}
-            color="green.default"
-            height="24"
-            width="24"
-            paddingLeft="16"
-        />
-    </>
-);
-
-export const Icon = Template.bind({});