UX-565 Takeover component migration

.eslintrc

@@ -72,7 +72,10 @@
     },
     {
       "files": ["packages/**/*.spec.js"],
-      "rules": { "import/no-extraneous-dependencies": "off" }
+      "rules": { "import/no-extraneous-dependencies": "off" },
+      "globals": {
+        "given": true
+      }
     },
     {
       "files": ["packages/helpers/**/*.js"],

jest.config.js

@@ -3,6 +3,7 @@ module.exports = {
   setupFilesAfterEnv: [
     "jest-dom/extend-expect",
     "@testing-library/react/cleanup-after-each",
+    "given2/setup",
     "./testingHelpers/config.js",
   ],
 };

package.json

@@ -55,6 +55,7 @@
     "@paprika/popover": "^0.1.0",
     "@paprika/raw-button": "^0.1.0",
     "@paprika/select": "^0.1.0",
+    "@paprika/sidepanel": "^0.1.0",
     "@paprika/sortable": "^0.1.0",
     "@paprika/spinner": "^0.1.0",
     "@paprika/stylers": "^0.1.0",
@@ -85,6 +86,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-react-hooks": "^1.6.0",
+    "given2": "^2.1.7",
     "husky": "^2.5.0",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",

packages/SidePanel/src/SidePanel.js

@@ -12,7 +12,7 @@ import FocusTrap from "./components/FocusTrap";
 import LockBodyScroll from "./components/LockBodyScroll";
 
 import { extractChildren } from "./helpers";
-import { useOffsetScroll, useEscapeKey } from "./hooks";
+import { useOffsetScroll } from "./hooks";
 
 const propTypes = {
   /** The content for the SidePanel. */
@@ -64,7 +64,6 @@ function SidePanel(props) {
   // Hooks
   const [isVisible, setIsVisible] = React.useState(props.isOpen);
   const offsetScroll = useOffsetScroll(offsetY);
-  useEscapeKey(isOpen, onClose);
 
   // Refs
   const refTrigger = React.useRef(null);
@@ -118,6 +117,14 @@ function SidePanel(props) {
     ...extendedFocusTrapOptions,
   };
 
+  function handleEscKey(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+
+      onClose();
+    }
+  }
+
   let sidePanel = null;
 
   if (isVisible) {
@@ -134,6 +141,7 @@ function SidePanel(props) {
         refHeader={refHeader}
         offsetY={offsetScroll}
         isOpen={isOpen}
+        onKeyDown={handleEscKey}
         {...moreProps}
       >
         {children}

packages/SidePanel/src/hooks/index.js

@@ -1,3 +1,2 @@
-export { default as useEscapeKey } from "./useEscapeKey";
 export { default as useOffsetScroll } from "./useOffsetScroll";
 export { default as useFooterOffset } from "./useFooterOffset";

packages/Takeover/.npmignore

@@ -0,0 +1,4 @@
+*
+
+!readme.md
+!lib/**

packages/Takeover/README.md

@@ -0,0 +1,36 @@
+# Takeover
+
+Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.
+More information at the design system site: https://design.wegalvanize.com/p/components/takeover
+
+## Components
+
+You can use any of the following components to compose the Takeover:
+
+```jsx
+<Takeover.Header />
+<Takeover.Content />
+<Takeover.FocusTrap />
+```
+
+## Basic example
+
+```jsx
+<Takeover isOpen={isOpen} onClose={toggle}>
+  <Takeover.Header>
+    <Heading level={2}>Header</Heading>
+  </Takeover.Header>
+  <Takeover.Content>
+    My content
+  </Takeover.Content>
+</Takeover>
+```
+
+## Props
+
+- `children` (required)
+- `isOpen` (required)
+- `onClose`
+- `onAfterOpen`
+- `onAfterClose`
+- `isInline`

packages/Takeover/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@paprika/takeover",
+  "version": "0.1.0",
+  "description": "Takeover component",
+  "author": "@paprika",
+  "main": "lib/index.js",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acl-services/paprika/tree/master/packages/Takeover"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@babel/runtime-corejs2": "^7.3.1",
+    "@paprika/button": "^0.1.13",
+    "@paprika/heading": "^0.1.6",
+    "@paprika/stylers": "^0.1.5",
+    "@paprika/tokens": "^0.1.4",
+    "focus-trap-react": "^6.0.0",
+    "prop-types": "^15.7.2",
+    "react-transition-group": "^4.3.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "styled-components": "^4.2.0"
+  }
+}

packages/Takeover/src/Takeover.js

@@ -0,0 +1,119 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import { Transition } from "react-transition-group";
+import FocusTrapLibrary from "focus-trap-react";
+import * as styles from "./Takeover.styles";
+import Header from "./components/Header";
+import LockBodyScroll from "./components/LockBodyScroll";
+import { animationDuration } from "./tokens";
+import extractChildren from "./helpers/extractChildren";
+
+const propTypes = {
+  /** The content for the Takeover. */
+  children: PropTypes.node.isRequired,
+
+  /** Control the visibility of the takeover */
+  isOpen: PropTypes.bool.isRequired,
+
+  /** Callback triggered when the takeover needs to be close */
+  onClose: PropTypes.func,
+
+  /** Callback once the takeover has been opened event */
+  onAfterOpen: PropTypes.func,
+
+  /** Callback once the takeover has been closed event */
+  onAfterClose: PropTypes.func,
+
+  /** Render the takeover inline */
+  isInline: PropTypes.bool,
+};
+
+const defaultProps = {
+  isInline: false,
+  onAfterClose: () => {},
+  onClose: () => {},
+  onAfterOpen: () => {},
+};
+
+const Portal = ({ children, active }) =>
+  active ? ReactDOM.createPortal(children, document.body) : <React.Fragment>{children}</React.Fragment>;
+
+const Takeover = props => {
+  const { isOpen, onClose, isInline, onAfterClose, onAfterOpen, ...moreProps } = props;
+
+  function handleTransitionEnter(node) {
+    // https://github.com/reactjs/react-transition-group/blob/6dbadb594c7c2a2f15bc47afc6b4374cfd73c7c0/src/CSSTransition.js#L44
+    // eslint-disable-next-line no-unused-expressions
+    node.scrollTop;
+  }
+
+  const {
+    "Takeover.FocusTrap": focusTrapExtracted,
+    "Takeover.Header": headerExtracted,
+    "Takeover.Content": contentExtracted,
+    children,
+  } = extractChildren(moreProps.children, ["Takeover.FocusTrap", "Takeover.Header", "Takeover.Content"]);
+
+  const extendedFocusTrapOptions = focusTrapExtracted ? focusTrapExtracted.props : {};
+
+  const focusTrapOptions = {
+    fallbackFocus: () => document.createElement("div"),
+    ...extendedFocusTrapOptions,
+  };
+
+  function handleEscKey(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+
+      onClose();
+    }
+  }
+
+  return (
+    <>
+      {isOpen && <LockBodyScroll />}
+      <Portal active={!isInline}>
+        <Transition
+          mountOnEnter
+          unmountOnExit
+          in={isOpen}
+          timeout={animationDuration}
+          onEnter={handleTransitionEnter}
+          onEntered={onAfterOpen}
+          onExited={onAfterClose}
+        >
+          {state => (
+            <FocusTrapLibrary active={!isInline} focusTrapOptions={focusTrapOptions}>
+              <div
+                css={styles.wrapper}
+                state={state}
+                role="dialog"
+                tabIndex="-1"
+                onKeyDown={handleEscKey}
+                data-pka-anchor="takeover"
+              >
+                {headerExtracted && <Header css={styles.header} {...headerExtracted.props} onClose={onClose} />}
+                {contentExtracted && (
+                  <div
+                    role="region"
+                    css={styles.contentWrapper}
+                    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+                  >
+                    {contentExtracted}
+                  </div>
+                )}
+                {children}
+              </div>
+            </FocusTrapLibrary>
+          )}
+        </Transition>
+      </Portal>
+    </>
+  );
+};
+
+Takeover.propTypes = propTypes;
+Takeover.defaultProps = defaultProps;
+
+export default Takeover;

packages/Takeover/src/Takeover.styles.js

@@ -0,0 +1,40 @@
+import { css } from "styled-components";
+import tokens from "@paprika/tokens";
+import { animationDuration } from "./tokens";
+
+const openedCss = css`
+  opacity: 1;
+`;
+
+const closedCss = css`
+  opacity: 0;
+`;
+
+const states = {
+  entering: openedCss,
+  entered: openedCss,
+  exiting: closedCss,
+  exited: closedCss,
+};
+
+export const wrapper = css`
+  background-color: ${tokens.backgroundColor.level0};
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: all ${animationDuration}ms ease;
+  ${({ state }) => states[state]};
+`;
+
+export const header = css`
+  flex: none;
+`;
+
+export const contentWrapper = css`
+  flex: 1 1 auto;
+  overflow-y: auto;
+`;

packages/Takeover/src/components/Content.js

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { spacer } from "@paprika/stylers/lib/helpers";
+import tokens from "@paprika/tokens/lib/tokens";
+
+const Content = styled.div`
+  background-color: ${tokens.color.white};
+  border: 1px solid ${tokens.border.color};
+  border-radius: ${tokens.border.radius};
+  box-shadow: ${tokens.shadow};
+  margin: ${spacer(2)};
+  padding: ${spacer(2)};
+`;
+
+Content.displayName = "Takeover.Content";
+
+export default Content;

packages/Takeover/src/components/FocusTrap.js

@@ -0,0 +1,36 @@
+import PropTypes from "prop-types";
+import FocusTrapLibrary from "focus-trap-react";
+
+// properties copy from https://github.com/davidtheclark/focus-trap
+
+const propTypes = {
+  /** A function that will be called when the focus trap activates. */
+  onActivate: PropTypes.func,
+  /** A function that will be called when the focus trap deactivates */
+  onDeactivate: PropTypes.func,
+
+  /** By default, when a focus trap is activated the first element in the focus trap's tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. */
+  initialFocus: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]),
+
+  /**
+    By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover's <div> to receive focus if the popover's content includes no tabbable elements. Make sure the fallback element has a negative tabindex so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
+    escapeDeactivates {boolean}: Default: true. If false, the Escape key will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out.
+  */
+  fallbackFocus: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]), //
+
+  /** Default: false. If true, a click outside the focus trap will deactivate the focus trap and allow the click event to do its thing. */
+  clickOutsideDeactivates: PropTypes.bool,
+
+  /** Default: true. If false, when the trap is deactivated, focus will not return to the element that had focus before activation. */
+  returnFocusOnDeactivate: PropTypes.bool,
+};
+
+const defaultProps = FocusTrapLibrary.defaultProps.focusTrapOptions;
+
+const FocusTrap = () => null;
+
+FocusTrap.propTypes = propTypes;
+FocusTrap.defaultProps = defaultProps;
+FocusTrap.displayName = "Takeover.FocusTrap";
+
+export default FocusTrap;