@beydesign/storybook 0.1.8 → 0.1.9

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.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",