@spothero/ui 15.1.0 → 15.1.2

package/styles/SelectControlled/SelectControlled.spec.js

@@ -1,290 +0,0 @@
-describe('<SelectControlled />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Renders select and options', () => {
-                cy.visitStory('v1/SelectControlled/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/SelectControlled/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/SelectControlled/Display', 'Disabled')
-                    .get('.Select .FormElement-item')
-                    .should('have.attr', 'disabled', 'disabled');
-            });
-        });
-
-        context('With Option Groups', () => {
-            it('Renders select with option groups', () => {
-                cy.visitStory('v1/SelectControlled/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/SelectControlled/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/SelectControlled/Display', 'Loading')
-                    .get('.Loader')
-                    .should('exist')
-                    .parent()
-                    .parent()
-                    .should('have.class', 'Select');
-            });
-        });
-
-        context('Custom Icon', () => {
-            it('Has a custom dropdown icon', () => {
-                cy.visitStory('v1/SelectControlled/Display', 'WithCustomIcon')
-                    .get('.Select-dropdown-icon')
-                    .should('have.class', 'Icon-settings');
-            });
-        });
-
-        context('Default Value', () => {
-            it('Renders with default value selected', () => {
-                cy.visitStory('v1/SelectControlled/Display', 'WithDefaultValue')
-                    // make sure default value is selected
-                    .get('option:selected')
-                    .contains('Option 3')
-                    .should('have.value', 'Option 3');
-            });
-        });
-
-        context('With Value', () => {
-            it('Renders with specified value selected', () => {
-                cy.visitStory('v1/SelectControlled/Display', 'WithValue')
-                    .get('option:selected')
-                    .contains('Option 2')
-                    .should('have.value', 'Option 2');
-            });
-
-            it('Changes specified value', () => {
-                cy.visitStory('v1/SelectControlled/Display', 'WithValue')
-                    .get('select')
-                    .select('Option 4')
-                    .get('option:selected')
-                    .contains('Option 4')
-                    .should('have.value', 'Option 4');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('OnChange', () => {
-            it('OnChange method functions properly', () => {
-                cy.visitStory('v1/SelectControlled/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('With Value', () => {
-                it('OnChange method functions properly', () => {
-                    cy.visitStory('v1/SelectControlled/Display', 'WithValue', {
-                        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/SelectControlled/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/SelectControlled/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/SelectControlled/index.js

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

package/styles/Sprite/Sprite.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Sprite = ({className, name}) => {
-    const classes = classNames('Sprite', `sprite-${name}`, className);
-
-    return <i className={classes} />;
-};
-
-Sprite.propTypes = {
-    className: PropTypes.string,
-    name: PropTypes.string.isRequired,
-};
-
-export default Sprite;

package/styles/Sprite/Sprite.spec.js

@@ -1,11 +0,0 @@
-describe('<Sprite />', () => {
-    context('Display', () => {
-        context('Name', () => {
-            it('Renders properly', () => {
-                cy.visitStory('v1/Sprite/Display', 'Default')
-                    .get('.Sprite')
-                    .should('have.class', 'sprite-test');
-            });
-        });
-    });
-});

package/styles/Tabs/Tab.jsx

@@ -1,38 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Button from 'v1/components/Button/Button';
-
-export default class Tab extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The content to render inside of the tab. */
-        children: PropTypes.node.isRequired,
-        /** The label to put in the dropdown when the tabs are on small viewports. Not used in this component but gets read in TabNavigation to create the dropdown. */
-        label: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-        /** Whether this tab should be active. Automatically passed from TabNavigation, do not set manually. */
-        active: PropTypes.bool,
-        /** The method to call when this tab is clicked. Automatically passed from TabNavigation, do not set manually. */
-        onTabClick: PropTypes.func,
-        /** The index that corresponds to this tab. Automatically passed from TabNavigation, do not set manually. */
-        index: PropTypes.number,
-    };
-
-    _onClick = evt => {
-        const {index, onTabClick} = this.props;
-
-        onTabClick(index);
-    };
-
-    render() {
-        const {className, children, active} = this.props;
-        const classes = classNames('Tab', {'Tab-active': active}, className);
-
-        return (
-            <Button className={classes} role="tab" onClick={this._onClick}>
-                {children}
-            </Button>
-        );
-    }
-}

package/styles/Tabs/TabContent.jsx

@@ -1,46 +0,0 @@
-import React, {Children, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const TabContent = ({className, children, selectedIndex, renderActiveOnly}) => {
-    const classes = classNames('TabContent', className);
-
-    return (
-        <div className={classes}>
-            {Children.map(children, (panel, i) => {
-                if (panel) {
-                    if (renderActiveOnly) {
-                        if (selectedIndex === i) {
-                            return cloneElement(panel, {
-                                active: true,
-                                index: i,
-                            });
-                        } else {
-                            return null;
-                        }
-                    } else {
-                        return cloneElement(panel, {
-                            active: selectedIndex === i,
-                            index: i,
-                        });
-                    }
-                }
-            })}
-        </div>
-    );
-};
-
-TabContent.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** Children should only be made up of TabPanel components or a false boolean value when a condition to render the TabPanel is false. */
-    children: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.element, PropTypes.bool])
-    ).isRequired,
-    /** The selected tab index. Automatically passed from Tabs, do not set manually. */
-    selectedIndex: PropTypes.number,
-    /** Whether to only render the active tab's content or all content for every tab in the DOM. */
-    renderActiveOnly: PropTypes.bool,
-};
-
-export default TabContent;

package/styles/Tabs/TabNavigation.jsx

@@ -1,64 +0,0 @@
-import React, {PureComponent, Children, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Select from '../Select/Select';
-
-export default class TabNavigation extends PureComponent {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** Children should only be made up of Tab components or a false boolean value when a condition to render the Tab is false. */
-        children: PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.element, PropTypes.bool])
-        ).isRequired,
-        /** The selected tab index. Automatically passed from Tabs, do not set manually. */
-        selectedIndex: PropTypes.number,
-        /** The method to call when a tab is clicked. Automatically passed from Tabs, do not set manually. */
-        onTabClick: PropTypes.func,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._selectItems = Children.map(props.children, (tab, i) => {
-            if (tab) {
-                return {
-                    label: tab.props.label,
-                    value: i.toString(),
-                };
-            }
-        });
-    }
-
-    _onSelectChange = ({value}) => {
-        this.props.onTabClick(parseInt(value, 10));
-    };
-
-    render() {
-        const {className, children, selectedIndex, onTabClick} = this.props;
-        const classes = classNames('TabNavigation', className);
-
-        return (
-            <div className={classes} role="tablist">
-                <div className="TabNavigation-links">
-                    {Children.map(children, (tab, i) => {
-                        if (tab) {
-                            return cloneElement(tab, {
-                                active: selectedIndex === i,
-                                index: i,
-                                onTabClick,
-                            });
-                        }
-                    })}
-                </div>
-                <Select
-                    key={new Date()}
-                    className="TabNavigation-select"
-                    defaultValue={selectedIndex.toString()}
-                    items={this._selectItems}
-                    onChange={this._onSelectChange}
-                />
-            </div>
-        );
-    }
-}

package/styles/Tabs/TabPanel.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const TabPanel = ({className, children, index, active}) => {
-    const classes = classNames(
-        'TabPanel',
-        {'TabPanel-active': active},
-        className
-    );
-
-    return (
-        <div className={classes} role="tabpanel">
-            {children}
-        </div>
-    );
-};
-
-TabPanel.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The content to render inside of the tab. */
-    children: PropTypes.node.isRequired,
-    /** Whether this panel should be active. Automatically passed from TabContent, do not set manually. */
-    active: PropTypes.bool,
-    /** The index that corresponds to this panel. Automatically passed from TabContainer, do not set manually. */
-    index: PropTypes.number,
-};
-
-export default TabPanel;

package/styles/Tabs/Tabs.jsx

@@ -1,87 +0,0 @@
-import React, {Children, Component, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class Tabs extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The index of the selected tab, 0 based. */
-        selectedIndex: PropTypes.number,
-        /**
-         * A function to execute when a tab is selected.
-         *
-         * @param {Number} selectedIndex - The currently selected tab index.
-         */
-        onSelect: PropTypes.func,
-        /** Children should only be made up of TabNavigation (with nested Tab) and TabContent (with nested TabPanel) components. The number of nested components for each should be equal to each other. */
-        children: PropTypes.arrayOf(PropTypes.element).isRequired,
-    };
-    static defaultProps = {
-        selectedIndex: 0,
-    };
-    state = {
-        selectedIndex: this.props.selectedIndex,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {numTabs, numPanels} = this._getNumItems();
-
-        if (numTabs !== numPanels) {
-            throw new Error(
-                'The number of Tab components must correspond to the number of TabPanel components provided.'
-            );
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onSelect} = this.props;
-        const {selectedIndex} = this.state;
-
-        if (prevState.selectedIndex !== selectedIndex && onSelect) {
-            onSelect(selectedIndex);
-        }
-    }
-
-    _getNumItems() {
-        const {children} = this.props;
-
-        return {
-            numTabs: Children.count(children[0].props.children),
-            numPanels: Children.count(children[1].props.children),
-        };
-    }
-
-    _selectTab = index => {
-        this.setState({
-            selectedIndex: index,
-        });
-    };
-
-    _renderNavigation(nav) {
-        return cloneElement(nav, {
-            selectedIndex: this.state.selectedIndex,
-            onTabClick: this._selectTab,
-        });
-    }
-
-    _renderContent(content) {
-        return cloneElement(content, {
-            selectedIndex: this.state.selectedIndex,
-        });
-    }
-
-    render() {
-        const {className, children} = this.props;
-        const classes = classNames('Tabs', className);
-
-        return (
-            <div className={classes}>
-                {this._renderNavigation(children[0])}
-                {this._renderContent(children[1])}
-            </div>
-        );
-    }
-}