@spothero/ui 15.1.0 → 15.1.2

package/styles/DateTime/TimePicker.spec.js

@@ -1,148 +0,0 @@
-import DateTimeAssertions from './date-time-assertions';
-
-describe('<TimePicker />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/TimePicker/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTimePickerChange = selectedTime => {
-                            console.log('selected time:', selectedTime); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTimePickerChange').as(
-                            'onChange'
-                        );
-                    },
-                })
-                    .get('.Select')
-                    .as('asSelect');
-            });
-
-            it('Renders properly', () => {
-                cy.get('.TimePicker')
-                    .should('have.class', 'TimePicker')
-                    .find('.Icon-clock')
-                    .get('select')
-                    .children()
-                    .should('have.length', 48);
-            });
-
-            it('Populates the input with the default selected time', () => {
-                cy.get('@asSelect')
-                    .find('.FormElement-item')
-                    .should('have.value', '12:00 AM');
-            });
-
-            it('Fires `onChange` properly', () => {
-                cy.selectItem({alias: 'asSelect', value: '03:00 AM'})
-                    .get('@onChange')
-                    .should('be.calledWith', '03:00 AM');
-            });
-        });
-
-        context('Classes', () => {
-            it('Has custom class names', () => {
-                cy.visitStory('v1/TimePicker/Display', 'Classes')
-                    .get('.TimePickerClasses')
-                    .should('have.class', 'TimePickerClasses')
-                    .should('have.class', 'TimePickerClasses2');
-            });
-        });
-
-        context('Name', () => {
-            it('Has name property', () => {
-                cy.visitStory('v1/TimePicker/Display', 'Name')
-                    .get('.FormElement-item')
-                    .should('have.attr', 'name', 'time');
-            });
-        });
-
-        context('Selected Time', () => {
-            it('Has pre-selected time', () => {
-                cy.visitStory('v1/TimePicker/Display', 'SelectedTime')
-                    .get('.FormElement-item')
-                    .should('have.value', '11:30 AM');
-            });
-        });
-
-        context('Display Format', () => {
-            it('Has proper display formatting applied while retaining the proper value', () => {
-                cy.visitStory('v1/TimePicker/Display', 'DisplayFormat')
-                    .get('.FormElement-item')
-                    .should('have.value', '07:30 AM')
-                    .select('08:30 AM')
-                    .find(':selected')
-                    .contains('8:30 AM');
-            });
-        });
-
-        context('Icon', () => {
-            it('Has no icon', () => {
-                cy.visitStory('v1/TimePicker/Display', 'Icon')
-                    .get('.Icon-calendar')
-                    .should('not.exist');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Has a disabled form element and does not call the onFocus callback on focus', () => {
-                cy.visitStory('v1/TimePicker/Display', 'Disabled')
-                    .get('.FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled');
-            });
-        });
-
-        context('Label', () => {
-            it('Has a label', () => {
-                cy.visitStory('v1/TimePicker/Display', 'WithLabel')
-                    .get('.Label')
-                    .contains('Pick a time yo');
-            });
-        });
-
-        context('Placeholder', () => {
-            it('Has a placeholder first option with empty value', () => {
-                cy.visitStory('v1/TimePicker/Display', 'Placeholder')
-                    .get('option')
-                    .first()
-                    .should('have.attr', 'value', '')
-                    .contains('Select Time');
-            });
-        });
-
-        context('Spread Attributes', () => {
-            it('Has "required" and "type" attributes', () => {
-                cy.visitStory('v1/TimePicker/Display', 'SpreadAttributes')
-                    .get('.FormElement-item')
-                    .should(formEl => {
-                        expect(formEl).to.have.attr('required');
-                        expect(formEl).to.have.attr('type', 'tel');
-                        expect(formEl).not.to.have.attr('displayformat');
-                    });
-            });
-        });
-    });
-
-    context('Interaction', () => {
-        context('Step', () => {
-            it('Time options in dropdown reflect the step value multiplier', () => {
-                cy.visitStory('v1/TimePicker/Interaction', 'Step')
-                    .get('select')
-                    .children()
-                    .should('have.length', 24);
-            });
-        });
-
-        context('Disable Times', () => {
-            it('Disables times before disableBefore and after disableAfter', () => {
-                cy.visitStory(
-                    'v1/TimePicker/Interaction',
-                    'DisableTimesBeforeAfter'
-                );
-
-                DateTimeAssertions.timesDisabledBeforeAndAfter('select', false);
-            });
-        });
-    });
-});

package/styles/DateTime/date-time-assertions.js

