New dialog component

package.json

@@ -7,13 +7,15 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
+    "@types/classnames": "^2.2.6",
     "@types/jest": "23.3.9",
     "@types/node": "^10.12.5",
     "@types/react": "^16.7.2",
     "@types/react-dom": "16.0.9",
     "@types/react-router-dom": "^4.3.1",
+    "classnames": "^2.2.6",
     "husky": "^1.1.3",
-    "prettier": "^1.14.3",
+    "prettier": "^1.15.1",
     "pretty-quick": "^1.8.0",
     "react": "^16.7.0-alpha.0",
     "react-dom": "^16.7.0-alpha.0",

src/components/app/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   BrowserRouter as Router,
   Route,
@@ -7,6 +7,36 @@ import {
 } from "react-router-dom";
 import logo from "./logo.svg";
 import "./index.css";
+import Button from "../button";
+import Dialog from "../dialog";
+
+const samuelLIpsum = (
+  <p>
+    The path of the righteous man is beset on all sides by the iniquities of the
+    selfish and the tyranny of evil men. Blessed is he who, in the name of
+    charity and good will, shepherds the weak through the valley of darkness,
+    for he is truly his brother's keeper and the finder of lost children. And I
+    will strike down upon thee with great vengeance and furious anger those who
+    would attempt to poison and destroy My brothers. And you will know My name
+    is the Lord when I lay My vengeance upon thee.
+  </p>
+);
+
+const DialogDemo: React.FC = () => {
+  const [isDialogVisible, setDialogVisibility] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setDialogVisibility(true)}>Open dialog</Button>
+      <Dialog
+        show={isDialogVisible}
+        onCloseRequested={() => setDialogVisibility(false)}
+      >
+        <span style={{ color: "#333" }}>{samuelLIpsum}</span>
+      </Dialog>
+    </>
+  );
+};
 
 const hipsterIpsum = (
   <p>
@@ -32,18 +62,6 @@ const pinkmanIpsum = (
   </p>
 );
 
-const samuelLIpsum = (
-  <p>
-    The path of the righteous man is beset on all sides by the iniquities of the
-    selfish and the tyranny of evil men. Blessed is he who, in the name of
-    charity and good will, shepherds the weak through the valley of darkness,
-    for he is truly his brother's keeper and the finder of lost children. And I
-    will strike down upon thee with great vengeance and furious anger those who
-    would attempt to poison and destroy My brothers. And you will know My name
-    is the Lord when I lay My vengeance upon thee.
-  </p>
-);
-
 const RoutingDemo: React.SFC = () => (
   <>
     <ul>
@@ -68,18 +86,18 @@ const RoutingDemo: React.SFC = () => (
       </li>
       <li>
         <NavLink
-          to="/contact-us"
+          to="/dialog-demo"
           className="App-NavLink"
           activeClassName="App-NavLink-selected"
         >
-          Contact us
+          Dialog demo
         </NavLink>
       </li>
     </ul>
     <Switch>
       <Route path="/" exact render={routeProps => hipsterIpsum} />
       <Route path="/about" render={routeProps => pinkmanIpsum} />
-      <Route path="/contact-us" render={routeProps => samuelLIpsum} />
+      <Route path="/dialog-demo" render={routeProps => <DialogDemo />} />
     </Switch>
   </>
 );

src/components/dialog.module.css

@@ -0,0 +1,43 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  z-index: 100;
+}
+
+.overlayColoured {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.dialogWindowButton {
+  color: white;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+}
+
+.dialogWindow {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
+  padding: 20px;
+
+  min-width: 300px;
+  max-width: 90vh;
+  min-height: 300px;
+  max-height: 90vh;
+}

src/components/dialog.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import classNames from "classnames";
+import styles from "./dialog.module.css";
+
+type OverlayProps = {
+  transparent?: boolean;
+  onClick?: () => void;
+};
+export const Overlay: React.SFC<OverlayProps> = ({
+  children,
+  transparent = false,
+  onClick
+}) => (
+  <div
+    className={classNames(styles.overlay, {
+      [styles.overlayColoured]: !transparent
+    })}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+);
+
+type DialogWindowButtonProps = {
+  onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+const DialogWindowButton: React.SFC<DialogWindowButtonProps> = ({
+  onClick
+}) => (
+  <div className={styles.dialogWindowButton} onClick={onClick}>
+    X
+  </div>
+);
+
+const handleClickNoOp: React.EventHandler<React.MouseEvent> = e => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+
+type DialogWindowProps = {
+  onCloseRequested?: () => void;
+};
+const DialogWindow: React.SFC<DialogWindowProps> = ({
+  children,
+  onCloseRequested
+}) => (
+  <div className={styles.dialogWindow} onClick={handleClickNoOp}>
+    {onCloseRequested != null && (
+      <DialogWindowButton onClick={onCloseRequested} />
+    )}
+    {children}
+  </div>
+);
+
+type DialogProps = {
+  transparent?: boolean;
+  show?: boolean;
+  onCloseRequested?: () => void;
+};
+const Dialog: React.SFC<DialogProps> = ({
+  children,
+  show = false,
+  transparent,
+  onCloseRequested
+}) =>
+  show ? (
+    <Overlay transparent={transparent} onClick={onCloseRequested}>
+      <DialogWindow onCloseRequested={onCloseRequested}>
+        {children}
+      </DialogWindow>
+    </Overlay>
+  ) : null;
+
+export default Dialog;

yarn.lock

@@ -1,4 +1,4 @@
-y# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
 
@@ -864,6 +864,11 @@ y# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
     "@svgr/core" "^2.4.1"
     loader-utils "^1.1.0"
 
+"@types/classnames@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.6.tgz#dbe8a666156d556ed018e15a4c65f08937c3f628"
+  integrity sha512-XHcYvVdbtAxVstjKxuULYqYaWIzHR15yr1pZj4fnGChuBVJlIAp9StJna0ZJNSgxPh4Nac2FL4JM3M11Tm6fqQ==
+
 "@types/history@*":
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
@@ -8093,10 +8098,10 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier@^1.14.2, prettier@^1.14.3:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.1.tgz#06c67106afb1b40e74b002353b2079cc7e0e67bf"
-  integrity sha512-4rgV2hyc/5Pk0XHH4VjJWHRgVjgRbpMfLQjREAhHBtyW1UvTFkjJEsueGYNYYZd9mn97K+1qv0EBwm11zoaSgA==
+prettier@^1.14.2, prettier@^1.15.1:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.2.tgz#d31abe22afa4351efa14c7f8b94b58bb7452205e"
+  integrity sha512-YgPLFFA0CdKL4Eg2IHtUSjzj/BWgszDHiNQAe0VAIBse34148whfdzLagRL+QiKS+YfK5ftB6X4v/MBw8yCoug==
 
 pretty-bytes@^4.0.2:
   version "4.0.2"