From daea79bc5a1c5564236b4688c4f1c96d163b3b30 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Tue, 31 Dec 2024 10:12:28 +0600
Subject: [PATCH] Added new design variation to the Drawer component

---
 src/components/drawer/drawer-body.tsx   | 2 +-
 src/components/drawer/drawer-footer.tsx | 3 ++-
 src/components/drawer/drawer-header.tsx | 2 +-
 src/components/drawer/drawer-panel.tsx  | 2 +-
 src/components/drawer/drawer.tsx        | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/drawer/drawer-body.tsx b/src/components/drawer/drawer-body.tsx
index 80a81b77..bdce8586 100644
--- a/src/components/drawer/drawer-body.tsx
+++ b/src/components/drawer/drawer-body.tsx
@@ -15,7 +15,7 @@ const DrawerBody = ( { children, className, ...props }: DrawerBodyProps ) => {
 	return (
 		<div
 			className={ cn(
-				'px-5 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
+				'px-5 pb-4 pt-2 flex flex-col flex-1 overflow-y-auto overflow-x-hidden',
 				className
 			) }
 			{ ...props }
diff --git a/src/components/drawer/drawer-footer.tsx b/src/components/drawer/drawer-footer.tsx
index 73968933..c17e4a6f 100644
--- a/src/components/drawer/drawer-footer.tsx
+++ b/src/components/drawer/drawer-footer.tsx
@@ -28,9 +28,10 @@ const DrawerFooter = ( { children, className }: DrawerFooterProps ) => {
 	return (
 		<div
 			className={ cn(
-				'p-5 flex justify-end gap-3 mt-auto',
+				'px-5 py-4 flex justify-end gap-3 mt-auto',
 				{
 					'bg-background-secondary': design === 'footer-divided',
+					'border-t border-solid border-border-subtle': design === 'footer-bordered',
 				},
 				className
 			) }
diff --git a/src/components/drawer/drawer-header.tsx b/src/components/drawer/drawer-header.tsx
index 7a7ab021..bb7e26d9 100644
--- a/src/components/drawer/drawer-header.tsx
+++ b/src/components/drawer/drawer-header.tsx
@@ -13,7 +13,7 @@ export interface DrawerHeaderProps {
 // Drawer header wrapper.
 const DrawerHeader = ( { children, className, ...props }: DrawerHeaderProps ) => {
 	return (
-		<div className={ cn( 'space-y-2 px-5 pt-5 pb-1', className ) } { ...props }>
+		<div className={ cn( 'space-y-2 px-5 pt-5 pb-4', className ) } { ...props }>
 			{ children }
 		</div>
 	);
diff --git a/src/components/drawer/drawer-panel.tsx b/src/components/drawer/drawer-panel.tsx
index 20c70493..e6bdb484 100644
--- a/src/components/drawer/drawer-panel.tsx
+++ b/src/components/drawer/drawer-panel.tsx
@@ -49,7 +49,7 @@ const DrawerPanel = ( { children, className }: DrawerPanelProps ) => {
 						<motion.div
 							ref={ drawerRef }
 							className={ cn(
-								'flex flex-col gap-5 w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
+								'flex flex-col w-120 h-full bg-background-primary shadow-2xl my-5 overflow-hidden',
 								className
 							) }
 							initial="exit"
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 533e3301..10035812 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -38,7 +38,7 @@ export interface DrawerProps {
 	/** Close drawer when pressing the escape key. */
 	exitOnEsc?: boolean;
 	/** Design of the drawer. */
-	design?: 'simple' | 'footer-divided';
+	design?: 'simple' | 'footer-divided' | 'footer-bordered';
 	/** Position of the drawer. */
 	position?: 'left' | 'right';
 	/** Duration of the drawer transition. */