@spothero/ui 15.1.0 → 15.1.1

package/styles/AutoSuggestInput/AutoSuggestInput.spec.js

@@ -1,132 +0,0 @@
-describe('<AutoSuggestInput />', () => {
-    context('Display', () => {
-        context('Usage', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/AutoSuggestInput/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onSuggestSelected = suggestion => {
-                            console.log('selected suggestion:', suggestion); // eslint-disable-line no-console
-                        };
-
-                        contentWindow.onAutoSuggestClear = () => {
-                            console.log('cleared input'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onSuggestSelected').as(
-                            'suggestSelected'
-                        );
-
-                        cy.stub(contentWindow, 'onAutoSuggestClear').as(
-                            'suggestCleared'
-                        );
-                    },
-                })
-                    .get('.AutoSuggestInput')
-                    .as('asInput')
-                    .fillTextInput({alias: 'asInput', text: 'Ite'});
-            });
-
-            it('Shows the suggestions list', () => {
-                cy.get('.AutoSuggestInput-suggestions').should(
-                    'not.have.class',
-                    'AutoSuggestInput-suggestions-hidden'
-                );
-            });
-
-            it('Populates the input with the selected item', () => {
-                cy.get('.AutoSuggestInput-item')
-                    .eq(2)
-                    .click()
-                    .confirmTextInput({alias: 'asInput', value: 'Item 3'});
-            });
-
-            it('Clears input when clear is clicked', () => {
-                cy.get('.AutoSuggestInput-clear')
-                    .click()
-                    .confirmTextInput({alias: 'asInput', value: ''})
-                    .get('@suggestCleared')
-                    .should('be.called');
-            });
-
-            it('Works with keyboard selection', () => {
-                cy.get('@asInput')
-                    .find('input')
-                    .click()
-                    .type('{downarrow}', {delay: 0})
-                    .type('{downarrow}', {delay: 0})
-                    .type('{enter}', {delay: 0})
-                    .confirmTextInput({alias: 'asInput', value: 'Item 2'});
-            });
-
-            it('Scrolls list using keyboard', () => {
-                const typeMultiple = (value, count) =>
-                    new Array(count).fill(value).join('');
-
-                cy.get('@asInput').find('input').click();
-
-                cy.get('.AutoSuggestInput-item')
-                    .eq(14)
-                    .should('not.be.visible');
-
-                cy.get('@asInput')
-                    .find('input')
-                    .click()
-                    .type(typeMultiple('{downarrow}', 15), {delay: 0})
-                    .should('be.visible');
-
-                cy.get('.AutoSuggestInput-item').eq(0).should('not.be.visible');
-
-                cy.get('@asInput')
-                    .find('input')
-                    .click()
-                    .type(typeMultiple('{uparrow}', 14), {delay: 0})
-                    .should('be.visible');
-
-                cy.get('.AutoSuggestInput-item')
-                    .eq(19)
-                    .should('not.be.visible');
-
-                cy.get('@asInput')
-                    .find('input')
-                    .click()
-                    .type('{uparrow}', {delay: 0});
-
-                cy.get('.AutoSuggestInput-item').eq(19).should('be.visible');
-            });
-
-            it('Fires `onSuggestionSelect` properly', () => {
-                cy.get('.AutoSuggestInput-item')
-                    .eq(2)
-                    .click()
-                    .get('@suggestSelected')
-                    .should('be.calledWith', {
-                        label: 'Item 3',
-                        id: 3,
-                    });
-            });
-        });
-
-        context('Auto Activate', () => {
-            it('Highlight the first item when suggestions are activated', () => {
-                cy.visitStory('v1/AutoSuggestInput/Display', 'AutoActivate')
-                    .get('.AutoSuggestInput')
-                    .as('asInput')
-                    .fillTextInput({alias: 'asInput', text: 'Item 4'})
-                    .get('.AutoSuggestInput-item')
-                    .eq(0)
-                    .should('have.class', 'AutoSuggestInput-item-active');
-            });
-        });
-
-        context('Custom Footer', () => {
-            it('Has a custom footer when one is defined', () => {
-                cy.visitStory('v1/AutoSuggestInput/Display', 'Footer')
-                    .get('.AutoSuggestInput')
-                    .as('asInput')
-                    .fillTextInput({alias: 'asInput', text: 'I'})
-                    .get('.AutoSuggestInput-custom-footer')
-                    .should('contain.text', 'This is a custom footer.');
-            });
-        });
-    });
-});