@@ -1,89 +0,0 @@
-const DateTimeAssertions = {
-    pastDatesDisabled(inputSelector) {
-        cy.get(inputSelector)
-            .focus()
-            .get('.DayPicker-Day--today')
-            .then($todayElement => {
-                if ($todayElement.prev().length) {
-                    return $todayElement.prev();
-                } else {
-                    return $todayElement.parent().prev().children().last();
-                }
-            })
-            .then($prevDay => {
-                cy.wrap($prevDay).should(
-                    'have.class',
-                    'DayPicker-Day--disabled'
-                );
-            });
-    },
-
-    pastDatesEnabled(inputSelector) {
-        cy.get(inputSelector)
-            .focus()
-            .get('.DayPicker-Day--today')
-            .then($todayElement => {
-                if ($todayElement.prev().length) {
-                    return $todayElement.prev();
-                } else {
-                    return $todayElement.parent().prev().children().last();
-                }
-            })
-            .then($prevDay => {
-                cy.wrap($prevDay).should(
-                    'not.have.class',
-                    'DayPicker-Day--disabled'
-                );
-            });
-    },
-
-    datesDisabledBeforeAndAfter(inputSelector) {
-        cy.get(inputSelector)
-            .focus()
-            .get('.DayPicker-Day--today')
-            .then($todayElement => {
-                // if previous child element exists return it
-                // if not, return the last child element from the previous calendar row
-                if ($todayElement.prev().length) {
-                    return $todayElement.prev();
-                } else {
-                    return $todayElement.parent().prev().children().last();
-                }
-            })
-            .then($prevDay => {
-                cy.wrap($prevDay).should(
-                    'have.class',
-                    'DayPicker-Day--disabled'
-                );
-            })
-            .get('.DayPicker-Day--today')
-            .then($todayElement => {
-                // if next child element exists return it
-                // if not, return the first child element from the next calendar row
-                if ($todayElement.next().length) {
-                    return $todayElement.next();
-                } else {
-                    return $todayElement.parent().next().children().first();
-                }
-            })
-            .then($nextDay => {
-                cy.wrap($nextDay)
-                    .should('have.class', 'DayPicker-Day--disabled')
-                    .get('.DayPicker-Day--today')
-                    .click();
-            });
-    },
-
-    timesDisabledBeforeAndAfter(inputSelector, hasPlaceholder = true) {
-        cy.get(inputSelector)
-            .find('option')
-            .eq(hasPlaceholder ? 1 : 0)
-            .should('have.attr', 'value', '11:00 AM')
-            .get(inputSelector)
-            .find('option')
-            .last()
-            .should('have.attr', 'value', '01:00 PM');
-    },
-};
-
-export default DateTimeAssertions;

package/styles/DateTime/index.js

@@ -1,6 +0,0 @@
-export {default as DatePicker} from './DatePicker';
-export {default as TimePicker} from './TimePicker';
-export {default as DateTimePicker} from './DateTimePicker';
-export {default as DatePickerCalendar} from './DatePickerCalendar';
-export {default as DateTimeRangePicker} from './DateTimeRangePicker';
-export {default as DatePickerCalendarWithRange} from './DatePickerCalendarWithRange';

package/styles/ErrorBoundary/ErrorBoundary.jsx

@@ -1,76 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import React, {Component} from 'react';
-import SentryUtils from '@spothero/utils/sentry';
-
-export default class ErrorBoundary extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component -- only shows on error catch. */
-        className: PropTypes.string,
-        /** The node to display when the component does not have any errors. */
-        children: PropTypes.node.isRequired,
-        /** A custom node to display in place of the default error messaging. */
-        errorComponent: PropTypes.element,
-        /** Whether or not to report error to Sentry. */
-        reportToSentry: PropTypes.bool,
-        /**
-         * Function to execute when the an error is caught.
-         *
-         * @param {Object} error - The error object.
-         * @param {Object} info - Extra info provided by React.
-         */
-        onError: PropTypes.func,
-    };
-    static defaultProps = {
-        reportToSentry: true,
-    };
-    state = {
-        error: null,
-    };
-
-    componentDidCatch(error, info) {
-        const {reportToSentry, onError} = this.props;
-
-        this.setState({
-            error,
-        });
-
-        if (onError) {
-            onError(error, info);
-        }
-
-        if (reportToSentry) {
-            SentryUtils.addData(info);
-            SentryUtils.sendMessage({
-                message: error.message,
-                level: 'error',
-            });
-        }
-    }
-
-    render() {
-        const {children, className, errorComponent} = this.props;
-        const {error} = this.state;
-        const classes = classNames('ErrorBoundary', className);
-
-        if (error) {
-            return (
-                <div className={classes}>
-                    {errorComponent}
-                    {!errorComponent && (
-                        <div className="ErrorBoundary-content">
-                            <div className="ErrorBoundary-info">
-                                An error has occurred.
-                            </div>
-                            <div className="ErrorBoundary-info">
-                                Please refresh the page and try again.
-                            </div>
-                        </div>
-                    )}
-                </div>
-            );
-        }
-
-        return children;
-    }
-}

