@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/v1/components/Image/Image.jsx

@@ -1,175 +0,0 @@
-import omit from 'lodash/omit';
-import template from 'lodash/template';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import LazyLoad from 'react-lazy-load';
-import EnvironmentUtils from '@spothero/utils/environment';
-import PulseLoader from '../../../PulseLoader/PulseLoader';
-
-export default class Image extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** Whether to show the loader before the image is fully loaded. */
-        showLoader: PropTypes.bool,
-        /** Whether to use lazy loading for this image. */
-        lazyLoad: PropTypes.bool,
-        /** The offset from the bottom of the screen at which point the image gets lazy loaded when the page is scrolled to. */
-        lazyLoadOffsetVertical: PropTypes.number,
-        /** 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 image. Required if using a Cloudinary ID and highly suggested otherwise to help place the loader properly. */
-        width: PropTypes.number,
-        /** The height of the image. Required if using a Cloudinary ID and highly suggested otherwise to help place the loader properly. */
-        height: PropTypes.number,
-        /** The quality setting if this image uses a Cloudinary source ID. */
-        quality: PropTypes.number,
-        /** Optional function to execute when the image is loaded. */
-        onLoad: PropTypes.func,
-    };
-    static defaultProps = {
-        showLoader: true,
-        lazyLoadOffsetVertical: 100,
-        quality: 50,
-        cloudinaryCloudName: 'spothero',
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {cloudinaryImageId, cloudinaryTemplate} = props;
-
-        this._imageProps = omit(props, [
-            'className',
-            'showLoader',
-            'lazyLoad',
-            'lazyLoadOffsetVertical',
-            'cloudinaryCloudName',
-            'cloudinaryImageId',
-            'cloudinaryTemplate',
-            'quality',
-            'onLoad',
-        ]);
-
-        this.state = {
-            isLoaded: false,
-            hasCloudinarySrc: !(cloudinaryImageId || cloudinaryTemplate),
-        };
-    }
-
-    componentDidMount() {
-        const {
-            cloudinaryCloudName,
-            cloudinaryTemplate,
-            cloudinaryImageId,
-            width,
-            height,
-            quality,
-        } = this.props;
-
-        if (cloudinaryImageId || cloudinaryTemplate) {
-            // cloudinary image provided, create the source path
-
-            if (this.isCloudinaryImageAndInvalid()) {
-                return;
-            }
-
-            const tmpl = cloudinaryTemplate
-                ? cloudinaryTemplate
-                : `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}`;
-
-            this._imageProps.src = template(tmpl, {
-                interpolate: /{{([\s\S]+?)}}/g, // matches template vars in the format '{{ var }}' or '{{var}}'
-            })({
-                WIDTH: width,
-                HEIGHT: height,
-                QUALITY: quality,
-            });
-
-            // eslint-disable-next-line react/no-did-mount-set-state
-            this.setState({
-                hasCloudinarySrc: true,
-            });
-        }
-    }
-
-    _onLoaded = evt => {
-        const {onLoad} = this.props;
-
-        this.setState({
-            isLoaded: true,
-        });
-
-        if (onLoad) {
-            onLoad(evt);
-        }
-    };
-
-    isCloudinaryImageAndInvalid = () => {
-        const {
-            cloudinaryImageId,
-            cloudinaryTemplate,
-            width,
-            height,
-        } = this.props;
-
-        return (cloudinaryImageId || cloudinaryTemplate) && (!width || !height);
-    };
-
-    _renderImage() {
-        const {className, width, height, showLoader} = this.props;
-        const {isLoaded} = this.state;
-        const classes = classNames(className, 'Image-container');
-        const imgClasses = classNames('Image', {
-            'Image-loaded': isLoaded,
-        });
-
-        return (
-            <div
-                className={classes}
-                style={{maxWidth: width, maxHeight: height}}
-            >
-                {showLoader && !isLoaded && (
-                    <PulseLoader size={32} borderWidth={2} />
-                )}
-                <img
-                    {...this._imageProps}
-                    className={imgClasses}
-                    onLoad={this._onLoaded}
-                />
-            </div>
-        );
-    }
-
-    render() {
-        const {lazyLoad, lazyLoadOffsetVertical} = this.props;
-        const {hasCloudinarySrc} = this.state;
-
-        // the source is set after component is mounted in the case of Cloudinary images otherwise there are mis-matching
-        // DPR attributes in the url since node will always set the DPR to 1 and high density displays will have it set to 2+.
-        if (!hasCloudinarySrc) {
-            return null;
-        }
-
-        if (this.isCloudinaryImageAndInvalid()) {
-            return null;
-        }
-
-        if (lazyLoad) {
-            return (
-                <LazyLoad offsetVertical={lazyLoadOffsetVertical}>
-                    {this._renderImage()}
-                </LazyLoad>
-            );
-        }
-
-        return this._renderImage();
-    }
-}

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

