@spothero/ui 15.1.0 → 15.1.2

package/styles/Form/Form.jsx

@@ -1,151 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import serialize from 'form-serialize';
-import AnimationUtils from '@spothero/utils/animation';
-import DOMUtils from '@spothero/utils/dom';
-
-export default class Form extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify this element for accessibility purposes on the client as well as the server. */
-        id: PropTypes.string.isRequired,
-        /** The form elements to display in the form. */
-        children: PropTypes.node.isRequired,
-        /** If the form is invalid and animateToInvalid() is called, this will be the element to scroll inside of to the first invalid form item. */
-        invalidElementToScroll: PropTypes.node,
-        /** The offset to add to the invalid element scroll action. Useful if there is fixed content in the parent and an offset needs to be accounted for. */
-        invalidElementScrollOffset: PropTypes.number,
-        /**
-         * The function to execute when the form is submitted.
-         *
-         * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-         */
-        onSubmit: PropTypes.func,
-    };
-    static defaultProps = {
-        invalidElementScrollOffset: 0,
-    };
-
-    constructor(props) {
-        super(props);
-
-        if (!props.id) {
-            throw new Error(
-                `The prop 'id' is required to make Form accessible for users using assistive technologies such as screen readers. Check the render method of Form.`
-            );
-        }
-    }
-
-    _onSubmit = evt => {
-        evt.preventDefault();
-
-        const {onSubmit} = this.props;
-        const form = evt.currentTarget;
-
-        // for browsers that don't run validation checks on submit
-        if (form.checkValidity && !form.checkValidity()) {
-            return;
-        } else {
-            if (onSubmit) {
-                onSubmit(evt);
-            }
-        }
-    };
-
-    /**
-     * Animates the Form component to the first invalid field.
-     *
-     * @public
-     * @returns {void}
-     */
-    animateToInvalid() {
-        if (this._form.checkValidity && !this._form.checkValidity()) {
-            const {
-                id,
-                invalidElementToScroll,
-                invalidElementScrollOffset,
-            } = this.props;
-
-            // setTimeout to ensure elements are rendered
-            setTimeout(() => {
-                const errorField = DOMUtils.el(
-                    `#Form-${id} .FormElement-contains-error`
-                );
-                const firstInvalid =
-                    errorField.length > 0 ? errorField[0] : errorField;
-                const yPos =
-                    firstInvalid.offsetTop + invalidElementScrollOffset;
-                const elToScroll =
-                    invalidElementToScroll || document.scrollingElement;
-
-                AnimationUtils.scrollTo(elToScroll, yPos);
-            }, 0);
-        }
-    }
-
-    /**
-     * Checks if the form is valid and ready for submission.
-     *
-     * @public
-     * @returns {Boolean} - Whether the form is valid or not.
-     */
-    isValid() {
-        return this._form.checkValidity ? this._form.checkValidity() : true;
-    }
-
-    /**
-     * Resets user input from the form fields.
-     *
-     * @public
-     * @returns {void}
-     */
-    reset() {
-        this._form.reset();
-    }
-
-    /**
-     * Provides the form data as an object for submission.
-     *
-     * @public
-     * @param {Boolean} [withEmpty=false] - Whether to serialize the empty fields.
-     * @returns {Object} - The form data to submit.
-     */
-    submit(withEmpty = false) {
-        if (!this.isValid()) {
-            return null;
-        }
-
-        return serialize(this._form, {hash: true, empty: withEmpty});
-    }
-
-    /**
-     * Getter for the form DOM element.
-     *
-     * @public
-     * @returns {Element} - The form element.
-     */
-    get node() {
-        return this._form;
-    }
-
-    render() {
-        const {className, id, children} = this.props;
-        const classes = classNames('Form', className);
-
-        return (
-            <form
-                ref={node => {
-                    this._form = node;
-                }}
-                className={classes}
-                id={`Form-${id}`}
-                onSubmit={this._onSubmit}
-                action=""
-            >
-                {children}
-            </form>
-        );
-    }
-}

