@spothero/ui 15.1.0 → 15.1.1

package/styles/Select/Select.spec.js

@@ -1,254 +0,0 @@
-describe('<Select />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Renders select and options', () => {
-                cy.visitStory('v1/Select/Display', 'Default')
-                    // make sure it's a Select component
-                    .get('.SelectDefault')
-                    .should('have.class', 'Select')
-                    // make sure dropdown exists
-                    .get('.Select-dropdown-icon')
-                    .should('exist')
-                    // make sure options are what we expect
-                    .get('option')
-                    .eq(0)
-                    .should('have.value', 'Option 1')
-                    .get('option')
-                    .eq(4)
-                    .should('have.value', 'Option 5');
-            });
-        });
-
-        context('With Optional Props', () => {
-            it('Renders proper elements based on optional props', () => {
-                cy.visitStory('v1/Select/Display', 'WithProps', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSelectFormSubmit = evt => {
-                            console.log('onSelectFormSubmit'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onSelectFormSubmit').as(
-                            'selectFormSubmit'
-                        );
-                    },
-                })
-                    // make sure select is required
-                    .get('.SelectWithProps select.FormElement-item')
-                    .should('have.attr', 'required')
-                    // make sure select is rendered inline
-                    .get('.SelectWithProps')
-                    .should('have.class', 'FormElement-inline')
-                    // make sure label renders properly
-                    .get('.SelectWithProps .Label')
-                    .contains('Select Dropdown')
-                    // make sure placeholder renders properly
-                    .get('option')
-                    .eq(0)
-                    .contains('Please select an item')
-                    .should('have.attr', 'disabled', 'disabled')
-                    // make sure Select-icon renders
-                    .get('.Select-icon > .Icon')
-                    .should('have.class', 'Icon-info')
-                    // make sure help node renders
-                    .get('.FormElement-help-text')
-                    .contains(
-                        'This is where some helpful information might appear.'
-                    )
-                    // after submit without selected, make sure error shows
-                    .get('.SelectWithProps-submit')
-                    .click()
-                    .get('@selectFormSubmit')
-                    .should('be.calledWith', null)
-                    .get('.SelectWithProps')
-                    .should('have.class', 'FormElement-contains-error')
-                    .get('.FormElementError')
-                    .contains('Please select an option');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Has disabled attribute', () => {
-                cy.visitStory('v1/Select/Display', 'Disabled')
-                    .get('.Select .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled');
-            });
-        });
-
-        context('With Option Groups', () => {
-            it('Renders select with option groups', () => {
-                cy.visitStory('v1/Select/Display', 'WithOptionGroups')
-                    // make sure optgroup exists and has options
-                    .get('optgroup')
-                    .eq(0)
-                    .should('have.attr', 'label', 'Option Group A')
-                    .get('optgroup')
-                    .eq(1)
-                    .should('have.attr', 'label', 'Option Group B')
-                    .get('option')
-                    .eq(0)
-                    .should('have.value', 'Option A')
-                    .get('option')
-                    .eq(4)
-                    .should('have.value', 'Option E');
-            });
-        });
-
-        context('With Mixed Options', () => {
-            it('Renders select with mixed items and option groups', () => {
-                cy.visitStory('v1/Select/Display', 'WithMixedOptions')
-                    // Check optgroups are rendered
-                    .get('optgroup')
-                    .should('have.length', 2)
-                    .get('optgroup')
-                    .eq(0)
-                    .should('have.attr', 'label', 'Option Group A')
-                    .get('optgroup')
-                    .eq(1)
-                    .should('have.attr', 'label', 'Option Group B')
-                    // Check options have the right values
-                    .get('option')
-                    .should('have.length', 15)
-                    .get('option')
-                    .eq(1)
-                    .should('have.value', 'Option B')
-                    .get('option')
-                    .eq(4)
-                    .should('have.value', 'Option E')
-                    .get('option')
-                    .eq(8)
-                    .should('have.value', 'Option I')
-                    .get('option')
-                    .eq(11)
-                    .should('have.value', 'Option 2');
-            });
-        });
-
-        context('Loading', () => {
-            it('Has loader', () => {
-                cy.visitStory('v1/Select/Display', 'Loading')
-                    .get('.Loader')
-                    .should('exist')
-                    .parent()
-                    .parent()
-                    .should('have.class', 'Select');
-            });
-        });
-
-        context('Custom Icon', () => {
-            it('Has a custom dropdown icon', () => {
-                cy.visitStory('v1/Select/Display', 'WithCustomIcon')
-                    .get('.Select-dropdown-icon')
-                    .should('have.class', 'Icon-settings');
-            });
-        });
-
-        context('Default Value', () => {
-            it('Renders with default value selected', () => {
-                cy.visitStory('v1/Select/Display', 'WithDefaultValue')
-                    // make sure default value is selected
-                    .get('option:selected')
-                    .contains('Option 3')
-                    .should('have.value', 'Option 3');
-            });
-        });
-
-        context('Spread Additional Attributes', () => {
-            it('Renders with default value selected', () => {
-                cy.visitStory('v1/Select/Display', 'SpreadAdditionalProps')
-                    .get('#my-search-field')
-                    .should('have.attr', 'aria-label', 'Your search');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('OnChange', () => {
-            it('OnChange method functions properly', () => {
-                cy.visitStory('v1/Select/Methods', 'OnChange', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSelectChange = ({label, value}) => {
-                            console.log('onSelectChange'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onSelectChange').as(
-                            'selectChange'
-                        );
-                    },
-                })
-                    // fill form
-                    .get('.Select')
-                    .as('item')
-                    .selectItem({alias: 'item', value: 'Option 2'})
-                    // calls the onChange method
-                    .get('@selectChange')
-                    .should('be.calledWith', {
-                        label: 'Option 2',
-                        value: 'Option 2',
-                    });
-            });
-        });
-
-        context('OnFocus', () => {
-            it('OnFocus method functions properly', () => {
-                cy.visitStory('v1/Select/Methods', 'OnFocus', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSelectFocus = evt => {
-                            console.log('onSelectFocus'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onSelectFocus').as(
-                            'selectFocus'
-                        );
-                    },
-                })
-                    // fill form
-                    .get('.Select')
-                    .as('item')
-                    .selectItem({alias: 'item', value: 'Option 2'})
-                    // calls the onFocus method
-                    .get('@selectFocus')
-                    .should('be.called');
-            });
-        });
-
-        context('OnInvalid', () => {
-            it('OnInvalid method functions properly and form is submitted when valid', () => {
-                cy.visitStory('v1/Select/Methods', 'OnInvalid', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSelectFormSubmit = evt => {
-                            console.log('onSelectFormSubmit'); // eslint-disable-line no-console
-                        };
-
-                        contentWindow.onSelectInvalid = validationState => {
-                            console.log('onSelectInvalid'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onSelectFormSubmit').as(
-                            'selectFormSubmit'
-                        );
-
-                        cy.stub(contentWindow, 'onSelectInvalid').as(
-                            'selectInvalid'
-                        );
-                    },
-                })
-                    .get('.SelectMethods-submit')
-                    .click()
-                    // check validity
-                    .get('@selectInvalid')
-                    .should('be.called')
-                    // fill form
-                    .get('.Select')
-                    .as('item')
-                    .selectItem({alias: 'item', value: 'Option 2'})
-                    // submit after item is selected
-                    .get('.SelectMethods-submit')
-                    .click()
-                    .get('@selectFormSubmit')
-                    .should('be.calledWith', {
-                        select: 'Option 2',
-                    });
-            });
-        });
-    });
-});

