Overlay

.storybook/__tests__/storyshots.test.js

@@ -3,6 +3,10 @@ import { multiSnapshotWithOptions } from "@storybook/addon-storyshots/dist/test-
 import styleSheetSerializer from "jest-styled-components/src/styleSheetSerializer";
 import { addSerializer } from "jest-specific-snapshot";
 
+jest.mock("react-dom", () => ({
+  createPortal: node => node
+}));
+
 addSerializer(styleSheetSerializer);
 
 initStoryshots({

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add ServiceWorker provider - #352 by @bogdal
 - Add ButtonLink atom component - #392 by @AlicjaSzu
 - Add lingui - #382 by @AlicjaSzu
+- Add Overlay component - #402 by @AlicjaSzu
 
 ## 0.6.0
 

src/@next/components/organisms/Overlay/Overlay.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import * as ReactDOM from "react-dom";
+import { Transition } from "react-transition-group";
+
+import * as S from "./styles";
+import { IProps } from "./types";
+
+const modalRoot = document.getElementById("modal-root");
+
+export const Overlay: React.FC<IProps> = ({
+  children,
+  duration = 600,
+  hide,
+  position = "center",
+  show,
+  target = modalRoot,
+}: IProps) => {
+  const animationProps = {
+    open: show,
+    position,
+  };
+  return (
+    target &&
+    ReactDOM.createPortal(
+      <Transition in={show} timeout={duration} unmountOnExit>
+        {state => (
+          <S.Overlay {...animationProps} state={state} onClick={hide}>
+            <S.Lightbox
+              {...animationProps}
+              state={state}
+              onClick={e => e.stopPropagation()}
+            >
+              {children}
+            </S.Lightbox>
+          </S.Overlay>
+        )}
+      </Transition>,
+      target
+    )
+  );
+};

src/@next/components/organisms/Overlay/__snapshots__/stories.storyshot

@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots @components/organisms/Overlay Position center 1`] = `
+.c0 {
+  position: relative;
+  margin: 20px;
+}
+
+.c3 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(0,0,0,0.2);
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.c2 {
+  position: relative;
+  width: 555px;
+  min-height: 455px;
+  height: auto;
+  background-color: #fff;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: fixed;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  top: 0;
+  z-index: 2;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+  background-color: rgba(199,207,207,0.8);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  opacity: 1;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    onClick={[Function]}
+    open={true}
+  >
+    <div
+      className="c2"
+      onClick={[Function]}
+      open={true}
+    >
+      <div
+        style={
+          Object {
+            "padding": "5rem 4rem",
+            "text-align": "center",
+          }
+        }
+      >
+        Some content
+      </div>
+    </div>
+  </div>
+  <div
+    className="c3"
+  />
+</div>
+`;
+
+exports[`Storyshots @components/organisms/Overlay Position left 1`] = `
+.c0 {
+  position: relative;
+  margin: 20px;
+}
+
+.c3 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(0,0,0,0.2);
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.c2 {
+  position: relative;
+  width: auto;
+  min-height: 455px;
+  height: 100%;
+  background-color: #fff;
+  left: 0;
+  -webkit-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+  -webkit-animation: jhEmMy 0.4s both;
+  animation: jhEmMy 0.4s both;
+  -webkit-animation-delay: .5s;
+  animation-delay: .5s;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: fixed;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  top: 0;
+  z-index: 2;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+  background-color: rgba(199,207,207,0.8);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  opacity: 1;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    onClick={[Function]}
+    open={true}
+  >
+    <div
+      className="c2"
+      onClick={[Function]}
+      open={true}
+    >
+      <div
+        style={
+          Object {
+            "padding": "5rem 4rem",
+            "text-align": "center",
+          }
+        }
+      >
+        Some content
+      </div>
+    </div>
+  </div>
+  <div
+    className="c3"
+  />
+</div>
+`;
+
+exports[`Storyshots @components/organisms/Overlay Position right 1`] = `
+.c0 {
+  position: relative;
+  margin: 20px;
+}
+
+.c3 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(0,0,0,0.2);
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.c2 {
+  position: relative;
+  width: auto;
+  min-height: 455px;
+  height: 100%;
+  background-color: #fff;
+  right: 0;
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+  -webkit-animation: brnJVY 0.4s both;
+  animation: brnJVY 0.4s both;
+  -webkit-animation-delay: .5s;
+  animation-delay: .5s;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: fixed;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  top: 0;
+  z-index: 2;
+  -webkit-transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
+  -webkit-transition-delay: 0;
+  transition-delay: 0;
+  background-color: rgba(199,207,207,0.8);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  opacity: 1;
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+    onClick={[Function]}
+    open={true}
+  >
+    <div
+      className="c2"
+      onClick={[Function]}
+      open={true}
+    >
+      <div
+        style={
+          Object {
+            "padding": "5rem 4rem",
+            "text-align": "center",
+          }
+        }
+      >
+        Some content
+      </div>
+    </div>
+  </div>
+  <div
+    className="c3"
+  />
+</div>
+`;

src/@next/components/organisms/Overlay/index.ts

@@ -0,0 +1 @@
+export * from "./Overlay";

src/@next/components/organisms/Overlay/stories.tsx

@@ -0,0 +1,54 @@
+import { action } from "@storybook/addon-actions";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import { Overlay } from ".";
+import { Position } from "./types";
+
+const style = {
+  padding: "5rem 4rem",
+  "text-align": "center",
+};
+const Children = () => <div style={style}>Some content</div>;
+
+let portalRoot = document.getElementById("portal-root");
+if (!portalRoot) {
+  portalRoot = document.createElement("div");
+  portalRoot.setAttribute("id", "portal-root");
+  document.body.appendChild(portalRoot);
+}
+
+const position: Position = "center";
+
+const DEFAULT_PROPS = {
+  children: Children,
+  hide: action("hide"),
+  position,
+  show: true,
+  target: portalRoot,
+};
+
+storiesOf("@components/organisms/Overlay", module)
+  .add("Position center", () => (
+    <Overlay {...DEFAULT_PROPS}>
+      <Children />
+    </Overlay>
+  ))
+  .add("Position left", () => {
+    const position: Position = "left";
+    const PROPS = { ...DEFAULT_PROPS, position };
+    return (
+      <Overlay {...PROPS}>
+        <Children />
+      </Overlay>
+    );
+  })
+  .add("Position right", () => {
+    const position: Position = "right";
+    const PROPS = { ...DEFAULT_PROPS, position };
+    return (
+      <Overlay {...PROPS}>
+        <Children />
+      </Overlay>
+    );
+  });