package/styles/AutoSuggestInput/AutoSuggestItem.jsx

@@ -1,61 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-export default class AutoSuggestItem extends PureComponent {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** Whether or not the suggestion item is active. */
-        active: PropTypes.bool,
-        /** The suggestion data object. */
-        suggestion: PropTypes.shape({
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-                .isRequired,
-            id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-        }).isRequired,
-        /** Optional function to execute when a suggestion is selected. */
-        onSuggestionSelect: PropTypes.func,
-        /** Optional function to execute for suggestion list item's mousedown event. */
-        onSuggestionMouseDown: PropTypes.func,
-        /** Optional function to execute for suggestion list item's mouseout event. */
-        onSuggestionMouseOut: PropTypes.func,
-    };
-
-    _onClick = evt => {
-        evt.preventDefault();
-
-        const {suggestion, onSuggestionSelect} = this.props;
-
-        if (onSuggestionSelect) {
-            onSuggestionSelect(suggestion);
-        }
-    };
-
-    render() {
-        const {
-            active,
-            className,
-            suggestion,
-            onSuggestionMouseDown,
-            onSuggestionMouseOut,
-        } = this.props;
-        const classes = classnames(
-            'AutoSuggestInput-item',
-            {'AutoSuggestInput-item-active': active},
-            className
-        );
-
-        return (
-            <li
-                className={classes}
-                onClick={this._onClick}
-                onMouseDown={onSuggestionMouseDown}
-                onMouseOut={onSuggestionMouseOut}
-            >
-                {suggestion.label}
-            </li>
-        );
-    }
-}

package/styles/AutoSuggestInput/AutoSuggestList.jsx

@@ -1,85 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import AutoSuggestItem from './AutoSuggestItem';
-
-class AutoSuggestList extends PureComponent {
-    static propTypes = {
-        /** Whether or not the suggestion list should be hidden */
-        hidden: PropTypes.bool,
-        /** An array of suggestion objects. */
-        suggestions: PropTypes.arrayOf(
-            PropTypes.shape({
-                label: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.element,
-                ]).isRequired,
-                id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            })
-        ),
-        /** The suggestion object which is currently active. */
-        activeSuggestion: PropTypes.object,
-        /** A custom element to display at the bottom of the suggestion list */
-        suggestionBoxFooter: PropTypes.element.isRequired,
-        /** Function to execute when a suggestion is selected. */
-        onSuggestionSelect: PropTypes.func.isRequired,
-        /** Optional function to execute for suggestion list item's mousedown event. */
-        onSuggestionMouseDown: PropTypes.func,
-        /** Optional function to execute for suggestion list item's mouseout event. */
-        onSuggestionMouseOut: PropTypes.func,
-        /** Optional ref of underlying <ul> */
-        forwardRef: PropTypes.node,
-    };
-    static defaultProps = {
-        hidden: true,
-        suggestions: [],
-    };
-
-    _onSuggestionSelect = suggestion => {
-        this.props.onSuggestionSelect({
-            suggestion,
-        });
-    };
-
-    render() {
-        const {
-            hidden,
-            suggestions,
-            activeSuggestion,
-            suggestionBoxFooter,
-            onSuggestionMouseDown,
-            onSuggestionMouseOut,
-            forwardRef,
-        } = this.props;
-        const classes = classnames('AutoSuggestInput-suggestions', {
-            'AutoSuggestInput-suggestions-hidden': hidden,
-        });
-
-        return (
-            <ul className={classes} ref={forwardRef}>
-                {suggestions.map(suggestion => {
-                    const {id, className} = suggestion;
-                    const active =
-                        activeSuggestion && id === activeSuggestion.id;
-
-                    return (
-                        <AutoSuggestItem
-                            key={id}
-                            className={className}
-                            suggestion={suggestion}
-                            active={active}
-                            onSuggestionSelect={this._onSuggestionSelect}
-                            onSuggestionMouseDown={onSuggestionMouseDown}
-                            onSuggestionMouseOut={onSuggestionMouseOut}
-                        />
-                    );
-                })}
-                {suggestionBoxFooter}
-            </ul>
-        );
-    }
-}
-
-export default React.forwardRef((props, ref) => (
-    <AutoSuggestList forwardRef={ref} {...props} />
-));

