@heliux-org/design-system-core 0.0.359 → 0.0.361

package/src/components/PageHeader/__stories__/{PageHeader.stories.js → PageHeader.stories.tsx}

@@ -1,117 +1,71 @@
-import { createStoryMetaSettingsDecorator } from "../../../storybook";
-import { createComponentTemplate } from "@heliux-org/storybook-components";
-
-import Heading from "../../Heading/Heading";
-
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
 import PageHeader from "../PageHeader";
-
-import styles from "./PageHeader.stories.module.scss";
-import componentStyles from "../PageHeader.module.scss";
+import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import Button from "../../Button/Button";
 import Tab from "../../Tabs/Tab/Tab";
 import BreadcrumbsBar from "../../BreadcrumbsBar/BreadcrumbsBar";
 import BreadcrumbItem from "../../BreadcrumbsBar/BreadcrumbItem/BreadcrumbItem";
-import Link from "../../Link/Link";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: Heading,
-  iconPropNamesArray: [], // List props that are typed as icons here
-  actionPropsArray: [], // List the component's actions here
+  component: PageHeader,
+  enumPropNamesArray: ["type"],
+  iconPropNamesArray: [],
 });
 
-const textTemplate = createComponentTemplate(Heading);
-
-export default {
+const meta: Meta<typeof PageHeader> = {
   title: "Navigation/Page Header",
   component: PageHeader,
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators,
+  decorators: metaSettings.decorators as any,
 };
 
+export default meta;
+
+type Story = StoryObj<typeof PageHeader>;
+
+// Helper constants
 const breadcrumb = (
-  <BreadcrumbsBar
-    type={BreadcrumbsBar.types.INDICATION}
-    className={componentStyles.PageHeaderBreadcrumbs}
-  >
+  <BreadcrumbsBar type={BreadcrumbsBar.types.INDICATION}>
     <BreadcrumbItem text="Workspace" />
     <BreadcrumbItem text="Folder" />
-    <BreadcrumbItem text="  " />
+    <BreadcrumbItem text="Page" />
   </BreadcrumbsBar>
 );
 
 const tabs = [
-  <Tab key="1" value={1} link="https://www.google.com/" active>
-    Tab 1
-  </Tab>,
-  <Tab key="2" value={2} link="https://www.google.com/" active>
-    Tab 2
-  </Tab>,
-  <Tab key="3" value={3} link="https://www.google.com/" active>
-    Tab 3
-  </Tab>,
-  <Tab key="4" value={4} active>
-    Tab 4
-  </Tab>,
-  <Tab key="5" value={5} link="https://www.google.com/" disabled>
-    Tab 5
-  </Tab>,
+  <Tab key="1" value={1} active>Tab 1</Tab>,
+  <Tab key="2" value={2}>Tab 2</Tab>,
+  <Tab key="3" value={3}>Tab 3</Tab>,
+  <Tab key="4" value={4}>Tab 4</Tab>,
+  <Tab key="5" value={5} disabled>Tab 5</Tab>,
 ];
 
 const linkTabs = [
-  <Button
-    key="v1"
-    onClick={() => console.log("Activity tab 1 clicked")}
-    kind="secondary"
-    size="small"
-  >
+  <Button key="v1" onClick={() => console.log("Activity tab 1 clicked")} kind={Button.kinds.SECONDARY}  size="small">
     v1
   </Button>,
-  <Button
-    key="Messages"
-    onClick={() => console.log("Messages tab 2 clicked")}
-    kind="secondary"
-    size="small"
-  >
-    Messages <span className={styles.circle}>2</span>
+  <Button key="Messages" onClick={() => console.log("Messages tab 2 clicked")} kind={Button.kinds.SECONDARY}  size="small">
+    <span>Messages </span>
   </Button>,
-  <Button
-    key="Activity"
-    onClick={() => console.log("Activity tab 1 clicked")}
-    kind="secondary"
-    size="small"
-  >
+  <Button key="Activity" onClick={() => console.log("Activity tab clicked")}kind={Button.kinds.SECONDARY}  size="small">
     Activity
   </Button>,
 ];
 
 const buttons = [
-  <Button
-    key="1"
-    onClick={() => console.log("Clicked button 1")}
-    kind="primary"
-    size={Button.sizes.SMALL}
-  >
+  <Button key="1" onClick={() => console.log("Clicked button 1")} kind={Button.kinds.SECONDARY}  size={Button.sizes.SMALL}>
     Button 1
   </Button>,
-  <Button
-    key="2"
-    onClick={() => console.log("Clicked button 2")}
-    kind="secondary"
-    size={Button.sizes.SMALL}
-  >
+  <Button key="2" onClick={() => console.log("Clicked button 2")} kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL}>
     Button 2
   </Button>,
-  <Button
-    key="3"
-    onClick={() => console.log("Clicked button 3")}
-    kind="secondary"
-    size={Button.sizes.SMALL}
-  >
+  <Button key="3" onClick={() => console.log("Clicked button 3")} kind={Button.kinds.SECONDARY}  size={Button.sizes.SMALL}>
     Button 3
   </Button>,
 ];
 
