@spothero/ui 15.1.0 → 15.1.1

package/styles/Tabs/Tabs.spec.js

@@ -1,201 +0,0 @@
-describe('<Tabs />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Tabs/Display', 'Default');
-            });
-
-            it('Should take in and display basic tab and panel content, with default active states and custom classes', () => {
-                cy.get('.Tabs')
-                    .find('.Tab')
-                    .should('have.length', 4)
-                    .eq(0)
-                    .should('have.class', 'Tab-active')
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .should('have.length', 4)
-                    .eq(0)
-                    .should('have.class', 'TabPanel-active')
-                    // check that the mobile select component is rendered
-                    .get('.Tabs')
-                    .find('.TabNavigation-select')
-                    .find('option')
-                    .should('have.length', 4)
-                    .eq(0)
-                    .should('be.selected');
-            });
-
-            it('Should apply custom classes to all components', () => {
-                cy.get('.Tabs')
-                    .should(
-                        'have.class',
-                        'custom-tab-component restaurant-menus'
-                    )
-                    .find('.TabNavigation')
-                    .should('have.class', 'tab-nav menu-nav')
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .eq(0)
-                    .should('have.class', 'menu-tab special-menu')
-                    .get('.Tabs')
-                    .find('.TabContent')
-                    .should(
-                        'have.class',
-                        'tab-content-container restaurant-menus-container'
-                    )
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .eq(3)
-                    .should('have.class', 'menu-content dessert-menu-content');
-            });
-
-            it('Should have visible Select on mobile viewport and visible tabs otherwise', () => {
-                cy.get('.Tabs')
-                    .find('.TabNavigation-select')
-                    .should('not.be.visible')
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .should('be.visible')
-                    .viewport('iphone-6')
-                    .get('.Tabs')
-                    .find('.TabNavigation-select')
-                    .should('be.visible')
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .should('not.be.visible');
-            });
-        });
-
-        context('Child Nodes', () => {
-            it('Should take in and display complex tab and panel content', () => {
-                cy.visitStory('v1/Tabs/Display', 'ChildNodes')
-                    // Check that spans exist in the tab
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .eq(0)
-                    .find('span.breakfast-tab')
-                    .should('exist')
-                    .should('contain', 'Breakfast Menu')
-                    // Check that icon is in the tab
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .eq(3)
-                    .find('.Icon')
-                    .should('exist')
-                    // Check that span/div exists in the panel
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .eq(0)
-                    .find('span.bacon')
-                    .should('exist')
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .eq(0)
-                    .find('div.toast')
-                    .should('exist')
-                    // Check that ul/li exists in the panel
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .eq(1)
-                    .find('ul')
-                    .should('exist')
-                    .find('li')
-                    .should('have.length', 3);
-            });
-        });
-
-        context('Selected Index', () => {
-            it('Should display specified tab and content', () => {
-                cy.visitStory('v1/Tabs/Display', 'SelectedIndex')
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .eq(3)
-                    .should('have.class', 'Tab-active')
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .eq(3)
-                    .should('have.class', 'TabPanel-active')
-                    // check that the mobile select component has the correct option selected
-                    .get('.Tabs')
-                    .find('.TabNavigation-select option')
-                    .eq(3)
-                    .should('be.selected');
-            });
-        });
-
-        context('Render Active Only', () => {
-            it('Should render only tab content corresponding to the active tab', () => {
-                cy.visitStory('v1/Tabs/Display', 'RenderActiveOnly')
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .should('have.length', 1)
-                    .should('have.class', 'TabPanel-active')
-                    .should('contain', 'Bacon, Eggs, and Toast')
-                    .get('.Tabs')
-                    .find('.Tab')
-                    .eq(2)
-                    .click()
-                    .get('.Tabs')
-                    .find('.TabPanel')
-                    .should('have.length', 1)
-                    .should('have.class', 'TabPanel-active')
-                    .should(
-                        'contain',
-                        'Prime Rib, Mashed Potatoes, and Glazed Carrots'
-                    );
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('On Select', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Tabs/Methods', 'OnSelect', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTabSelect = evt => {
-                            console.log(`onTabSelect`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTabSelect').as('onTabSelect');
-                    },
-                });
-            });
-
-            it('Should be called when a tab is selected', () => {
-                cy.get('.Tabs')
-                    .find('.Tab')
-                    .eq(1)
-                    .should('not.have.class', 'Tab-active')
-                    .click()
-                    .get('@onTabSelect')
-                    .should('be.called')
-                    // check that selecting from the mobile select component also calls @onTabSelect
-                    .viewport('iphone-6')
-                    .get('.Tabs')
-                    // cannot use selectItem method due to rerender of TabNavigation
-                    .find('.TabNavigation-select select')
-                    .select('2')
-                    .get('@onTabSelect')
-                    .should('be.called');
-            });
-
-            it('Should not be called when a tab is already active', () => {
-                cy.get('.Tabs')
-                    .find('.Tab')
-                    .eq(0)
-                    .should('have.class', 'Tab-active')
-                    .click()
-                    .get('@onTabSelect')
-                    .should('not.be.called')
-                    // check that selecting from the mobile select component does not call @onTabSelect
-                    .viewport('iphone-6')
-                    .get('.Tabs')
-                    // cannot use selectItem method due to rerender of TabNavigation
-                    .find('.TabNavigation-select select')
-                    .select('0')
-                    .get('@onTabSelect')
-                    .should('not.be.called');
-            });
-        });
-    });
-});