package/styles/Form/Form.spec.js

@@ -1,148 +0,0 @@
-const name = 'Jane';
-const email = 'jane@spothero.com';
-const item = 'item-2';
-
-describe('<Form />', () => {
-    context('Display', () => {
-        it('Renders, shows/clears errors, and submits proper data', () => {
-            cy.visitStory('v1/Form/Display', 'Default', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.onFormSubmit = evt => {
-                        console.log('onFormSubmit'); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'onFormSubmit').as('formSubmit');
-                },
-            })
-                .get('.Button')
-                .as('submit')
-                // renders the form
-                .get('.Form')
-                .get('@submit')
-                .click()
-                // shows errors correctly
-                .get('.FormElement-contains-error')
-                .should('have.length', 3)
-                .get('.FormGroupError')
-                .should('exist')
-                // does not call the submit method
-                .get('@formSubmit')
-                .should('not.be.called')
-                // fill the form with data
-                .get('.TextInput')
-                .eq(0)
-                .as('name')
-                .fillTextInput({alias: 'name', text: name})
-                .get('.TextInput')
-                .eq(1)
-                .as('email')
-                .fillTextInput({alias: 'email', text: email})
-                .get('.Select')
-                .as('item')
-                .selectItem({alias: 'item', value: item})
-                // clears errors after fields are filled out
-                .get('.FormElement-contains-error')
-                .should('not.exist')
-                .get('.FormGroupError')
-                .should('not.exist')
-                .get('@submit')
-                .click()
-                // submits the form with the correct data
-                .get('@formSubmit')
-                .should('be.calledWith', {
-                    name,
-                    email,
-                    item,
-                });
-        });
-    });
-
-    context('Methods', () => {
-        it('Public methods function properly', () => {
-            cy.visitStory('v1/Form/Methods', 'Methods', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.onFormSubmit = evt => {
-                        console.log('onFormSubmit'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onFormSubmitEmpty = evt => {
-                        console.log('onFormSubmitEmpty'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onFormValidityCheck = evt => {
-                        console.log('onFormValidityCheck'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onFormNode = evt => {
-                        console.log('onFormNode'); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'onFormSubmit').as('formSubmit');
-
-                    cy.stub(contentWindow, 'onFormSubmitEmpty').as(
-                        'formSubmitEmpty'
-                    );
-
-                    cy.stub(contentWindow, 'onFormValidityCheck').as(
-                        'formValidity'
-                    );
-
-                    cy.stub(contentWindow, 'onFormNode').as('formNode');
-                },
-            })
-                // alias validity button
-                .get('.FormMethods-check-validity')
-                .as('buttonValidity')
-                // check validity
-                .click()
-                .get('@formValidity')
-                .should('be.calledWith', false)
-                // fill form
-                .get('.TextInput')
-                .eq(0)
-                .as('name')
-                .fillTextInput({alias: 'name', text: name})
-                .get('.TextInput')
-                .eq(1)
-                .as('email')
-                .fillTextInput({alias: 'email', text: email})
-                // check validity after fields are filled
-                .get('@buttonValidity')
-                .click()
-                .get('@formValidity')
-                .should('be.calledWith', true)
-                // check submit with no empty fields
-                .get('.FormMethods-submit')
-                .click()
-                .get('@formSubmit')
-                .should('be.calledWith', {
-                    name,
-                    email,
-                })
-                // check submit with empty fields
-                .get('.FormMethods-submit-empty')
-                .click()
-                .get('@formSubmitEmpty')
-                .should('be.calledWith', {
-                    name,
-                    email,
-                    position: '',
-                })
-                // reset and make sure fields were cleared
-                .get('.FormMethods-reset')
-                .click()
-                .confirmTextInput({alias: 'name', value: ''})
-                .confirmTextInput({alias: 'email', value: ''})
-                // check the form node returns correctly
-                .get('.FormMethods-node')
-                .click()
-                .get('@formNode')
-                .should('be.calledWithMatch', value => {
-                    return (
-                        value.nodeName &&
-                        value.nodeName.toLowerCase() === 'form'
-                    );
-                });
-        });
-    });
-});

package/styles/Form/FormElementError.jsx

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

package/styles/Form/FormGroup.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const FormGroup = ({className, children, inline, error}) => {
-    const classes = classNames(
-        'FormGroup',
-        {'FormGroup-inline': inline},
-        {'FormGroup-contains-error': error},
-        className
-    );
-
-    return (
-        <div className={classes}>
-            {children}
-            {error}
-        </div>
-    );
-};
-
-FormGroup.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The element(s) to render. */
-    children: PropTypes.node.isRequired,
-    /** Whether the elements in this group should be rendered inline. */
-    inline: PropTypes.bool,
-    /** A custom validation error (typically a FormGroupError component) to display when this component is part of a form and is invalid. */
-    error: PropTypes.element,
-};
-
-export default FormGroup;

package/styles/Form/FormGroupError.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconExclamationCircle from '@spothero/icons/exclamation-circle';
-
-const FormGroupError = ({className, children}) => {
-    const classes = classNames('FormGroupError', className);
-
-    return (
-        <div className={classes}>
-            <IconExclamationCircle />
-            <div className="FormGroupError-content">{children}</div>
-        </div>
-    );
-};
-
-FormGroupError.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The error node to display. */
-    children: PropTypes.node.isRequired,
-};
-
-export default FormGroupError;

