@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/v1/components/Modal/stories/Content.stories.js

@@ -1,314 +0,0 @@
-import React, {useState} from 'react';
-import Button from 'v1/components/Button/Button';
-import Modal from '../Modal';
-import ModalContent from '../ModalContent';
-import ErrorBoundary from '../../../../ErrorBoundary/ErrorBoundary';
-import DOMUtils from '@spothero/utils/dom';
-
-export default {
-    component: Modal,
-    title: 'v1/Modal/Content',
-};
-
-export const CustomHeight = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalCustomHeight">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Custom Height
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" onHidden={onToggle}>
-                    <ModalContent contentAreaHeight={300}>
-                        <p>
-                            This modal has a height of 300. And if the height is
-                            taller there will be a scrollbar.
-                        </p>
-                        <p>
-                            Nulla quis lorem quis nulla auctor congue.
-                            Pellentesque volutpat eget libero nec volutpat.
-                            Donec malesuada metus odio, nec scelerisque libero
-                            convallis eu. Morbi vitae pellentesque lorem, a
-                            porta elit. Nulla nibh mi, hendrerit id urna in,
-                            commodo pellentesque dui. Nullam pellentesque neque
-                            vel nisi venenatis, ac dignissim sapien condimentum.
-                            Aenean ornare, ante non auctor facilisis, est libero
-                            commodo nulla, euismod vehicula massa enim efficitur
-                            orci.
-                        </p>
-                        <p>
-                            Morbi vitae pellentesque lorem, a porta elit. Nulla
-                            nibh mi, hendrerit id urna in, commodo pellentesque
-                            dui. Nullam pellentesque neque vel nisi venenatis,
-                            ac dignissim sapien condimentum. Aenean ornare, ante
-                            non auctor facilisis, est libero commodo nulla,
-                            euismod vehicula massa enim efficitur orci. Nulla
-                            quis lorem quis nulla auctor congue. Pellentesque
-                            volutpat eget libero nec volutpat. Donec malesuada
-                            metus odio, nec scelerisque libero convallis eu.
-                        </p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const MaxHeight = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalMaxHeight">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Max Height
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" onHidden={onToggle}>
-                    <ModalContent maxHeight={400}>
-                        <p>
-                            This modal has a max height of 400. And if the
-                            height is taller there will be a scrollbar.
-                        </p>
-                        <p>
-                            Nulla quis lorem quis nulla auctor congue.
-                            Pellentesque volutpat eget libero nec volutpat.
-                            Donec malesuada metus odio, nec scelerisque libero
-                            convallis eu. Morbi vitae pellentesque lorem, a
-                            porta elit. Nulla nibh mi, hendrerit id urna in,
-                            commodo pellentesque dui. Nullam pellentesque neque
-                            vel nisi venenatis, ac dignissim sapien condimentum.
-                            Aenean ornare, ante non auctor facilisis, est libero
-                            commodo nulla, euismod vehicula massa enim efficitur
-                            orci.
-                        </p>
-                        <p>
-                            Morbi vitae pellentesque lorem, a porta elit. Nulla
-                            nibh mi, hendrerit id urna in, commodo pellentesque
-                            dui. Nullam pellentesque neque vel nisi venenatis,
-                            ac dignissim sapien condimentum. Aenean ornare, ante
-                            non auctor facilisis, est libero commodo nulla,
-                            euismod vehicula massa enim efficitur orci. Nulla
-                            quis lorem quis nulla auctor congue. Pellentesque
-                            volutpat eget libero nec volutpat. Donec malesuada
-                            metus odio, nec scelerisque libero convallis eu.
-                        </p>
-                        <p>
-                            Nulla quis lorem quis nulla auctor congue.
-                            Pellentesque volutpat eget libero nec volutpat.
-                            Donec malesuada metus odio, nec scelerisque libero
-                            convallis eu. Morbi vitae pellentesque lorem, a
-                            porta elit. Nulla nibh mi, hendrerit id urna in,
-                            commodo pellentesque dui. Nullam pellentesque neque
-                            vel nisi venenatis, ac dignissim sapien condimentum.
-                            Aenean ornare, ante non auctor facilisis, est libero
-                            commodo nulla, euismod vehicula massa enim efficitur
-                            orci.
-                        </p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const NoContentPadding = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalNoContentPadding">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with No Content Padding
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" onHidden={onToggle}>
-                    <ModalContent noPadding>
-                        <p>This is the modal has no content padding.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const HtmlContent = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalHtml">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with HTML
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" onHidden={onToggle}>
-                    <ModalContent html="<p>This is some HTML modal content.</p>" />
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const HtmlContentError = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalHtmlError">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with HTML Error
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" onHidden={onToggle}>
-                    <ErrorBoundary>
-                        <ModalContent html="<p>This is some HTML modal content.</p>">
-                            <p>This is the modal content.</p>
-                        </ModalContent>
-                    </ErrorBoundary>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const MultipleModals = () => {
-    const [isOpen, setOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    const onRemoveIndex = () => {
-        setActiveIndex(0);
-    };
-
-    const onIndexSelected = evt => {
-        const newIndex = parseInt(DOMUtils.attr(evt.target, 'data-next'), 10);
-
-        setActiveIndex(newIndex);
-    };
-
-    return (
-        <div className="ModalMultiple">
-            <Button color="primary" onClick={onToggle}>
-                Open Multi-Content Modal
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    activeContentIndex={activeIndex}
-                    onRemoveIndex={onRemoveIndex}
-                    onHidden={onToggle}
-                >
-                    {activeIndex === 0 ? (
-                        <ModalContent className="ModalContent-0">
-                            <p>This is content index 0.</p>
-                            <Button
-                                className="ModalContent-see-more"
-                                color="primary"
-                                data-next={1}
-                                onClick={onIndexSelected}
-                            >
-                                See More Content
-                            </Button>
-                        </ModalContent>
-                    ) : null}
-                    {activeIndex === 1 ? (
-                        <ModalContent className="ModalContent-1">
-                            <p>This is content index 1.</p>
-                            <Button
-                                className="ModalContent-back"
-                                color="primary"
-                                data-next={0}
-                                onClick={onIndexSelected}
-                            >
-                                Go Back
-                            </Button>
-                        </ModalContent>
-                    ) : null}
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const WithStartIndex = () => {
-    const [isOpen, setOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(1);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    const onRemoveIndex = () => {
-        setActiveIndex(0);
-    };
-
-    const onIndexSelected = evt => {
-        const newIndex = parseInt(DOMUtils.attr(evt.target, 'data-next'), 10);
-
-        setActiveIndex(newIndex);
-    };
-
-    return (
-        <div className="ModalStartIndex">
-            <Button color="primary" onClick={onToggle}>
-                Open Multi-Content Modal with Start Index
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    activeContentIndex={activeIndex}
-                    onRemoveIndex={onRemoveIndex}
-                    onHidden={onToggle}
-                >
-                    {activeIndex === 0 ? (
-                        <ModalContent className="ModalContent-0">
-                            <p>This is content index 0.</p>
-                            <Button
-                                className="ModalContent-see-more"
-                                color="primary"
-                                data-next={1}
-                                onClick={onIndexSelected}
-                            >
-                                See More Content
-                            </Button>
-                        </ModalContent>
-                    ) : null}
-                    {activeIndex === 1 ? (
-                        <ModalContent className="ModalContent-1">
-                            <p>This is content index 1.</p>
-                            <Button
-                                className="ModalContent-back"
-                                color="primary"
-                                data-next={0}
-                                onClick={onIndexSelected}
-                            >
-                                Go Back
-                            </Button>
-                        </ModalContent>
-                    ) : null}
-                </Modal>
-            )}
-        </div>
-    );
-};

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

@@ -1,208 +0,0 @@
-import React, {useState} from 'react';
-import Button from 'v1/components/Button/Button';
-import Modal from '../Modal';
-import ModalContent from '../ModalContent';
-import ReduxConsumer from './helpers/ReduxConsumer';
-import {createStore} from 'redux';
-
-export default {
-    component: Modal,
-    title: 'v1/Modal/Display',
-};
-
-const initialState = {
-    items: 'Redux items here!',
-};
-const items = (state = initialState) => {
-    return state;
-};
-const store = createStore(items);
-
-export const Default = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalDefault">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    onHidden={onToggle}
-                    // eslint-disable-next-line react/jsx-handler-names
-                    onShown={window.onModalShown}
-                    // eslint-disable-next-line react/jsx-handler-names
-                    onCloseClick={window.onCloseClick}
-                >
-                    <ModalContent>
-                        <p>This is the modal content.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const InsideElement = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalInElement">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal Inside of Element
-            </Button>
-            <div className="ModalInElement-container">
-                {isOpen && (
-                    <Modal
-                        title="Modal Title"
-                        renderInBody={false}
-                        onHidden={onToggle}
-                    >
-                        <ModalContent>
-                            <p>
-                                This modal is inside of an element and not on
-                                the body.
-                            </p>
-                        </ModalContent>
-                    </Modal>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export const NoTitle = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalNoTitle">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with No Title
-            </Button>
-            {isOpen && (
-                <Modal onHidden={onToggle}>
-                    <ModalContent>
-                        <p>This modal has no title.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const NoCloseButton = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalNoClose">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with No Close Button
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    showClose={false}
-                    onHidden={onToggle}
-                >
-                    <ModalContent>
-                        <p>This modal has no close button.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const NoShim = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalNoShim">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with No Shim
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" useShim={false} onHidden={onToggle}>
-                    <ModalContent>
-                        <p>This modal has no shim.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const WithRedux = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalRedux">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Redux
-            </Button>
-            {isOpen && (
-                <Modal title="Redux Modal" store={store} onHidden={onToggle}>
-                    <ModalContent>
-                        <ReduxConsumer />
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const FullScreenOnMobile = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalDefault">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    fullScreenOnMobile
-                    onHidden={onToggle}
-                    // eslint-disable-next-line react/jsx-handler-names
-                    onShown={window.onModalShown}
-                    // eslint-disable-next-line react/jsx-handler-names
-                    onCloseClick={window.onCloseClick}
-                >
-                    <ModalContent>
-                        <p>This is the modal content.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};

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

@@ -1,44 +0,0 @@
-import React, {useState, useRef} from 'react';
-import Button from 'v1/components/Button/Button';
-import Modal from '../Modal';
-import ModalContent from '../ModalContent';
-
-export default {
-    component: Modal,
-    title: 'v1/Modal/Methods',
-};
-
-export const OnHide = () => {
-    const [isOpen, setOpen] = useState(false);
-    const modal = useRef();
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    const onHideClick = () => {
-        modal.current.hide();
-    };
-
-    return (
-        <div className="ModalHide">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal
-            </Button>
-            {isOpen && (
-                <Modal ref={modal} title="Modal Title" onHidden={onToggle}>
-                    <ModalContent>
-                        <p>This is the modal content.</p>
-                        <Button
-                            className="ModalContent-hide"
-                            color="primary"
-                            onClick={onHideClick}
-                        >
-                            Hide Modal
-                        </Button>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};

package/styles/v1/components/Modal/stories/Width.stories.js

@@ -1,82 +0,0 @@
-import React, {useState} from 'react';
-import Button from 'v1/components/Button/Button';
-import Modal from '../Modal';
-import ModalContent from '../ModalContent';
-
-export default {
-    component: Modal,
-    title: 'v1/Modal/Width',
-};
-
-export const PercentageWidth = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalPercentage">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Percentage Width
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" width="75%" onHidden={onToggle}>
-                    <ModalContent>
-                        <p>This is has 75% width.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const PixelWidth = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalPixels">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Pixel Width
-            </Button>
-            {isOpen && (
-                <Modal title="Modal Title" width={300} onHidden={onToggle}>
-                    <ModalContent>
-                        <p>This is has 300px width.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};
-
-export const SizeWidth = () => {
-    const [isOpen, setOpen] = useState(false);
-
-    const onToggle = () => {
-        setOpen(prevIsOpen => !prevIsOpen);
-    };
-
-    return (
-        <div className="ModalSize">
-            <Button color="primary" onClick={onToggle}>
-                Open Modal with Size Width
-            </Button>
-            {isOpen && (
-                <Modal
-                    title="Modal Title"
-                    width="extra-wide"
-                    onHidden={onToggle}
-                >
-                    <ModalContent>
-                        <p>This is has width set to extra-wide.</p>
-                    </ModalContent>
-                </Modal>
-            )}
-        </div>
-    );
-};

package/styles/v1/components/Modal/stories/helpers/ReduxConsumer.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-
-const ReduxConsumer = ({items}) => {
-    return <div className="ModalReduxConsumer">{items}</div>;
-};
-
-ReduxConsumer.propTypes = {
-    items: PropTypes.string.isRequired,
-};
-
-const mapStateToProps = state => {
-    const {items} = state;
-
-    return {
-        items,
-    };
-};
-
-export default connect(mapStateToProps)(ReduxConsumer);