@beydesign/storybook 0.0.50 → 0.0.51

package/dist/stories/Navigation/ProcessHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ProcessHeaderProps } from './types';
+export declare const ProcessHeader: React.FC<ProcessHeaderProps>;

package/dist/stories/Navigation/ProcessHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, headerRightText, onCancelClick, sx, className, }) => {
+    const stepChecks = () => {
+        return (currentStep && totalSteps && currentStep > 1 && currentStep <= totalSteps);
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { text: `${title}.`, size: TypographySize.TextM, weight: TypographyWeight.SemiBold })), subtitle && (_jsx(Typography, { text: subtitle, size: TypographySize.TextS, weight: TypographyWeight.Regular }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.xs, hierarchy: ButtonHierarchy.TetriaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
+};

package/dist/stories/Navigation/ProcessHeader.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProcessHeader } from './ProcessHeader';
+declare const meta: Meta<typeof ProcessHeader>;
+export default meta;
+type Story = StoryObj<typeof ProcessHeader>;
+export declare const Default: Story;

package/dist/stories/Navigation/ProcessHeader.stories.js

@@ -0,0 +1,76 @@
+import { ProcessHeader } from './ProcessHeader';
+import styles from './Header.module.css';
+const meta = {
+    title: 'Design System/Components/Navigation/ProcessHeader',
+    component: ProcessHeader,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/Ze4bBHgBQYinBDZr1COHuk/Agents?node-id=1928-68769&t=ff7acatvxaY98hGj-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        subtitle: {
+            control: 'text',
+            description: 'Subtitle of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        currentStep: {
+            control: 'number',
+            description: 'Current step of the process',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        totalSteps: {
+            control: 'number',
+            description: 'Total steps of the process',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        headerRightText: {
+            control: 'text',
+            description: 'Text to display in the header right',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onCancelClick: {
+            description: 'Callback to handle the cancel button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style object to apply to the component',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Train Agent',
+        subtitle: 'Please fill in the necessary information for your agent & upload knowledge files.',
+        currentStep: 3,
+        totalSteps: 3,
+        headerRightText: 'New Agent',
+        onCancelClick: () => { },
+        className: styles['responsive-width'],
+    },
+};

package/dist/stories/Navigation/index.d.ts

@@ -2,3 +2,4 @@ export * from './Header';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
+export * from './ProcessHeader';

package/dist/stories/Navigation/index.js

@@ -2,3 +2,4 @@ export * from './Header';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';
+export * from './ProcessHeader';

package/dist/stories/Navigation/types.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
 /**
@@ -141,3 +142,21 @@ export interface SidebarProps {
         color?: string;
     };
 }
+export interface ProcessHeaderProps {
+    /** The title of the process */
+    title: string;
+    /** The subtitle of the process */
+    subtitle: string;
+    /** The current step of the process */
+    currentStep: number;
+    /** The total steps of the process */
+    totalSteps: number;
+    /** The text to display in the header right */
+    headerRightText?: string;
+    /** The callback to handle the cancel button click */
+    onCancelClick?: () => void;
+    /** The style object to apply to the component */
+    sx?: SxProps<Theme>;
+    /** The class name to apply to the component */
+    className?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.51",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",