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

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

@@ -1,61 +0,0 @@
-import {fontSizes, fontWeights} from '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/components/Icon/Icon.jsx

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

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

package/styles/components/Image/Image.jsx

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Image as ChakraImage, Img as ChakraImg} from '@chakra-ui/react';
-import template from 'lodash/template';
-import {window as ssrWindow} from 'ssr-window';
-
-/**
- * Determines whether the display has a high density.
- * @static
- * @function isHighDensityDisplay
- * @example
- * EnvironmentUtils.isHighDensityDisplay();
- * @returns {Boolean} - Whether the display is high density.
- */
-export const isHighDensityDisplay = () => {
-    return (
-        (ssrWindow.matchMedia &&
-            (ssrWindow.matchMedia(
-                'only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)'
-            ).matches ||
-                ssrWindow.matchMedia(
-                    'only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)'
-                ).matches)) ||
-        (ssrWindow.devicePixelRatio && ssrWindow.devicePixelRatio > 1.3)
-    );
-};
-
-const buildCloudinarySrc = ({
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality,
-}) => {
-    const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${
-        isHighDensityDisplay() ? 2 : 1
-    },h_$h,q_$q,w_$w/${cloudinaryImageId}`;
-    const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
-
-    return template(tmpl, {
-        interpolate: /{{([\s\S]+?)}}/g, // matches template vars in the format '{{ var }}' or '{{var}}'
-    })({
-        WIDTH: htmlWidth,
-        HEIGHT: htmlHeight,
-        QUALITY: quality,
-    });
-};
-
-const Image = ({
-    isSSR,
-    cloudinaryImageId,
-    cloudinaryTemplate,
-    cloudinaryCloudName,
-    htmlWidth,
-    htmlHeight,
-    quality,
-    lazyLoad,
-    ...otherProps
-}) => {
-    const hasValidCloudinarySrc =
-        (cloudinaryImageId || cloudinaryTemplate) &&
-        Boolean(htmlWidth) &&
-        Boolean(htmlHeight);
-    let cloudinarySrc;
-
-    if (hasValidCloudinarySrc) {
-        cloudinarySrc = buildCloudinarySrc({
-            cloudinaryImageId,
-            cloudinaryTemplate,
-            cloudinaryCloudName,
-            htmlWidth,
-            htmlHeight,
-            quality,
-        });
-    }
-
-    const imageProps = {
-        ...otherProps,
-        src: cloudinarySrc || otherProps.src,
-        htmlWidth,
-        htmlHeight,
-        ...(lazyLoad && {loading: 'lazy'}),
-    };
-
-    if (isSSR) {
-        return <ChakraImg {...imageProps} />;
-    } else {
-        return <ChakraImage {...imageProps} />;
-    }
-};
-
-Image.propTypes = {
-    /** If true, use the image directly without client side checks. */
-    isSSR: PropTypes.bool,
-    /** The Cloudinary account that this image is stored under. */
-    cloudinaryCloudName: PropTypes.string,
-    /** The image ID that is stored in Cloudinary for this image. Will be used to replace the source path. */
-    cloudinaryImageId: PropTypes.string,
-    /** The template URL to use to create the source path from. Replaceable values are {{WIDTH}}, {{HEIGHT}}, and {{QUALITY}}. */
-    cloudinaryTemplate: PropTypes.string,
-    /** The width of the native HTML image, in pixels. Required if using a Cloudinary ID or Template. */
-    htmlWidth: PropTypes.number,
-    /** The height of the native HTML image, in pixels. Required if using a Cloudinary ID or Template. */
-    htmlHeight: PropTypes.number,
-    /** The quality setting if this image uses a Cloudinary ID or Template. */
-    quality: PropTypes.number,
-    /** Whether to use lazy loading for this image. */
-    lazyLoad: PropTypes.bool,
-};
-
-Image.defaultProps = {
-    isSSR: false,
-    quality: 50,
-    cloudinaryCloudName: 'spothero',
-};
-
-export default Image;

package/styles/components/Image/Image.spec.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import {render as rtlRender, screen, waitFor} from '@testing-library/react';
-import Image from './Image';
-
-const defaultSrc = 'http://placehold.it/350x200';
-
-const render = props => {
-    rtlRender(<Image {...props} />);
-};
-
-describe('Image', () => {
-    describe('basic behavior', () => {
-        it('displays an image', () => {
-            render({
-                src: defaultSrc,
-                alt: 'An image',
-            });
-
-            waitFor(() => {
-                expect(screen.getByRole('img')).toHaveAttribute(
-                    'src',
-                    defaultSrc
-                );
-            });
-        });
-
-        it('displays an image (SSR)', () => {
-            render({
-                src: defaultSrc,
-                alt: 'An image',
-                isSSR: true,
-            });
-
-            expect(screen.getByRole('img')).toHaveAttribute('src', defaultSrc);
-        });
-    });
-
-    describe('Cloudinary properties', () => {
-        it('correctly sets image src when a Cloudinary image template is passed in', () => {
-            render({
-                cloudinaryTemplate:
-                    'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
-                htmlWidth: 250,
-                htmlHeight: 500,
-                quality: 75,
-                alt: 'An image',
-            });
-            waitFor(() => {
-                expect(screen.getByRole('img')).toHaveAttribute(
-                    'src',
-                    'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_75/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google'
-                );
-            });
-        });
-
-        it('correctly sets image src when a Cloudinary image id is passed in', () => {
-            render({
-                cloudinaryImageId: 'html-emails/partner-hertz',
-                htmlWidth: 250,
-                htmlHeight: 500,
-                alt: 'An image',
-                isSSR: true,
-            });
-
-            expect(screen.getByRole('img')).toHaveAttribute(
-                'src',
-                'https://res.cloudinary.com/spothero/image/upload/$w_250,$h_500,$q_50/c_fill,f_auto,fl_progressive,dpr_1,h_$h,q_$q,w_$w/html-emails/partner-hertz'
-            );
-        });
-
-        it('does not set in image src when invalid set of Cloudinary props is passed in', () => {
-            render({
-                cloudinaryImageId: 'html-emails/partner-hertz',
-                alt: 'An image',
-                isSSR: true,
-            });
-
-            waitFor(() => {
-                expect(screen.getByRole('img')).not.toHaveAttribute('src');
-            });
-        });
-    });
-
-    describe('Lazy loading', () => {
-        it('correctly sets image loading attribute to lazy when lazyLoad prop is true', () => {
-            render({
-                src: defaultSrc,
-                alt: 'An image',
-                lazyLoad: true,
-            });
-
-            waitFor(() => {
-                expect(screen.getByRole('img')).toHaveAttribute(
-                    'loading',
-                    'lazy'
-                );
-            });
-        });
-    });
-});

package/styles/components/Image/Image.stories.js

@@ -1,142 +0,0 @@
-import React from 'react';
-import Component from './Image';
-
-export default {
-    title: 'v2/Image',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        importBy: 'Image',
-    },
-};
-
-const Template = props => <Component {...props} />;
-const LazyLoadTemplate = props => (
-    <>
-        <p>Scroll down to see lazy loaded image in action...</p>
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <Component {...props} />
-    </>
-);
-
-export const DefaultImage = Template.bind({});
-DefaultImage.args = {
-    src: 'http://placehold.it/350x200',
-    width: 350,
-    height: 200,
-    alt: 'Placeholder image',
-};
-
-export const StyledImage = Template.bind({});
-StyledImage.args = {
-    src: 'http://placehold.it/350x200',
-    alt: 'Placeholder image',
-    padding: 4,
-    borderColor: 'green.default',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    height: {
-        base: 'auto',
-        tablet: 52,
-    },
-    width: {
-        base: 'auto',
-        tablet: 52,
-    },
-};
-
-export const SSRImg = Template.bind({});
-SSRImg.args = {
-    src: 'http://placehold.it/350x200',
-    width: 350,
-    height: 200,
-    alt: 'SSR image',
-};
-
-export const CloudinaryImageId = Template.bind({});
-CloudinaryImageId.args = {
-    cloudinaryImageId: 'html-emails/partner-hertz',
-    htmlWidth: 186,
-    htmlHeight: 76,
-    quality: 50,
-    alt: 'Cloudinary image ID',
-};
-
-export const CloudinaryImageTemplate = Template.bind({});
-CloudinaryImageTemplate.args = {
-    cloudinaryTemplate:
-        'https://res.cloudinary.com/spothero/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,h_$h,q_$q,w_$w/html-emails/google',
-    htmlWidth: 132,
-    htmlHeight: 111,
-    quality: 80,
-    alt: 'Cloudinary image template',
-};
-
-export const LazyLoadImage = LazyLoadTemplate.bind({});
-LazyLoadImage.args = {
-    src:
-        'https://res.cloudinary.com/spothero/image/upload/$w_1024,$h_704,$q_50/c_fill,f_auto,h_$h,q_$q,w_$w,x_375,y_250/v1577978927/rzm2xqhtgqxfv3isxmyy.jpg',
-    width: 350,
-    height: 200,
-    alt: 'Placeholder image',
-    lazyLoad: true,
-};

package/styles/components/Input/Input.jsx

@@ -1,51 +0,0 @@
-import React, {forwardRef} from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-import {Input as ChakraInput} from '@chakra-ui/react';
-import FormControl from '../FormControl/FormControl';
-
-const Input = forwardRef(
-    (
-        {
-            label,
-            helperText,
-            errorMessage,
-            isInvalid,
-            isDisabled,
-            isRequired,
-            isOptional,
-            ...props
-        },
-        ref
-    ) => {
-        const classes = cn({'FormElement-contains-error': isInvalid});
-
-        return (
-            <FormControl
-                isInvalid={isInvalid}
-                isDisabled={isDisabled}
-                isRequired={isRequired}
-                isOptional={isOptional}
-                errorMessage={errorMessage}
-                helperText={helperText}
-                label={label}
-                inputId={props.id}
-            >
-                <ChakraInput ref={ref} className={classes} {...props} />
-            </FormControl>
-        );
-    }
-);
-
-Input.propTypes = {
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isRequired: PropTypes.bool,
-    isOptional: PropTypes.bool,
-};
-
-export default Input;

package/styles/components/Input/Input.stories.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Input';
-import {useTheme} from '@chakra-ui/react';
-
-export default {
-    title: 'v2/Input',
-    component: Component,
-    parameters: {
-        importBy: 'Input',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/components/input',
-    },
-};
-
-const InputTemplate = props => (
-    <Component variant="outline" maxWidth="200px" {...props} />
-);
-
-InputTemplate.propTypes = {
-    placeholder: PropTypes.string,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isReadOnly: PropTypes.bool,
-    isOptional: PropTypes.bool,
-};
-
-export const Input = InputTemplate.bind({});
-
-Input.argTypes = {
-    placeholder: {
-        control: {type: 'text'},
-    },
-    label: {
-        control: {type: 'text'},
-    },
-    helperText: {
-        control: {type: 'text'},
-    },
-    errorMessage: {
-        control: {type: 'text'},
-    },
-};
-
-Input.args = {
-    id: 'input_id',
-    placeholder: 'Placeholder text',
-    label: 'Label',
-    helperText: 'Helper text',
-    errorMessage: 'Error message',
-    isInvalid: false,
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    isOptional: false,
-};

package/styles/components/Input/index.js

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

package/styles/components/Input/styles/index.js

@@ -1,49 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    field: {
-        _placeholder: {
-            color: 'text.secondary.light',
-            fontWeight: 'normal',
-            _disabled: {color: 'text.secondary.light', opacity: 1},
-        },
-    },
-};
-
-const variants = {
-    outline: {
-        field: {
-            border: '1px solid',
-            borderColor: 'gray.200',
-            fontSize: 'base',
-            paddingLeft: 3,
-            paddingRight: 3,
-            bg: 'inherit',
-            fontWeight: 'normal',
-            boxShadow: 'none !important',
-            _placeholder: {color: 'text.secondary.light', fontWeight: 'normal'},
-            _focus: {
-                borderColor: 'brandBlue',
-            },
-            _hover: {borderColor: 'gray.300'},
-            _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
-            _disabled: {
-                backgroundColor: 'gray.50',
-                opacity: 1,
-                cursor: 'not-allowed',
-            },
-            _invalid: {
-                borderColor: 'error',
-                _focus: {
-                    borderColor: 'error',
-                },
-            },
-        },
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Input, {
-    baseStyle,
-    variants,
-});

package/styles/components/Link/Link.jsx

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