@spothero/ui 15.1.0 → 15.1.1

package/styles/PasswordControl/PasswordControl.spec.js

@@ -1,236 +0,0 @@
-describe('<PasswordControl />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            const confirmInputType = () => {
-                return (
-                    cy
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .should('have.attr', 'type', 'password')
-                        // verify that the Show Password checkbox/button works
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show')
-                        .click()
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .should('have.attr', 'type', 'text')
-                        // verify that hiding the password works
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show')
-                        .click()
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .should('have.attr', 'type', 'password')
-                );
-            };
-            const confirmInputValue = () => {
-                return (
-                    cy
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .type('hunter2', {delay: 0})
-                        .should('have.value', 'hunter2')
-                        // verify that the Show Password checkbox/button works
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show')
-                        .click()
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .should('have.value', 'hunter2')
-                        .clear()
-                        .type('pw123456', {delay: 0})
-                        .should('have.value', 'pw123456')
-                        // verify that hiding the password works
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show')
-                        .click()
-                        .get('.PasswordControl')
-                        .find('.TextInput input')
-                        .should('have.value', 'pw123456')
-                );
-            };
-
-            beforeEach(() => {
-                cy.visitStory('v1/PasswordControl/Display', 'Default');
-            });
-
-            it('Should have label, help text, custom class names, and no placeholder', () => {
-                cy.get('.PasswordControl')
-                    .should('exist')
-                    .and('have.class', 'custom-class1')
-                    .and('have.class', 'custom-class2')
-                    .find('.TextInput input')
-                    .should('have.attr', 'name', 'password')
-                    .and('have.attr', 'placeholder', '')
-                    .get('.PasswordControl')
-                    .find('.Label')
-                    .first()
-                    .contains('Enter a new password')
-                    .get('.PasswordControl')
-                    .find('.FormElement-help-text')
-                    .contains('Additional help node text');
-            });
-
-            context('Show Password (Desktop)', () => {
-                it('Should correctly toggle between password and text type when Show Password is clicked', () => {
-                    confirmInputType();
-                });
-
-                it('Should preserve the value entered when Show Password is clicked', () => {
-                    confirmInputValue();
-                });
-            });
-
-            context('Show Password (Mobile)', () => {
-                it('Show Password button should toggle between Show and Hide text', () => {
-                    cy.viewport(375, 667)
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show button')
-                        .contains('Show')
-                        // verify that clicking the button changes the text
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show button')
-                        .click()
-                        .contains('Hide')
-                        // verify that clicking the button changes the text back
-                        .get('.PasswordControl')
-                        .find('.PasswordControl-show button')
-                        .click()
-                        .contains('Show');
-                });
-
-                it('Should correctly toggle between password and text type when Show Password is clicked', () => {
-                    cy.viewport(375, 667).then(() => {
-                        confirmInputType();
-                    });
-                });
-
-                it('Should preserve the value entered when Show Password is clicked', () => {
-                    cy.viewport(375, 667).then(() => {
-                        confirmInputValue();
-                    });
-                });
-            });
-        });
-
-        context('Placeholder', () => {
-            it('Shows a placeholder', () => {
-                cy.visitStory('v1/PasswordControl/Display', 'Placeholder')
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    .should('have.attr', 'placeholder', 'New Password');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        describe('On Focus', () => {
-            it('Executes the method when input is focused on', () => {
-                cy.visitStory('v1/PasswordControl/Methods', 'OnFocus', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onPasswordControlFocus = evt => {
-                            console.log(`onPasswordControlFocus`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onPasswordControlFocus').as(
-                            'onPasswordControlFocus'
-                        );
-                    },
-                })
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    .focus()
-                    .get('@onPasswordControlFocus')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Invalid', () => {
-            it('Displays an error if the input is required', () => {
-                cy.visitStory('v1/PasswordControl/Methods', 'OnInvalidRequired')
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    // Show error on empty field since this is required
-                    .should('have.value', '')
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.PasswordControl')
-                    .find('.FormElementError')
-                    .should('exist')
-                    .contains('A password is required')
-                    // Don't show error on field with content
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    .type('hunter2', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.PasswordControl')
-                    .find('.FormElementError')
-                    .should('not.exist');
-            });
-
-            it('Displays an error if the input does not satisfy minLength', () => {
-                const errorMessage = 'Please enter at least 6 characters.';
-
-                cy.visitStory(
-                    'v1/PasswordControl/Methods',
-                    'OnInvalidMinLength'
-                )
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    // Show error on empty field since this does not meet minLength requirement
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.PasswordControl')
-                    .find('.FormElementError')
-                    .should('exist')
-                    .contains(errorMessage)
-                    // Show error on field that does not meet minLength requirement
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    .type('pw123', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.PasswordControl')
-                    .find('.FormElementError')
-                    .should('exist')
-                    .contains(errorMessage)
-                    // Don't show error on field with enough characters
-                    .get('.PasswordControl')
-                    .find('input[name=password]')
-                    .type('4', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.PasswordControl')
-                    .find('.FormElementError')
-                    .should('not.exist');
-            });
-        });
-
-        describe('On Forgot Password Click', () => {
-            it('Executes the method when the Forgot Password button is clicked', () => {
-                cy.visitStory(
-                    'v1/PasswordControl/Methods',
-                    'OnForgotPasswordClick',
-                    {
-                        onBeforeLoad: contentWindow => {
-                            contentWindow.onForgotPasswordClick = evt => {
-                                console.log(`onForgotPasswordClick`); // eslint-disable-line no-console
-                            };
-
-                            cy.stub(contentWindow, 'onForgotPasswordClick').as(
-                                'onForgotPasswordClick'
-                            );
-                        },
-                    }
-                )
-                    .get('.PasswordControl')
-                    .find('.PasswordControl-forgot')
-                    .should('exist')
-                    .click()
-                    .get('@onForgotPasswordClick')
-                    .should('be.called');
-            });
-        });
-    });
-});

package/styles/Portal/Portal.jsx

@@ -1,65 +0,0 @@
-import isArrayLikeObject from 'lodash/isArrayLikeObject';
-import isString from 'lodash/isString';
-import React, {PureComponent} from 'react';
-import {createPortal} from 'react-dom';
-import PropTypes from 'prop-types';
-import {Provider} from 'react-redux';
-import {document} from 'ssr-window';
-import DOMUtils from '@spothero/utils/dom';
-
-export default class Portal extends PureComponent {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The content to insert into the portal. */
-        children: PropTypes.node.isRequired,
-        /** The element or selector of the element for where the portal should be appended in the DOM tree. */
-        appendTo: PropTypes.oneOfType([
-            PropTypes.object, // Should be PropTypes.instanceOf(Element) but SSR won't support that
-            PropTypes.string,
-        ]),
-        /** When using Redux, allows to pass the store down to the children so they have access to its data. */
-        store: PropTypes.object,
-    };
-    static defaultProps = {
-        appendTo: document.body,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {className, appendTo} = props;
-
-        this._EL = document.createElement('div');
-        this._ROOT = isString(appendTo) ? DOMUtils.el(appendTo) : appendTo;
-
-        if (isArrayLikeObject(this._ROOT)) {
-            this._ROOT = this._ROOT[0];
-        }
-
-        if (className) {
-            DOMUtils.addClass(this._EL, className);
-        }
-    }
-
-    componentDidMount() {
-        this._ROOT.appendChild(this._EL);
-    }
-
-    componentWillUnmount() {
-        this._ROOT.removeChild(this._EL);
-    }
-
-    render() {
-        const {store, children} = this.props;
-
-        if (store) {
-            return createPortal(
-                <Provider store={store}>{children}</Provider>,
-                this._EL
-            );
-        } else {
-            return createPortal(children, this._EL);
-        }
-    }
-}

package/styles/Portal/Portal.spec.js

@@ -1,45 +0,0 @@
-describe('<Portal />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Renders properly in the body and passes props through', () => {
-                cy.visitStory('v1/Portal/Display', 'Default')
-                    .get('.Portal-div')
-                    .contains(`I'm in the body!`)
-                    .parent()
-                    .parent()
-                    .then($el => {
-                        expect($el.prop('tagName').toLowerCase()).to.eq('body');
-                    });
-            });
-        });
-
-        context('Multiple classes', () => {
-            it('Renders properly and passes classes through', () => {
-                cy.visitStory('v1/Portal/Display', 'MultipleClasses')
-                    .get('.Portal-div')
-                    .should('have.class', 'PortalMultipleClasses');
-            });
-        });
-
-        context('In Element', () => {
-            it('Renders properly in an element and passes props through', () => {
-                cy.visitStory('v1/Portal/Display', 'InElement')
-                    .get('.PortalInElement-open-btn')
-                    .click()
-                    .get('.Portal-div')
-                    .contains(`I'm in the PortalInElement-sub div!`)
-                    .parent()
-                    .parent()
-                    .should('have.class', 'PortalInElement-sub');
-            });
-        });
-
-        context('Redux', () => {
-            it('Passes values through from a Redux store properly', () => {
-                cy.visitStory('v1/Portal/Display', 'Redux')
-                    .get('.ReduxConsumer')
-                    .contains('Redux items here!');
-            });
-        });
-    });
-});

