@beydesign/storybook 0.1.8 → 0.1.10

package/dist/stories/UI/ProgressIndicator.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProgressIndicatorMode } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, testId, }) => {
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, testId, }) => {
     let errorText = '';
     const calculateFill = () => {
         if (currentValue > maxValue)
@@ -29,5 +29,7 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, currentV
     if (errorText) {
         return (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, children: errorText }));
     }
-    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, "data-testid": testId, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, "data-testid": testId, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, children: overriddenText ||
+                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: { width: '100%' }, children: overriddenText ||
+                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
 };

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

@@ -4,5 +4,7 @@ declare const meta: Meta<typeof ProgressIndicator>;
 export default meta;
 type Story = StoryObj<typeof ProgressIndicator>;
 export declare const Default: Story;
+export declare const ValueWithOverriddenText: Story;
 export declare const Percentage: Story;
+export declare const PercentageWithOverriddenText: Story;
 export declare const Custom: Story;

package/dist/stories/UI/ProgressIndicator.stories.js

@@ -60,6 +60,14 @@ export const Default = {
         maxValue: 100,
     },
 };
+export const ValueWithOverriddenText = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+        overriddenText: 'Step 10 of 100',
+    },
+};
 export const Percentage = {
     args: {
         mode: ProgressIndicatorMode.Percentage,
@@ -67,6 +75,14 @@ export const Percentage = {
         maxValue: 100,
     },
 };
+export const PercentageWithOverriddenText = {
+    args: {
+        mode: ProgressIndicatorMode.Percentage,
+        currentValue: 30,
+        maxValue: 100,
+        overriddenText: 'Step 30 of 100',
+    },
+};
 export const Custom = {
     args: {
         mode: ProgressIndicatorMode.Value,

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,59 @@
+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 ? () => onStepClick(index) : undefined, 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?.(),
+        style: { cursor: onClick ? 'pointer' : 'default' },
+    });
+    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?.(), sx: { cursor: onClick ? 'pointer' : 'default' }, 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

@@ -187,6 +187,8 @@ export type ProgressIndicatorProps = {
     backgroundColor?: string;
     /** Text of the progress indicator */
     text?: string;
+    /** Overridden text of the progress indicator */
+    overriddenText?: string;
     /** Text color of the progress indicator */
     textColor?: string;
     /** Style of the progress indicator */
@@ -232,3 +234,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.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",