package/styles/Form/index.js

@@ -1,4 +0,0 @@
-export {default as Form} from './Form';
-export {default as FormGroup} from './FormGroup';
-export {default as FormGroupError} from './FormGroupError';
-export {default as FormElementError} from './FormElementError';

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -1,215 +0,0 @@
-import throttle from 'lodash/throttle';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconSearch from '@spothero/icons/search';
-import EnvironmentUtils from '@spothero/utils/environment';
-import AutoSuggestInput from '../AutoSuggestInput/AutoSuggestInput';
-import TextInputPropTypes from '../TextInput/TextInputPropTypes';
-
-export default class GooglePlacesSearchInput extends Component {
-    static propTypes = {
-        ...TextInputPropTypes,
-        /** Function to execute when a suggestion is selected. */
-        onSuggestionSelect: PropTypes.func.isRequired,
-        /** Optional function to execute when input field is cleared. */
-        onClear: PropTypes.func,
-        /** Used to limit the suggestion results by country. */
-        country: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-        /** Used to limit the suggestion results by certain google place types. */
-        types: PropTypes.array,
-        /** Used to limit the suggestion results by lat/long bounds. */
-        bounds: PropTypes.object,
-        /** The `google maps` object for using the autocomplete service. */
-        googleMaps: PropTypes.object.isRequired,
-        /** A custom element (typically a PoweredByGoogle component) to display at the bottom of the suggestion list. */
-        poweredByGoogleFooter: PropTypes.element.isRequired,
-        /** An object containing the bias options */
-        biasOptions: PropTypes.shape({
-            /** The location (lat and long), to bias the search results around.
-             * * @see https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest.location
-             */
-            location: PropTypes.shape({
-                latitude: PropTypes.number,
-                longitude: PropTypes.number,
-            }),
-            /** The radius, in meters, to bias the search results within - required when providing a location for biasing */
-            radius: PropTypes.number,
-        }),
-    };
-    static defaultProps = {
-        placeholder: 'Search Address or Venue',
-        country: 'us',
-        icon: <IconSearch />,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {googleMaps} = props;
-        const isBrowser = EnvironmentUtils.isBrowser();
-
-        this._suggestionFetch = throttle(this._searchSuggestions, 500);
-        this._gmaps = googleMaps;
-        this._autocompleteService = isBrowser
-            ? new this._gmaps.places.AutocompleteService()
-            : null;
-        this._geocoder = isBrowser ? new this._gmaps.Geocoder() : null;
-
-        this.state = {
-            suggestions: [],
-            autocompleteSessionToken: isBrowser
-                ? new this._gmaps.places.AutocompleteSessionToken()
-                : null,
-        };
-    }
-
-    _onChange = evt => {
-        const {onChange} = this.props;
-        const {autocompleteSessionToken} = this.state;
-        const value = evt.target.value;
-
-        if (!autocompleteSessionToken) {
-            this.setState({
-                autocompleteSessionToken: new this._gmaps.places.AutocompleteSessionToken(),
-            });
-        }
-
-        if (!value || value.length < 3) {
-            this.setState({
-                suggestions: [],
-            });
-        } else {
-            this._suggestionFetch(value);
-        }
-
-        if (onChange) {
-            onChange(evt);
-        }
-    };
-
-    _onSuggestionSelect = suggestion => {
-        const {onSuggestionSelect} = this.props;
-        const {place_id: placeId, description} = suggestion;
-
-        if (suggestion.location) {
-            onSuggestionSelect(suggestion);
-        } else {
-            this._geocoder.geocode(
-                placeId ? {placeId} : {address: description},
-                (results, status) => {
-                    if (status !== this._gmaps.GeocoderStatus.OK) {
-                        return;
-                    }
-
-                    const gmaps = results[0];
-                    const geoCodedLocation = gmaps.geometry.location;
-
-                    suggestion.label = description;
-                    suggestion.gmaps = gmaps;
-                    suggestion.location = {
-                        lat: geoCodedLocation.lat(),
-                        lng: geoCodedLocation.lng(),
-                    };
-
-                    onSuggestionSelect(suggestion);
-                }
-            );
-        }
-
-        this.setState({
-            autocompleteSessionToken: null,
-        });
-    };
-
-    _searchSuggestions = value => {
-        const {country, types, bounds, biasOptions} = this.props;
-        const {autocompleteSessionToken} = this.state;
-
-        const options = {
-            input: value,
-            ...(bounds && {bounds}),
-            ...(country && {
-                componentRestrictions: {
-                    country,
-                },
-            }),
-            ...(types && {types}),
-            ...(biasOptions && {
-                location: new this._gmaps.LatLng(
-                    biasOptions?.location?.latitude,
-                    biasOptions?.location?.longitude
-                ),
-                radius: biasOptions?.radius,
-                origin: new this._gmaps.LatLng(
-                    biasOptions?.location?.latitude,
-                    biasOptions?.location?.longitude
-                ),
-            }),
-            sessionToken: autocompleteSessionToken,
-        };
-
-        this._autocompleteService.getPlacePredictions(options, suggestions => {
-            if (suggestions) {
-                suggestions.map(suggestion => {
-                    suggestion.label = suggestion.description;
-
-                    if (!suggestion.id) {
-                        suggestion.id = suggestion.place_id;
-                    }
-
-                    return suggestion;
-                });
-            }
-
-            this.setState({
-                suggestions,
-            });
-        });
-    };
-
-    /**
-     * Getter for the input DOM element.
-     *
-     * @public
-     * @returns {Element} - The input element.
-     */
-    get node() {
-        return this._autosuggest.node;
-    }
-
-    render() {
-        const {
-            className,
-            poweredByGoogleFooter,
-            types,
-            country,
-            onClear,
-            ...textInputProps
-        } = this.props;
-        const {suggestions} = this.state;
-        const classes = classNames('GooglePlacesSearchInput', className);
-
-        return (
-            <div className={classes}>
-                <AutoSuggestInput
-                    ref={node => {
-                        this._autosuggest = node;
-                    }}
-                    {...textInputProps}
-                    onChange={this._onChange}
-                    suggestions={suggestions}
-                    types={types}
-                    country={country}
-                    suggestionBoxFooter={poweredByGoogleFooter}
-                    onClear={onClear}
-                    onSuggestionSelect={this._onSuggestionSelect}
-                    autoActivateFirstSuggest
-                />
-            </div>
-        );
-    }
-}