From 3d5bdac6b4ba7fce9a0f2444bbed89adb7890399 Mon Sep 17 00:00:00 2001
From: Diogo Mateus <diogo@feather-insurance.com>
Date: Tue, 13 Aug 2024 15:58:44 +0100
Subject: [PATCH] refactor(modal): Minor modal style updates

---
 src/lib/components/modal/genericModal/index.tsx       |  2 +-
 src/lib/components/modal/index.stories.tsx            | 11 +++++++++++
 src/lib/components/modal/index.ts                     |  1 +
 src/lib/components/modal/regularModal/index.tsx       |  7 ++++---
 .../components/modal/regularModal/style.module.scss   |  2 +-
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/modal/genericModal/index.tsx b/src/lib/components/modal/genericModal/index.tsx
index 0ba7f3be..504fc1db 100644
--- a/src/lib/components/modal/genericModal/index.tsx
+++ b/src/lib/components/modal/genericModal/index.tsx
@@ -122,7 +122,7 @@ export const GenericModal = ({
                 styles.footer
               )}
             >
-              <div className="px24 py16">
+              <div className="p24 pt16">
                 {footer}
               </div>
             </div>
diff --git a/src/lib/components/modal/index.stories.tsx b/src/lib/components/modal/index.stories.tsx
index bef41819..62dc524c 100644
--- a/src/lib/components/modal/index.stories.tsx
+++ b/src/lib/components/modal/index.stories.tsx
@@ -19,6 +19,14 @@ const story = {
     className: {
       description: 'Any additional className',
     },
+    size: {
+      description: 'The size of the modal, either large or default.',
+      control: 'radio',
+      options: {
+        default: 'default',
+        large: 'large',
+      }
+    },
     children: {
       description: 'The content that gets displayed on the modal',
       type: 'text',
@@ -42,6 +50,7 @@ const story = {
     dismissible: true,
     className: '',
     children: 'Modal content to be displayed',
+    size: 'default',
   },
   parameters: {
     componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
@@ -59,6 +68,7 @@ export const BottomOrRegularModalStory = ({
   dismissible,
   isOpen,
   onClose,
+  size,
   title,
 }: Props) => {
   const [display, setDisplay] = useState(isOpen);
@@ -81,6 +91,7 @@ export const BottomOrRegularModalStory = ({
         className={className}
         title={title}
         isOpen={display}
+        size={size}
         onClose={handleOnClose}
       >
         <div style={{ padding: '0 24px 24px 24px' }}>
diff --git a/src/lib/components/modal/index.ts b/src/lib/components/modal/index.ts
index 538f458f..8617cf04 100644
--- a/src/lib/components/modal/index.ts
+++ b/src/lib/components/modal/index.ts
@@ -10,6 +10,7 @@ export interface Props {
   onClose: () => void;
   className?: string;
   dismissible?: boolean;
+  size?: 'default' | 'large';
   footer?: ReactNode;
 }
 
diff --git a/src/lib/components/modal/regularModal/index.tsx b/src/lib/components/modal/regularModal/index.tsx
index e3e1aa63..960575f5 100644
--- a/src/lib/components/modal/regularModal/index.tsx
+++ b/src/lib/components/modal/regularModal/index.tsx
@@ -3,7 +3,7 @@ import styles from './style.module.scss';
 import classNames from 'classnames';
 import { GenericModal } from '../genericModal';
 
-const RegularModal = ({ className = '', ...rest }: Props) => (
+const RegularModal = ({ className = '', size, ...rest }: Props) => (
   <GenericModal
     classNames={{
       wrapper: ({ isClosing }) => classNames(
@@ -14,8 +14,9 @@ const RegularModal = ({ className = '', ...rest }: Props) => (
         }
       ),
       container: classNames(
-        'bg-white br8 d-flex ai-center fd-column mx-auto my0 wmx8',
-        styles.container
+        'bg-white br8 d-flex ai-center fd-column mx-auto my0',
+        styles.container,
+        size === 'large' ? 'wmx10' : 'wmx8'
       )
     }}
     {...rest}
diff --git a/src/lib/components/modal/regularModal/style.module.scss b/src/lib/components/modal/regularModal/style.module.scss
index cf9fae78..c3399fe3 100644
--- a/src/lib/components/modal/regularModal/style.module.scss
+++ b/src/lib/components/modal/regularModal/style.module.scss
@@ -45,6 +45,6 @@
 }
 
 .container {
-  max-height: 96vh;
+  max-height: 90vh;
   overflow: hidden;
 }