From 9324f09514a454ccfac55673a35db25e68f53f2d Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Thu, 22 Jul 2021 17:24:48 +0200
Subject: [PATCH] feat(menu): add popover component

---
 src/components/Popover/Popover.module.scss    | 16 ++++++++++
 src/components/Popover/Popover.test.tsx       | 16 ++++++++++
 src/components/Popover/Popover.tsx            | 29 +++++++++++++++++++
 .../__snapshots__/Popover.test.tsx.snap       |  3 ++
 4 files changed, 64 insertions(+)
 create mode 100644 src/components/Popover/Popover.module.scss
 create mode 100644 src/components/Popover/Popover.test.tsx
 create mode 100644 src/components/Popover/Popover.tsx
 create mode 100644 src/components/Popover/__snapshots__/Popover.test.tsx.snap

diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss
new file mode 100644
index 000000000..61fe69200
--- /dev/null
+++ b/src/components/Popover/Popover.module.scss
@@ -0,0 +1,16 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.popover {
+  position: absolute;
+  top: 55px;
+  right: 5px;
+  z-index: variables.$header-z-index;
+  width: 250px;
+  height: 240px;
+  overflow: hidden;
+  border-radius: 5px 5px;
+  > div {
+    z-index: variables.$header-z-index;
+  }
+}
diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx
new file mode 100644
index 000000000..8a6f6f6ce
--- /dev/null
+++ b/src/components/Popover/Popover.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import MenuButton from '../MenuButton/MenuButton';
+import UserMenu from '../UserMenu/UserMenu';
+
+import Popover from './Popover';
+
+describe('<Popover>', () => {
+  test('renders and matches snapshot', () => {
+    const menuItems = [<MenuButton key="key" label="Home" to="/" />];
+    const { container } = render(<Popover popoverButtonIcon={<UserMenu />}>{menuItems}</Popover>);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 000000000..24ec5ece9
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,29 @@
+import React, { ReactNode, useRef } from 'react';
+import classNames from 'classnames';
+
+import DetectOutsideClick from '../DetectOutsideClick/DetectOutsideClick';
+import Slide from '../Animation/Slide/Slide';
+
+import styles from './Popover.module.scss';
+
+type Props = {
+  children: ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const Popover: React.FC<Props> = ({ children, isOpen, onClose }: Props) => {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  return isOpen ? (
+    <DetectOutsideClick isActive={isOpen} callback={onClose} el={popoverRef}>
+      <Slide open={isOpen} duration={300} onCloseAnimationEnd={() => onClose()} fromRight>
+        <div ref={popoverRef} className={classNames(styles.popover)}>
+          {children}
+        </div>
+      </Slide>
+    </DetectOutsideClick>
+  ) : null;
+};
+
+export default Popover;
diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
new file mode 100644
index 000000000..6f4c2cd47
--- /dev/null
+++ b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Popover> renders and matches snapshot 1`] = `<div />`;