@beydesign/storybook 0.1.10 → 0.1.12

package/dist/stories/Form/Toggle.js

@@ -52,6 +52,6 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
         },
     },
 }));
-export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, }) => {
-    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "#475467", children: title }))] }))] }));
+export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--colors-light-text-text-title)', titleColor = '#475467', }) => {
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: textColor, children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: titleColor, children: title }))] }))] }));
 };

package/dist/stories/Form/Toggle.stories.js

@@ -54,6 +54,14 @@ const meta = {
             description: 'Style of the toggle',
             table: { type: { summary: 'object' } },
         },
+        textColor: {
+            description: 'Color of the text',
+            table: { type: { summary: 'string' } },
+        },
+        titleColor: {
+            description: 'Color of the title',
+            table: { type: { summary: 'string' } },
+        },
     },
 };
 export default meta;
@@ -65,5 +73,7 @@ export const Default = {
         title: 'This is a toggle',
         disabled: false,
         togglePosition: TogglePosition.Right,
+        textColor: 'var(--colors-light-text-text-title)',
+        titleColor: '#475467',
     },
 };

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

@@ -101,6 +101,10 @@ export type ToggleProps = {
     togglePosition?: TogglePosition;
     /** Style of the toggle */
     style?: SxProps<Theme>;
+    /** Text color of the toggle */
+    textColor?: string;
+    /** Title color of the toggle */
+    titleColor?: string;
 };
 export declare enum CheckboxType {
     Radio = "Radio",

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, 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, }) => {
+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,7 +29,7 @@ export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overridd
     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: 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 ||
+    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.js

@@ -81,6 +81,8 @@ export const PercentageWithOverriddenText = {
         currentValue: 30,
         maxValue: 100,
         overriddenText: 'Step 30 of 100',
+        style: { width: '400px' },
+        textStyle: { width: '120px' },
     },
 };
 export const Custom = {

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

@@ -193,6 +193,8 @@ export type ProgressIndicatorProps = {
     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;
 };

package/package.json

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