From 26523e9113ea032b447ca875b13dfc9177f838fe Mon Sep 17 00:00:00 2001
From: Alexey Pustoshilov <apust@hey.com>
Date: Fri, 12 Feb 2021 15:54:02 +0700
Subject: [PATCH] feat(modal): add modal component

---
 src/packages/core/src/modal/modal.css         | 35 +++++++++++++++++++
 src/packages/core/src/modal/modal.html        |  7 ++++
 src/packages/core/src/modal/modal.stories.mdx | 14 ++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 src/packages/core/src/modal/modal.css
 create mode 100644 src/packages/core/src/modal/modal.html
 create mode 100644 src/packages/core/src/modal/modal.stories.mdx

diff --git a/src/packages/core/src/modal/modal.css b/src/packages/core/src/modal/modal.css
new file mode 100644
index 0000000..e0e717e
--- /dev/null
+++ b/src/packages/core/src/modal/modal.css
@@ -0,0 +1,35 @@
+._e_modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+._e_modal__backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  background-color: var(--N800);
+  opacity: 0.64;
+}
+
+._e_modal__window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  padding: var(--S32);
+  border-radius: var(--S4);
+  background-color: var(--N0);
+}
+
+._e_modal__heading {
+  margin-bottom: var(--S24);
+  font: var(--H1);
+  color: var(--N800);
+}
diff --git a/src/packages/core/src/modal/modal.html b/src/packages/core/src/modal/modal.html
new file mode 100644
index 0000000..a530720
--- /dev/null
+++ b/src/packages/core/src/modal/modal.html
@@ -0,0 +1,7 @@
+<div class="_e_modal">
+  <div class="_e_modal__backdrop"></div>
+  <div class="_e_modal__window">
+    <h1 class="_e_modal__heading">Modal Dialog</h1>
+    <button class="_e_button">Close Modal</button>
+  </div>
+</div>
diff --git a/src/packages/core/src/modal/modal.stories.mdx b/src/packages/core/src/modal/modal.stories.mdx
new file mode 100644
index 0000000..4fee66a
--- /dev/null
+++ b/src/packages/core/src/modal/modal.stories.mdx
@@ -0,0 +1,14 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import pretty from 'pretty';
+
+import modal from './modal.html';
+
+<Meta title='Core/Modal' />
+
+# Modal
+
+<Preview>
+  <Story name="default" height="240px" parameters={{ docs: { source: { code: pretty(modal) } } }}>
+    { () => modal }
+  </Story>
+</Preview>