package/styles/Badge/Badge.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Badge = ({className, color, children}) => {
-    const classes = classNames('Badge', `Badge-${color}`, className);
-
-    return <span className={classes}>{children}</span>;
-};
-
-Badge.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The node (typically a string) to put in the badge. */
-    children: PropTypes.node.isRequired,
-    /** The color of the badge. */
-    color: PropTypes.oneOf(['default', 'danger', 'warning', 'success', 'info']),
-};
-
-Badge.defaultProps = {
-    color: 'default',
-};
-
-export default Badge;

package/styles/Badge/Badge.spec.js

@@ -1,43 +0,0 @@
-describe('<Badge />', () => {
-    context('Colors', () => {
-        context('Default', () => {
-            it('Has default styles', () => {
-                cy.visitStory('v1/Badge/Colors', 'Default')
-                    .get('.Badge')
-                    .should('have.class', 'Badge-default');
-            });
-        });
-
-        context('Danger', () => {
-            it('Has danger styles', () => {
-                cy.visitStory('v1/Badge/Colors', 'Danger')
-                    .get('.Badge')
-                    .should('have.class', 'Badge-danger');
-            });
-        });
-
-        context('Info', () => {
-            it('Has info styles', () => {
-                cy.visitStory('v1/Badge/Colors', 'Info')
-                    .get('.Badge')
-                    .should('have.class', 'Badge-info');
-            });
-        });
-
-        context('Success', () => {
-            it('Has success styles', () => {
-                cy.visitStory('v1/Badge/Colors', 'Success')
-                    .get('.Badge')
-                    .should('have.class', 'Badge-success');
-            });
-        });
-
-        context('Warning', () => {
-            it('Has warning styles', () => {
-                cy.visitStory('v1/Badge/Colors', 'Warning')
-                    .get('.Badge')
-                    .should('have.class', 'Badge-warning');
-            });
-        });
-    });
-});

package/styles/Chart/Chart.jsx

