@spothero/ui 15.1.0 → 15.1.1

package/styles/Notification/Notification.spec.js

@@ -1,154 +0,0 @@
-import includes from 'lodash/includes';
-
-const animationTimeout = 400;
-
-describe('<Notification />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            const msg = 'This is a notification.';
-
-            it('Renders correctly', () => {
-                cy.visitStory('v1/Notification/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onNotificationHidden = evt => {
-                            // eslint-disable-next-line no-console
-                            console.log('notification hidden');
-                        };
-
-                        cy.stub(contentWindow, 'onNotificationHidden').as(
-                            'onNotificationHidden'
-                        );
-                    },
-                })
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification')
-                    .should('have.class', 'Notification-showing')
-                    .should('have.class', 'Notification-custom')
-                    .get('.Notification-content')
-                    .contains(msg)
-                    .get('@onNotificationHidden')
-                    .should('be.calledWithMatch', value => {
-                        return includes(value, msg);
-                    });
-            });
-        });
-
-        context('No Close Button', () => {
-            it('Does not render a close button', () => {
-                cy.visitStory('v1/Notification/Display', 'NoClose')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification-hide')
-                    .should('not.exist');
-            });
-        });
-
-        context('Auto-Close Disabled', () => {
-            it('Does not auto close', () => {
-                cy.visitStory('v1/Notification/Display', 'NoAutoClose')
-                    .get('.Button')
-                    .click()
-                    .wait(1500)
-                    .get('.Notification')
-                    .should('exist')
-                    .get('.Notification-hide')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification')
-                    .should('not.exist');
-            });
-        });
-
-        context('Show Duration', () => {
-            it('Closes after the specified duration', () => {
-                cy.visitStory('v1/Notification/Display', 'Duration')
-                    .get('.Button')
-                    .click()
-                    .wait(500)
-                    .get('.NotificationContainer')
-                    .children()
-                    .should('not.exist');
-            });
-        });
-
-        context('Queue', () => {
-            it('Shows all notifications in the queue properly', () => {
-                cy.visitStory('v1/Notification/Display', 'Queue', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onQueueEmpty = evt => {
-                            // eslint-disable-next-line no-console
-                            console.log('notification queue empty');
-                        };
-
-                        cy.stub(contentWindow, 'onQueueEmpty').as(
-                            'onQueueEmpty'
-                        );
-                    },
-                })
-                    .get('.Button-primary')
-                    .click()
-                    .get('.Button-primary')
-                    .click()
-                    .get('.Button-primary')
-                    .click()
-                    .get('.Button-primary')
-                    .click()
-                    .get('.Notification-info')
-                    .get('.Notification-success')
-                    .get('.Notification-error')
-                    .get('.Notification-warning')
-                    .get('@onQueueEmpty')
-                    .should('be.called');
-            });
-        });
-    });
-
-    context('Types', () => {
-        context('Info', () => {
-            it('Has the proper info type applied', () => {
-                cy.visitStory('v1/Notification/Types', 'Info')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification-info')
-                    .should('have.class', 'Notification-showing');
-            });
-        });
-
-        context('Success', () => {
-            it('Has the proper success type applied', () => {
-                cy.visitStory('v1/Notification/Types', 'Success')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification-success')
-                    .should('have.class', 'Notification-showing');
-            });
-        });
-
-        context('Error', () => {
-            it('Has the proper error type applied', () => {
-                cy.visitStory('v1/Notification/Types', 'Error')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification-error')
-                    .should('have.class', 'Notification-showing');
-            });
-        });
-
-        context('Warning', () => {
-            it('Has the proper warning type applied', () => {
-                cy.visitStory('v1/Notification/Types', 'Warning')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Notification-warning')
-                    .should('have.class', 'Notification-showing');
-            });
-        });
-    });
-});

package/styles/Notification/NotificationContainer.jsx

