Add Modal Confirm (#125)

* Add Modal Confirm * Add action label * fixies
nordcloud · Jul 22, 2020 · f9995e1 · f9995e1
1 parent e872ef9
commit f9995e1
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 34 deletions.
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
@@ -9,7 +9,7 @@ import { whenIE11 } from "../../utils/browserCompatibility";
 
 const MODAL_ACTION_HEIGHT = "5.625rem";
 
-const StyledModal = styled(ReactModal)`
+export const StyledModal = styled(ReactModal)`
   padding: 0;
   border: none;
   top: 50%;
@@ -28,26 +28,26 @@ const StyledModal = styled(ReactModal)`
   }
 `;
 
-const ModalBox = styled(Box)<IModalBox>`
-  min-width: ${({ modalMinWidth }) => modalMinWidth || "18.75rem"};
+export const ModalBox = styled(Box)<IModalBox>`
+  min-width: ${({ modalMinWidth }) => modalMinWidth || "32rem"};
   overflow: hidden;
   font-family: ${theme.fonts.body};
   line-height: ${theme.lineHeight};
 `;
 
-const ModalCloseButton = styled(Button)`
+export const ModalCloseButton = styled(Button)`
   padding: ${theme.spacing.spacing01};
 `;
 
-const ModalAction = styled(Button)`
+export const ModalAction = styled(Button)`
   margin-left: ${theme.spacing.spacing04};
 
   &:first-child {
     margin-left: auto;
   }
 `;
 
-const ModalActions = styled.div`
+export const ModalActions = styled.div`
   position: sticky;
   bottom: 0;
   right: 0;
@@ -64,7 +64,7 @@ const ModalActions = styled.div`
   `)}
 `;
 
-const ModalContent = styled.div<IModalContent>`
+export const ModalContent = styled.div<IModalContent>`
   max-height: ${({ contentMaxHeight }) => contentMaxHeight || "25rem"};
   overflow-y: auto;
   ${whenIE11(`
@@ -76,12 +76,14 @@ const ModalHeading = styled(Heading)`
   margin: 0;
 `;
 
-const ModalHeader = styled.div`
+export const ModalHeader = styled.div`
   display: flex;
   align-items: center;
-  width: 100%;
+  padding: 0 1rem 1rem;
   margin-bottom: ${theme.spacing.spacing04};
-
+  border-bottom: ${theme.borders.grey};
+  margin-left: -1rem;
+  margin-right: -1rem;
   ${ModalCloseButton} {
     margin-left: auto;
   }
@@ -100,13 +102,14 @@ interface IModalAction {
     event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
   ) => void;
   label: string;
-  disabled: boolean;
+  disabled?: boolean;
   severity: "low" | "medium" | "high";
   order: number;
 }
 
 interface IModal {
   isOpen: boolean;
+  onRequestClose?: () => void;
   onAfterOpen?: () => void;
   onClose?: (
     event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>

diff --git a/src/components/modal/ModalConfirm.tsx b/src/components/modal/ModalConfirm.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Icon } from "../icon";
+import {
+  StyledModal,
+  ModalBox,
+  ModalCloseButton,
+  ModalAction,
+  ModalContent,
+  ModalHeader,
+  ModalActions,
+} from "./Modal";
+import styled from "styled-components";
+import { Heading } from "../heading";
+
+const ModalHeading = styled(Heading)`
+  margin: 0;
+`;
+
+interface IModal {
+  isOpen: boolean;
+  onClose?: (
+    event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
+  ) => void;
+  confirm?: (
+    event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
+  ) => void;
+  contentLabel: string;
+  actionLabel: string;
+  children: React.ReactNode;
+  customStyles?: { [key: string]: string };
+}
+
+export const ModalConfirm = ({
+  children,
+  contentLabel,
+  actionLabel,
+  ...props
+}: IModal) => {
+  return (
+    <StyledModal {...props}>
+      <ModalBox innerSpacing="spacing04" shadow="shadow04">
+        <ModalHeader>
+          <ModalHeading level={5}>{contentLabel}</ModalHeading>
+          <ModalCloseButton severity="low" onClick={props.onClose}>
+            <Icon width="1rem" height="1rem" image="CLOSE_SIDEBAR" />
+          </ModalCloseButton>
+        </ModalHeader>
+        <ModalContent>{children}</ModalContent>
+        <ModalActions>
+          <ModalAction onClick={props.onClose} severity="medium">
+            Cancel
+          </ModalAction>
+          <ModalAction onClick={props.confirm}>{actionLabel}</ModalAction>
+        </ModalActions>
+      </ModalBox>
+    </StyledModal>
+  );
+};
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -1 +1,2 @@
 export * from "./Modal";
+export * from "./ModalConfirm";
diff --git a/src/stories/Modal.stories.mdx b/src/stories/Modal.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
 import { useState } from "react";
-import { Modal } from "../components/modal";
+import { Modal, ModalConfirm } from "../components/modal";
 import { Button } from "../components/button";
 
 <Meta title="Components/Modal" component={Modal} />
@@ -63,28 +63,28 @@ import { Button } from "../components/button";
       return (
         <>
           <Button onClick={update}>Open modal</Button>
-          <Modal 
-            isOpen={isOpen}
-            onAfterOpen={() => {}}
-            onRequestClose={update}
-            onClose={update}
-            contentLabel={"Modal title"}
-            appId="#root"
-            actions={[
-              {
-                order: 0,
-                onAction: update,
-                label: "Second action",
-                severity: "low",
-              },
-              {
-                order: 1,
-                onAction: update,
-                label: "Primary action",
-                severity: "high",
-              }
-            ]}
-          >
+          <Modal
+              isOpen={isOpen}
+              onAfterOpen={() => {}}
+              onRequestClose={update}
+              onClose={update}
+              contentLabel={"Modal title"}
+              appId="#root"
+              actions={[
+                {
+                  order: 0,
+                  onAction: update,
+                  label: "Second action",
+                  severity: "low",
+                },
+                {
+                  order: 1,
+                  onAction: update,
+                  label: "Primary action",
+                  severity: "high",
+                },
+              ]}
+            >
             This is modal content
             <br />          
             Another line of content
@@ -95,3 +95,28 @@ import { Button } from "../components/button";
   </Story>
 </Preview>
 
+### Modal Confirm
+
+<Preview>
+  <Story name="confirm modal">
+    {() => {
+      const [isOpen, setOpen] = useState(false)
+      const update = () => setOpen(!isOpen);
+      const action = () => alert('Deleted')
+      return (
+        <>
+          <Button onClick={update}>Open modal</Button>
+          <ModalConfirm 
+            contentLabel="Account"
+            isOpen={isOpen}
+            confirm={action}
+            onClose={update}
+            actionLabel="Delete"
+          >
+            Do you really want to delete account?
+          </ModalConfirm>
+        </>
+      );
+    }}
+  </Story>
+</Preview>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./Modal";
		export * from "./ModalConfirm";