@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/v1/components/Panel/Panel.jsx

@@ -1,202 +0,0 @@
-import isNil from 'lodash/isNil';
-import isString from 'lodash/isString';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {Collapse} from 'react-collapse';
-import IconChevronDown from '@spothero/icons/chevron-down';
-import IconChevronUp from '@spothero/icons/chevron-up';
-import Button from 'v1/components/Button/Button';
-
-import deprecate from 'v1/utils/deprecate';
-
-deprecate({
-    name: 'Panel',
-    newName: 'Accordion',
-    changes: [
-        '---- Props ----',
-        'Use allowMultiple to let multiple items show as expanded at a time',
-        'Use allowToggle to allow items within the accordion, so any expanded accordion item can be collapsed again',
-        'instead of isOpen now use, defaultIndex, index to achieve the same effect',
-        'Use defaultIndex to set the initial index(es) of the expanded accordion item',
-        'Use index to set the index(es) of the expanded accordion item',
-        'onChange is the callback invoked when accordion items are expanded or collapsed',
-        'Use isDisabled to disable an AccordionItem',
-        'Use isFocusable to allow an AccordionItem to be focusable',
-        'The pseudo style props _expanded, _disabled, _hover can be passed into the AccordionButton to style it',
-        '---- Changes in v2 component  ----',
-        'Accordion (v2) now uses multiple components in order to parody this component',
-        'In Accordion (v2), there is no longer the option to pass in a custom icon',
-        'In Accordion (v2), the Title and Icon are now placed as children of AccordionButton component to enable the whole row to be clickable',
-        'The AccordionButton should be placed within a Heading component for markup and styling (v2/components/Heading)',
-        'In Accordion (v2), the Text is now a child of the AccordionPanel component',
-        'In order to add styles/markup to the text, it should be placed within a Text component (v2/components/Text)',
-        'Both AccordionPanel and AccordionIcon are children of AccordionItem',
-        'In Accordion (v2), showTitleToggle has been removed',
-        'In Accordion (v2), preview has been removed',
-        'onOpen and onClose are no longer needed in the v2 component',
-        '---- Additional Information ----',
-        'new props are documented at: https://chakra-ui.com/docs/disclosure/accordion',
-    ],
-});
-
-class Panel extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The content to display in the panel title. */
-        title: PropTypes.node.isRequired,
-        /** Additional markup to display in the panel title. */
-        additionalTitleMarkup: PropTypes.node,
-        /** The content preview to display in the when the panel is collapsed. */
-        preview: PropTypes.node,
-        /** The content to display in the panel dropdown. */
-        children: PropTypes.node.isRequired,
-        /** Whether or not the panel should be opened. */
-        isOpen: PropTypes.bool,
-        /** Whether or not the panel title should toggle the panel content open/closed. */
-        showTitleToggle: PropTypes.bool,
-        /** The icon to show for the panel open action. */
-        openIcon: PropTypes.element,
-        /** The icon to show for the panel close action. */
-        closeIcon: PropTypes.element,
-        /** Function to execute on panel open. */
-        onOpen: PropTypes.func,
-        /** Function to execute on panel close. */
-        onClose: PropTypes.func,
-    };
-    static defaultProps = {
-        openIcon: <IconChevronDown className="Icon-chevron-down" />,
-        closeIcon: <IconChevronUp className="Icon-chevron-up" />,
-    };
-    state = {
-        isOpen: this.props.isOpen || false,
-        prevIsOpen: false,
-        heightReady: false,
-    };
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        const {
-            isOpen: nextIsOpen,
-            showTitleToggle: nextShowTitleToggle,
-        } = nextProps;
-        const {isOpen, prevIsOpen} = prevState;
-        const isOpenStateEqualsNextProp = isOpen === nextIsOpen;
-
-        // when showTitleToggle is true, we don't want Panel controlled externally
-        if (
-            !nextShowTitleToggle &&
-            isOpen !== prevIsOpen &&
-            isOpenStateEqualsNextProp
-        ) {
-            // toggled internal state change
-            return {
-                isOpen,
-                prevIsOpen,
-            };
-        } else if (!nextShowTitleToggle && !isOpenStateEqualsNextProp) {
-            // state change happening because of props change by external component
-            return {
-                isOpen: nextIsOpen,
-                prevIsOpen: isOpen,
-            };
-        }
-
-        return null;
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onOpen, onClose} = this.props;
-        const {isOpen} = this.state;
-        const {isOpen: prevIsOpen} = prevState;
-
-        if (onOpen && isOpen && !prevIsOpen) {
-            onOpen();
-        }
-
-        if (onClose && !isOpen && prevIsOpen) {
-            onClose();
-        }
-    }
-
-    _onMeasure = () => {
-        this.setState({
-            heightReady: true,
-        });
-    };
-
-    _onToggle = evt => {
-        evt.preventDefault();
-
-        this.setState((prevState, props) => {
-            const {isOpen} = prevState;
-
-            return {
-                isOpen: !isOpen,
-                prevIsOpen: isOpen,
-            };
-        });
-    };
-
-    render() {
-        const {
-            className,
-            title,
-            children,
-            showTitleToggle,
-            preview,
-            additionalTitleMarkup,
-            openIcon,
-            closeIcon,
-        } = this.props;
-        const {isOpen, heightReady} = this.state;
-        const classes = classNames(
-            'Panel',
-            {'Panel-with-preview': preview},
-            {'Panel-open': isOpen},
-            className
-        );
-        const contentClasses = classNames('Panel-content', {
-            'Panel-content-hidden': !heightReady,
-        });
-        const showPreview = !isNil(preview) && !isOpen;
-        const panelTitle = isString(title) ? (
-            <div className="Panel-title-heading">{title}</div>
-        ) : (
-            title
-        );
-
-        return (
-            <div className={classes}>
-                <div className="Panel-title">
-                    {showTitleToggle ? (
-                        <Button
-                            className="Panel-toggle"
-                            onClick={this._onToggle}
-                        >
-                            {panelTitle}
-                            {isOpen ? closeIcon : openIcon}
-                        </Button>
-                    ) : (
-                        <>
-                            {panelTitle}
-                            {additionalTitleMarkup}
-                        </>
-                    )}
-                </div>
-                <Collapse
-                    isOpened={isOpen || showPreview}
-                    onMeasure={this._onMeasure}
-                    springConfig={{stiffness: 300, damping: 25}}
-                >
-                    {isOpen && <div className={contentClasses}>{children}</div>}
-                    {showPreview && (
-                        <div className="Panel-preview">{preview}</div>
-                    )}
-                </Collapse>
-            </div>
-        );
-    }
-}
-
-export default Panel;

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

