From 15a277445a1ff9240799e160ed72e18afff61dbc Mon Sep 17 00:00:00 2001
From: Karl Kallavus <karl.kallavus@gmail.com>
Date: Thu, 7 Jan 2021 16:54:51 +0200
Subject: [PATCH] feat: Dialog Overlay

---
 packages/components/src/dialog/Dialog.tsx     |  8 +---
 .../src/dialogOverlay/DialogOverlay.tsx       | 22 +++++++++++
 .../components/src/dialogOverlay/README.mdx   | 39 +++++++++++++++++++
 packages/components/src/index.ts              |  2 +
 4 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/src/dialogOverlay/DialogOverlay.tsx
 create mode 100644 packages/components/src/dialogOverlay/README.mdx

diff --git a/packages/components/src/dialog/Dialog.tsx b/packages/components/src/dialog/Dialog.tsx
index 19c569aa4d..4b8931cd97 100644
--- a/packages/components/src/dialog/Dialog.tsx
+++ b/packages/components/src/dialog/Dialog.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 import { DialogProps as ReachDialogProps } from '@reach/dialog';
 
 import IconClose from '../private/icons/IconClose';
+import DialogOverlay from '../dialogOverlay/DialogOverlay';
 
 import { DialogToggle, DialogToggleText } from './private/toggle';
 import { DialogPosition, DialogMaxWidth } from './private/types';
-import {
-  DialogContainer,
-  DialogContent,
-  DialogMain,
-  DialogOverlay,
-} from './private/layout';
+import { DialogContainer, DialogContent, DialogMain } from './private/layout';
 
 export type DialogProps = ReachDialogProps &
   DialogPosition &
diff --git a/packages/components/src/dialogOverlay/DialogOverlay.tsx b/packages/components/src/dialogOverlay/DialogOverlay.tsx
new file mode 100644
index 0000000000..161d7077d4
--- /dev/null
+++ b/packages/components/src/dialogOverlay/DialogOverlay.tsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import rgba from 'polished/lib/color/rgba';
+import { DialogOverlay as ReachDialogOverlay } from '@reach/dialog';
+
+/**
+ * For further info, see the Reach UI documentation:
+ * https://ui.reach.tech/dialog/
+ */
+const DialogOverlay = styled<any>(ReachDialogOverlay)(
+  ({ theme: { color, zIndex } }) => ({
+    position: 'fixed',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    left: '0',
+    overflow: 'auto',
+    backgroundColor: color.gohan[100] && rgba(color.gohan[100], 0.75),
+    zIndex: zIndex.dialog,
+  })
+);
+
+export default DialogOverlay;
diff --git a/packages/components/src/dialogOverlay/README.mdx b/packages/components/src/dialogOverlay/README.mdx
new file mode 100644
index 0000000000..d6d03878e2
--- /dev/null
+++ b/packages/components/src/dialogOverlay/README.mdx
@@ -0,0 +1,39 @@
+---
+name: Dialog Overlay
+menu: Components
+route: /components/dialog-overlay
+---
+
+# Dialog Overlay
+
+A small pop-up window to display additional content or request action from the
+user.
+
+```jsx react-live
+() => {
+  const [showDialog, setShowDialog] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setShowDialog(true)}>
+        Open Dialog
+      </Button>
+      <DialogOverlay
+        isOpen={showDialog}
+        onDismiss={() => setShowDialog(false)}
+      />
+    </>
+  );
+};
+```
+
+## State
+
+Dialog is a styled extension of Reach UI's "Dialog" component, with state
+handled via `isOpen` and `onDismiss`. More information on these props, can be
+found in the [Reach UI documentation](https://ui.reach.tech/dialog).
+
+Examples on this page show usage with
+[React Hooks](https://reactjs.org/docs/hooks-intro.html), but this could also be
+handled via higher-order components or libaries such as
+[Recompose](https://github.com/acdlite/recompose).
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5516f783ce..3e54970145 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -56,6 +56,8 @@ export { default as weekStartsOn } from './datepicker/types/weekStartsOn';
 export * from './datepicker/types/weekStartsOn';
 export { default as Dialog } from './dialog/Dialog';
 export * from './dialog/Dialog';
+export { default as DialogOverlay } from './dialogOverlay/DialogOverlay';
+export * from './dialogOverlay/DialogOverlay';
 export { default as EmptyState } from './emptyState/EmptyState';
 export * from './emptyState/EmptyState';
 export { default as FileInput } from './fileInput/FileInput';