feature. Modify TPage panel

- Resizing panel width - Add infoPanelTitle prop
openinfradev · Apr 18, 2024 · 27d03e0 · 27d03e0
1 parent 0868298
commit 27d03e0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 18 deletions.
diff --git a/src/components/screen/page/TPage.interface.ts b/src/components/screen/page/TPage.interface.ts
@@ -12,6 +12,8 @@ export interface TPageProps extends TBaseProps {
     children: ReactNode,
 
     title?: string,
+
+    infoPanelTitle?: string,
     infoPanelContent?: ReactNode,
 
     contentDirection?: contentDirection,

diff --git a/src/components/screen/page/TPage.tsx b/src/components/screen/page/TPage.tsx
@@ -1,8 +1,8 @@
 import {MouseEvent, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import TIcon from '../../icon/TIcon';
-import {contentDirection, TPageProps} from './TPage.interface';
+import {TPageProps} from '@/components';
 
-const defaultPanelWidth = '360px';
+const defaultPanelWidth = '280px';
 
 const TPage = (props: TPageProps) => {
 
@@ -111,7 +111,7 @@ const TPage = (props: TPageProps) => {
              ref={rootRef}
              id={props.id}
              data-testid={'t-page-root'}>
-            <div className={'t-page__content-container'}>
+            <div className={'t-page__content-container'} style={{width: `calc(100% - ${panelWidth})`}}>
                 <div className={'t-page__title-area'}>
                     <h3 className={'t-page__title-area__title'}>{props.title}</h3>
 
@@ -148,6 +148,13 @@ const TPage = (props: TPageProps) => {
                                        clickable
                                        onClick={onClickInfoClose}>close</TIcon>
                             </div>
+                            {
+                                props.infoPanelTitle && (
+                                    <div className={'t-page__information-area__title'}>
+                                        {props.infoPanelTitle}
+                                    </div>
+                                )
+                            }
                             <div className={'t-page__information-area__content'}>
                                 {props.infoPanelContent}
                             </div>

diff --git a/src/styles/component/screen/page/TPage.scss b/src/styles/component/screen/page/TPage.scss
@@ -37,15 +37,15 @@
     }
 
     .t-page__information-area {
-        $information-header-height: 68px;
 
         transition: flex 0.3s;
         position: relative;
-        flex: 0 0 360px;
+        flex: 0 0 280px;
 
         .t-page__information-area__container {
             width: 100%;
             height: 100%;
+            padding: $t-spacing-56 $t-spacing-24 0 $t-spacing-24;
             border-left: 1px solid $t-grid-border-color--01;
             position: absolute;
             transition: width 0.3s, right 0.3s;
@@ -62,22 +62,17 @@
             flex: 0 0 0;
             transition: all 0.3s;
             .t-page__information-area__container {
-                width: 360px;
-                right: -360px;
+                width: 280px;
+                right: -280px;
             }
         }
 
 
         .t-page__information-area__header {
-            height: $information-header-height;
             display: flex;
             align-items: center;
             flex-direction: row-reverse;
-
-            .t-page__information-area__header__close {
-                font-size: 28px;
-                margin-right: 32px;
-            }
+            margin-bottom: $t-spacing-20;
         }
 
         .t-page__information-area__resizer {
@@ -96,16 +91,20 @@
             }
         }
 
+        .t-page__information-area__title {
+            @include typo-subtitle-2;
+            margin-bottom: $t-spacing-10;
+        }
 
         .t-page__information-area__content {
             position: absolute;
-            padding: 20px $t-spacing-32;
             line-height: $t-line-height-body;
-            width: 100%;
-            height: calc(100% - $information-header-height);
+            width: calc(100% - $t-spacing-24 * 2);
+            white-space: pre-line;
             overflow-y: auto;
-        }
 
+            @include typo-body-3;
+        }
 
     }
 

diff --git a/stories/components/screen/page/TPage.stories.tsx b/stories/components/screen/page/TPage.stories.tsx
@@ -12,6 +12,8 @@ export default meta;
 
 type Story = StoryObj<typeof TPage>;
 
+const infoPanelTitle = 'Lorem ipsum dolor sit amet';
+
 const infoContent = `
 Lorem ipsum dolor sit amet, consec
 tetur adipiscing elit. In nec consecte
@@ -77,7 +79,7 @@ const Template = (args: TPageProps) => {
 
 export const TopBottom: Story = {
     render: Template,
-    args: {infoPanelContent: infoContent},
+    args: {infoPanelTitle, infoPanelContent: infoContent},
 };
 
 export const LeftRight: Story = {