@@ -1,185 +0,0 @@
-import forEach from 'lodash/forEach';
-import isEqual from 'lodash/isEqual';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Chartist from 'chartist';
-import DOMUtils from '@spothero/utils/dom';
-
-export default class Chart extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The type of chart to draw. */
-        type: PropTypes.oneOf(['Line', 'Bar', 'Pie', 'Donut']).isRequired,
-        /**
-         * The aspect ratio of the chart container.
-         *
-         * @see See the aspect ratio information <a href="https://gionkunz.github.io/chartist-js/getting-started.html#as-simple-as-it-can-get" target="_blank">here</a>. The value should not include the leading `ct-`.
-         */
-        aspectRatio: PropTypes.string,
-        /**
-         * The data to display on the chart.
-         *
-         * @see See the <a href="https://gionkunz.github.io/chartist-js/api-documentation.html" target="_blank">Chartist documentation</a> for details.
-         */
-        data: PropTypes.object.isRequired,
-        /**
-         * The options for the chart.
-         *
-         * @see See the <a href="https://gionkunz.github.io/chartist-js/api-documentation.html" target="_blank">Chartist documentation</a> for details.
-         */
-        options: PropTypes.object,
-        /**
-         * The responsive options to apply to chart.
-         *
-         * @see See the <a href="https://gionkunz.github.io/chartist-js/api-documentation.html" target="_blank">Chartist documentation</a> for details.
-         */
-        responsiveOptions: PropTypes.array,
-        /** An array containing the events to listen for and their respective handler functions. */
-        events: PropTypes.arrayOf(
-            PropTypes.shape({
-                event: PropTypes.oneOf([
-                    'draw',
-                    'optionsChanged',
-                    'data',
-                    'animationBegin',
-                    'animationEnd',
-                    'created',
-                ]).isRequired,
-                handler: PropTypes.func.isRequired,
-            })
-        ),
-        /**
-         * Setting this will show a legend. If passed as an object it will set configuration options on the legend.
-         *
-         * @see For possible options, see <a href="https://github.com/CodeYellowBV/chartist-plugin-legend" target="_blank">chartist-plugin-legend</a>.
-         */
-        legend: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-        /**
-         * Setting this will show a tooltip when hovering over a point. If passed as an object it will set configuration options on the tooltip.
-         *
-         * @see For possible options, see <a href="https://github.com/Globegitter/chartist-plugin-tooltip" target="_blank">chartist-plugin-tooltip</a>.
-         */
-        tooltip: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
-    };
-    static defaultProps = {
-        aspectRatio: 'double-octave',
-    };
-
-    constructor(props) {
-        super(props);
-
-        if (window) {
-            const {type, options, legend, tooltip} = props;
-            const plugins = [];
-            const isDonut = type === 'Donut';
-
-            this._chartType = isDonut ? 'Pie' : type;
-            this._options = {...options};
-
-            if (isDonut) {
-                this._options.donut = true;
-            }
-
-            if (legend) {
-                plugins.push(Chartist.plugins.legend(legend));
-            }
-
-            if (tooltip) {
-                plugins.push(Chartist.plugins.tooltip(tooltip));
-            }
-
-            if (this._options.plugins) {
-                this._options.plugins.concat(plugins);
-            } else {
-                this._options.plugins = plugins;
-            }
-
-            this._previousOptions = this._options;
-        }
-    }
-
-    componentDidMount() {
-        if (window) {
-            const {data, responsiveOptions, events} = this.props;
-
-            this._chartist = new Chartist[this._chartType](
-                this._chart,
-                data,
-                this._options,
-                responsiveOptions
-            );
-
-            if (events) {
-                forEach(events, ({event, handler}) => {
-                    this._chartist.on(event, handler);
-                });
-            }
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        const {data, options, responsiveOptions} = this.props;
-
-        this._options = {
-            ...this._options,
-            ...options,
-        };
-
-        if (window && !isEqual(this._previousOptions, this._options)) {
-            this._chartist.update(data, this._options, responsiveOptions);
-
-            this._previousOptions = this._options;
-        }
-    }
-
-    componentWillUnmount() {
-        if (window) {
-            const {tooltip, events} = this.props;
-
-            if (tooltip && tooltip.appendToBody) {
-                DOMUtils.remove('.chartist-tooltip');
-            }
-
-            forEach(events, ({event, handler}) => {
-                this._chartist.off(event, handler);
-            });
-
-            this._chartist.detach();
-        }
-    }
-
-    /**
-     * Getter for the chartist event emitter.
-     *
-     * @public
-     * @returns {Object} - The event emitter.
-     */
-    get eventEmitter() {
-        return this._chartist.eventEmitter;
-    }
-
-    render() {
-        if (!window) {
-            return null;
-        }
-
-        const {className, aspectRatio} = this.props;
-        const classes = classNames(
-            'Chart',
-            'ct-chart',
-            `ct-${aspectRatio}`,
-            className
-        );
-
-        return (
-            <div
-                ref={node => {
-                    this._chart = node;
-                }}
-                className={classes}
-            />
-        );
-    }
-}