@spothero/ui 15.1.0 → 15.1.1

package/styles/Chart/Chart.spec.js

@@ -1,369 +0,0 @@
-import flatten from 'lodash/flatten';
-import forEach from 'lodash/forEach';
-import isBoolean from 'lodash/isBoolean';
-import {barAndLineData, pieAndDonutData} from './stories/helpers/chart-data';
-
-describe('<Chart />', () => {
-    context('Display', () => {
-        const confirmLabelText = ({labelIndex, labelText}) => {
-            return cy
-                .get('.ct-label')
-                .eq(labelIndex)
-                .should('contain', labelText);
-        };
-        const confirmValue = ({className, elementIndex, value}) => {
-            return cy
-                .get(className)
-                .eq(elementIndex)
-                .should('have.attr', 'ct:value', `${value}`);
-        };
-        const confirmTooltipText = ({className, elementIndex, text}) => {
-            return cy
-                .get(className)
-                .eq(elementIndex)
-                .trigger('mouseover')
-                .wait(100)
-                .get('.chartist-tooltip')
-                .should('contain', text);
-        };
-
-        it('Renders Bar chart correctly', () => {
-            cy.visitStory('v1/Chart/Display', 'Default')
-                // verify Chart exists
-                .get('.Chart')
-                .should('have.class', 'ct-chart')
-                .should('have.class', 'BarChart')
-                // verify it is a chartist Bar chart
-                .get('svg')
-                .should('have.class', 'ct-chart-bar')
-                // verify grids and labels
-                .get('.ct-grids')
-                .get('.ct-labels')
-                // verify label text
-                .then(() => {
-                    forEach(barAndLineData.labels, (labelText, labelIndex) => {
-                        confirmLabelText({labelIndex, labelText});
-                    });
-                })
-                // verify bar values
-                .then(() => {
-                    forEach(barAndLineData.series, series => {
-                        forEach(series, (value, elementIndex) => {
-                            confirmValue({
-                                className: '.ct-bar',
-                                elementIndex,
-                                value: `${value}`,
-                            });
-                        });
-                    });
-                });
-        });
-
-        it('Renders Line chart correctly', () => {
-            cy.visitStory('v1/Chart/Display', 'LineChart')
-                // verify Chart exists
-                .get('.Chart')
-                .should('have.class', 'ct-chart')
-                .should('have.class', 'LineChart')
-                // verify it is a chartist Line chart
-                .get('svg')
-                .should('have.class', 'ct-chart-line')
-                // verify grids and labels
-                .get('.ct-grids')
-                .get('.ct-labels')
-                // verify label text
-                .then(() => {
-                    forEach(barAndLineData.labels, (labelText, labelIndex) => {
-                        confirmLabelText({labelIndex, labelText});
-                    });
-                })
-                // verify line point values
-                .then(() => {
-                    forEach(barAndLineData.series, series => {
-                        forEach(series, (value, elementIndex) => {
-                            confirmValue({
-                                className: '.ct-point',
-                                elementIndex,
-                                value: `${value}`,
-                            });
-                        });
-                    });
-                });
-        });
-
-        it('Renders Pie chart correctly', () => {
-            cy.visitStory('v1/Chart/Display', 'PieChart')
-                // verify Chart exists
-                .get('.Chart')
-                .should('have.class', 'ct-chart')
-                .should('have.class', 'PieChart')
-                // verify it is a chartist Pie chart
-                .get('svg')
-                .should('have.class', 'ct-chart-pie')
-                // verify grids and labels don't exist
-                .get('.ct-grids')
-                .should('not.exist')
-                .get('.ct-labels')
-                .should('not.exist')
-                // labels exist outside .ct-labels -- verify label text
-                .then(() => {
-                    forEach(pieAndDonutData.labels, (labelText, labelIndex) => {
-                        confirmLabelText({labelIndex, labelText});
-                    });
-                })
-                // verify pie slice values
-                .then(() => {
-                    forEach(pieAndDonutData.series, (value, elementIndex) => {
-                        confirmValue({
-                            className: '.ct-slice-pie',
-                            elementIndex,
-                            value: `${value}`,
-                        });
-                    });
-                });
-        });
-
-        it('Renders Donut chart correctly', () => {
-            cy.visitStory('v1/Chart/Display', 'DonutChart')
-                // verify Chart exists
-                .get('.Chart')
-                .should('have.class', 'ct-chart')
-                .should('have.class', 'DonutChart')
-                // verify it is a chartist Donut chart
-                .get('svg')
-                .should('have.class', 'ct-chart-donut')
-                // verify grids and labels don't exist
-                .get('.ct-grids')
-                .should('not.exist')
-                .get('.ct-labels')
-                .should('not.exist')
-                // labels exist outside .ct-labels -- verify label text
-                .then(() => {
-                    forEach(pieAndDonutData.labels, (labelText, labelIndex) => {
-                        confirmLabelText({labelIndex, labelText});
-                    });
-                })
-                // verify donut piece values
-                .then(() => {
-                    forEach(pieAndDonutData.series, (value, elementIndex) => {
-                        confirmValue({
-                            className: '.ct-slice-donut',
-                            elementIndex,
-                            value: `${value}`,
-                        });
-                    });
-                });
-        });
-
-        it('Renders chart with tooltips - set via boolean', () => {
-            cy.visitStory('v1/Chart/Display', 'WithTooltipBoolean')
-                // verify tooltip exists and is not showing
-                .get('.chartist-tooltip')
-                .should('have.css', 'opacity', '0')
-                // verify tooltips
-                .then(() => {
-                    forEach(barAndLineData.series, series => {
-                        forEach(series, (value, elementIndex) => {
-                            confirmTooltipText({
-                                className: '.ct-bar',
-                                elementIndex,
-                                text: `${value}`,
-                            });
-                        });
-                    });
-                });
-        });
-
-        it('Renders chart with tooltips - set via object', () => {
-            cy.visitStory('v1/Chart/Display', 'WithTooltipObject', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.tooltipFnc = (label, value) => {
-                        console.log('tooltipFnc'); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'tooltipFnc').as('tooltipFnc');
-                },
-            })
-                // verify tooltip exists and is not showing
-                .get('.chartist-tooltip')
-                .should('have.css', 'opacity', '0')
-                // verify tooltips
-                .then(() => {
-                    forEach(barAndLineData.series, series => {
-                        forEach(series, (value, elementIndex) => {
-                            confirmTooltipText({
-                                className: '.ct-bar',
-                                elementIndex,
-                                text: `${value} Projects`,
-                            });
-                        });
-                    });
-                })
-                // verify tooltipFnc function was called 5 times, once per tooltip
-                .get('@tooltipFnc')
-                .should(
-                    'have.callCount',
-                    flatten(barAndLineData.series).length
-                );
-        });
-
-        it('Renders chart with legend - set via boolean', () => {
-            cy.visitStory('v1/Chart/Display', 'WithLegendBoolean')
-                // verify legend exists and has default text (the data values)
-                .get('.ct-legend')
-                .should('contain', '10,21,32,46,12');
-        });
-
-        it('Renders chart with legend - set via object', () => {
-            cy.visitStory('v1/Chart/Display', 'WithLegendObject')
-                // verify legend exists and has custom legend name set via legend object
-                .get('.ct-legend')
-                .should('contain', 'Number of Projects');
-        });
-
-        it('Renders chart with responsive options', () => {
-            cy.visitStory('v1/Chart/Display', 'WithResponsiveOptions')
-                .viewport('macbook-15')
-                // verify horizontal positioned and vertical positioned grid lines exist
-                .get('.ct-grid.ct-horizontal')
-                .get('.ct-grid.ct-vertical')
-                // go to a smaller viewport and verify horizontal positioned grid lines do not exist
-                .viewport('iphone-6')
-                .get('.ct-grid.ct-horizontal')
-                .should('not.exist');
-        });
-
-        it('Renders chart with square aspect ratio', () => {
-            cy.visitStory('v1/Chart/Display', 'WithAspectRatio')
-                // verify chart has square aspect ratio class
-                .get('.Chart')
-                .should('have.class', 'ct-chart')
-                .should('have.class', 'ct-square');
-        });
-    });
-
-    context('Events', () => {
-        it('All events and handlers function properly', () => {
-            cy.visitStory('v1/Chart/Events', 'Default', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.onDataHandler = chartData => {
-                        console.log('onDataHandler'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onCreatedHandler = chartData => {
-                        console.log('onCreatedHandler'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onDrawHandler = chartData => {
-                        console.log('onDrawHandler'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onOptionsChangedHandler = chartData => {
-                        console.log('onOptionsChangedHandler'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onAnimationBeginHandler = chartData => {
-                        console.log('onAnimationBeginHandler'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onAnimationEndHandler = chartData => {
-                        console.log('onAnimationEndHandler'); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'onDrawHandler').as('drawHandler');
-
-                    cy.stub(contentWindow, 'onCreatedHandler').as(
-                        'createdHandler'
-                    );
-
-                    cy.stub(contentWindow, 'onDataHandler').as('dataHandler');
-
-                    cy.stub(contentWindow, 'onOptionsChangedHandler').as(
-                        'optionsChangedHandler'
-                    );
-
-                    cy.stub(contentWindow, 'onAnimationBeginHandler').as(
-                        'animationBeginHandler'
-                    );
-
-                    cy.stub(contentWindow, 'onAnimationEndHandler').as(
-                        'animationEndHandler'
-                    );
-                },
-            })
-                .viewport('macbook-15')
-                .wait(500)
-                // verify data event fired
-                .get('@dataHandler')
-                .should('be.calledWith', {
-                    type: 'initial',
-                    data: barAndLineData,
-                })
-                // verify proper draw events fired
-                .get('@drawHandler')
-                .should('be.calledWithMatch', chartData => {
-                    return chartData.type && chartData.type === 'label';
-                })
-                .should('be.calledWithMatch', chartData => {
-                    return chartData.type && chartData.type === 'grid';
-                })
-                .should('be.calledWithMatch', chartData => {
-                    return chartData.type && chartData.type === 'point';
-                })
-                .should('be.calledWithMatch', chartData => {
-                    return chartData.type && chartData.type === 'line';
-                })
-                .should('be.calledWithMatch', chartData => {
-                    return chartData.type && chartData.type === 'area';
-                })
-                // verify created event fired
-                .get('@createdHandler')
-                .should('be.calledWithMatch', chartData => {
-                    const options = chartData.options || false;
-
-                    return options
-                        ? isBoolean(options.fullWidth) &&
-                              options.fullWidth === true &&
-                              isBoolean(options.showArea) &&
-                              options.showArea === true
-                        : false;
-                })
-                // verify animation begin event fired
-                .get('@animationBeginHandler')
-                .should('be.calledWithMatch', chartData => {
-                    const params = chartData.params || false;
-
-                    return params
-                        ? params.dur && params.dur === '300ms'
-                        : false;
-                })
-                // verify animation end event fired
-                .get('@animationEndHandler')
-                .should('be.calledWithMatch', chartData => {
-                    const params = chartData.params || false;
-
-                    return params
-                        ? params.dur && params.dur === '300ms'
-                        : false;
-                })
-                // now change viewport to test options changed event (due to responsive options trigger)
-                .viewport('iphone-6')
-                // verify animation end event fired
-                .get('@optionsChangedHandler')
-                .should('be.calledWithMatch', chartData => {
-                    const {currentOptions, previousOptions} = chartData;
-                    const currAxisX = currentOptions.axisX;
-                    const prevAxisX = previousOptions.axisX;
-
-                    return (
-                        currAxisX &&
-                        isBoolean(currAxisX.showGrid) &&
-                        currAxisX.showGrid === false &&
-                        prevAxisX &&
-                        isBoolean(prevAxisX.showGrid) &&
-                        prevAxisX.showGrid === true
-                    );
-                });
-        });
-    });
-});

package/styles/Checkbox/Checkbox.jsx

@@ -1,159 +0,0 @@
-import React, {PureComponent, cloneElement} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconCheck from '@spothero/icons/check';
-
-export default class Checkbox extends PureComponent {
-    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,
-        /** 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,
-        /** The value to apply this element. If belonging to a form this is used as the value for serialization and is required. */
-        value: PropTypes.string,
-        /** The icon to be used in the checkbox. */
-        icon: PropTypes.node,
-        /** A custom label (typically a Label component) to display next to the checkbox. This is required if the `toggle` prop is false. */
-        label: PropTypes.element,
-        /** Whether this field is required during validation. */
-        required: PropTypes.bool,
-        /** Whether the checkbox should be checked on mount. */
-        defaultChecked: 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,
-        /** Disallows user interaction. */
-        disabled: PropTypes.bool,
-        /** Whether to render the checkbox as a toggle switch. Labels will be ignored. */
-        toggle: PropTypes.bool,
-        /**
-         * Function to execute when the checked 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,
-    };
-    static defaultProps = {
-        value: 'on',
-        icon: <IconCheck />,
-    };
-    state = {
-        validationState: null,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {id, toggle, label} = props;
-
-        if (!id) {
-            throw new Error(
-                `The prop 'id' is required to make Checkbox accessible for users using assistive technologies such as screen readers. Check the render method of Checkbox.`
-            );
-        }
-
-        if (!toggle && !label) {
-            throw new Error(
-                `The label prop is required when using a Checkbox that isn't a toggle.`
-            );
-        }
-    }
-
-    componentDidMount() {
-        this._input.addEventListener('invalid', this._onInvalid);
-    }
-
-    componentWillUnmount() {
-        this._input.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);
-        }
-    };
-
-    _renderIcon() {
-        return this.props.icon;
-    }
-
-    render() {
-        const {
-            label,
-            className,
-            name,
-            id,
-            value,
-            defaultChecked,
-            required,
-            disabled,
-            toggle,
-            error,
-        } = this.props;
-        const {validationState} = this.state;
-        const isValid = validationState ? validationState.valid : true;
-        const classes = classNames(
-            'Checkbox',
-            {'Checkbox-toggle': toggle},
-            'FormElement',
-            {'FormElement-contains-error': !isValid},
-            className
-        );
-
-        return (
-            <div className={classes}>
-                <div className="FormElement-control">
-                    <input
-                        ref={node => {
-                            this._input = node;
-                        }}
-                        id={`Checkbox-${id}`}
-                        className="FormElement-item"
-                        type="checkbox"
-                        name={name}
-                        defaultChecked={defaultChecked}
-                        required={required}
-                        disabled={disabled}
-                        value={value}
-                        onChange={this._onChange}
-                    />
-                    {this._renderIcon()}
-                    {!toggle &&
-                        cloneElement(label, {
-                            htmlFor: `Checkbox-${id}`,
-                        })}
-                    {toggle && <span className="Label" />}
-                </div>
-                {!isValid && error}
-            </div>
-        );
-    }
-}

package/styles/Checkbox/Checkbox.spec.js

@@ -1,142 +0,0 @@
-describe('<Checkbox />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Should have an input and some kind of label element', () => {
-                cy.visitStory('v1/Checkbox/Display', 'Default')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('have.class', 'FormElement-item')
-                    .and('not.have.attr', 'disabled')
-                    .get('.Checkbox')
-                    .find('.Label')
-                    .contains('Default');
-            });
-        });
-
-        context('Checked', () => {
-            it('Should be checked by default', () => {
-                cy.visitStory('v1/Checkbox/Display', 'Checked')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('be.checked');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Should have a disabled input', () => {
-                cy.visitStory('v1/Checkbox/Display', 'Disabled')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('be.disabled');
-            });
-        });
-
-        context('Required', () => {
-            it('Should have a required input', () => {
-                cy.visitStory('v1/Checkbox/Display', 'Required')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('have.attr', 'required');
-            });
-        });
-
-        context('With Icon', () => {
-            it('Should have an icon', () => {
-                cy.visitStory('v1/Checkbox/Display', 'Icon')
-                    .get('.Checkbox')
-                    .find('.Icon-info')
-                    .should('exist');
-            });
-        });
-
-        context('With Props', () => {
-            it('Should have a custom class name', () => {
-                cy.visitStory('v1/Checkbox/Display', 'WithProps')
-                    .get('.Checkbox')
-                    .should('have.class', 'Checkbox-class');
-            });
-
-            it('Should have a name', () => {
-                cy.visitStory('v1/Checkbox/Display', 'WithProps')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('have.attr', 'name');
-            });
-
-            it('Should have a value', () => {
-                cy.visitStory('v1/Checkbox/Display', 'WithProps')
-                    .get('.Checkbox')
-                    .find('input[type=checkbox]')
-                    .should('have.value', 'formValue');
-            });
-
-            it('Should have a label', () => {
-                cy.visitStory('v1/Checkbox/Display', 'WithProps')
-                    .get('.Checkbox')
-                    .find('.Label')
-                    .contains('With Props');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        it('All methods function properly on checkboxes', () => {
-            cy.visitStory('v1/Checkbox/Methods', 'Default', {
-                onBeforeLoad: contentWindow => {
-                    contentWindow.onCheckboxChange = evt => {
-                        console.log('onCheckboxChange'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onCheckboxInvalid = validationState => {
-                        console.log('onCheckboxInvalid'); // eslint-disable-line no-console
-                    };
-
-                    contentWindow.onCheckboxFormSubmit = evt => {
-                        console.log('onCheckboxFormSubmit'); // eslint-disable-line no-console
-                    };
-
-                    cy.stub(contentWindow, 'onCheckboxChange').as(
-                        'checkboxChange'
-                    );
-
-                    cy.stub(contentWindow, 'onCheckboxInvalid').as(
-                        'checkboxInvalid'
-                    );
-
-                    cy.stub(contentWindow, 'onCheckboxFormSubmit').as(
-                        'checkboxFormSubmit'
-                    );
-                },
-            })
-                .get('.Checkbox')
-                .find('input[type=checkbox]')
-                .check()
-                // call change on check
-                .get('@checkboxChange')
-                .should('be.called')
-                .get('.Checkbox')
-                .find('input[type=checkbox]')
-                // call change on uncheck
-                .uncheck()
-                .get('@checkboxChange')
-                .should('be.called')
-                // call submit on unchecked required field to trigger error
-                .get('.FormElementError')
-                .should('not.exist')
-                .get('.Form')
-                .submit()
-                .get('@checkboxInvalid')
-                .should('be.called')
-                .get('.FormElementError')
-                .should('exist')
-                // call submit on checked required field to trigger submit
-                .get('.Checkbox')
-                .find('input[type=checkbox]')
-                .check()
-                .get('.Form')
-                .submit()
-                .get('@checkboxFormSubmit')
-                .should('be.called');
-        });
-    });
-});