@beydesign/storybook 0.1.12 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/stories/UI/Stepper.js +10 -2
  2. package/package.json +41 -41
package/dist/stories/UI/Stepper.js CHANGED
@@ -3,7 +3,7 @@ import { Box } from '@mui/material';
3
3
  import { Typography, TypographySize, TypographyWeight } from '../Typography';
4
4
  import { getIconComponent } from '../../utils';
5
5
  export const Stepper = ({ steps, currentStep, onStepClick, style, testId, connectorWidth, stepStyle, }) => {
6
- 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))) }));
6
+ 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 + 1) : undefined, totalSteps: steps.length, connectorWidth: connectorWidth, stepStyle: stepStyle }, index))) }));
7
7
  };
8
8
  const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth = '70px', stepStyle, }) => {
9
9
  const thisStep = index + 1;
@@ -55,5 +55,13 @@ const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth =
55
55
  return 'var(--colors-light-foreground-fg-disabled)';
56
56
  }
57
57
  };
58
- 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 }) })] }));
58
+ return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: onClick ? () => onClick() : undefined, sx: {
59
+ cursor: onClick ? 'pointer' : 'default',
60
+ '&:hover': {
61
+ border: '1px solid #6938EF33',
62
+ borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
63
+ backgroundColor: '#6938EF1A',
64
+ },
65
+ ...stepStyle,
66
+ }, 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(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, color: getTextColor(), children: title })] }));
59
67
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@beydesign/storybook",
3
3
  "private": false,
4
- "version": "0.1.12",
4
+ "version": "0.1.15",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -26,49 +26,49 @@
26
26
  },
27
27
  "dependencies": {
28
28
  "@beydesign/tokens": "^0.0.7",
29
- "@emotion/react": "^11.11.4",
30
- "@emotion/styled": "^11.11.0",
31
- "@fortawesome/fontawesome-svg-core": "^6.5.1",
32
- "@fortawesome/free-solid-svg-icons": "^6.5.1",
33
- "@fortawesome/react-fontawesome": "^0.2.0",
29
+ "@emotion/react": "^11.14.0",
30
+ "@emotion/styled": "^11.14.1",
31
+ "@fortawesome/fontawesome-svg-core": "^6.7.2",
32
+ "@fortawesome/free-solid-svg-icons": "^6.7.2",
33
+ "@fortawesome/react-fontawesome": "^0.2.6",
34
34
  "@lottiefiles/react-lottie-player": "^3.6.0",
35
- "@mui/icons-material": "^5.15.12",
36
- "@mui/material": "^5.15.12",
37
- "@phosphor-icons/react": "^2.1.7",
38
- "react": "^18.2.0",
39
- "react-dom": "^18.2.0",
40
- "typescript": "~5.5.0"
35
+ "@mui/icons-material": "^5.18.0",
36
+ "@mui/material": "^5.18.0",
37
+ "@phosphor-icons/react": "^2.1.10",
38
+ "react": "^18.3.1",
39
+ "react-dom": "^18.3.1",
40
+ "typescript": "~5.9.3"
41
41
  },
42
42
  "devDependencies": {
43
- "@chromatic-com/storybook": "^3.2.4",
44
- "@storybook/addon-designs": "^8.0.4",
45
- "@storybook/addon-essentials": "^8.5.2",
46
- "@storybook/addon-interactions": "^8.5.2",
47
- "@storybook/addon-onboarding": "^8.5.2",
48
- "@storybook/addon-themes": "^8.5.3",
49
- "@storybook/blocks": "^8.5.2",
50
- "@storybook/react": "^8.5.2",
51
- "@storybook/react-vite": "^8.5.2",
52
- "@storybook/test": "^8.5.2",
53
- "@types/react": "^18.3.2",
54
- "@types/react-dom": "^18.3.0",
55
- "@typescript-eslint/eslint-plugin": "^7.1.1",
56
- "@typescript-eslint/parser": "^7.1.1",
57
- "@vitejs/plugin-react": "^4.2.1",
58
- "autoprefixer": "^10.4.18",
59
- "eslint": "^8.57.0",
60
- "eslint-config-prettier": "^9.1.0",
61
- "eslint-plugin-jsx-a11y": "^6.8.0",
62
- "eslint-plugin-prettier": "^5.1.3",
63
- "eslint-plugin-react": "^7.34.0",
64
- "eslint-plugin-react-hooks": "^4.6.0",
65
- "eslint-plugin-react-refresh": "^0.4.5",
66
- "eslint-plugin-storybook": "^0.11.2",
67
- "postcss": "^8.4.35",
68
- "prettier": "3.2.5",
69
- "storybook": "^8.5.2",
70
- "typescript-eslint": "^7.1.1",
71
- "vite": "^5.1.6"
43
+ "@chromatic-com/storybook": "^3.2.7",
44
+ "@storybook/addon-designs": "^8.2.1",
45
+ "@storybook/addon-essentials": "^8.6.14",
46
+ "@storybook/addon-interactions": "^8.6.14",
47
+ "@storybook/addon-onboarding": "^8.6.17",
48
+ "@storybook/addon-themes": "^8.6.17",
49
+ "@storybook/blocks": "^8.6.14",
50
+ "@storybook/react": "^8.6.17",
51
+ "@storybook/react-vite": "^8.6.17",
52
+ "@storybook/test": "^8.6.15",
53
+ "@types/react": "^18.3.28",
54
+ "@types/react-dom": "^18.3.7",
55
+ "@typescript-eslint/eslint-plugin": "^7.18.0",
56
+ "@typescript-eslint/parser": "^7.18.0",
57
+ "@vitejs/plugin-react": "^4.7.0",
58
+ "autoprefixer": "^10.4.27",
59
+ "eslint": "^8.57.1",
60
+ "eslint-config-prettier": "^9.1.2",
61
+ "eslint-plugin-jsx-a11y": "^6.10.2",
62
+ "eslint-plugin-prettier": "^5.5.5",
63
+ "eslint-plugin-react": "^7.37.5",
64
+ "eslint-plugin-react-hooks": "^4.6.2",
65
+ "eslint-plugin-react-refresh": "^0.4.26",
66
+ "eslint-plugin-storybook": "^0.11.6",
67
+ "postcss": "^8.5.8",
68
+ "prettier": "^3.8.1",
69
+ "storybook": "^8.6.17",
70
+ "typescript-eslint": "^7.18.0",
71
+ "vite": "^5.4.21"
72
72
  },
73
73
  "eslintConfig": {
74
74
  "extends": [