package/styles/ErrorBoundary/ErrorBoundary.spec.js

@@ -1,72 +0,0 @@
-describe('<ErrorBoundary />', () => {
-    beforeEach(() => {
-        cy.on('uncaught:exception', () => {
-            return false;
-        });
-    });
-
-    context('Display', () => {
-        context('Default', () => {
-            it('Handles JS Error with default error messaging', () => {
-                cy.visitStory('v1/ErrorBoundary/Display', 'Default')
-                    .get('.Button')
-                    .click()
-                    .get('.ErrorBoundary-info')
-                    .eq(0)
-                    .should('contain.text', 'An error has occurred.')
-                    .get('.ErrorBoundary-info')
-                    .eq(1)
-                    .should(
-                        'contain.text',
-                        'Please refresh the page and try again.'
-                    );
-            });
-        });
-
-        context('Custom Error Component', () => {
-            it('Handles JS Error with custom error messaging', () => {
-                cy.visitStory('v1/ErrorBoundary/Display', 'CustomError')
-                    .get('.Button')
-                    .click()
-                    .get('.ErrorBoundary')
-                    .should('contain.text', 'Something went wrong!');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('onError', () => {
-            it('Calls onError upon catching error', () => {
-                cy.visitStory('v1/ErrorBoundary/Methods', 'OnError', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onError = evt => {
-                            console.log('onError'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onError').as('onError');
-                    },
-                })
-                    .get('.Button')
-                    .click()
-                    .get('@onError')
-                    .should(
-                        'be.calledWithMatch',
-                        error => {
-                            return (
-                                error.message &&
-                                error.message.includes(
-                                    'I crashed the component!'
-                                )
-                            );
-                        },
-                        info => {
-                            return (
-                                info.componentStack &&
-                                info.componentStack.includes('ErrorBoundary')
-                            );
-                        }
-                    );
-            });
-        });
-    });
-});

package/styles/Flyout/Flyout.jsx

@@ -1,147 +0,0 @@
-import isString from 'lodash/isString';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconTimes from '@spothero/icons/times';
-import DOMUtils from '@spothero/utils/dom';
-import Button from 'v1/components/Button/Button';
-import Portal from '../Portal/Portal';
-
-export default class Flyout extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The content to insert into the flyout. */
-        children: PropTypes.node.isRequired,
-        /** The title to include at the top of the flyout. */
-        title: PropTypes.node.isRequired,
-        /**
-         * A function to execute after the flyout has been hidden. Use this to manage state in a parent component to remove the flyout from the DOM (see examples).
-         *
-         * @param {*} args - Any arguments that were passed to `hide()` to retrieve in the callback.
-         */
-        onHidden: PropTypes.func,
-        /** Whether to close the Flyout when the shim is clicked. */
-        closeOnShimClick: PropTypes.bool,
-        /** Whether to allow the background to scroll or not. **/
-        isBackgroundScrollable: PropTypes.bool,
-    };
-
-    static defaultProps = {
-        closeOnShimClick: true,
-    };
-
-    componentDidMount() {
-        const {isBackgroundScrollable} = this.props;
-
-        setTimeout(() => {
-            this._isAnimating = true;
-
-            if (!isBackgroundScrollable) {
-                DOMUtils.addClass('html', 'Flyout-no-scroll');
-            }
-
-            DOMUtils.addClass(this._flyout, 'Flyout-active');
-
-            window.transitionEnd(this._flyout).bind(() => {
-                window.transitionEnd(this._flyout).unbind();
-
-                this._isAnimating = false;
-            });
-        }, 100);
-    }
-
-    componentWillUnmount() {
-        this._removeClasses();
-    }
-
-    _onCloseClick = evt => {
-        if (this._isAnimating) {
-            return;
-        }
-
-        this.hide();
-    };
-
-    _removeClasses() {
-        DOMUtils.removeClass('html', 'Flyout-open Flyout-no-scroll');
-        DOMUtils.removeClass(this._flyout, 'Flyout-active');
-    }
-
-    /**
-     * Hides the Flyout programmatically.
-     *
-     * @public
-     * @param {*} args - The arguments to pass to the onHidden callback in cases where you may need access to something not available in Flyout itself.
-     * @returns {void}
-     */
-    hide(...args) {
-        this._isAnimating = true;
-
-        const {onHidden} = this.props;
-
-        this._removeClasses();
-
-        window.transitionEnd(this._flyout).bind(() => {
-            window.transitionEnd(this._flyout).unbind();
-
-            this._isAnimating = false;
-
-            if (onHidden) {
-                onHidden(...args);
-            }
-        });
-    }
-
-    render() {
-        const {
-            title,
-            children,
-            // eslint-disable-next-line no-unused-vars
-            onHidden,
-            className,
-            closeOnShimClick,
-            // eslint-disable-next-line no-unused-vars
-            isBackgroundScrollable,
-            ...props
-        } = this.props;
-
-        const classes = classNames('Flyout-container', className);
-
-        return (
-            <Portal className="Flyout">
-                <div className={classes}>
-                    {closeOnShimClick && (
-                        <div
-                            className="Flyout-shim"
-                            onClick={this._onCloseClick}
-                        />
-                    )}
-                    <div
-                        ref={node => {
-                            this._flyout = node;
-                        }}
-                        className="Flyout-wrapper"
-                        {...props}
-                    >
-                        <div className="Flyout-heading">
-                            {isString(title) ? (
-                                <h1 className="heading-sm">{title}</h1>
-                            ) : (
-                                title
-                            )}
-                            <Button
-                                className="Flyout-close"
-                                aria-label="Close Flyout"
-                                onClick={this._onCloseClick}
-                            >
-                                <IconTimes />
-                            </Button>
-                        </div>
-                        <div className="Flyout-content">{children}</div>
-                    </div>
-                </div>
-            </Portal>
-        );
-    }
-}

package/styles/Flyout/Flyout.spec.js

@@ -1,117 +0,0 @@
-const animationTimeout = 300;
-
-describe('<Flyout />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Flyout/Display', 'Default')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout);
-            });
-
-            it('Renders properly', () => {
-                cy.get('.Flyout')
-                    // check to make sure the parent is the body
-                    .parent()
-                    .then($el => {
-                        expect($el.prop('tagName').toLowerCase()).to.eq('body');
-                    })
-                    .get('.Flyout-wrapper')
-                    .should('have.class', 'Flyout-active')
-                    .contains('This is the flyout content.')
-                    // confirm other default elements exist
-                    .get('.Flyout-shim')
-                    .get('.Flyout-heading')
-                    .get('.Flyout-content')
-                    .get('.Flyout-close')
-                    .get('html')
-                    .should('have.class', 'Flyout-no-scroll');
-            });
-
-            it('Closes when close is clicked', () => {
-                cy.get('.Flyout-close')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout')
-                    .should('not.exist');
-            });
-        });
-
-        context('Custom Title', () => {
-            it('Renders properly', () => {
-                cy.visitStory('v1/Flyout/Display', 'CustomTitle')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    // check for custom title
-                    .get('.FlyoutTitle')
-                    .contains('Custom Flyout Title')
-                    // confirm close still exists
-                    .get('.Flyout-close');
-            });
-        });
-
-        context('Close on shim click prop', () => {
-            it('Does not render shim that controls background closing click when prop is false', () => {
-                cy.visitStory('v1/Flyout/Display', 'CloseOnShimClickFalse')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout-shim')
-                    .should('not.exist');
-            });
-
-            it('Closes when shim is clicked with default prop value', () => {
-                cy.visitStory('v1/Flyout/Display', 'Default')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout-shim')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout')
-                    .should('not.exist');
-            });
-        });
-
-        context('Background scrollable', () => {
-            it('Default isBackgroundScrollable false does not have scrollable background', () => {
-                cy.visitStory('v1/Flyout/Display', 'Default')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('html')
-                    .should('have.class', 'Flyout-no-scroll');
-            });
-
-            it('Setting isBackgroundScrollable to true will allow the background to scroll', () => {
-                cy.visitStory('v1/Flyout/Display', 'BackgroundScrollable')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout + 100)
-                    .window()
-                    .scrollTo(0, 500)
-                    .then(win => {
-                        expect(win.scrollY).to.be.greaterThan(499);
-                    });
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('Hide', () => {
-            it('Calling hide() will hide the flyout', () => {
-                cy.visitStory('v1/Flyout/Methods', 'Hide')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout-hide')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Flyout')
-                    .should('not.exist');
-            });
-        });
-    });
-});