@@ -1,90 +0,0 @@
-import find from 'lodash/find';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Notification from './Notification';
-import NotificationPropTypes from './NotificationPropTypes';
-
-export default class NotificationContainer extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A notification to queue up for display. */
-        notification: PropTypes.shape({...NotificationPropTypes}),
-        /** A function to execute when the notification queue is empty. Use this to clear your local state of any associated notification data. */
-        onQueueEmpty: PropTypes.func,
-    };
-    state = {
-        currentNotification: this.props.notification,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {notification} = props;
-
-        this._notificationQueue = [];
-
-        if (notification) {
-            this._notificationQueue.push(notification);
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {notification, onQueueEmpty} = this.props;
-
-        this._checkQueue();
-
-        if (
-            prevState.currentNotification &&
-            !this.state.currentNotification &&
-            !this._notificationQueue.length &&
-            onQueueEmpty
-        ) {
-            onQueueEmpty();
-        } else if (
-            notification &&
-            !find(this._notificationQueue, {id: notification.id}) // eslint-disable-line react/prop-types
-        ) {
-            // eslint-disable-line react/prop-types
-            this._notificationQueue.push(notification);
-            this._checkQueue();
-        }
-    }
-
-    _onRemove = () => {
-        this._notificationQueue.shift();
-
-        // clear the state first so that it causes a re-render and the queue can be re-checked
-        this.setState({
-            currentNotification: null,
-        });
-    };
-
-    _checkQueue() {
-        if (this.state.currentNotification || !this._notificationQueue.length) {
-            return;
-        }
-
-        this.setState({
-            currentNotification: this._notificationQueue[0],
-        });
-    }
-
-    render() {
-        const {className} = this.props;
-        const {currentNotification} = this.state;
-        const classes = classNames('NotificationContainer', className);
-
-        return (
-            <div className={classes}>
-                {currentNotification && (
-                    <Notification
-                        onRemove={this._onRemove}
-                        {...currentNotification}
-                    />
-                )}
-            </div>
-        );
-    }
-}

package/styles/Notification/NotificationPropTypes.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-
-export default {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** A unique ID to identify the notification with. The suggested way to create this is to use <a href="https://www.npmjs.com/package/uuid#quickstart---commonjs-recommended" target="_blank">uuid</a>. */
-    id: PropTypes.string.isRequired,
-    /** The message body of the notification. */
-    message: PropTypes.node.isRequired,
-    /** Determines the characteristics of the notification. */
-    type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
-    /** Whether to display the close button. */
-    showClose: PropTypes.bool,
-    /** The time (in milliseconds) that the notification stays open for. */
-    duration: PropTypes.number,
-    /** Whether the notification should close itself without having to click the close button after the specified duration. */
-    autoClose: PropTypes.bool,
-    /** A function to execute after the notification has been hidden. Will receive the notification's props. */
-    onHidden: PropTypes.func,
-};

package/styles/Notification/index.js

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

package/styles/PasswordControl/PasswordControl.jsx