package/styles/Select/SelectItemPropTypes.js

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-
-export const SelectItemPropTypes = {
-    /** The label to display visually in the Select. */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    /** The value to return when a selection is made. */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    /** Whether the option is disabled. */
-    disabled: PropTypes.bool,
-};
-
-export const OptgroupPropTypes = {
-    /** The optgroup label within the list of options */
-    label: PropTypes.string,
-    /** An array of options with label/value pairs */
-    optgroup: PropTypes.arrayOf(PropTypes.shape(SelectItemPropTypes)),
-};
-
-export default SelectItemPropTypes;

package/styles/Select/index.js

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

package/styles/SelectControlled/SelectControlled.jsx

@@ -1,250 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import React, {Component, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import IconChevronDown from '@spothero/icons/chevron-down';
-import DOMUtils from '@spothero/utils/dom';
-import Loader from 'v1/components/Loader/Loader';
-// import {
-//     SelectItemPropTypes,
-//     OptgroupPropTypes
-// } from './SelectItemPropTypes';
-
-export default class SelectControlled 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,
-        /** A custom label (typically a Label component) to display above the select. */
-        label: PropTypes.element,
-        /** Adds an initial, unselectable item to display in the dropdown. */
-        placeholder: PropTypes.string,
-        /** Whether this field is required during validation. */
-        required: PropTypes.bool,
-        /** Disallows user interaction. */
-        disabled: PropTypes.bool,
-        /** Whether to show a loading animation inside of the component. */
-        loading: PropTypes.bool,
-        /** An array of options or an array of option groups */
-        items: PropTypes.array.isRequired,
-        // items: PropTypes.oneOfType([
-        //     PropTypes.arrayOf(PropTypes.shape(SelectItemPropTypes)),
-        //     PropTypes.arrayOf(PropTypes.shape(OptgroupPropTypes))
-        // ]).isRequired,
-        /** A custom help element to place below the select. */
-        helpNode: PropTypes.node,
-        /** Applies proper styling to display this field inline in a form. */
-        inline: PropTypes.bool,
-        /** A custom icon (typically an Icon component) to show instead of the default arrow dropdown icon. */
-        dropdownIcon: PropTypes.element,
-        /** A custom icon (typically an Icon component) to show in the select field. */
-        icon: PropTypes.element,
-        /** If an icon is provided, whether it should appear on the left or right side of the input field. */
-        iconPosition: PropTypes.oneOf(['left', 'right']),
-        /** The default value to display in the select when mounted. */
-        defaultValue: PropTypes.string,
-        /** Value to display in the select when used as a controlled form element. Cannot be used with `defaultValue`. */
-        value: PropTypes.string,
-        /** A custom validation error (typically a FormElementError component) to display when this component is part of a form and is invalid. */
-        error: PropTypes.element,
-        /**
-         * Function to execute when the select changes.
-         *
-         * @param {Object} item - The value/label pair of the selection.
-         */
-        onChange: PropTypes.func,
-        /**
-         * Function to execute when the select 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 = {
-        iconPosition: 'left',
-    };
-    state = {
-        validationState: null,
-    };
-    _isFirstRender = true;
-
-    componentDidMount() {
-        // if a placeholder is present on first render, we want to use this for setting the placeholder class to avoid a flash
-        // in the coloring of the placeholder text in the field on initial load
-        this._isFirstRender = false;
-        this._select.addEventListener('invalid', this._onInvalid);
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        this._checkIfDisabledSelected();
-    }
-
-    componentWillUnmount() {
-        this._select.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 {items, onChange} = this.props;
-        const selectedItem = items
-            .reduce((options, {optgroup, ...item}) => {
-                return optgroup
-                    ? [...options, ...optgroup]
-                    : [...options, item];
-            }, [])
-            .find(({value}) => value === evt.target.value);
-
-        this.setState({
-            validationState: null,
-        });
-
-        if (onChange) {
-            onChange(selectedItem);
-        }
-    };
-
-    _checkIfDisabledSelected() {
-        // if a disabled option is selected at first, make it the same color as placeholder as thats typically why its selected
-        if (isEmpty(this._select.value)) {
-            DOMUtils.addClass(this._select, 'FormElement-item-placeholder');
-        } else {
-            DOMUtils.removeClass(this._select, 'FormElement-item-placeholder');
-        }
-    }
-
-    _renderOptgroup = ({label, optgroup}) => {
-        return (
-            <optgroup key={label} label={label}>
-                {optgroup.map(this._renderItem)}
-            </optgroup>
-        );
-    };
-
-    _renderItem = ({disabled = false, label = '', value = ''}, i) => {
-        return (
-            <option key={i} value={value} disabled={disabled}>
-                {label}
-            </option>
-        );
-    };
-
-    /**
-     * Getter for the select DOM element.
-     *
-     * @public
-     * @returns {Element} - The select element.
-     */
-    get node() {
-        return this._select;
-    }
-
-    render() {
-        const {
-            className,
-            name,
-            items,
-            disabled,
-            loading,
-            error,
-            helpNode,
-            label,
-            dropdownIcon,
-            icon,
-            iconPosition,
-            required,
-            inline,
-            defaultValue,
-            placeholder,
-            onFocus,
-            value,
-        } = this.props;
-        const {validationState} = this.state;
-        const isValid = validationState ? validationState.valid : true;
-        const containerClasses = cn(
-            'Select',
-            'FormElement',
-            {'FormElement-inline': inline},
-            {'FormElement-with-icon': icon},
-            {[`FormElement-with-icon-${iconPosition}`]: icon},
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-        const itemClasses = cn('FormElement-item', {
-            'FormElement-item-placeholder':
-                placeholder && !defaultValue && this._isFirstRender,
-        });
-        const customIconClasses = cn(
-            'Select-dropdown-icon',
-            dropdownIcon ? dropdownIcon.props.className : null
-        );
-        const newDefaultValue =
-            placeholder && !defaultValue ? '' : defaultValue;
-
-        return (
-            <div className={containerClasses}>
-                {label}
-                <div className="FormElement-control">
-                    <select
-                        ref={node => {
-                            this._select = node;
-                        }}
-                        className={itemClasses}
-                        name={name}
-                        required={required}
-                        disabled={disabled}
-                        defaultValue={newDefaultValue}
-                        onFocus={onFocus}
-                        onChange={this._onChange}
-                        value={value}
-                    >
-                        {placeholder && (
-                            <option value="" disabled>
-                                {placeholder}
-                            </option>
-                        )}
-                        {items.map((item, i) => {
-                            return item.optgroup
-                                ? this._renderOptgroup(item)
-                                : this._renderItem(item, i);
-                        })}
-                    </select>
-                    {loading ? (
-                        <Loader size={16} borderWidth={2} />
-                    ) : dropdownIcon ? (
-                        cloneElement(dropdownIcon, {
-                            className: customIconClasses,
-                        })
-                    ) : (
-                        <IconChevronDown className="Select-dropdown-icon" />
-                    )}
-                    <span className="Select-icon">{icon}</span>
-                </div>
-                {helpNode && (
-                    <div className="FormElement-help-text">{helpNode}</div>
-                )}
-                {!isValid && error}
-            </div>
-        );
-    }
-}