Merge pull request #48 from aum-deriv/aum/FEQ-1654/pagelayout-improvements-remove-right-content-flex

[FEQ] aum/FEQ-1654/pagelayout-improvements-remove-right-content-flex

Author: shayan-deriv

lib/components/Layout/PageLayout.scss

@@ -8,18 +8,7 @@
         flex-direction: column;
     }
 
-    &__left {
-        display: flex;
-        flex-direction: column;
-    }
-
     &__content {
-        display: flex;
-        flex-direction: column;
-    }
-
-    &__right {
-        display: flex;
-        flex-direction: column;
+        flex: 1;
     }
 }

lib/components/Layout/index.tsx

@@ -3,16 +3,14 @@ import { useDevice } from '../../hooks/useDevice';
 import './PageLayout.scss';
 
 type PageLayoutProps = {
-    left?: JSX.Element;
-    right?: JSX.Element;
+    sidebar?: JSX.Element;
 };
 
-export const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({children, left, right}) => {
+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>}
-        {right && <div className="derivs-page-layout__right">{right}</div>}
     </div>
 }

lib/components/PageLayout/PageLayout.scss

@@ -2,7 +2,7 @@ export { Button } from "./components/Button";
 export { Dropdown } from "./components/Dropdown";
 export { Input } from "./components/Input";
 export { Loader } from "./components/Loader";
-export { PageLayout } from "./components/Layout";
+export { PageLayout } from "./components/PageLayout";
 export { Tab, Tabs } from "./components/Tabs";
 export { Text } from "./components/Text";
 export { ToggleSwitch } from "./components/ToggleSwitch";

lib/components/PageLayout/index.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.
@@ -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" }}>
@@ -59,16 +58,11 @@ const meta = {
         ),
     },
     argTypes: {
-        left: {
+        sidebar: {
             control: false,
             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, sidebar }) => (
+        <PageLayout sidebar={sidebar}>
             {children}
         </PageLayout>
     ),