@beydesign/storybook 0.1.7 → 0.1.9

package/dist/stories/Navigation/Sidebar.js

@@ -102,14 +102,13 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
         }
     };
     const isCollapsed = sidebarSize === SidebarSize.Collapsed;
+    const cardSize = isCollapsed
+        ? CreditsCardSize.Collapsed
+        : CreditsCardSize.Expanded;
     return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
                                                     ? section.title.split(' ')[0]
                                                     : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
-                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsxs(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: [credits && !loadingCredits && (_jsx(CreditsCard, { size: isCollapsed
-                                                ? CreditsCardSize.Collapsed
-                                                : CreditsCardSize.Expanded, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })), !credits && loadingCredits && (_jsx(CreditsCardSkeleton, { size: isCollapsed
-                                                ? CreditsCardSize.Collapsed
-                                                : CreditsCardSize.Expanded }))] }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {
+                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsx(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: loadingCredits ? (_jsx(CreditsCardSkeleton, { size: cardSize })) : credits ? (_jsx(CreditsCard, { size: cardSize, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })) : null }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',
                     } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
                         boxShadow: '2px 4px 8px 0px #1D142814',

package/dist/stories/UI/Stepper.d.ts

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

package/dist/stories/UI/Stepper.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+export const Stepper = ({ steps, currentStep, onStepClick, style, testId, connectorWidth, stepStyle, }) => {
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, "data-testId": testId, display: 'flex', flexDirection: 'row', alignItems: 'center', children: steps.map((step, index) => (_jsx(Step, { currentStep: currentStep, index: index, title: step, onClick: () => onStepClick(index), totalSteps: steps.length, connectorWidth: connectorWidth, stepStyle: stepStyle }, index))) }));
+};
+const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth = '70px', stepStyle, }) => {
+    const thisStep = index + 1;
+    const isDisabled = currentStep < thisStep;
+    const isCurrent = currentStep === thisStep;
+    const isCompleted = currentStep > thisStep;
+    const getTextColor = () => {
+        if (isDisabled)
+            return 'var(--colors-light-text-text-paragraph)';
+        else if (isCurrent)
+            return 'var(--colors-light-text-text-clicable)';
+        else if (isCompleted)
+            return 'var(--colors-light-text-text-title)';
+        else
+            return 'var(--colors-light-text-text-paragraph)';
+    };
+    const getIconColor = () => {
+        if (isDisabled)
+            return 'var(--colors-light-foreground-fg-disabled)';
+        else if (isCurrent)
+            return 'var(--colors-light-background-bg-brand)';
+        else if (isCompleted)
+            return 'var(--colors-light-background-bg-brand)';
+        else
+            return 'var(--colors-light-foreground-fg-secondary)';
+    };
+    const IconComponent = getIconComponent('CheckCircle', {
+        size: '24px',
+        color: getIconColor(),
+        weight: isCompleted ? 'fill' : 'regular',
+        onClick: onClick,
+    });
+    const getConnectorColor = (position) => {
+        if (position === 'left') {
+            if (thisStep === 1)
+                return 'transparent';
+            else if (thisStep <= currentStep)
+                return 'var(--colors-light-background-bg-brand)';
+            else
+                return 'var(--colors-light-foreground-fg-disabled)';
+        }
+        else if (position === 'right') {
+            if (thisStep === totalSteps)
+                return 'transparent';
+            else if (thisStep < currentStep)
+                return 'var(--colors-light-background-bg-brand)';
+            else
+                return 'var(--colors-light-foreground-fg-disabled)';
+        }
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', sx: stepStyle, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Box, { height: '1px', bgcolor: getConnectorColor('left'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), IconComponent, _jsx(Box, { height: '1px', bgcolor: getConnectorColor('right'), width: connectorWidth, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), _jsx(Box, { onClick: onClick, children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: getTextColor(), children: title }) })] }));
+};

package/dist/stories/UI/Stepper.stories.d.ts

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

package/dist/stories/UI/Stepper.stories.js

@@ -0,0 +1,65 @@
+import { Stepper } from './Stepper';
+const meta = {
+    title: 'Design System/Components/UI/Stepper',
+    component: Stepper,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: '',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        currentStep: {
+            control: 'number',
+            description: 'Current step of the stepper',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        steps: {
+            control: 'object',
+            description: 'Steps of the stepper',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        onStepClick: {
+            description: 'Function to call when a step is clicked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Style of the stepper',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        testId: {
+            control: 'text',
+            description: 'Test ID of the stepper',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        currentStep: 1,
+        steps: [
+            'Lighting, Audio & Setup',
+            'Beginning',
+            'Speaking Phase',
+            'Ending',
+            'Final Checklist',
+        ],
+        onStepClick: () => { },
+        style: {},
+        testId: 'stepper',
+    },
+};

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

@@ -7,3 +7,4 @@ export * from './ProgressIndicator';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
+export * from './Stepper';

package/dist/stories/UI/index.js

@@ -7,3 +7,4 @@ export * from './ProgressIndicator';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';
+export * from './Stepper';

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

@@ -232,3 +232,35 @@ export interface TopbarProps {
     /** Class name */
     className?: string;
 }
+export interface StepProps {
+    /** Current step of the stepper */
+    currentStep: number;
+    /** Total steps of the stepper */
+    totalSteps: number;
+    /** Index of the step */
+    index: number;
+    /** Title of the step */
+    title: string;
+    /** On click of the step */
+    onClick?: () => void;
+    /** Connector width of the step */
+    connectorWidth?: string | number;
+    /** Style of the step */
+    stepStyle?: SxProps<Theme>;
+}
+export interface StepperProps {
+    /** Steps of the stepper */
+    steps: string[];
+    /** Current step of the stepper */
+    currentStep: number;
+    /** On click of the step */
+    onStepClick: (step: number) => void;
+    /** Style of the stepper */
+    style?: SxProps<Theme>;
+    /** Style of the step */
+    stepStyle?: SxProps<Theme>;
+    /** Test ID of the stepper */
+    testId?: string;
+    /** Connector width of the stepper */
+    connectorWidth?: string | number;
+}

package/package.json

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