feat(web): new beta modal design (#579)

Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Jul 24, 2023 · 517b1b4 · 517b1b4
1 parent 7338624
commit 517b1b4
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 40 deletions.
diff --git a/web/src/beta/components/Divider/index.stories.tsx b/web/src/beta/components/Divider/index.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Divider from ".";
+
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Divider>;
+
+export const divider: Story = { render: () => <Divider /> };
diff --git a/web/src/beta/components/Divider/index.tsx b/web/src/beta/components/Divider/index.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import { styled } from "@reearth/services/theme";
+
+export type Props = {
+  color?: string;
+  margin?: string;
+  spaceOnly?: boolean;
+};
+
+const Divider: React.FC<Props> = ({ color, margin, spaceOnly }) => {
+  return <StyledDivider color={color} margin={margin} spaceOnly={spaceOnly} />;
+};
+
+const StyledDivider = styled.div<{
+  color?: string;
+  margin?: string;
+  spaceOnly?: boolean;
+}>`
+  margin: ${props => (props.margin ? props.margin : "35px")} auto;
+  border-bottom: ${props =>
+    props.spaceOnly
+      ? "none"
+      : `1px solid ${props.color ? props.color : props.theme.classic.main.border}`};
+`;
+
+export default Divider;
diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
@@ -3,17 +3,19 @@ import { ReactNode, useRef, useCallback } from "react";
 import { useClickAway, useKeyPressEvent } from "react-use";
 
 import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
 
 export type Props = {
   className?: string;
   children?: ReactNode;
   size?: "sm" | "md" | "lg";
   isVisible?: boolean;
+  title?: string;
   onClose?: () => void;
 };
 
-const Modal: React.FC<Props> = ({ className, size, isVisible, onClose, children }) => {
+const Modal: React.FC<Props> = ({ className, size, isVisible, title, onClose, children }) => {
   const ref = useRef<HTMLDivElement>(null);
   useClickAway(ref, () => onClose?.());
 
@@ -31,10 +33,13 @@ const Modal: React.FC<Props> = ({ className, size, isVisible, onClose, children
   return state === "unmounted" ? null : (
     <Bg state={state}>
       <Wrapper className={className} ref={ref} size={size}>
-        {onClose && (
-          <CloseButton onClick={handleClose}>
-            <Icon icon="cancel" />
-          </CloseButton>
+        {!!title && (
+          <HeaderWrapper>
+            <ModalTitle size="body" weight="regular" color="#E0E0E0">
+              {title}
+            </ModalTitle>
+            {onClose && <CloseIcon icon="cancel" onClick={onClose} />}
+          </HeaderWrapper>
         )}
         <InnerWrapper>{children}</InnerWrapper>
       </Wrapper>
@@ -58,24 +63,39 @@ const Bg = styled.div<{ state: TransitionStatus }>`
 
 const Wrapper = styled.div<{ size?: string }>`
   margin: ${({ size }) => (size === "sm" ? "15%" : size === "lg" ? "4%" : "8%")} auto;
-  padding: 36px 32px;
-  border-radius: 3px;
+  padding-top: 36px;
+  border-radius: 8px;
+  background: #161616;
   width: ${({ size }) => (size === "sm" ? "372px" : size === "lg" ? "684px" : "620px")};
-  background: ${({ theme }) => theme.general.bg.strong};
   position: relative;
 `;
 
-const InnerWrapper = styled.div<{ size?: string }>`
+const InnerWrapper = styled.div`
   margin: 0 auto;
 `;
 
-const CloseButton = styled.span`
-  color: ${({ theme }) => theme.general.content.main};
-  font-size: 24px;
-  position: absolute;
-  right: 32px;
-  top: 20px;
+const ModalTitle = styled(Text)`
+  text-align: center;
+  margin-right: auto;
+`;
+
+const CloseIcon = styled(Icon)`
+  margin-left: auto;
   cursor: pointer;
 `;
 
+const HeaderWrapper = styled.div`
+  display: flex;
+  padding: 12px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  background: #393939;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
 export default Modal;
diff --git a/web/src/beta/components/Modal/index.stories.tsx b/web/src/beta/components/Modal/index.stories.tsx
@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
 
 import Button from "../Button";
 import Text from "../Text";
 
-import Modal from ".";
+import Modal, { SidebarTab } from ".";
 
 const meta: Meta<typeof Modal> = {
   component: Modal,
@@ -25,26 +26,115 @@ const ModalContent: React.FC = () => {
   );
 };
 
+const TabContent: ReactNode = (
+  <>
+    <Text size="h1">Tab Title</Text>
+    <Text size="h5">
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
+      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
+      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
+      classical literature, discovered the undoubtable source.
+    </Text>
+  </>
+);
+const TabContent2: ReactNode = (
+  <>
+    <Text size="h1">Tab Title2</Text>
+    <Text size="h5">
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
+      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
+      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
+      classical literature, discovered the undoubtable source.
+    </Text>
+  </>
+);
+
+const TabContent3: ReactNode = (
+  <>
+    <Text size="h1">Tab Title3</Text>
+    <Text size="h4">Tab subTitle3</Text>
+    <Text size="h5">
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
+      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
+      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
+      classical literature, discovered the undoubtable source.
+    </Text>
+  </>
+);
+
+const sidebarTab1: SidebarTab = {
+  id: "1",
+  label: "Tab1",
+  content: TabContent,
+  tabButton1: <Button text="Confirm" />,
+  tabButton2: <Button text="Cancel" />,
+};
+
+const sidebarTab2: SidebarTab = {
+  id: "2",
+  label: "Tab2",
+  content: TabContent2,
+  tabButton1: <Button text="Yes" />,
+  tabButton2: <Button text="No" />,
+};
+
+const sidebarTab3: SidebarTab = {
+  id: "3",
+  label: "Tab3",
+  content: TabContent3,
+  tabButton1: <Button text="Ok" large />,
+  tabButton2: <Button text="Cancel" large />,
+};
+
 export const Small: Story = {
   render: () => (
-    <Modal size="sm" isVisible={true} title="Small modal" button1={<Button text="Confirm" />}>
+    <Modal
+      size="sm"
+      isVisible={true}
+      title="Small modal"
+      button1={<Button text="Confirm" />}
+      button2={<Button text="Cancel" />}>
       <ModalContent />
     </Modal>
   ),
 };
 
 export const Medium: Story = {
   render: () => (
-    <Modal size="md" isVisible={true} title="Medium modal" button1={<Button text="Confirm" />}>
+    <Modal
+      size="md"
+      isVisible={true}
+      title="Medium modal"
+      button1={<Button text="Confirm" />}
+      button2={<Button text="Cancel" />}>
       <ModalContent />
     </Modal>
   ),
 };
 
 export const Large: Story = {
   render: () => (
-    <Modal size="lg" isVisible={true} title="Large modal" button1={<Button text="Confirm" />}>
+    <Modal
+      size="lg"
+      isVisible={true}
+      title="Large modal"
+      button1={<Button text="Confirm" />}
+      button2={<Button text="Cancel" />}>
       <ModalContent />
     </Modal>
   ),
 };
+
+export const Sidebar: Story = {
+  render: () => (
+    <Modal
+      size="lg"
+      isVisible={true}
+      title="Modal with sidebar"
+      sidebarTabs={[sidebarTab1, sidebarTab2, sidebarTab3]}
+    />
+  ),
+};