ADAPT 1445: Gallery Slideshow

package.json

@@ -42,8 +42,11 @@
     "react-loader-spinner": "^3.1.14",
     "react-player": "^2.8.2",
     "react-refresh": "^0.8.3",
+    "react-slick": "^0.28.1",
     "sanitize-html": "^1.27.5",
-    "storyblok-react": "^0.1.1"
+    "slick-carousel": "^1.8.1",
+    "storyblok-react": "^0.1.1",
+    "tabbable": "^5.2.0"
   },
   "devDependencies": {
     "prettier": "2.0.5"

src/components/components.js

@@ -62,6 +62,7 @@ import Accordion from "./composite/accordion";
 import AccordionItem from "./composite/accordionItem";
 import CtaGroup from "./composite/ctaGroup";
 import SearchResults from "./search/searchResults";
+import oodGallerySlideshow from './composite/oodGallerySlideshow';
 
 const ComponentList = {
   page: Page,
@@ -119,6 +120,7 @@ const ComponentList = {
   searchResults: SearchResults,
   alert: Alert,
   alertPicker: AlertPicker,
+  oodGallerySlideshow: oodGallerySlideshow,
 };
 
 const Components = (type) => {

src/components/composite/modal.js

@@ -0,0 +1,75 @@
+import React, {useEffect, useRef, useState} from 'react';
+import UseEscape from '../../hooks/useEscape';
+import UseFocusTrap from '../../hooks/useFocusTrap';
+import CenteredContainer from '../partials/centeredContainer';
+import { tabbable } from 'tabbable';
+
+export const Modal = ({children, isOpen, onClose, outerContainerClasses, innerContainerClasses, ariaLabel}) => {
+  const defaultOuterContainerClasses = 'centered-container flex-container su-pt-5';
+  const defaultInnerContainerClasses = '';
+  const closeButton = useRef();
+  const modalBodyRef = useRef();
+
+  // Find the last tabbable item within the modal body.
+  const getLastTabbableItem = () => {
+    if (!modalBodyRef.current) return null;
+    const focusableItems = tabbable(modalBodyRef.current);
+    return focusableItems[focusableItems.length - 1];
+  }
+
+  // Mimick the structure of a React ref so it works with UseFocusTrap hook.
+  const [lastTabbableRef, setLastTabbableRef] = useState({current: getLastTabbableItem()})
+
+  // Update focus trap when child content changes.
+  useEffect(() => {
+    setLastTabbableRef({current: getLastTabbableItem()});
+  }, [children])
+
+  UseFocusTrap(closeButton, lastTabbableRef, isOpen);
+
+  UseEscape(() => {
+    closeButton.current.click();
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      lockScroll();
+      closeButton.current.focus();
+    } else {
+      unlockScroll();
+    }
+  }, [isOpen]);
+
+  const lockScroll = () => {
+    const overlay = document.querySelector(".su-modal");
+    let scrollbarWidth =
+      overlay.offsetWidth - overlay.clientWidth + "px";
+
+    document.getElementsByTagName("html")[0].style.overflowY = "hidden";
+    document.getElementsByTagName(
+      "body"
+    )[0].style.paddingRight = scrollbarWidth;
+  }
+
+  const unlockScroll = () => {
+    document.getElementsByTagName("html")[0].style.overflowY = "scroll";
+    document.getElementsByTagName("body")[0].style.paddingRight = "0";
+  }
+
+  return (
+    <div className={`su-modal ${isOpen ? "visible" : "hidden"}`} aria-label={ariaLabel} aria-hidden={isOpen ? 'false' : 'true'} role='dialog' tabIndex="-1">
+      <CenteredContainer className={outerContainerClasses ? outerContainerClasses : defaultOuterContainerClasses}>
+        <div className={innerContainerClasses ? innerContainerClasses : defaultInnerContainerClasses}>
+          <div className="su-modal--header">
+            <button ref={closeButton} className="su-modal--close" onClick={onClose}>Close <i aria-hidden="true" className="fas fa-times"></i></button>
+          </div>
+          <div className="modal--body" ref={modalBodyRef}>
+            {children}
+          </div>
+        </div>
+      </CenteredContainer>
+    </div>
+  )
+}
+
+export default Modal;