@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/v1/components/Modal/Modal.jsx

@@ -1,315 +0,0 @@
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import IconChevronLeft from '@spothero/icons/chevron-left';
-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 Modal extends PureComponent {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** Whether to render the modal to the body tag (otherwise renders to current position in DOM). */
-        renderInBody: PropTypes.bool,
-        /** Whether to use the background shim. */
-        useShim: PropTypes.bool,
-        /** Whether to show the close button. */
-        showClose: PropTypes.bool,
-        /** Whether to animate the Modal showing. */
-        animateOnShow: PropTypes.bool,
-        /** Whether to close the Modal when the shim is clicked. */
-        closeOnShimClick: PropTypes.bool,
-        /** The title of the modal. If one isn't provided then the title won't render. */
-        title: PropTypes.node,
-        /** The width of the modal. (size string, pixel value [integer] or percentage ["100%"]) */
-        width: PropTypes.oneOfType([
-            PropTypes.oneOf([
-                'extra-slim',
-                'slim',
-                'normal',
-                'wide',
-                'extra-wide',
-            ]),
-            PropTypes.number,
-            PropTypes.string,
-        ]),
-        /** A function to execute after the modal has been shown. */
-        onShown: PropTypes.func,
-        /**
-         * A function to execute after the modal has been hidden. Use this to manage state in a parent component to remove the modal from the DOM (see examples).
-         *
-         * @param {*} args - Any arguments that were passed to `hide()` to retrieve in the callback.
-         */
-        onHidden: PropTypes.func,
-        /** A function to execute when the close button or the shim is clicked. */
-        onCloseClick: PropTypes.func,
-        /** Markup to pass as children to the modal. Pass either one element or an array of elements. */
-        children: PropTypes.oneOfType([
-            PropTypes.element,
-            PropTypes.arrayOf(PropTypes.element),
-            PropTypes.node,
-        ]).isRequired,
-        /** Indicates the current index of the content being displayed. Manage this from the ModalContent (see examples) and in the parent component's state. */
-        activeContentIndex: PropTypes.number,
-        /** A function to execute that helps manage state in a parent component to determine which ModalContent to show. Required when multiple ModalContents are present in the parent. */
-        onRemoveIndex: PropTypes.func,
-        /** Optional Redux store to pass into the rendered Modal. Required if the Modal uses any data or actions from a Redux store. */
-        store: PropTypes.object,
-        /** A function to execute at the end of the constructor before the Modal is rendered. */
-        onBeforeFirstRender: PropTypes.func,
-        /** Whether to expand the Modal to full-width on mobile */
-        fullScreenOnMobile: PropTypes.bool,
-        /** Optional data-testid to aid with RTL tests */
-        'data-testid': PropTypes.string,
-    };
-    static defaultProps = {
-        renderInBody: true,
-        useShim: true,
-        showClose: true,
-        width: 'normal',
-        activeContentIndex: 0,
-        closeOnShimClick: true,
-        animateOnShow: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {width, title, onBeforeFirstRender} = this.props;
-
-        this._isDynamicWidth = isNumber(width) || width.indexOf('%') > 0;
-        this._isAnimating = false;
-        this._isTitleString = title ? isString(title) : false;
-        this._childHistory = [];
-
-        if (onBeforeFirstRender) {
-            onBeforeFirstRender();
-        }
-    }
-
-    componentDidMount() {
-        const {width} = this.props;
-
-        setTimeout(() => {
-            // if ModalContent throws an error then the container will not be defined
-            if (!this._container) {
-                return;
-            }
-
-            if (this._isDynamicWidth) {
-                const newWidth = isNumber(width)
-                    ? `${width}px` // numerical width, set accordingly
-                    : width; // percentage width, retain and set
-
-                DOMUtils.addClass(this._container, 'Modal-container-custom');
-
-                this._container.style.width = newWidth;
-            }
-            this._show();
-        }, 0);
-    }
-
-    componentWillUnmount() {
-        DOMUtils.removeClass('html', 'Modal-open');
-    }
-
-    _onCloseClick = evt => {
-        if (this._isAnimating) {
-            return;
-        }
-
-        const {onCloseClick} = this.props;
-
-        this.hide();
-
-        if (onCloseClick) {
-            onCloseClick();
-        }
-    };
-
-    _onShimClick = evt => {
-        const {useShim, closeOnShimClick} = this.props;
-
-        if (
-            useShim &&
-            closeOnShimClick &&
-            DOMUtils.hasClass(evt.target, 'Modal-wrapper')
-        ) {
-            this._onCloseClick();
-        }
-    };
-
-    _onBackClick = evt => {
-        this.props.onRemoveIndex();
-    };
-
-    _show() {
-        const {useShim, renderInBody, onShown, animateOnShow} = this.props;
-        const node = useShim ? this._modal : this._container;
-        const showClass = useShim ? 'Modal-showing' : 'Modal-container-showing';
-
-        DOMUtils.addClass(node, showClass);
-
-        if (renderInBody) {
-            DOMUtils.addClass('html', 'Modal-open');
-        }
-
-        if (!useShim) {
-            DOMUtils.addClass(this._modal, 'Modal-no-shim');
-        }
-
-        if (animateOnShow) {
-            this._isAnimating = true;
-
-            window.transitionEnd?.(node).bind(() => {
-                window.transitionEnd(node).unbind();
-
-                if (onShown) {
-                    onShown();
-                }
-
-                this._isAnimating = false;
-            });
-        } else {
-            if (onShown) {
-                onShown();
-            }
-        }
-    }
-
-    _renderModal() {
-        const {
-            className,
-            renderInBody,
-            useShim,
-            title,
-            showClose,
-            children,
-            width,
-            animateOnShow,
-            activeContentIndex,
-            fullScreenOnMobile,
-            'data-testid': dataTestId,
-        } = this.props;
-        const classes = classNames(
-            'Modal',
-            {'Modal-inline': !renderInBody},
-            {'Modal-animated': animateOnShow},
-            {'Modal-showing': useShim && !animateOnShow},
-            className
-        );
-        const containerClasses = classNames(
-            'Modal-container',
-            {[`Modal-container-${width}`]: !this._isDynamicWidth},
-            {'Modal-container-animated': animateOnShow},
-            {'Modal-container-showing': !useShim && !animateOnShow}
-        );
-        const wrapperClasses = classNames('Modal-wrapper', {
-            'Modal-wrapper-full': fullScreenOnMobile,
-        });
-
-        return (
-            <div
-                ref={node => {
-                    this._modal = node;
-                }}
-                className={classes}
-                data-testid={dataTestId}
-            >
-                {useShim && <div className="Modal-shim" />}
-                <div className={wrapperClasses} onClick={this._onShimClick}>
-                    <div
-                        ref={node => {
-                            this._container = node;
-                        }}
-                        className={containerClasses}
-                    >
-                        {title && (
-                            <div className="Modal-title">
-                                {this._isTitleString ? <h1>{title}</h1> : title}
-                            </div>
-                        )}
-                        <div className="Modal-ctas">
-                            {showClose && (
-                                <Button
-                                    className="Modal-close"
-                                    aria-label="Close Modal"
-                                    onClick={this._onCloseClick}
-                                >
-                                    <IconTimes />
-                                </Button>
-                            )}
-                            {activeContentIndex > 0 && (
-                                <Button
-                                    className="Modal-back"
-                                    aria-label="Go Back"
-                                    onClick={this._onBackClick}
-                                >
-                                    <IconChevronLeft />
-                                </Button>
-                            )}
-                        </div>
-                        {children}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Hides the Modal programmatically.
-     *
-     * @public
-     * @param {*} args - The arguments to pass to the onHidden callback in cases where you may need access to something not available in Modal itself.
-     * @returns {void}
-     */
-    hide(...args) {
-        this._isAnimating = true;
-
-        const {useShim, renderInBody, onHidden, animateOnShow} = this.props;
-        const node = useShim ? this._modal : this._container;
-        const showClass = useShim ? 'Modal-showing' : 'Modal-container-showing';
-
-        if (!animateOnShow) {
-            DOMUtils.addClass(node, showClass.replace('showing', 'animated'));
-        }
-
-        if (!useShim) {
-            DOMUtils.removeClass(this._modal, 'Modal-no-shim');
-        }
-
-        DOMUtils.removeClass(node, showClass);
-
-        if (renderInBody) {
-            DOMUtils.removeClass('html', 'Modal-open');
-        }
-
-        window.transitionEnd?.(node).bind(() => {
-            window.transitionEnd(node).unbind();
-
-            this._isAnimating = false;
-
-            if (!animateOnShow) {
-                DOMUtils.removeClass(node, `${showClass}-animated`);
-            }
-
-            if (onHidden) {
-                onHidden(...args);
-            }
-        });
-    }
-
-    render() {
-        const {renderInBody, store} = this.props;
-
-        if (renderInBody) {
-            return <Portal store={store}>{this._renderModal()}</Portal>;
-        } else {
-            return this._renderModal();
-        }
-    }
-}

package/styles/v1/components/Modal/Modal.spec.js

@@ -1,293 +0,0 @@
-// THIS TEST HAS A TENDENCY TO FLAKE
-
-const animationTimeout = 300;
-
-// Do not run flaky tests.
-describe.skip('<Modal />', () => {
-    context('Display', () => {
-        context('Default', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Modal/Display', 'Default', {
-                    onBeforeLoad: contentWindow => {
-                        contentWindow.onModalShown = evt => {
-                            console.log('modal shown'); // eslint-disable-line no-console
-                        };
-
-                        contentWindow.onCloseClick = evt => {
-                            console.log('close clicked'); // eslint-disable-line no-console
-                        };
-
-                        cy.stub(contentWindow, 'onModalShown').as(
-                            'onModalShown'
-                        );
-
-                        cy.stub(contentWindow, 'onCloseClick').as(
-                            'onCloseClick'
-                        );
-                    },
-                })
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout);
-            });
-
-            it('Renders properly', () => {
-                cy.get('@onModalShown')
-                    .should('be.called')
-                    .get('.Modal')
-                    .should('have.class', 'Modal-showing')
-                    // check to make sure the parent (2 elements up) is the body
-                    .parent()
-                    .parent()
-                    .then($el => {
-                        expect($el.prop('tagName').toLowerCase()).to.eq('body');
-                    })
-                    // confirm other default elements exist
-                    .get('.Modal-title')
-                    .get('.Modal-content')
-                    .get('.Modal-close')
-                    .get('html')
-                    .should('have.class', 'Modal-open');
-            });
-
-            it('Closes when close is clicked', () => {
-                cy.get('.Modal-close')
-                    .click()
-                    .get('@onCloseClick')
-                    .should('be.called')
-                    .wait(animationTimeout)
-                    .get('.Modal')
-                    .should('not.exist');
-            });
-
-            it('Closes when shim is clicked', () => {
-                cy.get('.Modal-wrapper')
-                    .click('topLeft')
-                    .get('@onCloseClick')
-                    .should('be.called')
-                    .wait(animationTimeout)
-                    .get('.Modal')
-                    .should('not.exist');
-            });
-        });
-
-        context('Inside Element', () => {
-            it('Renders inside of an element and not directly in the body', () => {
-                cy.visitStory('v1/Modal/Display', 'InsideElement')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal')
-                    .parent()
-                    .should('have.class', 'ModalInElement-container');
-            });
-        });
-
-        context('No Close', () => {
-            it(`Does not render the close button`, () => {
-                cy.visitStory('v1/Modal/Display', 'NoCloseButton')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-close')
-                    .should('not.exist');
-            });
-        });
-
-        context('No Title', () => {
-            it(`Does not render the title if one isn't provided`, () => {
-                cy.visitStory('v1/Modal/Display', 'NoTitle')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-title')
-                    .should('not.exist');
-            });
-        });
-
-        context('No Shim', () => {
-            it(`Does not render the shim behind the modal`, () => {
-                cy.visitStory('v1/Modal/Display', 'NoShim')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-shim')
-                    .should('not.exist')
-                    // make sure close button still has pointer events and is clickable
-                    .get('.Modal-close')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal')
-                    .should('not.exist');
-            });
-        });
-
-        context('Redux', () => {
-            it('Passes values through from a Redux store properly', () => {
-                cy.visitStory('v1/Modal/Display', 'WithRedux')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .contains('Redux items here!');
-            });
-        });
-
-        context('Mobile Fullscreen', () => {
-            it('Renders fullscreen', () => {
-                cy.visitStory('v1/Modal/Display', 'FullScreenOnMobile')
-                    .viewport('iphone-6')
-                    .wait(animationTimeout)
-                    .get('.Button')
-                    .click()
-                    .get('.Modal-wrapper')
-                    .should('have.class', 'Modal-wrapper-full');
-            });
-        });
-    });
-
-    context('Width', () => {
-        context('Predefined Size', () => {
-            it('Renders with the correct container size class', () => {
-                cy.visitStory('v1/Modal/Width', 'SizeWidth')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-container')
-                    .should('have.class', 'Modal-container-extra-wide');
-            });
-        });
-
-        context('Custom Pixels', () => {
-            it('Renders with the correct container size style', () => {
-                cy.visitStory('v1/Modal/Width', 'PixelWidth')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-container')
-                    .should('have.class', 'Modal-container-custom')
-                    .and('have.attr', 'style', 'width: 300px;');
-            });
-        });
-
-        context('Percentage', () => {
-            it('Renders with the correct container size as a percentage', () => {
-                cy.visitStory('v1/Modal/Width', 'PercentageWidth')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-container')
-                    .should('have.class', 'Modal-container-custom')
-                    .and('have.attr', 'style', 'width: 75%;');
-            });
-        });
-    });
-
-    context('Content', () => {
-        context('No Padding', () => {
-            it('Renders the content with no padding applied', () => {
-                cy.visitStory('v1/Modal/Content', 'NoContentPadding')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('have.class', 'Modal-content-flush');
-            });
-        });
-
-        context('Maximum Height', () => {
-            it('Renders the content with a maximum height', () => {
-                cy.visitStory('v1/Modal/Content', 'MaxHeight')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('have.attr', 'style', 'max-height: 400px;');
-            });
-        });
-
-        context('Custom Height', () => {
-            it('Renders the content with a custom height', () => {
-                cy.visitStory('v1/Modal/Content', 'CustomHeight')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('have.class', 'Modal-content-with-height')
-                    .and('have.attr', 'style', 'max-height: 244px;'); // see component for proper calculation method for this
-            });
-        });
-
-        context('Html Content', () => {
-            it('Renders an HTML block in the content area', () => {
-                cy.visitStory('v1/Modal/Content', 'HtmlContent')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content-wrapper div')
-                    .contains('This is some HTML modal content.');
-            });
-        });
-
-        context('Html Content Error', () => {
-            it('Does not render if both the html prop and children are present', async () => {
-                await cy
-                    .visitStory('v1/Modal/Content', 'HtmlContentError')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('not.exist');
-            });
-        });
-
-        context('Multiple', () => {
-            it('Properly navigates between multiple content items', () => {
-                cy.visitStory('v1/Modal/Content', 'MultipleModals')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('have.class', 'ModalContent-0')
-                    .get('.ModalContent-see-more')
-                    .click()
-                    .get('.Modal-content-wrapper')
-                    .contains('This is content index 1.')
-                    .get('.Modal-back')
-                    .click()
-                    .get('.Modal-content-wrapper')
-                    .contains('This is content index 0.');
-            });
-        });
-
-        context('Start Index', () => {
-            it('Displays the correct content item when set', () => {
-                cy.visitStory('v1/Modal/Content', 'WithStartIndex')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal-content')
-                    .should('have.class', 'ModalContent-1')
-                    .get('.Modal-content-wrapper')
-                    .contains('This is content index 1.')
-                    .get('.Modal-back');
-            });
-        });
-    });
-
-    context('Methods', () => {
-        context('Hide', () => {
-            it('Calling hide() will hide the modal', () => {
-                cy.visitStory('v1/Modal/Methods', 'OnHide')
-                    .get('.Button')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.ModalContent-hide')
-                    .click()
-                    .wait(animationTimeout)
-                    .get('.Modal')
-                    .should('not.exist');
-            });
-        });
-    });
-});