package/styles/Tabs/index.js

@@ -1,5 +0,0 @@
-export {default as Tab} from './Tab';
-export {default as Tabs} from './Tabs';
-export {default as TabPanel} from './TabPanel';
-export {default as TabContent} from './TabContent';
-export {default as TabNavigation} from './TabNavigation';

package/styles/TextArea/TextArea.jsx

@@ -1,137 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class TextArea extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique name which is used to identify this element. If belonging to a form this is used as the key for serialization and is required. */
-        name: PropTypes.string,
-        /** Text to display in the field before a user starts to type in the textarea. */
-        placeholder: PropTypes.string,
-        /** A custom label (typically a Label component) to display above the textarea. */
-        label: PropTypes.element,
-        /** Whether this field is required during validation. */
-        required: PropTypes.bool,
-        /** Disallows user interaction. */
-        disabled: PropTypes.bool,
-        /** Whether the textarea should be auto focused when mounted. */
-        autoFocus: PropTypes.bool,
-        /** A custom help element to place below the input. */
-        helpNode: PropTypes.node,
-        /** A custom validation error (typically a FormElementError component) to display when this component is part of a form and is invalid. */
-        error: PropTypes.element,
-        /** The default value to display in the textarea when mounted. */
-        defaultValue: PropTypes.string,
-        /** Specifies the maximum number of characters allowed. */
-        maxLength: PropTypes.number,
-        /** A custom icon (typically an Icon component) to show in the textarea. */
-        icon: PropTypes.element,
-        /**
-         * Function to execute when the textarea changes.
-         *
-         * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-         */
-        onChange: 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,
-    };
-    state = {
-        validationState: null,
-    };
-
-    componentDidMount() {
-        this._textarea.addEventListener('invalid', this._onInvalid);
-    }
-
-    componentWillUnmount() {
-        this._textarea.removeEventListener('invalid', this._onInvalid);
-    }
-
-    _onInvalid = evt => {
-        evt.preventDefault();
-
-        const {onInvalid} = this.props;
-        const validationState = evt.currentTarget.validity;
-
-        this.setState({
-            validationState,
-        });
-
-        if (onInvalid) {
-            onInvalid(validationState);
-        }
-    };
-
-    _onChange = evt => {
-        const {onChange} = this.props;
-
-        this.setState({
-            validationState: null,
-        });
-
-        if (onChange) {
-            onChange(evt);
-        }
-    };
-
-    render() {
-        const {
-            className,
-            name,
-            label,
-            placeholder,
-            disabled,
-            required,
-            autoFocus,
-            helpNode,
-            error,
-            defaultValue,
-            maxLength,
-            icon,
-        } = this.props;
-        const {validationState} = this.state;
-        const isValid = validationState ? validationState.isValid : true;
-        const classes = classNames(
-            'TextArea',
-            'FormElement',
-            {'TextArea-with-icon': icon},
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-
-        return (
-            <div className={classes}>
-                <div className="FormElement-control-container">
-                    {label}
-                    <div className="FormElement-control">
-                        <textarea
-                            ref={node => {
-                                this._textarea = node;
-                            }}
-                            className="FormElement-item"
-                            name={name}
-                            placeholder={placeholder}
-                            required={required}
-                            disabled={disabled}
-                            autoFocus={autoFocus}
-                            maxLength={maxLength}
-                            defaultValue={defaultValue}
-                            onChange={this._onChange}
-                        />
-                        {icon}
-                    </div>
-                </div>
-                {helpNode && (
-                    <div className="FormElement-help-text">{helpNode}</div>
-                )}
-                {!isValid && error}
-            </div>
-        );
-    }
-}