@@ -1,113 +0,0 @@
-describe('<Image />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Image/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onImageLoaded = evt => {
-                            console.log('image loaded'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onImageLoaded').as(
-                            'imageLoaded'
-                        );
-                    },
-                });
-            });
-
-            it('Renders properly and passes props through', () => {
-                cy.get('.Image')
-                    .should('have.class', 'Image-loaded')
-                    .should('have.attr', 'alt', 'Placeholder image');
-            });
-
-            it('Calls onLoad() properly', () => {
-                cy.get('@imageLoaded')
-                    .should('be.called')
-                    .get('.Image')
-                    .should('have.class', 'Image-loaded');
-            });
-        });
-
-        context('Lazy Load', () => {
-            it('Lazy loads when the image comes into view', () => {
-                cy.visitStory('v1/Image/Display', 'LazyLoad', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onImageLoaded = evt => {
-                            console.log('image loaded'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onImageLoaded').as(
-                            'imageLoaded'
-                        );
-                    },
-                })
-                    .get('@imageLoaded')
-                    .should('not.be.called')
-                    .get('.Image')
-                    .should('not.exist')
-                    .get('.LazyLoad')
-                    .should('not.have.class', 'is-visible')
-                    .get('.LazyLoad')
-                    .scrollIntoView()
-                    .should('have.class', 'is-visible')
-                    .get('.Image')
-                    .should('exist')
-                    .get('@imageLoaded')
-                    .should('be.called');
-            });
-        });
-    });
-
-    context('Cloudinary', () => {
-        context('Source ID', () => {
-            it('Renders properly using a Cloudinary image source ID', () => {
-                cy.visitStory('v1/Image/Cloudinary', 'SourceId')
-                    .get('.Image-container')
-                    .should('have.class', 'Image-hertz')
-                    .get('.Image')
-                    .should('have.class', 'Image-loaded')
-                    .should('have.attr', 'alt', 'Cloudinary source ID')
-                    .should('have.attr', 'width', '186')
-                    .should('have.attr', 'height', '76')
-                    .should('have.attr', 'src')
-                    .then(src => {
-                        expect(src).to.contain('res.cloudinary.com/spothero/');
-                        expect(src).to.contain('c_fill');
-                        expect(src).to.contain('f_auto');
-                        expect(src).to.contain('fl_progressive');
-                        expect(src).to.contain('q_50');
-                    });
-            });
-        });
-
-        context('Template', () => {
-            it('Renders properly using a provided template', () => {
-                cy.visitStory('v1/Image/Cloudinary', 'Template')
-                    .get('.Image')
-                    .should('have.class', 'Image-loaded')
-                    .should('have.attr', 'alt', 'Cloudinary template')
-                    .should('have.attr', 'width', '132')
-                    .should('have.attr', 'height', '111')
-                    .should('have.attr', 'src')
-                    .then(src => {
-                        expect(src).to.contain('res.cloudinary.com/spothero/');
-                        expect(src).to.contain('c_fill');
-                        expect(src).to.contain('f_auto');
-                        expect(src).to.contain('w_132');
-                        expect(src).to.contain('h_111');
-                        expect(src).to.contain('q_100');
-                        expect(src).to.contain('html-emails/google');
-                    });
-            });
-        });
-
-        context('Dimensions Error', () => {
-            it('Does not render if width or height props are not passed', () => {
-                cy.visitStory('v1/Image/Cloudinary', 'DimensionsError')
-                    .get('.Image')
-                    .should('not.exist');
-            });
-        });
-    });
-});

