@spothero/ui 15.1.0 → 15.1.1

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.spec.js

@@ -1,213 +0,0 @@
-describe('<GooglePlacesSearchInput />', () => {
-    const testInput = 'mil';
-    const createAutocompleteSpy = contentWindow => {
-        const gmaps = contentWindow.google.maps;
-        const autocompleteService = new gmaps.places.AutocompleteService();
-
-        cy.spy(
-            Object.getPrototypeOf(autocompleteService),
-            'getPlacePredictions'
-        ).as('searchRequest');
-    };
-
-    context('Display', () => {
-        context('Default', () => {
-            it('Calls Google AutocompleteService with default search parameters', () => {
-                const defaultCountry = {
-                    country: 'us',
-                };
-
-                cy.visitStory('v1/GooglePlacesSearchInput/Display', 'Default', {
-                    onLoad(contentWindow) {
-                        createAutocompleteSpy(contentWindow);
-                    },
-                })
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('@searchRequest')
-                    .should('be.calledWithMatch', val => {
-                        return cy.expect(val.input).to.equal(testInput);
-                    })
-                    .should('be.calledWithMatch', val => {
-                        return cy
-                            .expect(val.componentRestrictions)
-                            .to.eql(defaultCountry);
-                    });
-            });
-        });
-
-        context('Custom Footer', () => {
-            it('Has a custom PoweredByGoogle footer', () => {
-                cy.visitStory('v1/GooglePlacesSearchInput/Display', 'Footer')
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get(
-                        '.GooglePlacesSearchInput .AutoSuggestInput-suggestions'
-                    )
-                    .find('.GooglePowered')
-                    .should('have.class', 'custom-footer');
-            });
-        });
-    });
-
-    context('Search', () => {
-        describe('Bounds', () => {
-            it('Applies bounds to autocomplete request', () => {
-                const testBoundsJSON = {
-                    south: 41.7090772,
-                    west: -87.7946572,
-                    north: 42.2970963,
-                    east: -87.8287819,
-                };
-
-                cy.visitStory('v1/GooglePlacesSearchInput/Search', 'Bounds', {
-                    onLoad(contentWindow) {
-                        createAutocompleteSpy(contentWindow);
-                    },
-                })
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('@searchRequest')
-                    .should('be.calledOnce')
-                    .should('be.calledWithMatch', val => {
-                        return cy
-                            .expect(val.bounds.toJSON())
-                            .to.eql(testBoundsJSON);
-                    });
-            });
-        });
-
-        describe('Types', () => {
-            it('Applies types to autocomplete request', () => {
-                const testTypes = ['(cities)'];
-
-                cy.visitStory('v1/GooglePlacesSearchInput/Search', 'Types', {
-                    onLoad(contentWindow) {
-                        createAutocompleteSpy(contentWindow);
-                    },
-                })
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('@searchRequest')
-                    .should('be.calledOnce')
-                    .should('be.calledWithMatch', val => {
-                        return cy.expect(val.types).to.eql(testTypes);
-                    });
-            });
-        });
-
-        describe('Country', () => {
-            it('Applies a country to autocomplete request', () => {
-                const testCountry = {
-                    country: 'ca',
-                };
-
-                cy.visitStory('v1/GooglePlacesSearchInput/Search', 'Country', {
-                    onLoad(contentWindow) {
-                        createAutocompleteSpy(contentWindow);
-                    },
-                })
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('@searchRequest')
-                    .should('be.calledOnce')
-                    .should('be.calledWithMatch', val => {
-                        return cy
-                            .expect(val.componentRestrictions)
-                            .to.eql(testCountry);
-                    });
-            });
-        });
-
-        describe('Multi Country', () => {
-            it('Applies an array of countries to autocomplete request', () => {
-                const testCountries = {
-                    country: ['ca', 'fr'],
-                };
-
-                cy.visitStory(
-                    'v1/GooglePlacesSearchInput/Search',
-                    'MultiCountry',
-                    {
-                        onLoad(contentWindow) {
-                            createAutocompleteSpy(contentWindow);
-                        },
-                    }
-                )
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('@searchRequest')
-                    .should('be.calledOnce')
-                    .should('be.calledWithMatch', val => {
-                        return cy
-                            .expect(val.componentRestrictions)
-                            .to.eql(testCountries);
-                    });
-            });
-        });
-    });
-
-    context('Methods', () => {
-        describe('On Clear', () => {
-            it('Executes the method when the input is cleared', () => {
-                cy.visitStory('v1/GooglePlacesSearchInput/Methods', 'OnClear', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onGooglePlacesSearchInputClear = evt => {
-                            console.log(`onGooglePlacesSearchInputClear`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(
-                            contentWindow,
-                            'onGooglePlacesSearchInputClear'
-                        ).as('onGooglePlacesSearchInputClear');
-                    },
-                })
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get('.AutoSuggestInput-clear')
-                    .click()
-                    .get('@onGooglePlacesSearchInputClear')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Suggestion Select', () => {
-            it('Executes the method when a suggestion is selected', () => {
-                cy.visitStory(
-                    'v1/GooglePlacesSearchInput/Methods',
-                    'OnSuggestionSelect',
-                    {
-                        onBeforeLoad: contentWindow => {
-                            contentWindow.onGooglePlacesSearchInputSuggest = evt => {
-                                console.log(`onGooglePlacesSearchInputSuggest`); // eslint-disable-line no-console
-                            };
-
-                            cy.stub(
-                                contentWindow,
-                                'onGooglePlacesSearchInputSuggest'
-                            ).as('onGooglePlacesSearchInputSuggest');
-                        },
-                    }
-                )
-                    .get('.GooglePlacesSearchInput')
-                    .as('gpsiInput')
-                    .fillTextInput({alias: 'gpsiInput', text: testInput})
-                    .get(
-                        '.GooglePlacesSearchInput .AutoSuggestInput-suggestions'
-                    )
-                    .find('.AutoSuggestInput-item')
-                    .first()
-                    .click()
-                    .get('@onGooglePlacesSearchInputSuggest')
-                    .should('be.called');
-            });
-        });
-    });
-});

package/styles/GooglePlacesSearchInput/PoweredByGoogle.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Image from 'v1/components/Image/Image';
-
-const PoweredByGoogle = ({
-    className,
-    cloudinaryImageId,
-    imageWidth,
-    imageHeight,
-}) => {
-    const classes = classNames('PoweredByGoogle', className);
-
-    return (
-        <div className={classes}>
-            <Image
-                className="PoweredByGoogleImage"
-                cloudinaryImageId={cloudinaryImageId}
-                width={imageWidth}
-                height={imageHeight}
-            />
-        </div>
-    );
-};
-
-PoweredByGoogle.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The image ID that is stored in Cloudinary for this image. */
-    cloudinaryImageId: PropTypes.string.isRequired,
-    /** The width to make the image transformation (typically half of the 2x source width for crisp images). */
-    imageWidth: PropTypes.number,
-    /** The height to make the image transformation (typically half of the 2x source height for crisp images). */
-    imageHeight: PropTypes.number,
-};
-
-PoweredByGoogle.defaultProps = {
-    cloudinaryImageId: 'front-end/powered-by-google',
-    imageWidth: 144,
-    imageHeight: 18,
-};
-
-export default PoweredByGoogle;

package/styles/GooglePlacesSearchInput/index.js

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

package/styles/HorizontalRule/HorizontalRule.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const HorizontalRule = ({className, children, lineStyle, position}) => {
-    const classes = classNames(
-        'HorizontalRule',
-        `HorizontalRule-${lineStyle}`,
-        `HorizontalRule-${position}`,
-        className
-    );
-
-    return (
-        <div className={classes}>
-            <span>{children}</span>
-        </div>
-    );
-};
-
-HorizontalRule.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** An optional node to render inside of the label. */
-    children: PropTypes.node,
-    /** The line style of the rule. */
-    lineStyle: PropTypes.oneOf(['solid', 'dashed', 'dotted']),
-    /** The position of the node within the rule. */
-    position: PropTypes.oneOf(['center', 'left', 'right']),
-};
-
-HorizontalRule.defaultProps = {
-    lineStyle: 'solid',
-    position: 'center',
-};
-
-export default HorizontalRule;

