@spothero/ui 15.0.0 → 15.1.1

package/styles/Radio/Radio.spec.js

@@ -1,128 +0,0 @@
-describe('<Radio />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Should have an input and some kind of label element', () => {
-                cy.visitStory('v1/Radio/Display', 'Default')
-                    .get('.Radio')
-                    .find('input[type=radio]')
-                    .should('have.class', 'FormElement-item')
-                    .and('not.have.attr', 'disabled')
-                    .get('.Radio')
-                    .find('.Label')
-                    .contains('This is my label');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Should have a disabled input', () => {
-                cy.visitStory('v1/Radio/Display', 'Disabled')
-                    .get('.Radio')
-                    .find('input[type=radio]')
-                    .should('be.disabled');
-            });
-        });
-
-        context('Custom Classes', () => {
-            it('Should have custom class names', () => {
-                cy.visitStory('v1/Radio/Display', 'CustomClass')
-                    .get('.Radio')
-                    .should('have.class', 'custom-class1')
-                    .and('have.class', 'custom-class2');
-            });
-        });
-    });
-
-    describe('<RadioGroup />', () => {
-        const radioValues = ['vanilla', 'chocolate', 'strawberry', 'pistachio'];
-
-        it('Default', () => {
-            cy.visitStory('v1/Radio/Group', 'Default')
-                // verify custom classes
-                .get('.RadioGroup')
-                .should('have.class', 'custom-class1')
-                .and('have.class', 'custom-class2')
-                // verify # of Radios and properties on each
-                .find('.Radio')
-                .should('have.length', 4)
-                .find('input[type=radio]')
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .should('have.attr', 'name', 'ice-cream')
-                        .and('have.attr', 'value', radioValues[index])
-                        .and('not.be.disabled')
-                        .and('not.have.attr', 'required');
-                })
-                // verify that Radios are being checked
-                .get('.RadioGroup')
-                .find('input[value=chocolate]')
-                .should('have.checked', true)
-                .get('.RadioGroup')
-                .find('input[value=pistachio]')
-                .click()
-                .should('have.checked', true)
-                .get('.RadioGroup')
-                .find('input[value=vanilla]')
-                .click()
-                .get('.RadioGroup')
-                .find('input[name=ice-cream]:checked')
-                .should('have.value', 'vanilla');
-        });
-
-        it('Disabled', () => {
-            cy.visitStory('v1/Radio/Group', 'Disabled')
-                .get('.RadioGroup')
-                .find('input[type=radio]')
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .and('be.disabled')
-                        .and('not.have.attr', 'required');
-                });
-        });
-
-        it('Required', () => {
-            cy.visitStory('v1/Radio/Group', 'Required')
-                .get('.RadioGroup')
-                .find('input[type=radio]')
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .and('not.be.disabled')
-                        .and('have.attr', 'required');
-                })
-                // try to submit the form
-                .get('.Button')
-                .click()
-                .get('.RadioGroup')
-                .find('.FormElementError')
-                .contains('Please select a flavor!')
-                // fix the error
-                .get('.RadioGroup')
-                .find('input[value=chocolate]')
-                .click()
-                .get('.RadioGroup')
-                .find('.FormElementError')
-                .should('not.exist');
-        });
-
-        it('On Change', () => {
-            cy.visitStory('v1/Radio/Group', 'OnChange', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.onRadioGroupChange = evt => {
-                        console.log(`onRadioGroupChange`); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'onRadioGroupChange').as(
-                        'onRadioGroupChange'
-                    );
-                },
-            })
-                .get('.RadioGroup')
-                .find('input[type=radio]')
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .click()
-                        .get('@onRadioGroupChange')
-                        .should('be.called');
-                });
-        });
-    });
-});

package/styles/Radio/RadioGroup.jsx