@@ -1,196 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-import {build, fake} from '@jackfranklin/test-data-bot';
-
-import Panel from './Panel';
-
-const PanelProps = build('PanelProps', {
-    fields: {
-        isOpen: true,
-        title: fake(f => f.random.words(2)),
-        className: fake(f => f.random.words(2)),
-        children: fake(f => f.random.words(20)),
-    },
-});
-
-// const animationTimeout = 300;
-const setup = props => render(<Panel {...props} />);
-
-describe('<Panel />', () => {
-    describe('Display', () => {
-        it('renders component with proper props', () => {
-            const props = PanelProps();
-            const rendered = setup(props);
-
-            expect(rendered.container.firstChild.className).toContain(
-                props.className
-            );
-            expect(screen.getByText(props.title)).toBeInTheDocument();
-
-            expect(screen.getByText(props.children)).toBeInTheDocument();
-
-            screen.debug();
-        });
-    });
-    // context('Display', () => {
-    //     context('With Title Toggle', () => {
-    //         it('Renders Panel with toggle functionality', () => {
-    //             cy.visitStory('v1/Panel/Display', 'WithToggle')
-    //                 // alias toggle button
-    //                 .get('.Panel-toggle')
-    //                 .as('buttonToggle')
-    //                 // make sure content is not open
-    //                 .get('.Panel')
-    //                 .should('not.have.class', 'Panel-open')
-    //                 .get('.Panel-content')
-    //                 .should('not.exist')
-    //                 // make sure proper icon is displaying
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-down')
-    //                 // open content and make sure it renders properly
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Panel-content')
-    //                 .should('exist')
-    //                 .contains('Panel content')
-    //                 // make sure proper icon is displaying
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-up')
-    //                 // close content again and verify
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Panel-content')
-    //                 .should('not.exist')
-    //                 // make sure proper icon is displaying
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-down');
-    //         });
-    //     });
-    //     context('With Preview', () => {
-    //         it('Renders Panel with preview markup', () => {
-    //             cy.visitStory('v1/Panel/Display', 'WithPreview')
-    //                 // alias toggle button
-    //                 .get('.Panel-toggle')
-    //                 .as('buttonToggle')
-    //                 // make preview markup exists
-    //                 .get('.Panel')
-    //                 .should('not.have.class', 'Panel-open')
-    //                 .get('.Panel-preview')
-    //                 .should('exist')
-    //                 .contains('Panel content preview')
-    //                 // open content and make sure preview disappears
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Panel-preview')
-    //                 .should('not.exist')
-    //                 // close content again and verify preview appears
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Panel-preview')
-    //                 .should('exist');
-    //         });
-    //     });
-    //     context('With Custom Icons', () => {
-    //         it('Renders Panel with custom open/close icons', () => {
-    //             cy.visitStory('v1/Panel/Display', 'WithCustomIcons')
-    //                 // alias toggle button
-    //                 .get('.Panel-toggle')
-    //                 .as('buttonToggle')
-    //                 // make sure proper open icon is displaying
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-right')
-    //                 // open content and make sure icon changes to custom close icon
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-left')
-    //                 // close content again and icon changes back
-    //                 .get('@buttonToggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Icon')
-    //                 .should('have.class', 'Icon-chevron-right');
-    //         });
-    //     });
-    //     context('With Custom Title Element', () => {
-    //         it('Renders Panel with custom title node', () => {
-    //             cy.visitStory('v1/Panel/Display', 'CustomTitleElement')
-    //                 .get('.PanelCustomTitleElement-title')
-    //                 .contains('Custom Title Element');
-    //         });
-    //     });
-    //     context('With Additional Title Markup', () => {
-    //         it('Renders Panel with additional markup in title', () => {
-    //             cy.visitStory('v1/Panel/Display', 'WithAdditionalTitleMarkup')
-    //                 .get('.Panel-title')
-    //                 .contains('Additional Title Markup');
-    //         });
-    //     });
-    // });
-    // context('Methods', () => {
-    //     context('OnOpen', () => {
-    //         it('OnOpen method functions properly', () => {
-    //             cy.visitStory('v1/Panel/Methods', 'OnOpen', {
-    //                 onBeforeLoad: contentWindow => {
-    //                     contentWindow.onPanelOpen = () => {
-    //                         // eslint-disable-next-line no-console
-    //                         console.log('onPanelOpen');
-    //                     };
-    //                     cy.stub(contentWindow, 'onPanelOpen').as('panelOpen');
-    //                 },
-    //             })
-    //                 // calls onOpen when panel is opened
-    //                 .get('.Panel-toggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('@panelOpen')
-    //                 .should('be.called');
-    //         });
-    //     });
-    //     context('OnClose', () => {
-    //         it('OnClose method functions properly', () => {
-    //             cy.visitStory('v1/Panel/Methods', 'OnClose', {
-    //                 onBeforeLoad: contentWindow => {
-    //                     contentWindow.onPanelClose = () => {
-    //                         // eslint-disable-next-line no-console
-    //                         console.log('onPanelClose');
-    //                     };
-    //                     cy.stub(contentWindow, 'onPanelClose').as('panelClose');
-    //                 },
-    //             })
-    //                 // open panel
-    //                 .get('.Panel-toggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 // calls onClose when panel is opened
-    //                 .get('.Panel-toggle')
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('@panelClose')
-    //                 .should('be.called');
-    //         });
-    //     });
-    //     context('With External Toggle', () => {
-    //         it('Renders Panel with external toggle control', () => {
-    //             cy.visitStory('v1/Panel/Methods', 'TogglePanelExternally')
-    //                 // alias external toggle button
-    //                 .get('.PanelToggleExternally-toggle')
-    //                 .as('externalButtonToggle')
-    //                 // verify button click shows content in only Panel controlled by external toggle
-    //                 .click()
-    //                 .wait(animationTimeout)
-    //                 .get('.Panel-toggle-external .Panel-content')
-    //                 .should('exist')
-    //                 .contains('Panel content - external')
-    //                 // verify internal toggle panel content not shown
-    //                 .get('.Panel-toggle-internal .Panel-content')
-    //                 .should('not.exist');
-    //         });
-    //     });
-    // });
-});

