From 2bfd56fbc4ebcd81748e7bccd772205228249633 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Wed, 31 Jan 2024 17:13:21 +0400
Subject: [PATCH 1/7] refactor: remove right section prop

---
 lib/components/PageLayout/PageLayout.scss | 5 -----
 lib/components/PageLayout/index.tsx       | 4 +---
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/lib/components/PageLayout/PageLayout.scss b/lib/components/PageLayout/PageLayout.scss
index ffc377e6..1d78c5d3 100644
--- a/lib/components/PageLayout/PageLayout.scss
+++ b/lib/components/PageLayout/PageLayout.scss
@@ -17,9 +17,4 @@
         display: flex;
         flex-direction: column;
     }
-
-    &__right {
-        display: flex;
-        flex-direction: column;
-    }
 }
diff --git a/lib/components/PageLayout/index.tsx b/lib/components/PageLayout/index.tsx
index 4f7d015d..8c73666d 100644
--- a/lib/components/PageLayout/index.tsx
+++ b/lib/components/PageLayout/index.tsx
@@ -4,15 +4,13 @@ import './PageLayout.scss';
 
 type PageLayoutProps = {
     left?: JSX.Element;
-    right?: JSX.Element;
 };
 
-export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
+export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left}) => {
     const {isMobile} = useDevice();
 
     return <div className="derivs-page-layout">
         {left && !isMobile && <div className="derivs-page-layout__left">{left}</div>}
         {children && <div className="derivs-page-layout__content">{children}</div>}
-        {right && <div className="derivs-page-layout__right">{right}</div>}
     </div>
 }
\ No newline at end of file

From e507f891164159105a9451f9df5e9fd787dd7ddc Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Wed, 31 Jan 2024 17:13:55 +0400
Subject: [PATCH 2/7] fix: add flex to content section

---
 lib/components/PageLayout/PageLayout.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/PageLayout/PageLayout.scss b/lib/components/PageLayout/PageLayout.scss
index 1d78c5d3..1ef157b2 100644
--- a/lib/components/PageLayout/PageLayout.scss
+++ b/lib/components/PageLayout/PageLayout.scss
@@ -16,5 +16,6 @@
     &__content {
         display: flex;
         flex-direction: column;
+        flex: 1;
     }
 }

From 09f6833bb02a9555de85c3f7a8ca5a2ccd89655d Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Wed, 31 Jan 2024 17:25:23 +0400
Subject: [PATCH 3/7] chore: remove right section usage from the storybook

---
 src/stories/PageLayout.stories.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/stories/PageLayout.stories.tsx b/src/stories/PageLayout.stories.tsx
index 54d1831b..57df64be 100644
--- a/src/stories/PageLayout.stories.tsx
+++ b/src/stories/PageLayout.stories.tsx
@@ -36,7 +36,6 @@ const meta = {
                 view.
             </Pane>
         ),
-        right: <Pane name="Right">The content on the right.</Pane>,
         children: (
             <Pane name="Content">
                 <div style={{ fontWeight: "bold" }}>
@@ -64,11 +63,6 @@ const meta = {
             description:
                 "JSX element to be rendered on the left of the content as render-prop.",
         },
-        right: {
-            control: false,
-            description:
-                "JSX element to be rendered on the right of the content as render-prop.",
-        },
         children: {
             control: false,
             description: "Children to be rendered as the content.",
@@ -78,8 +72,8 @@ const meta = {
         layout: "centered",
     },
     tags: ["autodocs"],
-    render: ({ children, left, right }) => (
-        <PageLayout left={left} right={right}>
+    render: ({ children, left }) => (
+        <PageLayout left={left}>
             {children}
         </PageLayout>
     ),

From 25ee8d8ed598368d8205e53bb966b5b61c384a3a Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Thu, 1 Feb 2024 09:34:35 +0400
Subject: [PATCH 4/7] chore: renamed the left prop as sidebar

---
 lib/components/PageLayout/PageLayout.scss | 2 +-
 lib/components/PageLayout/index.tsx       | 6 +++---
 src/stories/PageLayout.stories.tsx        | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/components/PageLayout/PageLayout.scss b/lib/components/PageLayout/PageLayout.scss
index 1ef157b2..549fca86 100644
--- a/lib/components/PageLayout/PageLayout.scss
+++ b/lib/components/PageLayout/PageLayout.scss
@@ -8,7 +8,7 @@
         flex-direction: column;
     }
 
-    &__left {
+    &__sidebar {
         display: flex;
         flex-direction: column;
     }
diff --git a/lib/components/PageLayout/index.tsx b/lib/components/PageLayout/index.tsx
index 8c73666d..f3d4685f 100644
--- a/lib/components/PageLayout/index.tsx
+++ b/lib/components/PageLayout/index.tsx
@@ -3,14 +3,14 @@ import { useDevice } from '../../hooks/useDevice';
 import './PageLayout.scss';
 
 type PageLayoutProps = {
-    left?: JSX.Element;
+    sidebar?: JSX.Element;
 };
 
-export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left}) => {
+export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, sidebar}) => {
     const {isMobile} = useDevice();
 
     return <div className="derivs-page-layout">
-        {left && !isMobile && <div className="derivs-page-layout__left">{left}</div>}
+        {sidebar && !isMobile && <div className="derivs-page-layout__sidebar">{sidebar}</div>}
         {children && <div className="derivs-page-layout__content">{children}</div>}
     </div>
 }