package/styles/v1/components/Image/_Image.scss

@@ -1,24 +0,0 @@
-.Image-container {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-
-    .PulseLoader {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .PulseLoader-pulse {
-        @include center;
-    }
-}
-
-.Image {
-    width: 100%;
-    height: 100%;
-}

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import Image from '../Image';
-
-export default {
-    component: Image,
-    title: 'v1/Image/Cloudinary',
-};
-
-export const SourceId = () => {
-    return (
-        <Image
-            className="Image-hertz"
-            cloudinaryImageId="html-emails/partner-hertz"
-            width={186}
-            height={76}
-            alt="Cloudinary source ID"
-            onLoad={window.onImageLoaded} // eslint-disable-line react/jsx-handler-names
-        />
-    );
-};
-
-export const Template = () => {
-    return (
-        <Image
-            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"
-            width={132}
-            height={111}
-            quality={100}
-            alt="Cloudinary template"
-            onLoad={window.onImageLoaded} // eslint-disable-line react/jsx-handler-names
-        />
-    );
-};
-
-export const DimensionsError = () => {
-    return (
-        <Image 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" />
-    );
-};

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import Image from '../Image';
-
-export default {
-    component: Image,
-    title: 'v1/Image/Display',
-};
-
-export const Default = () => {
-    return (
-        <Image
-            src="http://placehold.it/350x200"
-            width={350}
-            height={200}
-            alt="Placeholder image"
-            onLoad={window.onImageLoaded} // eslint-disable-line react/jsx-handler-names
-        />
-    );
-};
-
-export const LazyLoad = () => {
-    return (
-        <>
-            <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 />
-            <Image
-                src="http://placehold.it/350x200"
-                lazyLoad
-                onLoad={window.onImageLoaded} // eslint-disable-line react/jsx-handler-names
-            />
-        </>
-    );
-};

package/styles/v1/components/Loader/Loader.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import deprecate from 'v1/utils/deprecate';
-
-deprecate({
-    name: 'Loader',
-    newName: 'Loader',
-    changes: [
-        '---- Changes in v2 component  ----',
-        '`borderWidth` is now `thickness`',
-        '`additionalMarkup` is no longer supported within this component',
-        '`className` is no longer explicitly supported, but a custom class could still be passed in if needed, but with the move to ChakraUI custom classes are generally not needed',
-        '---- Additional Information ----',
-        'new props are documented at: https://chakra-ui.com/docs/feedback/circular-progress',
-    ],
-});
-
-const Loader = ({className, size, borderWidth, additionalMarkup, ...attrs}) => {
-    const classes = classNames('Loader', className);
-
-    return (
-        <div className={classes} {...attrs}>
-            <div
-                className="Loader-spinner"
-                style={{
-                    width: size,
-                    height: size,
-                    borderWidth,
-                }}
-            />
-            {additionalMarkup}
-        </div>
-    );
-};
-
-Loader.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The diameter of the circle spinner. */
-    size: PropTypes.number,
-    /** The width of the border of the circle spinner. */
-    borderWidth: PropTypes.number,
-    /** Additional markup to place below the loading spinner. */
-    additionalMarkup: PropTypes.node,
-};
-
-Loader.defaultProps = {
-    size: 80,
-    borderWidth: 4,
-};
-
-export default Loader;

package/styles/v1/components/Loader/Loader.spec.js