package/styles/HorizontalRule/HorizontalRule.spec.js

@@ -1,94 +0,0 @@
-describe('<HorizontalRule />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Has default styles', () => {
-                cy.visitStory('v1/HorizontalRule/Display', 'Default')
-                    .get('.HorizontalRule')
-                    .should('have.class', 'HorizontalRule-solid')
-                    .and('have.class', 'HorizontalRule-center');
-            });
-        });
-
-        context('WithChildren', () => {
-            it('Contains the children that were passed in', () => {
-                cy.visitStory('v1/HorizontalRule/Display', 'WithChildren')
-                    .get('.HorizontalRule')
-                    .contains('content and more content')
-                    .get('.HorizontalRule')
-                    .find('.styled-span');
-            });
-        });
-    });
-
-    context('Position', () => {
-        context('Center', () => {
-            it('Has center styles', () => {
-                cy.visitStory('v1/HorizontalRule/Position', 'Center')
-                    .get('.HorizontalRule')
-                    .should(
-                        'have.class',
-                        'HorizontalRule-dashed',
-                        'HorizontalRule-center'
-                    );
-            });
-        });
-
-        context('Left', () => {
-            it('Has left styles', () => {
-                cy.visitStory('v1/HorizontalRule/Position', 'Left')
-                    .get('.HorizontalRule')
-                    .should(
-                        'have.class',
-                        'HorizontalRule-dotted',
-                        'HorizontalRule-left'
-                    );
-            });
-        });
-
-        context('Right', () => {
-            it('Has right styles', () => {
-                cy.visitStory('v1/HorizontalRule/Position', 'Right')
-                    .get('.HorizontalRule')
-                    .should(
-                        'have.class',
-                        'HorizontalRule-solid',
-                        'HorizontalRule-right'
-                    );
-            });
-        });
-    });
-
-    context('Styles', () => {
-        context('CustomClass', () => {
-            it('Has custom styles', () => {
-                cy.visitStory('v1/HorizontalRule/Styles', 'CustomClass')
-                    .get('.HorizontalRule')
-                    .should('have.class', 'custom-class1', 'custom-class2');
-            });
-        });
-
-        context('Dashed', () => {
-            it('Has dashed styles', () => {
-                cy.visitStory('v1/HorizontalRule/Styles', 'Dashed')
-                    .get('.HorizontalRule')
-                    .should('have.class', 'HorizontalRule-dashed');
-            });
-        });
-
-        context('Dotted', () => {
-            it('Has dotted styles', () => {
-                cy.visitStory('v1/HorizontalRule/Styles', 'Dotted')
-                    .get('.HorizontalRule')
-                    .should('have.class', 'HorizontalRule-dotted');
-            });
-        });
-
-        context('Solid', () => {
-            it('Has solid styles', () => {
-                cy.visitStory('v1/HorizontalRule/Styles', 'Solid')
-                    .get('.HorizontalRule')
-                    .should('have.class', 'HorizontalRule-solid');
-            });
-        });
-    });
-});