package/styles/TextArea/TextArea.spec.js

@@ -1,111 +0,0 @@
-describe('<TextArea />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Should have placeholder, default value, label, help text, and custom class names', () => {
-                cy.visitStory('v1/TextArea/Display', 'Default')
-                    .get('.TextArea')
-                    .should('exist')
-                    .and('have.class', 'custom-class1')
-                    .and('have.class', 'custom-class2')
-                    .find('textarea')
-                    .should('have.attr', 'name', 'message')
-                    .and('have.attr', 'placeholder', 'Enter Message Here')
-                    .and('have.value', 'Dear Sir or Madam:')
-                    .get('.TextArea')
-                    .find('.Label')
-                    .contains('Customer Feedback')
-                    .get('.TextArea')
-                    .find('.FormElement-help-text')
-                    .contains('Additional help node text');
-            });
-        });
-
-        context('Icon', () => {
-            it('Should render with an icon', () => {
-                cy.visitStory('v1/TextArea/Display', 'Icon')
-                    .get('.TextArea')
-                    .find('.Icon')
-                    .should('exist');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Is disabled', () => {
-                cy.visitStory('v1/TextArea/Display', 'Disabled')
-                    .get('.TextArea')
-                    .find('textarea')
-                    .should('be.disabled');
-            });
-        });
-
-        context('Auto Focus', () => {
-            it('Receives focus after rendered', () => {
-                cy.visitStory('v1/TextArea/Display', 'AutoFocus')
-                    .focused()
-                    .should('have.attr', 'name', 'message');
-            });
-        });
-
-        context('Max Length', () => {
-            it('Has maxlength attribute and does not allow more characters', () => {
-                // longstring is 143 characters long
-                const longstring =
-                    '12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890AAA';
-
-                cy.visitStory('v1/TextArea/Display', 'MaxLength')
-                    .get('.TextArea')
-                    .find('textarea')
-                    .should('have.attr', 'maxlength', '140')
-                    .type(longstring, {delay: 0})
-                    .should('have.value', longstring.substring(0, 140));
-            });
-        });
-    });
-
-    context('Methods', () => {
-        describe('On Change', () => {
-            it('Executes the method when a change is detected', () => {
-                cy.visitStory('v1/TextArea/Methods', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTextAreaChange = evt => {
-                            console.log(`onTextAreaChange`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTextAreaChange').as(
-                            'onTextAreaChange'
-                        );
-                    },
-                })
-                    .get('.TextArea')
-                    .find('textarea')
-                    .type('I have a complaint', {delay: 0})
-                    .get('@onTextAreaChange')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Invalid', () => {
-            it('Displays an error if the input is invalid', () => {
-                cy.visitStory('v1/TextArea/Methods', 'OnInvalid')
-                    .get('.TextArea')
-                    .find('textarea')
-                    // Show error on empty field since this is required
-                    .should('have.value', '')
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextArea')
-                    .find('.FormElementError')
-                    .should('exist')
-                    // Don't show error on field with content
-                    .get('.TextArea')
-                    .find('textarea')
-                    .type('I have a complaint', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextArea')
-                    .find('.FormElementError')
-                    .should('not.exist');
-            });
-        });
-    });
-});