package/styles/PulseLoader/PulseLoader.jsx

@@ -1,71 +0,0 @@
-import times from 'lodash/times';
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const PulseLoader = ({className, size, borderWidth, additionalMarkup}) => {
-    const classes = classNames('PulseLoader', className);
-    const borderWidthx4 = borderWidth * 4;
-    const numInnerRings = size / borderWidthx4 - 1;
-
-    return (
-        <div className={classes}>
-            <div
-                className="PulseLoader-pulse"
-                style={{
-                    width: size,
-                    height: size,
-                }}
-            >
-                <div className="PulseLoader-pulse-outer">
-                    <div
-                        className="PulseLoader-pulse-ring"
-                        style={{
-                            borderWidth,
-                        }}
-                    />
-                </div>
-                {times(numInnerRings, i => {
-                    const newSize = size - borderWidthx4 * (i + 1);
-
-                    return (
-                        <div
-                            key={i}
-                            className="PulseLoader-pulse-inner"
-                            style={{
-                                width: newSize,
-                                height: newSize,
-                            }}
-                        >
-                            <div
-                                className="PulseLoader-pulse-ring"
-                                style={{
-                                    borderWidth,
-                                }}
-                            />
-                        </div>
-                    );
-                })}
-            </div>
-            {additionalMarkup}
-        </div>
-    );
-};
-
-PulseLoader.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,
-};
-
-PulseLoader.defaultProps = {
-    size: 120,
-    borderWidth: 7,
-};
-
-export default PulseLoader;

