Merge pull request #48 from aum-deriv/aum/FEQ-1654/pagelayout-improve…

…ments-remove-right-content-flex [FEQ] aum/FEQ-1654/pagelayout-improvements-remove-right-content-flex
deriv-com · Feb 2, 2024 · 10d57ec · 10d57ec
2 parents ab4c127 + 1cddcb8
commit 10d57ec
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 71 deletions.
diff --git a/lib/components/Layout/PageLayout.scss b/lib/components/Layout/PageLayout.scss
diff --git a/lib/components/Layout/index.tsx b/lib/components/Layout/index.tsx
diff --git a/lib/components/PageLayout/PageLayout.scss b/lib/components/PageLayout/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;
     }
 }
diff --git a/lib/components/PageLayout/index.tsx b/lib/components/PageLayout/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>
 }
diff --git a/lib/main.ts b/lib/main.ts
@@ -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";

diff --git 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.
@@ -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>
     ),