package/styles/v1/components/Panel/_Panel.scss

@@ -1,55 +0,0 @@
-.Panel {
-    background-color: $color-white;
-}
-
-.Panel-title {
-    position: relative;
-    padding: 16px;
-
-    .Panel-open &,
-    .Panel-with-preview & {
-        border-bottom: 1px solid $color-dashboard;
-    }
-}
-
-.Panel-title-heading {
-    font-size: 18px;
-    font-weight: $font-weight-semi-bold;
-    margin: 0;
-}
-
-.Panel-toggle {
-    width: 100%;
-    padding: 0;
-    text-align: left;
-    position: relative;
-
-    &::after {
-        display: none;
-    }
-
-    .Icon {
-        width: 20px;
-        height: 20px;
-        margin: 0;
-        position: absolute;
-        top: 0;
-        right: 0;
-        fill: $color-cement;
-    }
-}
-
-.Panel-content,
-.Panel-preview {
-    padding: 16px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-}
-
-.Panel-content-hidden {
-    display: none;
-
-    .Panel-open & {
-        display: block;
-    }
-}

package/styles/v1/components/Panel/stories/Display.stories.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Panel from 'v1/components/Panel/Panel';
-import IconChevronLeft from '@spothero/icons/chevron-left';
-import IconChevronRight from '@spothero/icons/chevron-right';
-
-export default {
-    component: Panel,
-    title: 'v1/Panel/Display',
-};
-
-const panelText =
-    'Panel content - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur';
-
-export const Default = () => {
-    const classes = classNames('PanelDefault', 'PanelDefaultTest');
-
-    return (
-        <Panel className={classes} title="Panel" isOpen>
-            {panelText}
-        </Panel>
-    );
-};
-
-export const WithToggle = () => {
-    return (
-        <Panel title="PanelWithTitleToggle" showTitleToggle>
-            {panelText}
-        </Panel>
-    );
-};
-
-export const WithPreview = () => {
-    return (
-        <Panel
-            title="PanelWithPreview"
-            preview="Panel content preview - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
-            showTitleToggle
-        >
-            {panelText}
-        </Panel>
-    );
-};
-
-export const WithCustomIcons = () => {
-    return (
-        <Panel
-            title="PanelCustomIcons"
-            openIcon={<IconChevronRight className="Icon-chevron-right" />}
-            closeIcon={<IconChevronLeft className="Icon-chevron-left" />}
-            showTitleToggle
-        >
-            {panelText}
-        </Panel>
-    );
-};
-
-export const WithAdditionalTitleMarkup = () => {
-    return (
-        <Panel
-            title="PanelWithAdditionalTitleMarkup"
-            additionalTitleMarkup="Additional Title Markup"
-            isOpen
-        >
-            {panelText}
-        </Panel>
-    );
-};
-
-export const CustomTitleElement = () => {
-    const title = (
-        <div className="Panel-title-heading PanelCustomTitleElement-title">
-            Custom Title Element
-        </div>
-    );
-
-    return (
-        <Panel title={title} showTitleToggle>
-            {panelText}
-        </Panel>
-    );
-};

