@spothero/ui 14.8.3 → 14.8.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# 14.8.4 - 06/21/2022
+## Miscellaneous Updates
+* [[2809609](https://github.com/spothero/fe-ui/commit/2809609)] - `feature:` Add Modal to V2 ([#299](https://github.com/spothero/fe-ui/pull/299)) (Mick Johnson)
+	* `squash:` Add new Modal component
+	* `squash:` More specific styling and scroll behavior
+	* `squash:` Mobile styling
+	* `squash:` Add Accordion Story
+	* `squash:` Cleanup stories and add focus state to close button
+	* `squash:` Story name cleanup
+	* `squash:` Design review feedback
+	* `squash:` Add jsdoc comments
+	* `squash:` Move v1 Modal to right place and export the subcomponents
+	* `squash:` Fix stylesheet import
+	* `squash:` Add hideCloseButton Prop, Render Box with header styles if header not passed in, Adjust visuals based on presence of header and close button
+	* `squash:` Proptypes type
+	* `squash:` Fixing the old modal export
+	* `squash:` Make onClose not required, tweak header styling
+
 # 14.8.3 - 06/21/2022
 
 ## Miscellaneous Updates

package/CHANGELOG.tmp

@@ -1,6 +1,18 @@
-# 14.8.3 - 06/21/2022
-
+# 14.8.4 - 06/21/2022
 ## Miscellaneous Updates
-* [[9d66803](https://github.com/spothero/fe-ui/commit/9d66803)] - `fix:` Adds legacy-peer-deps to npmrc to support npm changes ([#301](https://github.com/spothero/fe-ui/pull/301)) (Max Rashes)
-* [[c254ac0](https://github.com/spothero/fe-ui/commit/c254ac0)] - `chore:` Refactored Layer stories to increase clarity ([#300](https://github.com/spothero/fe-ui/pull/300)) (Nathan Caraker)
+* [[2809609](https://github.com/spothero/fe-ui/commit/2809609)] - `feature:` Add Modal to V2 ([#299](https://github.com/spothero/fe-ui/pull/299)) (Mick Johnson)
+	* `squash:` Add new Modal component
+	* `squash:` More specific styling and scroll behavior
+	* `squash:` Mobile styling
+	* `squash:` Add Accordion Story
+	* `squash:` Cleanup stories and add focus state to close button
+	* `squash:` Story name cleanup
+	* `squash:` Design review feedback
+	* `squash:` Add jsdoc comments
+	* `squash:` Move v1 Modal to right place and export the subcomponents
+	* `squash:` Fix stylesheet import
+	* `squash:` Add hideCloseButton Prop, Render Box with header styles if header not passed in, Adjust visuals based on presence of header and close button
+	* `squash:` Proptypes type
+	* `squash:` Fixing the old modal export
+	* `squash:` Make onClose not required, tweak header styling
 

package/backlog/index.js

@@ -410,8 +410,6 @@ var _Checkbox = _interopRequireDefault(require("./Checkbox/Checkbox"));
 
 var _TextArea = _interopRequireDefault(require("./TextArea/TextArea"));
 
-var _Modal = require("./Modal");
-
 var _TextInput = require("./TextInput");
 
 var _PulseLoader = _interopRequireDefault(require("./PulseLoader/PulseLoader"));
@@ -446,4 +444,6 @@ var _TextButton = _interopRequireDefault(require("./v1/components/TextButton/Tex
 
 var _Image = _interopRequireDefault(require("./v1/components/Image/Image"));
 
-var _Loader = _interopRequireDefault(require("./v1/components/Loader/Loader"));
+var _Loader = _interopRequireDefault(require("./v1/components/Loader/Loader"));
+
+var _Modal = require("./v1/components/Modal");

package/backlog/{Modal → v1/components/Modal}/Modal.js

@@ -52,9 +52,9 @@ var _times = _interopRequireDefault(require("@spothero/icons/times"));
 
 var _dom = _interopRequireDefault(require("@spothero/utils/dom"));
 
-var _Button = _interopRequireDefault(require("../v1/components/Button/Button"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
 
-var _Portal = _interopRequireDefault(require("../Portal/Portal"));
+var _Portal = _interopRequireDefault(require("Portal/Portal"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/backlog/v1/components/index.js

@@ -29,6 +29,27 @@ _Object$defineProperty(exports, "Loader", {
   }
 });
 
+_Object$defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.Modal;
+  }
+});
+
+_Object$defineProperty(exports, "ModalContent", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.ModalContent;
+  }
+});
+
+_Object$defineProperty(exports, "ModalFooter", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.ModalFooter;
+  }
+});
+
 _Object$defineProperty(exports, "Panel", {
   enumerable: true,
   get: function get() {
@@ -60,4 +81,6 @@ var _TextButton = _interopRequireDefault(require("./TextButton/TextButton"));
 
 var _Image = _interopRequireDefault(require("./Image/Image"));
 
-var _Loader = _interopRequireDefault(require("./Loader/Loader"));
+var _Loader = _interopRequireDefault(require("./Loader/Loader"));
+
+var _Modal = require("./Modal");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "14.8.3",
+  "version": "14.8.4",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "module": "v2/index.js",

package/styles/_index.scss

@@ -14,7 +14,7 @@
 @import "v1/components/Image/Image";
 @import "Label/Label";
 @import "v1/components/Loader/Loader";
-@import "Modal/Modal";
+@import "v1/components/Modal/Modal";
 @import "Notification/Notification";
 @import "v1/components/Panel/Panel";
 @import "PulseLoader/PulseLoader";

package/styles/index.js

@@ -10,7 +10,6 @@ export {default as Tooltip} from './Tooltip/Tooltip';
 export {Select, SelectItemPropTypes} from './Select';
 export {default as Checkbox} from './Checkbox/Checkbox';
 export {default as TextArea} from './TextArea/TextArea';
-export {Modal, ModalContent, ModalFooter} from './Modal';
 export {TextInput, TextInputPropTypes} from './TextInput';
 export {default as PulseLoader} from './PulseLoader/PulseLoader';
 export {default as RenderInBody} from './RenderInBody/RenderInBody';
@@ -48,3 +47,4 @@ export {default as Button} from './v1/components/Button/Button';
 export {default as TextButton} from './v1/components/TextButton/TextButton';
 export {default as Image} from './v1/components/Image/Image';
 export {default as Loader} from './v1/components/Loader/Loader';
+export {Modal, ModalContent, ModalFooter} from './v1/components/Modal';

package/styles/{Modal → v1/components/Modal}/Modal.jsx

@@ -7,7 +7,7 @@ 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';
+import Portal from 'Portal/Portal';
 
 export default class Modal extends PureComponent {
     static propTypes = {

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

@@ -0,0 +1,314 @@
+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

@@ -0,0 +1,208 @@
+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>
+    );
+};