package/styles/TextInput/TextInput.jsx

@@ -1,159 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-import InputElement from 'react-input-mask';
-import Loader from 'v1/components/Loader/Loader';
-import TextInputPropTypes from './TextInputPropTypes';
-
-export default class TextInput extends Component {
-    static propTypes = TextInputPropTypes;
-    static defaultProps = {
-        type: 'text',
-        maskChar: null,
-        iconPosition: 'left',
-    };
-    state = {
-        validationState: null,
-    };
-
-    componentDidMount() {
-        this._input
-            ?.getInputDOMNode()
-            ?.addEventListener('invalid', this._onInvalid);
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevProps.focus !== this.props.focus) {
-            this._checkFocus();
-        }
-    }
-
-    componentWillUnmount() {
-        this._input
-            ?.getInputDOMNode()
-            ?.removeEventListener('invalid', this._onInvalid);
-    }
-
-    _onInvalid = evt => {
-        evt.preventDefault();
-
-        const {onInvalid} = this.props;
-        const validationState = evt.currentTarget.validity;
-
-        this.setState({
-            validationState,
-        });
-
-        if (onInvalid) {
-            onInvalid(validationState);
-        }
-    };
-
-    _onChange = evt => {
-        const {onChange} = this.props;
-
-        this.setState({
-            validationState: null,
-        });
-
-        if (onChange) {
-            onChange(evt);
-        }
-    };
-
-    _checkFocus() {
-        if (this.props.focus) {
-            this._input?.getInputDOMNode()?.focus();
-        }
-    }
-
-    /**
-     * Getter for the input DOM element.
-     *
-     * @public
-     * @returns {Element} - The input element.
-     */
-    get node() {
-        return this._input?.getInputDOMNode();
-    }
-
-    render() {
-        const {
-            className,
-            name,
-            type,
-            label,
-            placeholder,
-            pattern,
-            required,
-            disabled,
-            loading,
-            autoFocus,
-            error,
-            defaultValue,
-            icon,
-            iconPosition,
-            helpNode,
-            inline,
-            readOnly,
-            maxLength,
-            min,
-            max,
-            mask,
-            maskChar,
-            additionalInputProps,
-            onFocus,
-            onBlur,
-        } = this.props;
-        const {validationState} = this.state;
-        const isValid = validationState ? validationState.valid : true;
-        const classes = classNames(
-            'TextInput',
-            'FormElement',
-            {'FormElement-inline': inline},
-            {'FormElement-with-icon': icon},
-            {'FormElement-loading': loading},
-            {[`FormElement-with-icon-${iconPosition}`]: icon},
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-
-        return (
-            <div className={classes}>
-                {label}
-                <div className="FormElement-control">
-                    <InputElement
-                        ref={node => {
-                            this._input = node;
-                        }}
-                        className="FormElement-item"
-                        name={name}
-                        type={type}
-                        placeholder={placeholder}
-                        disabled={disabled}
-                        autoFocus={autoFocus}
-                        required={required}
-                        pattern={pattern}
-                        maxLength={maxLength}
-                        min={min}
-                        max={max}
-                        onChange={this._onChange}
-                        onFocus={onFocus}
-                        onBlur={onBlur}
-                        mask={mask}
-                        maskChar={maskChar}
-                        alwaysShowMask={false}
-                        readOnly={readOnly}
-                        defaultValue={defaultValue}
-                        {...additionalInputProps}
-                    />
-                    {icon}
-                    {loading && <Loader size={16} borderWidth={2} />}
-                </div>
-                {helpNode && (
-                    <div className="FormElement-help-text">{helpNode}</div>
-                )}
-                {!isValid && error}
-            </div>
-        );
-    }
-}