@@ -1,67 +0,0 @@
-describe('<Loader />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Has default size and border-width', () => {
-                cy.visitStory('v1/Loader/Display', 'Default')
-                    .get('.Loader-spinner')
-                    .should('have.css', 'width', '80px')
-                    .and('have.css', 'height', '80px')
-                    .and('have.css', 'border-width', '4px');
-            });
-        });
-
-        context('Size', () => {
-            it('Has height and width determined by size prop, and default border-width', () => {
-                cy.visitStory('v1/Loader/Display', 'Size')
-                    .get('.Loader-spinner')
-                    .should('have.css', 'width', '300px')
-                    .and('have.css', 'height', '300px')
-                    .and('have.css', 'border-width', '4px');
-            });
-        });
-
-        context('Border Width', () => {
-            it('Has border-width determined by border-width prop, and default height/width', () => {
-                cy.visitStory('v1/Loader/Display', 'BorderWidth')
-                    .get('.Loader-spinner')
-                    .should('have.css', 'border-width', '25px')
-                    .and('have.css', 'width', '80px')
-                    .and('have.css', 'height', '80px');
-            });
-        });
-
-        context('Additional Markup', () => {
-            it('Displays additional markup (nodes) that was passed in', () => {
-                cy.visitStory('v1/Loader/Display', 'AdditionalMarkup')
-                    .get('.Loader')
-                    .contains('Here is some additional markup')
-                    .get('.Loader')
-                    .find('h1')
-                    .find('span');
-            });
-
-            it('Displays additional markup (text) that was passed in', () => {
-                cy.visitStory('v1/Loader/Display', 'AdditionalMarkupText')
-                    .get('.Loader')
-                    .contains('Just add text!');
-            });
-        });
-
-        context('Custom Classes', () => {
-            it('Applies custom classes to loader', () => {
-                cy.visitStory('v1/Loader/Display', 'CustomClass')
-                    .get('.Loader')
-                    .should('have.class', 'custom-class1')
-                    .and('have.class', 'custom-class2');
-            });
-        });
-
-        context('Custom Props', () => {
-            it('Applies custom props to loader', () => {
-                cy.visitStory('v1/Loader/Display', 'CustomProps')
-                    .get('.Loader')
-                    .should('have.attr', 'role', 'status');
-            });
-        });
-    });
-});

package/styles/v1/components/Loader/_Loader.scss

@@ -1,18 +0,0 @@
-@keyframes load8 {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.Loader-spinner {
-    border-top: 4px solid $color-dashboard;
-    border-right: 4px solid $color-dashboard;
-    border-bottom: 4px solid $color-go;
-    border-left: 4px solid $color-go;
-    border-radius: 50%;
-    transform: translateZ(0);
-    animation: load8 1.1s infinite linear;
-}

package/styles/v1/components/Loader/stories/Display.stories.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import Loader from '../Loader';
-
-export default {
-    component: Loader,
-    title: 'v1/Loader/Display',
-};
-
-export const Default = () => {
-    return <Loader />;
-};
-
-export const AdditionalMarkup = () => {
-    return (
-        <Loader
-            additionalMarkup={
-                <h1>
-                    Here is some <span>additional markup</span>
-                </h1>
-            }
-        />
-    );
-};
-
-export const AdditionalMarkupText = () => {
-    return <Loader additionalMarkup="Just add text!" />;
-};
-
-export const BorderWidth = () => {
-    return <Loader borderWidth={25} />;
-};
-
-export const CustomClass = () => {
-    return (
-        <Loader
-            className="custom-class1 custom-class2"
-            size={30}
-            borderWidth={5}
-            additionalMarkup="I have custom classes"
-        />
-    );
-};
-
-export const Size = () => {
-    return <Loader size={300} />;
-};
-
-export const CustomProps = () => {
-    return (
-        <Loader
-            role="status"
-            additionalMarkup="I support passing in custom attributes"
-        />
-    );
-};