package/styles/Label/Label.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Label = ({className, children, ...additionalProps}) => {
-    const classes = classNames('Label', className);
-
-    return (
-        <label className={classes} {...additionalProps}>
-            {children}
-        </label>
-    );
-};
-
-Label.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The node to render inside of the label. */
-    children: PropTypes.node.isRequired,
-};
-
-export default Label;

package/styles/Label/Label.spec.js

@@ -1,11 +0,0 @@
-describe('<Label />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Renders correctly', () => {
-                cy.visitStory('v1/Label/Display', 'Default')
-                    .get('.Label')
-                    .contains('Label Text');
-            });
-        });
-    });
-});

package/styles/Notification/Notification.jsx

@@ -1,117 +0,0 @@
-import bind from 'lodash/bind';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {window} from 'ssr-window';
-import IconCheckCircle from '@spothero/icons/check-circle';
-import IconExclamationCircle from '@spothero/icons/exclamation-circle';
-import IconExclamationTriangle from '@spothero/icons/exclamation-triangle';
-import IconHeroCar from '@spothero/icons/hero-car';
-import IconTimes from '@spothero/icons/times';
-import DOMUtils from '@spothero/utils/dom';
-import Button from 'v1/components/Button/Button';
-import NotificationPropTypes from './NotificationPropTypes';
-
-export default class Notification extends Component {
-    static propTypes = {
-        ...NotificationPropTypes,
-        // onRemove is added by the NotificationContainer for internal use and should not be documented
-        onRemove: PropTypes.func.isRequired,
-    };
-    static defaultProps = {
-        type: 'info',
-        duration: 3000,
-        showClose: true,
-        autoClose: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {duration, autoClose} = props;
-
-        if (autoClose) {
-            this._hideTimeout = window.setTimeout(
-                bind(this._hide, this),
-                duration
-            );
-        }
-    }
-
-    componentDidMount() {
-        window.setTimeout(() => {
-            DOMUtils.addClass(this._notification, 'Notification-showing');
-        }, 100);
-    }
-
-    _onHideClick = evt => {
-        this._hide();
-    };
-
-    _hide() {
-        const {onHidden, onRemove} = this.props;
-
-        if (this._hideTimeout) {
-            window.clearTimeout(this._hideTimeout);
-        }
-
-        DOMUtils.removeClass(this._notification, 'Notification-showing');
-
-        window.setTimeout(() => {
-            DOMUtils.removeClass(this._notification, 'Notification-showing');
-
-            if (onHidden) {
-                onHidden(this.props);
-            }
-
-            onRemove();
-        }, 500);
-    }
-
-    _renderIcon() {
-        const {type} = this.props;
-
-        switch (type) {
-            case 'success':
-                return <IconCheckCircle />;
-            case 'warning':
-                return <IconExclamationTriangle />;
-            case 'error':
-                return <IconExclamationCircle />;
-            case 'info':
-            default:
-                return <IconHeroCar />;
-        }
-    }
-
-    render() {
-        const {className, type, message, showClose} = this.props;
-        const classes = classNames(
-            'Notification',
-            `Notification-${type}`,
-            className
-        );
-
-        return (
-            <div
-                className={classes}
-                ref={node => {
-                    this._notification = node;
-                }}
-            >
-                <div className="Notification-content-container container">
-                    {this._renderIcon()}
-                    <div className="Notification-content">{message}</div>
-                    {showClose && (
-                        <Button
-                            className="Notification-hide"
-                            onClick={this._onHideClick}
-                        >
-                            <IconTimes className="Icon-cancel" />
-                        </Button>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}