\ No newline at end of file
diff --git a/src/stories/PageLayout.stories.tsx b/src/stories/PageLayout.stories.tsx
index 57df64be..8cb7a99a 100644
--- a/src/stories/PageLayout.stories.tsx
+++ b/src/stories/PageLayout.stories.tsx
@@ -27,7 +27,7 @@ const meta = {
     title: "Components/PageLayout",
     component: PageLayout,
     args: {
-        left: (
+        sidebar: (
             <Pane name="Left">
                 <div style={{ fontWeight: "bold" }}>
                     *This pane is hidden in mobile view.
@@ -58,7 +58,7 @@ const meta = {
         ),
     },
     argTypes: {
-        left: {
+        sidebar: {
             control: false,
             description:
                 "JSX element to be rendered on the left of the content as render-prop.",
@@ -72,8 +72,8 @@ const meta = {
         layout: "centered",
     },
     tags: ["autodocs"],
-    render: ({ children, left }) => (
-        <PageLayout left={left}>
+    render: ({ children, sidebar }) => (
+        <PageLayout sidebar={sidebar}>
             {children}
         </PageLayout>
     ),

From 1cf426d802c202e194d90374aaa3ac89fe216225 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Thu, 1 Feb 2024 10:11:19 +0400
Subject: [PATCH 5/7] chore: remove flex properties for content and sidebar

---
 lib/components/PageLayout/PageLayout.scss | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/lib/components/PageLayout/PageLayout.scss b/lib/components/PageLayout/PageLayout.scss
index 549fca86..2be4c996 100644
--- a/lib/components/PageLayout/PageLayout.scss
+++ b/lib/components/PageLayout/PageLayout.scss
@@ -8,14 +8,7 @@
         flex-direction: column;
     }
 
-    &__sidebar {
-        display: flex;
-        flex-direction: column;
-    }
-
     &__content {
-        display: flex;
-        flex-direction: column;
         flex: 1;
     }
 }

From de1a8aca46062347ad507367e0a83c8cbc7a1461 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Fri, 2 Feb 2024 11:32:47 +0400
Subject: [PATCH 6/7] chore: remove unnecessary component

---
 lib/components/Layout/PageLayout.scss | 25 -------------------------
 lib/components/Layout/index.tsx       | 18 ------------------
 2 files changed, 43 deletions(-)
 delete mode 100644 lib/components/Layout/PageLayout.scss
 delete mode 100644 lib/components/Layout/index.tsx

diff --git a/lib/components/Layout/PageLayout.scss b/lib/components/Layout/PageLayout.scss
deleted file mode 100644
index 893f31ea..00000000
--- a/lib/components/Layout/PageLayout.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.layout {
-    width: 100%;
-    display: flex;
-    gap: 1.5rem;
-    padding-top: 1.5rem;
-
-    @include mobile {
-        flex-direction: column;
-    }
-
-    &__left {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &__right {
-        display: flex;
-        flex-direction: column;
-    }
-}
diff --git a/lib/components/Layout/index.tsx b/lib/components/Layout/index.tsx
deleted file mode 100644
index f68f9295..00000000
--- a/lib/components/Layout/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { useDevice } from '../../hooks/useDevice';
-import './PageLayout.scss';
-
-type PageLayoutProps = {
-    left?: JSX.Element;
-    right?: JSX.Element;
-};
-
-export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
-    const {isMobile} = useDevice();
-
-    return <div className="layout">
-        {left && !isMobile && <div className="layout__left">{left}</div>}
-        {children && <div className="layout__content">{children}</div>}
-        {right && <div className="layout__right">{right}</div>}
-    </div>
-}
\ No newline at end of file

From 052882bcaec4158f6fa30654b6156c3a25c941a4 Mon Sep 17 00:00:00 2001
From: Aum Bhatt <aum@deriv.com>
Date: Fri, 2 Feb 2024 11:52:42 +0400
Subject: [PATCH 7/7] chore: update main.ts imports

---
 lib/main.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/lib/main.ts b/lib/main.ts
index d5707a4a..ca232125 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -1,9 +1,8 @@
 export { Button } from "./components/Button";
 export { Input } from "./components/Input";
-export { PageLayout } from "./components/Layout";
+export { PageLayout } from "./components/PageLayout";
 export { Loader } from "./components/Loader";
 export { Tab, Tabs } from "./components/Tabs";
 export { Text } from "./components/Text";
 export { Tooltip } from "./components/Tooltip";
-export {ToggleSwitch} from "./components/ToggleSwitch"
-
+export { ToggleSwitch } from "./components/ToggleSwitch";