@@ -1,105 +0,0 @@
-import React, {Component, Children, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class RadioGroup extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** A unique ID which is used to identify this element for accessibility purposes on the client as well as the server. */
-        id: PropTypes.string.isRequired,
-        /** Children should only be made up of Radio components. */
-        children: PropTypes.arrayOf(PropTypes.element).isRequired,
-        /** A unique name which is used to identify this element. If belonging to a form this is used as the key for validation bindings and is required. The name will be passed down to child Radio components to set the proper value upon selection. */
-        name: PropTypes.string.isRequired,
-        /** Whether to disable all the Radio items in this group. */
-        disabled: PropTypes.bool,
-        /** A custom label (typically a Label component) to display next to the radio. */
-        label: PropTypes.element,
-        /** Whether this field is required during validation. */
-        required: PropTypes.bool,
-        /** 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 selected state 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,
-    };
-
-    constructor(props) {
-        super(props);
-
-        if (!props.id) {
-            throw new Error(
-                `The prop 'id' is required to make RadioGroup accessible for users using assistive technologies such as screen readers. Check the render method of RadioGroup.`
-            );
-        }
-    }
-
-    _onValidationChange = validationState => {
-        const {onInvalid} = this.props;
-
-        this.setState({
-            validationState,
-        });
-
-        if (onInvalid) {
-            onInvalid(validationState);
-        }
-    };
-
-    render() {
-        const {
-            className,
-            id,
-            children,
-            name,
-            label,
-            required,
-            disabled,
-            error,
-            onChange,
-        } = this.props;
-        const {validationState} = this.state;
-        const isValid = validationState ? validationState.valid : true;
-        const classes = classNames(
-            'RadioGroup',
-            'FormElement',
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-
-        return (
-            <fieldset className={classes} id={`RadioGroup-${id}`}>
-                <div
-                    className="FormElement-control-container"
-                    role="radiogroup"
-                >
-                    {label}
-                    {Children.map(children, (child, i) => {
-                        return cloneElement(child, {
-                            name,
-                            disabled,
-                            required,
-                            onChange,
-                            id: `${id}-item-${i}`,
-                            onValidationChange: this._onValidationChange,
-                        });
-                    })}
-                </div>
-                {!isValid && error}
-            </fieldset>
-        );
-    }
-}

package/styles/RenderInBody/RenderInBody.jsx

@@ -1,56 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {unmountComponentAtNode, render as renderDOM} from 'react-dom';
-import {Provider} from 'react-redux';
-import DOMUtils from '@spothero/utils/dom';
-
-export default class RenderInBody extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The element(s) to render. */
-        children: PropTypes.element.isRequired,
-        /** When using Redux, allows to pass the store down to the children so they have access to its data. */
-        store: PropTypes.object,
-    };
-
-    componentDidMount() {
-        const {className} = this.props;
-
-        this._container = document.createElement('div');
-
-        if (className) {
-            DOMUtils.addClass(this._container, className);
-        }
-
-        document.body.appendChild(this._container);
-
-        this._renderLayer();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        this._renderLayer();
-    }
-
-    componentWillUnmount() {
-        unmountComponentAtNode(this._container);
-        document.body.removeChild(this._container);
-    }
-
-    _renderLayer() {
-        const {store, children} = this.props;
-
-        if (store) {
-            renderDOM(
-                <Provider store={store}>{children}</Provider>,
-                this._container
-            );
-        } else {
-            renderDOM(children, this._container);
-        }
-    }
-
-    render() {
-        return null;
-    }
-}

package/styles/RenderInBody/RenderInBody.spec.js

@@ -1,24 +0,0 @@
-describe('<RenderInBody />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Renders properly and passes props through', () => {
-                cy.visitStory('v1/RenderInBody/Display', 'Default')
-                    .get('.RenderInBody-div')
-                    .contains(`I'm in the body!`)
-                    .parent()
-                    .parent()
-                    .then($el => {
-                        expect($el.prop('tagName').toLowerCase()).to.eq('body');
-                    });
-            });
-        });
-
-        context('Redux', () => {
-            it('Passes values through from a Redux store properly', () => {
-                cy.visitStory('v1/RenderInBody/Display', 'Redux')
-                    .get('.ReduxConsumer')
-                    .contains('Redux items here!');
-            });
-        });
-    });
-});

package/styles/Select/Select.jsx

@@ -1,251 +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 omit from 'lodash/omit';
-// import {
-//     SelectItemPropTypes,
-//     OptgroupPropTypes
-// } from './SelectItemPropTypes';
-
-export default class Select 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,
-        /** 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,
-            ...attrs
-        } = this.props;
-
-        const spreadProps = omit(attrs, ['onChange', 'onInvalid']);
-        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}
-                        {...spreadProps}
-                    >
-                        {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>
-        );
-    }
-}