[UI Kit] refactor(uikit): Modal

packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx

@@ -46,10 +46,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-iktFzd hNDjKL"
+        class="sc-jJEJSO jPLnEW"
       >
         <nav
-          class="sc-jJEJSO ooMFh"
+          class="sc-hiSbYr cKMVAJ"
         >
           <div
             class="sc-gsTCUz sc-dlfnbm jLyPtw byPlie"
@@ -200,7 +200,7 @@ it("renders correctly", () => {
           </div>
         </nav>
         <div
-          class="sc-hiSbYr lltmGV"
+          class="sc-gWHgXt gKIFCh"
         >
           <div
             class="sc-kfzAmx ijKars"
@@ -619,12 +619,12 @@ it("renders correctly", () => {
             </div>
           </div>
           <div
-            class="sc-gWHgXt bqOhHt"
+            class="sc-cBNfnY dKbsmQ"
           >
             body
           </div>
           <div
-            class="sc-bdfBwQ sc-cBNfnY bQcnNj eUVkCS"
+            class="sc-bdfBwQ sc-citwmv bQcnNj GCzmW"
             role="presentation"
           />
         </div>

packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx

@@ -12,13 +12,13 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-iBPRYJ bQXnUd"
+        class="sc-dlfnbm sc-jrAGrp bdsndq kLDEA-d"
       >
         <div
-          class="sc-fubCfw jzwLMm"
+          class="sc-iBPRYJ gkBMOR"
         >
           <div
-            class="sc-dlfnbm sc-hKgILt sc-pFZIQ isWJdv dRpfYw ePMCIJ"
+            class="sc-dlfnbm sc-hKgILt sc-fubCfw isWJdv dRpfYw kApDsK"
           >
             <h2
               class="sc-bdfBwQ sc-gsTCUz gWEhOj euWWbB"
@@ -46,7 +46,7 @@ it("renders correctly", () => {
           </button>
         </div>
         <div
-          class="sc-dlfnbm sc-hKgILt claMmV AmOVA"
+          class="sc-dlfnbm sc-hKgILt sc-pFZIQ claMmV dRpfYw eFqsAA"
         >
           body
         </div>

packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx

@@ -9,13 +9,13 @@ it("renders ConnectModal correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-fubCfw cNFQaY"
+        class="sc-eCssSg sc-kEjbxe Ozdtv bdUZCS"
       >
         <div
-          class="sc-pFZIQ idVZsR"
+          class="sc-fubCfw kITuMA"
         >
           <div
-            class="sc-eCssSg sc-jSgupP sc-jrAGrp jnvqfy cjuMmG eYDuGd"
+            class="sc-eCssSg sc-jSgupP sc-pFZIQ jnvqfy cjuMmG ePMCIJ"
           >
             <h2
               class="sc-bdfBwQ sc-hKgILt gWEhOj bCnOmg"
@@ -43,7 +43,7 @@ it("renders ConnectModal correctly", () => {
           </button>
         </div>
         <div
-          class="sc-eCssSg sc-jSgupP eYcDys jMcUDu"
+          class="sc-eCssSg sc-jSgupP sc-jrAGrp eYcDys cjuMmG eRPoVE"
         >
           <button
             class="sc-gKsewC hLJvid"
@@ -433,7 +433,7 @@ it("renders ConnectModal correctly", () => {
             </svg>
           </button>
           <a
-            class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP sc-crrsfI dwTIxE"
+            class="sc-bdfBwQ sc-gsTCUz eiaRqE djpNeP sc-dQppl dICEdq"
             color="primary"
             href="https://docs.pancakeswap.finance/guides/faq#how-do-i-set-up-my-wallet-on-binance-smart-chain"
             rel="noreferrer noopener"
@@ -465,13 +465,13 @@ it("renders AccountModal correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-fubCfw cNFQaY"
+        class="sc-eCssSg sc-kEjbxe Ozdtv bdUZCS"
       >
         <div
-          class="sc-pFZIQ idVZsR"
+          class="sc-fubCfw kITuMA"
         >
           <div
-            class="sc-eCssSg sc-jSgupP sc-jrAGrp jnvqfy cjuMmG eYDuGd"
+            class="sc-eCssSg sc-jSgupP sc-pFZIQ jnvqfy cjuMmG ePMCIJ"
           >
             <h2
               class="sc-bdfBwQ sc-hKgILt gWEhOj bCnOmg"
@@ -499,7 +499,7 @@ it("renders AccountModal correctly", () => {
           </button>
         </div>
         <div
-          class="sc-eCssSg sc-jSgupP eYcDys jMcUDu"
+          class="sc-eCssSg sc-jSgupP sc-jrAGrp eYcDys cjuMmG eRPoVE"
         >
           <div
             class="sc-bdfBwQ krzIlW"
@@ -533,7 +533,7 @@ it("renders AccountModal correctly", () => {
               </svg>
             </a>
             <div
-              class="sc-bdfBwQ sc-dQppl czOnMt bIwdCo"
+              class="sc-bdfBwQ sc-bqyKva czOnMt jYrnsj"
               color="text"
               role="button"
             >
@@ -550,7 +550,7 @@ it("renders AccountModal correctly", () => {
                 />
               </svg>
               <div
-                class="sc-bqyKva idsmeh"
+                class="sc-kstrdz kDtgKX"
               >
                 Copied
               </div>

packages/pancake-uikit/src/widgets/Modal/Modal.tsx

@@ -1,50 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import Heading from "../../components/Heading/Heading";
-import Flex from "../../components/Box/Flex";
-import { ArrowBackIcon, CloseIcon } from "../../components/Svg";
-import { IconButton } from "../../components/Button";
-import { InjectedProps } from "./types";
+import { ModalBody, ModalHeader, ModalTitle, ModalContainer, ModalCloseButton, ModalBackButton } from "./styles";
+import { ModalProps } from "./types";
 
-interface Props extends InjectedProps {
-  title: string;
-  hideCloseButton?: boolean;
-  onBack?: () => void;
-  bodyPadding?: string;
-  headerBackground?: string;
-  minWidth?: string;
-}
-
-const StyledModal = styled.div<{ minWidth: string }>`
-  background: ${({ theme }) => theme.modal.background};
-  box-shadow: 0px 20px 36px -8px rgba(14, 14, 44, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.05);
-  border: 1px solid ${({ theme }) => theme.colors.borderColor};
-  border-radius: 32px;
-  width: 100%;
-  z-index: ${({ theme }) => theme.zIndices.modal};
-  overflow-y: auto;
-  ${({ theme }) => theme.mediaQueries.xs} {
-    width: auto;
-    min-width: ${({ minWidth }) => minWidth};
-    max-width: 100%;
-  }
-`;
-
-const ModalHeader = styled.div<{ background: string }>`
-  display: flex;
-  align-items: center;
-  align-items: center;
-  padding: 12px 24px;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.borderColor};
-  background: ${({ background }) => background};
-`;
-
-const ModalTitle = styled(Flex)`
-  align-items: center;
-  flex: 1;
-`;
-
-const Modal: React.FC<Props> = ({
+const Modal: React.FC<ModalProps> = ({
   title,
   onDismiss,
   onBack,
@@ -53,27 +12,18 @@ const Modal: React.FC<Props> = ({
   bodyPadding = "24px",
   headerBackground = "transparent",
   minWidth = "360px",
+  ...props
 }) => (
-  <StyledModal minWidth={minWidth}>
+  <ModalContainer minWidth={minWidth} {...props}>
     <ModalHeader background={headerBackground}>
       <ModalTitle>
-        {onBack && (
-          <IconButton variant="text" onClick={onBack} area-label="go back" mr="8px">
-            <ArrowBackIcon color="primary" />
-          </IconButton>
-        )}
+        {onBack && <ModalBackButton onBack={onBack} />}
         <Heading>{title}</Heading>
       </ModalTitle>
-      {!hideCloseButton && (
-        <IconButton variant="text" onClick={onDismiss} aria-label="Close the dialog">
-          <CloseIcon color="primary" />
-        </IconButton>
-      )}
+      {!hideCloseButton && <ModalCloseButton onDismiss={onDismiss} />}
     </ModalHeader>
-    <Flex flexDirection="column" p={bodyPadding}>
-      {children}
-    </Flex>
-  </StyledModal>
+    <ModalBody p={bodyPadding}>{children}</ModalBody>
+  </ModalContainer>
 );
 
 export default Modal;

packages/pancake-uikit/src/widgets/Modal/index.tsx

@@ -1,4 +1,5 @@
 export { default as Modal } from "./Modal";
 export { default as ModalProvider } from "./ModalContext";
 export { default as useModal } from "./useModal";
-export type { InjectedProps as InjectedModalProps } from "./types";
+export * from "./styles";
+export type { ModalProps, InjectedProps as InjectedModalProps } from "./types";

packages/pancake-uikit/src/widgets/Modal/styles.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+import Flex from "../../components/Box/Flex";
+import { Box } from "../../components/Box";
+import { ArrowBackIcon, CloseIcon } from "../../components/Svg";
+import { IconButton } from "../../components/Button";
+import { ModalProps } from "./types";
+
+export const ModalHeader = styled.div<{ background?: string }>`
+  align-items: center;
+  background: ${({ background }) => background || "transparent"};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.borderColor};
+  display: flex;
+  padding: 12px 24px;
+`;
+
+export const ModalTitle = styled(Flex)`
+  align-items: center;
+  flex: 1;
+`;
+
+export const ModalBody = styled(Flex)`
+  flex-direction: column;
+`;
+
+export const ModalCloseButton: React.FC<{ onDismiss: ModalProps["onDismiss"] }> = ({ onDismiss }) => {
+  return (
+    <IconButton variant="text" onClick={onDismiss} aria-label="Close the dialog">
+      <CloseIcon color="primary" />
+    </IconButton>
+  );
+};
+
+export const ModalBackButton: React.FC<{ onBack: ModalProps["onBack"] }> = ({ onBack }) => {
+  return (
+    <IconButton variant="text" onClick={onBack} area-label="go back" mr="8px">
+      <ArrowBackIcon color="primary" />
+    </IconButton>
+  );
+};
+
+export const ModalContainer = styled(Box)<{ minWidth: string }>`
+  background: ${({ theme }) => theme.modal.background};
+  box-shadow: 0px 20px 36px -8px rgba(14, 14, 44, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.05);
+  border: 1px solid ${({ theme }) => theme.colors.borderColor};
+  border-radius: 32px;
+  width: 100%;
+  z-index: ${({ theme }) => theme.zIndices.modal};
+
+  ${({ theme }) => theme.mediaQueries.xs} {
+    width: auto;
+    min-width: ${({ minWidth }) => minWidth};
+    max-width: 100%;
+  }
+`;

packages/pancake-uikit/src/widgets/Modal/types.ts

@@ -1,3 +1,5 @@
+import { BoxProps } from "../../components/Box";
+
 export interface ModalTheme {
   background: string;
 }
@@ -7,3 +9,12 @@ export type Handler = () => void;
 export interface InjectedProps {
   onDismiss?: Handler;
 }
+
+export interface ModalProps extends InjectedProps, BoxProps {
+  title: string;
+  hideCloseButton?: boolean;
+  onBack?: () => void;
+  bodyPadding?: string;
+  headerBackground?: string;
+  minWidth?: string;
+}