From 782cdb996fde06ca97f4c2de0af743c3dff30e39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Fri, 1 Feb 2019 10:02:19 +0100
Subject: [PATCH] create modal component

---
 .../ui-components/src/modals/ConfirmAlert.js  | 56 +++++++++----------
 .../ui-components/src/modals/Modal.js         | 44 +++++++++++++++
 .../ui-components/src/modals/index.js         |  1 +
 3 files changed, 71 insertions(+), 30 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/modals/Modal.js

diff --git a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
index fd95417d32..e9ecffefd9 100644
--- a/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
+++ b/scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import ReactDOM from "react-dom";
+import Modal from "./Modal";
 
 type ButtonType = {
   label: string,
@@ -28,37 +29,32 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    return (
-      <div className="modal is-active">
-        <div className="modal-background" />
-        <div className="modal-card">
-
-            <header className="modal-card-head">
-              <p className="modal-card-title">
-                {title}
-              </p>
-              <button
-                className="delete"
-                aria-label="close"
-                onClick={() => this.close()}
-              />
-            </header>
-            <section className="modal-card-body">
-              {message}
-              <div className="buttons is-right">
-                {buttons.map((button, i) => (
-                  <a className="button is-info is-right"
-                    key={i}
-                    onClick={() => this.handleClickButton(button)}
-                  >
-                    {button.label}
-                  </a>
-                ))}
-              </div>
-            </section>
-
+    const closeButton = (
+      <button
+      className="delete"
+      aria-label="close"
+      onClick={() => this.close()}
+      />
+    );
+    const body= (
+      <>
+        {message}
+        <div className="buttons is-right">
+          {buttons.map((button, i) => (
+            <a className="button is-info is-right"
+               key={i}
+               onClick={() => this.handleClickButton(button)}
+            >
+              {button.label}
+            </a>
+          ))}
         </div>
-      </div>
+        </>
+    );
+
+
+    return (
+      <Modal title={title} closeButton={closeButton} body={body} active={true}/>
     );
   }
 }
diff --git a/scm-ui-components/packages/ui-components/src/modals/Modal.js b/scm-ui-components/packages/ui-components/src/modals/Modal.js
new file mode 100644
index 0000000000..2638eb13fa
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/modals/Modal.js
@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  title: string,
+  closeButton: any,
+  body: any,
+  active: boolean
+};
+
+class Modal extends React.Component<Props> {
+
+  render() {
+    const { title, closeButton, body, active } = this.props;
+
+    const isActive = active ? "is-active" : null;
+
+    return (
+      <div className={classNames(
+        "modal",
+        isActive
+      )}>
+        <div className="modal-background" />
+        <div className="modal-card">
+
+          <header className="modal-card-head">
+            <p className="modal-card-title">
+              {title}
+            </p>
+            {closeButton}
+          </header>
+          <section className="modal-card-body">
+            {body}
+          </section>
+
+        </div>
+      </div>
+    );
+  }
+}
+
+
+export default Modal;
diff --git a/scm-ui-components/packages/ui-components/src/modals/index.js b/scm-ui-components/packages/ui-components/src/modals/index.js
index e75d082c1c..13b205dd1c 100644
--- a/scm-ui-components/packages/ui-components/src/modals/index.js
+++ b/scm-ui-components/packages/ui-components/src/modals/index.js
@@ -1,4 +1,5 @@
 // @create-index
 
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert.js";
+export { default as Modal } from "./Modal.js";