@@ -1,197 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Checkbox from '../Checkbox/Checkbox';
-import FormElementError from '../Form/FormElementError';
-import Label from '../Label/Label';
-import TextButton from 'v1/components/TextButton/TextButton';
-import TextInput from '../TextInput/TextInput';
-
-export default class PasswordControl extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify the show password Checkbox for accessibility purposes on the client as well as the server. */
-        showCheckboxId: PropTypes.string,
-        /** Whether to show the Forgot Password button. */
-        showForgotPassword: PropTypes.bool,
-        /** A custom label (typically a Label component) to display above the input. */
-        label: PropTypes.element,
-        /** Text to display in the field before a user starts to type in the input. */
-        placeholder: PropTypes.string,
-        /** Whether to show the placeholder copy or not. */
-        showPlaceholder: PropTypes.bool,
-        /** Whether this field is required during validation. */
-        required: PropTypes.bool,
-        /** The error to show when required validation fails. */
-        requiredError: PropTypes.string,
-        /** A custom help element to place below the input. */
-        helpNode: PropTypes.node,
-        /** Specifies the minimum number of characters allowed if a minimum password length is desired. */
-        minLength: PropTypes.number,
-        /** Function to execute when the iForgot Password button is clicked. */
-        onForgotPasswordClick: PropTypes.func,
-        /**
-         * Function to execute when the input is focused.
-         *
-         * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-         */
-        onFocus: PropTypes.func,
-        /**
-         * Function to execute when the element is marked as invalid by a validation check.
-         *
-         * @param {ValidityState} validationState - ValidityState object for more fine grained control over error handling in a parent component if desired.
-         */
-        onInvalid: PropTypes.func,
-    };
-    static defaultProps = {
-        showCheckboxId: 'PasswordControl-show-password',
-        showForgotPassword: true,
-        required: true,
-        requiredError: 'Please enter your password.',
-    };
-    state = {
-        showPassword: false,
-        isValid: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {requiredError, minLength} = props;
-
-        this._pattern = minLength ? `.{${minLength},}` : null;
-
-        if (minLength) {
-            this._error = (
-                <FormElementError>
-                    Please enter at least {minLength} characters.
-                </FormElementError>
-            );
-        } else {
-            this._error = <FormElementError>{requiredError}</FormElementError>;
-        }
-
-        this._generateKey();
-    }
-
-    _onPasswordFocus = () => {
-        const {onFocus} = this.props;
-
-        if (onFocus) {
-            onFocus();
-        }
-    };
-
-    _onPasswordChange = evt => {
-        this.setState({
-            value: evt.target.value,
-            isValid: true,
-        });
-    };
-
-    _onInvalid = validationState => {
-        const {onInvalid} = this.props;
-
-        this.setState({
-            isValid: validationState.valid,
-        });
-
-        if (onInvalid) {
-            onInvalid(validationState);
-        }
-    };
-
-    _onToggleShowPasswordChange = () => {
-        this._generateKey();
-        this.setState((prevState, props) => {
-            return {
-                showPassword: !prevState.showPassword,
-            };
-        });
-    };
-
-    _generateKey() {
-        this._key = `password-${Date.now()}`;
-    }
-
-    /**
-     * Provides the form data as an object for submission.
-     *
-     * @public
-     * @returns {Object} - The form data to submit.
-     */
-    submit() {
-        const value = this._input.node.value;
-
-        return value ? {password: value} : null;
-    }
-
-    render() {
-        const {
-            className,
-            showCheckboxId,
-            showForgotPassword,
-            label,
-            placeholder,
-            showPlaceholder,
-            helpNode,
-            required,
-            onForgotPasswordClick,
-        } = this.props;
-        const {value, showPassword, isValid} = this.state;
-        const classes = classNames(
-            'PasswordControl',
-            'FormElement',
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-
-        return (
-            <div className={classes}>
-                {label}
-                <div className="PasswordControl-input">
-                    <TextInput
-                        key={this._key}
-                        ref={node => {
-                            this._input = node;
-                        }}
-                        name="password"
-                        type={showPassword ? 'text' : 'password'}
-                        required={required}
-                        pattern={this._pattern}
-                        defaultValue={value}
-                        placeholder={
-                            showPlaceholder && placeholder ? placeholder : ''
-                        }
-                        onChange={this._onPasswordChange}
-                        onInvalid={this._onInvalid}
-                        onFocus={this._onPasswordFocus}
-                    />
-                    <div className="PasswordControl-show">
-                        <Checkbox
-                            id={showCheckboxId}
-                            label={<Label>Show</Label>}
-                            onChange={this._onToggleShowPasswordChange}
-                        />
-                        <TextButton onClick={this._onToggleShowPasswordChange}>
-                            {showPassword ? 'Hide' : 'Show'}
-                        </TextButton>
-                    </div>
-                </div>
-                {helpNode && (
-                    <div className="FormElement-help-text">{helpNode}</div>
-                )}
-                {!isValid && this._error}
-                {showForgotPassword && (
-                    <TextButton
-                        className="PasswordControl-forgot"
-                        onClick={onForgotPasswordClick}
-                    >
-                        Forgot Password?
-                    </TextButton>
-                )}
-            </div>
-        );
-    }
-}