@beydesign/storybook 0.1.9 → 0.1.11

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, textStyle, 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, textStyle: textStyle, 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: textStyle, 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,16 @@ export const Percentage = {
         maxValue: 100,
     },
 };
+export const PercentageWithOverriddenText = {
+    args: {
+        mode: ProgressIndicatorMode.Percentage,
+        currentValue: 30,
+        maxValue: 100,
+        overriddenText: 'Step 30 of 100',
+        style: { width: '400px' },
+        textStyle: { width: '120px' },
+    },
+};
 export const Custom = {
     args: {
         mode: ProgressIndicatorMode.Value,

package/dist/stories/UI/Stepper.js

@@ -3,7 +3,7 @@ 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))) }));
+    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;
@@ -34,7 +34,8 @@ const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth =
         size: '24px',
         color: getIconColor(),
         weight: isCompleted ? 'fill' : 'regular',
-        onClick: onClick,
+        onClick: () => onClick?.(),
+        style: { cursor: onClick ? 'pointer' : 'default' },
     });
     const getConnectorColor = (position) => {
         if (position === 'left') {
@@ -54,5 +55,5 @@ const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth =
                 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 }) })] }));
+    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/types.d.ts

@@ -187,10 +187,14 @@ 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 */
     style?: SxProps<Theme>;
+    /** Text style of the progress indicator */
+    textStyle?: React.CSSProperties;
     /** Test ID of the progress indicator */
     testId?: string;
 };
@@ -254,7 +258,7 @@ export interface StepperProps {
     /** Current step of the stepper */
     currentStep: number;
     /** On click of the step */
-    onStepClick: (step: number) => void;
+    onStepClick?: (step: number) => void;
     /** Style of the stepper */
     style?: SxProps<Theme>;
     /** Style of the step */

package/package.json

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