-export const PageHeaderPrimary = {
+export const Overview: Story = {
   render: () => (
     <PageHeader
       title="Release Manager"
@@ -122,11 +76,10 @@ export const PageHeaderPrimary = {
       buttons={buttons}
     />
   ),
-
-  name: "Page Header",
+  name: "Overview",
 };
 
-export const WithSecondaryTitle = {
+export const WithSecondaryTitle: Story = {
   render: () => (
     <PageHeader
       title="Eco-267"
@@ -138,22 +91,20 @@ export const WithSecondaryTitle = {
       buttons={buttons}
     />
   ),
-
   name: "With Secondary Title",
 };
 
-export const WithoutLinkTabs = {
+export const WithoutLinkTabs: Story = {
   render: () => (
     <PageHeader
       title="Release Manager"
       description="Short description can go here..."
     />
   ),
-
   name: "Without Link Tabs",
 };
 
-export const EditableTitle = {
+export const EditableTitle: Story = {
   render: () => (
     <PageHeader
       title="Release Manager"
@@ -164,11 +115,10 @@ export const EditableTitle = {
       linkTabs={linkTabs}
     />
   ),
-
   name: "With Editable Title",
 };
 
-export const Bare = {
+export const Bare: Story = {
   render: () => (
     <PageHeader
       title="Release Manager"
@@ -176,11 +126,10 @@ export const Bare = {
       linkTabs={linkTabs}
     />
   ),
-
   name: "Bare",
 };
 
-export const WithTitleContent = {
+export const WithTitleContent: Story = {
   render: () => (
     <PageHeader
       title="Eco-267"
@@ -190,9 +139,8 @@ export const WithTitleContent = {
       tabs={tabs}
       linkTabs={linkTabs}
       buttons={buttons}
-      titleContent={<Button size={Button.sizes.XS} kind={Button.kinds.SECONDARY}>Custom Action</Button>} // Add this line
+      titleContent={<Button size={Button.sizes.XS} kind={Button.kinds.SECONDARY}>Custom Action</Button>}
     />
   ),
-
   name: "With Title Content",
-};
+};

package/src/components/Panel/Panel.tsx

@@ -14,42 +14,57 @@ type HeaderProps = {
   divider?: boolean;
   rightContent?: React.ReactNode;
   leftContent?: React.ReactNode;
+  size?: 'small' | 'large';
 };
-export function PanelHeader({ side = "onRight", title, onClick, divider = true, rightContent, leftContent }: HeaderProps) {
+export function PanelHeader({ side = "onRight", title, onClick, divider = true, rightContent, leftContent, size = 'small' }: HeaderProps) {
   const reverse = side === "onLeft";
   return (
-    <div className={styles.panelHeaderStyled}>
+    <div className={styles.panelHeaderStyled} style={{ width: '100%' }}>
       <Flex
         className={styles.panelHeaderInner}
-        align={Flex.align.CENTER}
-        justify={Flex.justify.STRETCH}
-      
-        style={{
-          justifyContent: reverse ? "flex-end" : "space-between",
-          flexDirection: reverse ? "row-reverse" : "row"
-        }}
+        direction={Flex.directions.COLUMN}
+        gap={size === 'large' ? Flex.gaps.MEDIUM : Flex.gaps.NONE}
+        style={{ width: '100%' }}
       >
-        <Flex gap={Flex.gaps.SMALL}>
-          {leftContent}
-          <Text type={Text.types.TEXT2} element="span" weight={Text.weights.NORMAL}>
-            <div className={styles.headerTextStyled} style={{ marginLeft: reverse ? "1rem" : "0" }}>
-              {title}
-            </div>
-          </Text>
-        </Flex>
-        <Flex gap={Flex.gaps.SMALL}>
-          {rightContent}
-          <IconButton
-            onClick={onClick}
-            ariaLabel="Close"
-            icon={Close}          
-            color={IconButton.colors.SECONDARY}
-            kind={IconButton.kinds.SECONDARY}
-            size={IconButton.sizes.XS}
-            rounded
-          />
+        <Flex
+          align={Flex.align.CENTER}
+          justify={Flex.justify.SPACE_BETWEEN}
+          style={{
+            width: '100%'
+          }}
+        >
+          <Flex gap={Flex.gaps.SMALL} style={{ flex: '1 1 auto' }}>
+            {leftContent}
+            {size === 'small' && title && (
+              <Text type={Text.types.TEXT2} element="span" weight={Text.weights.NORMAL}>
+                <div className={styles.headerTextStyled} style={{ marginLeft: reverse ? "1rem" : "0" }}>
+                  {title}
+                </div>
+              </Text>
+            )}
+          </Flex>
+          <Flex gap={Flex.gaps.SMALL}>
+            {rightContent}
+            <IconButton
+              onClick={onClick}
+              ariaLabel="Close"
+              icon={Close}          
+              color={IconButton.colors.SECONDARY}
+              kind={IconButton.kinds.SECONDARY}
+              size={IconButton.sizes.XS}
+              rounded
+            />
+          </Flex>
         </Flex>
- 
+        {size === 'large' && title && (
+          <Flex style={{ width: '100%' }}>
+            <Text type={Text.types.TEXT2} element="span" weight={Text.weights.NORMAL} style={{ width: '100%' }}>
+              <div className={styles.headerTextStyled}>
+                {title}
+              </div>
+            </Text>
+          </Flex>
+        )}
       </Flex>
       {divider && <div style={{borderBottom: "1px solid var(--divider-primary)"}}/>}
     </div>

package/src/components/Panel/__stories__/Panel.stories.js

@@ -380,3 +380,85 @@ export const HeaderWithContent = {
     }
   }
 };
+
+export const StandaloneHeader = {
+  render: () => {
+    const leftContent = (
+      <IconButton
+        icon={Filter}
+        size={IconButton.sizes.SMALL}
+        ariaLabel="Filter"
+        onClick={() => console.log("Left content clicked")}
+      />
+    );
+
+    const rightContent = (
+      <Flex gap={Flex.gaps.SMALL}>
+        <IconButton
+          icon={Download}
+          size={IconButton.sizes.SMALL}
+          ariaLabel="Download"
+          onClick={() => console.log("Download clicked")}
+        />
+        <IconButton
+          icon={Search}
+          size={IconButton.sizes.SMALL}
+          ariaLabel="Search"
+          onClick={() => console.log("Search clicked")}
+        />
+      </Flex>
+    );
+
+    return (
+      <Flex direction={Flex.directions.COLUMN} gap={100} align={Flex.align.START}>
+        <div style={{ width: '600px' }}>
+          <PanelHeader
+            title="Small Header (Default)"
+            size="small"
+            onClick={() => console.log("Close clicked")}
+            leftContent={leftContent}
+            rightContent={rightContent}
+          />
+        </div>
+        <div style={{ width: '600px' }}>
+          <PanelHeader
+            title="Large Header"
+            size="large"
+            onClick={() => console.log("Close clicked")}
+            leftContent={leftContent}
+            rightContent={rightContent}
+          />
+        </div>
+      </Flex>
+    );
+  },
+  name: "Standalone Header",
+  parameters: {
+    docs: {
+      description: {
+        story: 'PanelHeader component can be used independently of Panel. It supports two sizes: "small" (default) and "large".'
+      }
+    }
+  }
+};
+
+export const StandaloneFooter = {
+  render: () => {
+    return (
+      <div style={{ border: '1px solid var(--ui-border-color)', maxWidth: '600px' }}>
+        <PanelFooter>
+          <Button kind={Button.kinds.SECONDARY} stretched>Cancel</Button>
+          <Button stretched>Save</Button>
+        </PanelFooter>
+      </div>
+    );
+  },
+  name: "Standalone Footer",
+  parameters: {
+    docs: {
+      description: {
+        story: 'PanelFooter component can be used independently of Panel'
+      }
+    }
+  }
+};

package/src/components/PanelLayout/PanelLayout.module.scss

@@ -8,8 +8,8 @@
   border-radius: 6px;
   gap: 4px;
   overflow: hidden;
-  
-  
+
+
   .emptyState {
     display: flex;
     align-items: center;
@@ -43,11 +43,13 @@
   background-color: transparent;
   width: 2px;
   transition: all 0.3s ease-in-out;
+
   &:hover {
-      background-color: var(--divider-secondary);
-      box-shadow: 2px 0px 0px 0px var(--divider-secondary);
+    background-color: var(--divider-secondary);
+    box-shadow: 2px 0px 0px 0px var(--divider-secondary);
   }
 }
+
 .collapse-handle {
   z-index: 100;
   max-width: 2px;
@@ -55,18 +57,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   svg rect {
-      fill: var(--divider-secondary);
-      max-width: 2px;
-      width: 2px;    
+    fill: var(--divider-secondary);
+    max-width: 2px;
+    width: 2px;
   }
+
   &:hover {
     background-color: var(--divider-secondary);
-      svg rect {
-          fill: var(--text-color-on-primary);
-      }
+
+    svg rect {
+      fill: var(--text-color-on-primary);
+    }
   }
 }
+
 .styled-handle {
   height: 100%;
   width: 6px;
@@ -75,16 +81,19 @@
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease-in-out;
+
   &:hover {
     background-color: var(--divider-selected);
   }
 }
+
 .handle {
   height: 100%;
   background-color: var(--divider-primary);
   cursor: ew-resize;
   transition: background-color 0.3s ease-in-out;
-  width:134px;
+  width: 134px;
+
   &:hover {
     background-color: var(--divider-selected);
   }