package/styles/v1/components/Panel/stories/Methods.stories.js

@@ -1,76 +0,0 @@
-import React, {useState} from 'react';
-import Panel from 'v1/components/Panel/Panel';
-import Button from 'v1/components/Button/Button';
-
-export default {
-    component: Panel,
-    title: 'v1/Panel/Methods',
-};
-
-const panelText =
-    'Panel content - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur';
-
-export const OnOpen = () => {
-    const onPanelOpen = () => {
-        if (window.onPanelOpen) {
-            window.onPanelOpen();
-        } else {
-            // eslint-disable-next-line no-console
-            console.log('panel opened');
-        }
-    };
-
-    return (
-        <Panel title="PanelMethods" onOpen={onPanelOpen} showTitleToggle>
-            {panelText}
-        </Panel>
-    );
-};
-
-export const OnClose = () => {
-    const onPanelClose = () => {
-        if (window.onPanelClose) {
-            window.onPanelClose();
-        } else {
-            // eslint-disable-next-line no-console
-            console.log('panel closed');
-        }
-    };
-
-    return (
-        <Panel title="PanelMethods" onClose={onPanelClose} showTitleToggle>
-            {panelText}
-        </Panel>
-    );
-};
-
-export const TogglePanelExternally = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggleClick = evt => {
-        evt.preventDefault();
-
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="PanelToggleExternally">
-            <Panel
-                className="Panel-toggle-external"
-                title="PanelToggleExternally"
-                isOpen={isOpen}
-            >
-                Panel content - external
-            </Panel>
-            <br />
-            <br />
-            <Button
-                className="PanelToggleExternally-toggle"
-                color="primary"
-                onClick={onToggleClick}
-            >
-                Toggle Panel
-            </Button>
-        </div>
-    );
-};