@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/v2/components/Image/Image.jsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Image as ChakraImage, Img as ChakraImg} from '@chakra-ui/react';
-import EnvironmentUtils from '@spothero/utils/environment';
-import template from 'lodash/template';
-
-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_${
-        EnvironmentUtils.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/v2/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/v2/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/v2/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/v2/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/v2/components/Input/index.js

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

package/styles/v2/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/v2/components/Link/Link.jsx

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

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

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import {Box} from '@chakra-ui/react';
-import ShareIcon from '@spothero/icons/share';
-
-import Text from 'v2/components/Text/Text';
-import Component from 'v2/components/Link/Link';
-
-export default {
-    title: 'v2/Link',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const OverviewTemplate = (props, {hasDarkBackground}) => (
-    <Box>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            A link with{' '}
-            <Component variant={hasDarkBackground ? 'onDark' : 'standard'}>
-                no href
-            </Component>{' '}
-            is only styled.
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Links can be linked to{' '}
-            <Component
-                href="#"
-                isExternal
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                External Pages
-            </Component>{' '}
-            and will have <code>target=&quot;_blank&quot;</code> and{' '}
-            <code>rel=&quot;noopener noreferrer&quot;</code> appended to them.
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Links can have{' '}
-            <Component
-                href="#"
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                icons inline <ShareIcon width="1rem" />
-            </Component>
-        </Text>
-        <Text
-            color={
-                hasDarkBackground ? 'text.primary.dark' : 'text.primary.light'
-            }
-        >
-            Using the <code>as</code> prop, you can utilize a routing library,
-            like{' '}
-            <Component
-                href="https://chakra-ui.com/docs/navigation/link#usage-with-routing-library"
-                isExternal
-                variant={hasDarkBackground ? 'onDark' : 'standard'}
-            >
-                React Router
-            </Component>{' '}
-            and it will replace the <code>a</code> tag with it&apos;s{' '}
-            <code>Link</code>.
-        </Text>
-    </Box>
-);
-
-export const Overview = OverviewTemplate.bind({});
-Overview.parameters = {
-    importBy: 'Link',
-};

package/styles/v2/components/Link/Link.styles.js

@@ -1,38 +0,0 @@
-const baseStyle = {
-    transition: `all 0.15s ease-out`,
-    color: 'text.link.light',
-    fontWeight: 'semibold',
-    _hover: {
-        color: 'primary.600',
-    },
-    _focus: {
-        boxShadow: 'outline',
-    },
-    '& svg': {
-        d: 'inline-block',
-        verticalAlign: 'initial',
-    },
-};
-
-const linkOnDark = {
-    color: 'text.link.dark',
-    _hover: {
-        color: 'text.link.dark',
-        opacity: '.8',
-    },
-};
-
-export const variants = {
-    standard: baseStyle,
-    onDark: linkOnDark,
-};
-
-const defaultProps = {
-    variant: 'standard',
-};
-
-export default {
-    baseStyle,
-    variants,
-    defaultProps,
-};

package/styles/v2/components/List/List.jsx

@@ -1,57 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {forwardRef} from 'react';
-import {List as ChakraList} from '@chakra-ui/react';
-
-const unorderedProps = {
-    as: 'ul',
-    styleType: 'disc',
-};
-
-const orderedProps = {
-    as: 'ol',
-    styleType: 'decimal',
-};
-
-const STYLE_POSITIONS = {
-    unset: 'unset',
-    revert: 'revert',
-    inside: 'inside',
-    outside: 'outside',
-    initial: 'initial',
-    inherit: 'inherit',
-};
-
-const TYPES = {
-    ordered: 'ordered',
-    unstyled: 'unstyled',
-    unordered: 'unordered',
-};
-
-const getListProps = type => {
-    switch (type) {
-        case TYPES.ordered:
-            return orderedProps;
-        case TYPES.unordered:
-            return unorderedProps;
-        default:
-            return;
-    }
-};
-
-const List = forwardRef(({type, ...props}, ref) => (
-    <ChakraList {...getListProps(type)} {...props} ref={ref} />
-));
-
-List.defaultProps = {
-    type: TYPES.unstyled,
-    stylePosition: STYLE_POSITIONS.inside,
-};
-
-List.propTypes = {
-    /** The position of the list style */
-    stylePosition: PropTypes.oneOf(Object.keys(STYLE_POSITIONS)),
-    /** Changes the underlying markdown to be an ordered or unorderd list, (unstyled will render a ul by default) */
-    type: PropTypes.oneOf(Object.keys(TYPES)),
-};
-
-export default List;