@spothero/ui 15.1.0 → 15.1.1

package/styles/TextInput/TextInput.spec.js

@@ -1,263 +0,0 @@
-describe('<TextInput />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            it('Should have placeholder, default value, label, help text, and custom class names', () => {
-                cy.visitStory('v1/TextInput/Display', 'Default')
-                    .get('.TextInput')
-                    .should('exist')
-                    .and('have.class', 'custom-class1')
-                    .and('have.class', 'custom-class2')
-                    .find('input')
-                    .should('have.attr', 'name', 'license-plate')
-                    .and('have.attr', 'placeholder', 'License Plate')
-                    .and('have.value', 'ECTO-1')
-                    .get('.TextInput')
-                    .find('.Label')
-                    .contains('Add new license plate')
-                    .get('.TextInput')
-                    .find('.FormElement-help-text')
-                    .contains('Additional help node text');
-            });
-        });
-
-        context('Disabled', () => {
-            it('Is disabled', () => {
-                cy.visitStory('v1/TextInput/Display', 'Disabled')
-                    .get('.TextInput')
-                    .find('input')
-                    .should('be.disabled');
-            });
-        });
-
-        context('Read Only', () => {
-            it('Is read only', () => {
-                cy.visitStory('v1/TextInput/Display', 'ReadOnly')
-                    .get('.TextInput')
-                    .find('input')
-                    .should('have.attr', 'readonly');
-            });
-        });
-
-        context('Icon', () => {
-            it('Should render with an icon', () => {
-                cy.visitStory('v1/TextInput/Display', 'Icon')
-                    .get('.TextInput')
-                    .should('have.class', 'FormElement-with-icon-right')
-                    .find('.Icon')
-                    .should('exist');
-            });
-        });
-
-        context('Loading', () => {
-            it('Should render with a loading spinner', () => {
-                cy.visitStory('v1/TextInput/Display', 'Loading')
-                    .get('.TextInput')
-                    .find('.Loader')
-                    .should('exist');
-            });
-        });
-
-        context('Inline', () => {
-            it('Should render with inline styling', () => {
-                cy.visitStory('v1/TextInput/Display', 'Inline')
-                    .get('.TextInput')
-                    .should('have.class', 'FormElement-inline');
-            });
-        });
-
-        context('Auto Focus', () => {
-            it('Receives focus after rendered', () => {
-                cy.visitStory('v1/TextInput/Display', 'AutoFocus')
-                    .focused()
-                    .should('have.attr', 'name', 'license-plate');
-            });
-        });
-    });
-
-    context('Formatting', () => {
-        describe('Mask', () => {
-            it('Applies a mask over the input text', () => {
-                cy.visitStory('v1/TextInput/Formatting', 'Mask')
-                    .get('.TextInput')
-                    .find('input')
-                    .click()
-                    .should('have.value', '+X-XXX-XXX-XXXX')
-                    .type('12345678899', {delay: 0})
-                    .blur()
-                    .should('have.value', '+1-234-567-8899');
-            });
-        });
-
-        describe('Pattern', () => {
-            it('Has pattern attribute and ensures the input text follows the specified regex pattern', () => {
-                cy.visitStory('v1/TextInput/Formatting', 'Pattern')
-                    .get('.TextInput')
-                    .find('input')
-                    .should('have.attr', 'pattern', '[A-Za-z0-9]+')
-                    // should show error since value does not follow pattern
-                    .type('OÜTAT!M&', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('exist')
-                    // should not show error since value follows pattern
-                    .get('.TextInput')
-                    .find('input')
-                    .clear()
-                    .type('oUtAT1M3', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('not.exist');
-            });
-        });
-
-        context('Max Length', () => {
-            it('Has maxlength attribute and does not allow more characters', () => {
-                // longstring is 53 characters long
-                const longstring =
-                    'myusernamemyusernamemyusernamemyusernamemyusernameabc';
-
-                cy.visitStory('v1/TextInput/Formatting', 'MaxLength')
-                    .get('.TextInput')
-                    .find('input')
-                    .should('have.attr', 'maxlength', '50')
-                    .type(longstring, {delay: 0})
-                    .should('have.value', longstring.substring(0, 50));
-            });
-        });
-
-        context('Min Max', () => {
-            it('Has min and max attributes and does not consider input outside that range valid', () => {
-                cy.visitStory('v1/TextInput/Formatting', 'MinMax')
-                    .get('.TextInput')
-                    .find('input')
-                    .should('have.attr', 'min', '1')
-                    .should('have.attr', 'max', '100')
-                    // should show error since value is below min
-                    .type('0', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('exist')
-                    // should not show error since value is in range
-                    .get('.TextInput')
-                    .find('input')
-                    .clear()
-                    .type('42', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('not.exist')
-                    // should show error since value is above max
-                    .get('.TextInput')
-                    .find('input')
-                    .clear()
-                    .type('4200', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('exist');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        describe('On Change', () => {
-            it('Executes the method when a change is detected', () => {
-                cy.visitStory('v1/TextInput/Methods', 'OnChange', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTextInputChange = evt => {
-                            console.log(`onTextInputChange`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTextInputChange').as(
-                            'onTextInputChange'
-                        );
-                    },
-                })
-                    .get('.TextInput')
-                    .find('input')
-                    .type('OUTATIME', {delay: 0})
-                    .get('@onTextInputChange')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Focus', () => {
-            it('Executes the method when input is focused on', () => {
-                cy.visitStory('v1/TextInput/Methods', 'OnFocus', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTextInputFocus = evt => {
-                            console.log(`onTextInputFocus`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTextInputFocus').as(
-                            'onTextInputFocus'
-                        );
-                    },
-                })
-                    .get('.TextInput')
-                    .find('input')
-                    .focus()
-                    .get('@onTextInputFocus')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Blur', () => {
-            it('Executes the method when input loses focus', () => {
-                cy.visitStory('v1/TextInput/Methods', 'OnBlur', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onTextInputBlur = evt => {
-                            console.log(`onTextInputBlur`); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onTextInputBlur').as(
-                            'onTextInputBlur'
-                        );
-                    },
-                })
-                    .get('.TextInput')
-                    .find('input')
-                    .focus()
-                    .get('@onTextInputBlur')
-                    .should('not.be.called')
-                    .get('.TextInput')
-                    .find('input')
-                    .blur()
-                    .get('@onTextInputBlur')
-                    .should('be.called');
-            });
-        });
-
-        describe('On Invalid', () => {
-            it('Displays an error if the input is invalid', () => {
-                cy.visitStory('v1/TextInput/Methods', 'OnInvalid')
-                    .get('.TextInput')
-                    .find('input')
-                    // Show error on empty field since this is required
-                    .should('have.value', '')
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('exist')
-                    // Don't show error on field with content
-                    .get('.TextInput')
-                    .find('input')
-                    .type('MY PRSHE', {delay: 0})
-                    .get('button[type=submit]')
-                    .click()
-                    .get('.TextInput')
-                    .find('.FormElementError')
-                    .should('not.exist');
-            });
-        });
-    });
-});

package/styles/TextInput/TextInputPropTypes.js

@@ -1,88 +0,0 @@
-import PropTypes from 'prop-types';
-
-const TextInputPropTypes = {
-    /** 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,
-    /** What HTML input type the underlying input should be set to. */
-    type: PropTypes.oneOf([
-        'text',
-        'password',
-        'date',
-        'email',
-        'time',
-        'tel',
-        'search',
-        'number',
-        'hidden',
-    ]),
-    /** Text to display in the field before a user starts to type in the input. */
-    placeholder: PropTypes.string,
-    /** A custom label (typically a Label component) to display above the input. */
-    label: PropTypes.element,
-    /** A regular expression that the input value is checked against for validation. */
-    pattern: 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,
-    /** Whether the field should be auto focused when mounted. */
-    autoFocus: PropTypes.bool,
-    /** Whether the field should be focused when the component receives new props. */
-    focus: 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,
-    /** The default value to display in the input when mounted. */
-    defaultValue: PropTypes.string,
-    /** A custom icon (typically an Icon component) to show in the input 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']),
-    /** A custom help element to place below the input. */
-    helpNode: PropTypes.node,
-    /** Applies proper styling to display this field inline in a form. */
-    inline: PropTypes.bool,
-    /** Specifies that the input field is read-only. */
-    readOnly: PropTypes.bool,
-    /** Specifies the maximum number of characters allowed. */
-    maxLength: PropTypes.number,
-    /** Specifies the minimum value when type is `date` or `number`. */
-    min: PropTypes.number,
-    /** Specifies the maximum value when type is `date` or `number`. */
-    max: PropTypes.number,
-    /** A string to use as a mask. See <a href="https://github.com/sanniassin/react-input-mask#mask--string" target="_blank">react-input-mask</a>. */
-    mask: PropTypes.string,
-    /** Character to cover unfilled editable parts of mask. See <a href="https://github.com/sanniassin/react-input-mask#maskchar--string" target="_blank">react-input-mask</a>. */
-    maskChar: PropTypes.string,
-    /** Additional props to pass to the input element */
-    additionalInputProps: PropTypes.object,
-    /**
-     * Function to execute when the input changes.
-     *
-     * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-     */
-    onChange: PropTypes.func,
-    /**
-     * Function to execute when the input is focused.
-     *
-     * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-     */
-    onFocus: PropTypes.func,
-    /**
-     * Function to execute when the input loses focused.
-     *
-     * @param {SyntheticEvent} evt - The React `SyntheticEvent`.
-     */
-    onBlur: 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,
-};
-
-export default TextInputPropTypes;

package/styles/TextInput/index.js

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

package/styles/Tooltip/Tooltip.jsx

@@ -1,230 +0,0 @@
-import bind from 'lodash/bind';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconTimes from '@spothero/icons/times';
-import DOMUtils from '@spothero/utils/dom';
-import Button from 'v1/components/Button/Button';
-import Portal from '../Portal/Portal';
-
-export default class Tooltip extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** Additional class(es) to add to the containing Portal component. */
-        containerClassName: PropTypes.string,
-        /** The markup node to insert into the tooltip. */
-        children: PropTypes.node.isRequired,
-        /** Where to position the tooltip in relation to the triggering element. */
-        position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-        /** Whether to show the close button or not. */
-        showClose: PropTypes.bool,
-        /** The selector (.foo, #foo, etc...) for the element to attach the tooltip to. */
-        triggerSelector: PropTypes.string.isRequired,
-        /** Whether to reposition the tooltip when it moves, be it via window resize or scrolling or whatever moves it. */
-        updateOnMove: PropTypes.bool,
-        /** The offset of the tooltip from the triggering element. This is based on what the position is set to (`top` offsets up, etc). */
-        tipOffset: PropTypes.number,
-        /** Whether to automatically adjust the tooltip if its off the left or right side of the screen. */
-        adjustArrow: PropTypes.bool,
-        /** Whether to close the tooltip if the body outside of it is clicked. */
-        closeOnBodyClick: PropTypes.bool,
-        /** A function to execute after the tooltip has been hidden. Use this to manage state in a parent component to remove the tooltip from the DOM (see examples). */
-        onHidden: PropTypes.func.isRequired,
-    };
-    static defaultProps = {
-        position: 'top',
-        showClose: true,
-        tipOffset: 0,
-        adjustArrow: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this._isArrowAdjusted = false;
-    }
-
-    componentDidMount() {
-        const {triggerSelector, updateOnMove, closeOnBodyClick} = this.props;
-
-        this._trigger = DOMUtils.el(triggerSelector);
-        this._positionTooltip();
-
-        DOMUtils.addClass(this._container, 'Tooltip-showing');
-
-        if (updateOnMove) {
-            this._container.style.position = 'fixed';
-
-            this._scrollInterval = setInterval(
-                bind(this._positionTooltip, this),
-                100
-            );
-        }
-
-        if (closeOnBodyClick) {
-            document.addEventListener('click', this._onCloseClick, {
-                capture: true,
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        const {updateOnMove, closeOnBodyClick} = this.props;
-
-        if (updateOnMove) {
-            clearInterval(this._scrollInterval);
-        }
-
-        if (closeOnBodyClick) {
-            document.removeEventListener('click', this._onCloseClick);
-        }
-    }
-
-    _onCloseClick = evt => {
-        this.hide();
-    };
-
-    _positionTooltip() {
-        if (!this._trigger) {
-            return;
-        }
-
-        const {position, tipOffset, updateOnMove, adjustArrow} = this.props;
-        const {
-            top: clientTop,
-            left: clientLeft,
-            right: clientRight,
-            bottom: clientBottom,
-            width,
-            height,
-        } = this._trigger.getBoundingClientRect();
-        const tooltipWidth = this._container.offsetWidth;
-        const tooltipHeight = this._container.offsetHeight;
-        const {
-            top: documentTop,
-            left: documentLeft,
-        } = DOMUtils.getDocumentOffset(this._trigger);
-        const top = updateOnMove ? clientTop : documentTop;
-        const right = updateOnMove ? clientRight : documentLeft + width;
-        const bottom = updateOnMove ? clientBottom : documentTop + height;
-        const left = updateOnMove ? clientLeft : documentLeft;
-        const containerMid =
-            position === 'top' || position === 'bottom'
-                ? tooltipWidth / 2
-                : tooltipHeight / 2;
-        const bodyWidth = document.body.clientWidth;
-        const adjuster = 5;
-        let newTop = 0;
-        let newLeft = 0;
-
-        switch (position) {
-            case 'top':
-                newTop = top - tooltipHeight - tipOffset;
-                newLeft = left + width / 2 - containerMid;
-                break;
-
-            case 'right':
-                newTop = top + height / 2 - containerMid;
-                newLeft = right + tipOffset;
-                break;
-
-            case 'bottom':
-                newTop = bottom + tipOffset;
-                newLeft = left + width / 2 - containerMid;
-                break;
-
-            case 'left':
-                newTop = top + height / 2 - containerMid;
-                newLeft = left - tooltipWidth - tipOffset;
-                break;
-        }
-
-        // adjust tooltip position if off the left side of the screen
-        let adjustedLeft = newLeft < 0 ? adjuster : newLeft;
-
-        // adjust tooltip position if off the right side of the screen
-        if (tooltipWidth > bodyWidth - adjustedLeft) {
-            adjustedLeft = bodyWidth - tooltipWidth - adjuster;
-        }
-
-        this._container.style.top = `${newTop}px`;
-        this._container.style.left = `${adjustedLeft}px`;
-
-        if (
-            adjustArrow &&
-            !this._isArrowAdjusted &&
-            adjustedLeft !== newLeft &&
-            (position === 'top' || position === 'bottom')
-        ) {
-            this._arrow.style.left = `${
-                this._arrow.getBoundingClientRect().left +
-                (newLeft - adjustedLeft)
-            }px`;
-
-            this._isArrowAdjusted = true;
-        }
-    }
-
-    /**
-     * Hides the Tooltip programmatically and fires the `onHidden` callback when done.
-     *
-     * @public
-     * @returns {void}
-     */
-    hide() {
-        if (DOMUtils.hasClass(this._container, 'Tooltip-showing')) {
-            DOMUtils.removeClass(this._container, 'Tooltip-showing');
-
-            setTimeout(() => {
-                this.props.onHidden();
-            }, 250);
-        }
-    }
-
-    render() {
-        const {
-            className,
-            containerClassName,
-            position,
-            showClose,
-            children,
-        } = this.props;
-        const classes = classNames(
-            'Tooltip',
-            `Tooltip-${position}`,
-            {'Tooltip-no-close': !showClose},
-            className
-        );
-
-        return (
-            <Portal className={containerClassName}>
-                <div
-                    ref={node => {
-                        this._container = node;
-                    }}
-                    className={classes}
-                    role="tooltip"
-                >
-                    <div
-                        ref={node => {
-                            this._arrow = node;
-                        }}
-                        className="Tooltip-arrow"
-                    />
-                    <div className="Tooltip-content">
-                        {children}
-                        {showClose && (
-                            <Button
-                                className="Tooltip-close"
-                                onClick={this._onCloseClick}
-                            >
-                                <IconTimes />
-                            </Button>
-                        )}
-                    </div>
-                </div>
-            </Portal>
-        );
-    }
-}