package/styles/PulseLoader/PulseLoader.spec.js

@@ -1,63 +0,0 @@
-const confirmPulseLoaderSize = expectedSize => {
-    return cy
-        .get('.PulseLoader-pulse')
-        .should(
-            'have.attr',
-            'style',
-            `width: ${expectedSize}px; height: ${expectedSize}px;`
-        );
-};
-
-const confirmPulseLoaderBorderWidth = expectedWidth => {
-    return cy
-        .get('.PulseLoader-pulse-ring')
-        .eq(0)
-        .should('have.attr', 'style', `border-width: ${expectedWidth}px;`);
-};
-
-describe('<PulseLoader />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Has default stylings (size of 120px, border width of 7px)', () => {
-                cy.visitStory('v1/PulseLoader/Display', 'Default')
-                    // the size the pulse reaches
-                    .then(() => {
-                        confirmPulseLoaderSize(120);
-                    })
-                    // the size/thickness of a pulse ring (border-width)
-                    .then(() => {
-                        confirmPulseLoaderBorderWidth(7);
-                    });
-            });
-        });
-
-        context('Border Width', () => {
-            it('Has a border width of 3px', () => {
-                cy.visitStory('v1/PulseLoader/Display', 'BorderWidth')
-                    // the size/thickness of a pulse ring (border-width)
-                    .then(() => {
-                        confirmPulseLoaderBorderWidth(3);
-                    });
-            });
-        });
-
-        context('Size', () => {
-            it('Has a size of 70px', () => {
-                cy.visitStory('v1/PulseLoader/Display', 'Size')
-                    // the size the pulse reaches
-                    .then(() => {
-                        confirmPulseLoaderSize(70);
-                    });
-            });
-        });
-
-        context('Additional Markup', () => {
-            it('Has additional markup', () => {
-                cy.visitStory('v1/PulseLoader/Display', 'AdditionalMarkup')
-                    // make sure it contains the markup
-                    .get('.PulseLoader')
-                    .should('contain.text', 'Additional Markup!');
-            });
-        });
-    });
-});

package/styles/Radio/Radio.jsx

@@ -1,114 +0,0 @@
-import React, {Component, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class Radio extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The name for which the chosen value will correspond. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        name: PropTypes.string,
-        /** A value which is used when this radio is selected. */
-        value: PropTypes.string,
-        /** A custom label (typically a Label component) to display next to the radio. */
-        label: PropTypes.element.isRequired,
-        /** Whether the radio should be checked on mount. */
-        defaultChecked: PropTypes.bool,
-        /** Whether the element is disabled. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        disabled: PropTypes.bool,
-        /** Whether the element is required. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        required: PropTypes.bool,
-        /** The unique identifier to ensure this Radio is part of the right RadioGroup. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        id: PropTypes.string,
-        /**
-         * Method called when an item is checked. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        onChange: PropTypes.func,
-        /**
-         * Method called when validation state changes. Automatically passed from RadioGroup, do not set manually.
-         *
-         * @ignore
-         */
-        onValidationChange: PropTypes.func,
-    };
-
-    componentDidMount() {
-        this._input.addEventListener('invalid', this._onInvalid);
-    }
-
-    componentWillUnmount() {
-        this._input.removeEventListener('invalid', this._onInvalid);
-    }
-
-    _onInvalid = evt => {
-        evt.preventDefault();
-
-        const {onValidationChange} = this.props;
-
-        if (onValidationChange) {
-            onValidationChange(evt.currentTarget.validity);
-        }
-    };
-
-    _onChange = evt => {
-        const {onValidationChange, onChange} = this.props;
-
-        if (onValidationChange) {
-            onValidationChange();
-        }
-
-        if (onChange) {
-            onChange(evt);
-        }
-    };
-
-    render() {
-        const {
-            label,
-            className,
-            name,
-            value,
-            defaultChecked,
-            disabled,
-            required,
-            id,
-        } = this.props;
-        const classes = classNames('Radio', 'FormElement', className);
-
-        return (
-            <div className={classes}>
-                <input
-                    ref={node => {
-                        this._input = node;
-                    }}
-                    className="FormElement-item"
-                    id={`Radio-${id}`}
-                    type="radio"
-                    name={name}
-                    value={value}
-                    defaultChecked={defaultChecked}
-                    onChange={this._onChange}
-                    disabled={disabled}
-                    required={required}
-                />
-                {cloneElement(label, {
-                    htmlFor: `Radio-${id}`,
-                })}
-            </div>
-        );
-    }
-}