@alfalab/core-components-steps 1.5.1 → 1.6.1

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 (46) hide show
  1. package/Component.d.ts +10 -0
  2. package/Component.js +4 -11
  3. package/components/step/Component.d.ts +10 -0
  4. package/components/step/Component.js +10 -4
  5. package/components/step/index.css +44 -34
  6. package/components/step/index.js +0 -9
  7. package/components/step-indicator/Component.js +1 -1
  8. package/components/step-indicator/index.css +2 -2
  9. package/components/step-indicator/index.js +0 -3
  10. package/cssm/Component.d.ts +10 -0
  11. package/cssm/Component.js +3 -12
  12. package/cssm/components/step/Component.d.ts +10 -0
  13. package/cssm/components/step/Component.js +9 -4
  14. package/cssm/components/step/index.js +0 -11
  15. package/cssm/components/step/index.module.css +20 -10
  16. package/cssm/components/step-indicator/index.js +0 -4
  17. package/cssm/index.js +0 -13
  18. package/cssm/index.module.css +1 -1
  19. package/esm/Component.d.ts +10 -0
  20. package/esm/Component.js +4 -11
  21. package/esm/components/step/Component.d.ts +10 -0
  22. package/esm/components/step/Component.js +10 -4
  23. package/esm/components/step/index.css +44 -34
  24. package/esm/components/step/index.js +0 -9
  25. package/esm/components/step-indicator/Component.js +1 -1
  26. package/esm/components/step-indicator/index.css +2 -2
  27. package/esm/components/step-indicator/index.js +0 -3
  28. package/esm/index.css +4 -4
  29. package/esm/index.js +0 -10
  30. package/index.css +4 -4
  31. package/index.js +0 -10
  32. package/modern/Component.d.ts +10 -0
  33. package/modern/Component.js +3 -9
  34. package/modern/components/step/Component.d.ts +10 -0
  35. package/modern/components/step/Component.js +10 -4
  36. package/modern/components/step/index.css +44 -34
  37. package/modern/components/step/index.js +0 -8
  38. package/modern/components/step-indicator/Component.js +1 -1
  39. package/modern/components/step-indicator/index.css +2 -2
  40. package/modern/components/step-indicator/index.js +0 -3
  41. package/modern/index.css +4 -4
  42. package/modern/index.js +0 -9
  43. package/package.json +2 -2
  44. package/src/Component.tsx +16 -0
  45. package/src/components/step/Component.tsx +30 -4
  46. package/src/components/step/index.module.css +23 -3
package/Component.d.ts CHANGED
@@ -38,6 +38,16 @@ type StepsProps = {
38
38
  * Включение / отключение интерактивности шагов
39
39
  */
40
40
  interactive?: boolean;
41
+ /**
42
+ * Растягивание шагов на всю ширину блока для вертикальной ориентации
43
+ * @default false
44
+ */
45
+ fullWidth?: boolean;
46
+ /**
47
+ * Минимальное расстояние между шагами
48
+ * @default 24
49
+ */
50
+ minSpaceBetweenSteps?: 8 | 16 | 24;
41
51
  /**
42
52
  * Кастомный метод для управления состоянием disabled шага и
43
53
  * возможностью перехода на этот шаг
package/Component.js CHANGED
@@ -5,26 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var components_step_Component = require('./components/step/Component.js');
8
- require('tslib');
9
- require('@alfalab/hooks');
10
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
11
- require('@alfalab/icons-glyph/ClockMIcon');
12
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
13
- require('./components/step-indicator/Component.js');
14
- require('@alfalab/core-components-badge');
15
8
 
16
9
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
17
10
 
18
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
19
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
20
13
 
21
- var styles = {"component":"steps__component_1yc4g","vertical":"steps__vertical_1yc4g"};
14
+ var styles = {"component":"steps__component_1n1l2","vertical":"steps__vertical_1n1l2"};
22
15
  require('./index.css')
23
16
 
24
17
  var Steps = function (_a) {
25
18
  var _b;
26
- var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
27
- var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
19
+ var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
20
+ var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
28
21
  var stepsLength = React__default.default.Children.count(children);
29
22
  React.useEffect(function () {
30
23
  if (activeStepProp) {
@@ -53,7 +46,7 @@ var Steps = function (_a) {
53
46
  var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
54
47
  var isNotLastStep = stepsLength !== stepNumber;
55
48
  var isInteractive = !disabled && interactive;
56
- return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber }, step));
49
+ return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
57
50
  })));
58
51
  };
59
52
 
package/components/step/Component.d.ts CHANGED
@@ -60,6 +60,16 @@ type StepProps = {
60
60
  * Указывает, является ли текущий шаг последним в списке
61
61
  */
62
62
  isNotLastStep?: boolean;
63
+ /**
64
+ * Маркер того, что шаг растягивается на всю ширину блока
65
+ * для вертикальной ориентации
66
+ */
67
+ fullWidth?: boolean;
68
+ /**
69
+ * Минимальное расстояние между шагами
70
+ * @default 24
71
+ */
72
+ minSpaceBetweenSteps?: 8 | 16 | 24;
63
73
  /**
64
74
  * Обработчик нажатия на текущей шаг
65
75
  * @param stepNumber - номер шага
package/components/step/Component.js CHANGED
@@ -10,19 +10,23 @@ var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
10
10
  var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
11
11
  var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
12
12
  var components_stepIndicator_Component = require('../step-indicator/Component.js');
13
- require('@alfalab/core-components-badge');
14
13
 
15
14
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
16
15
 
17
16
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
17
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
18
 
20
- var styles = {"step":"steps__step_2yi0h","vertical":"steps__vertical_2yi0h","interactive":"steps__interactive_2yi0h","disabled":"steps__disabled_2yi0h","text":"steps__text_2yi0h","indicator":"steps__indicator_2yi0h","option":"steps__option_2yi0h","dash":"steps__dash_2yi0h","completed":"steps__completed_2yi0h","focused":"steps__focused_2yi0h","selected":"steps__selected_2yi0h","checkbox":"steps__checkbox_2yi0h","dot":"steps__dot_2yi0h","error":"steps__error_2yi0h","unordered":"steps__unordered_2yi0h","completedIndicator":"steps__completedIndicator_2yi0h"};
19
+ var styles = {"step":"steps__step_1ohj2","vertical":"steps__vertical_1ohj2","interactive":"steps__interactive_1ohj2","disabled":"steps__disabled_1ohj2","text":"steps__text_1ohj2","indicator":"steps__indicator_1ohj2","option":"steps__option_1ohj2","dash":"steps__dash_1ohj2","size-16":"steps__size-16_1ohj2","size-8":"steps__size-8_1ohj2","completed":"steps__completed_1ohj2","focused":"steps__focused_1ohj2","selected":"steps__selected_1ohj2","checkbox":"steps__checkbox_1ohj2","dot":"steps__dot_1ohj2","error":"steps__error_1ohj2","unordered":"steps__unordered_1ohj2","completedIndicator":"steps__completedIndicator_1ohj2","fullWidth":"steps__fullWidth_1ohj2"};
21
20
  require('./index.css')
22
21
 
22
+ var SIZE_TO_CLASSNAME_MAP = {
23
+ 8: 'size-8',
24
+ 16: 'size-16',
25
+ 24: 'size-24',
26
+ };
23
27
  var Step = function (_a) {
24
28
  var _b, _c, _d, _e;
25
- var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep;
29
+ var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _f = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _f === void 0 ? 24 : _f;
26
30
  var stepRef = React.useRef(null);
27
31
  var focused = hooks.useFocus(stepRef, 'keyboard')[0];
28
32
  var handleButtonClick = function () {
@@ -70,7 +74,7 @@ var Step = function (_a) {
70
74
  return (React__default.default.createElement("div", { className: cn__default.default(styles.dash, (_a = {},
71
75
  _a[styles.vertical] = isVerticalAlign,
72
76
  _a[styles.completed] = isStepCompleted,
73
- _a)) }));
77
+ _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
74
78
  };
75
79
  return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
76
80
  _b[styles.completed] = isStepCompleted,
@@ -80,6 +84,7 @@ var Step = function (_a) {
80
84
  _b[styles.focused] = focused,
81
85
  _b[styles.vertical] = isVerticalAlign,
82
86
  _b[styles.interactive] = interactive,
87
+ _b[styles.fullWidth] = fullWidth && isVerticalAlign,
83
88
  _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
84
89
  React__default.default.createElement("div", { className: cn__default.default(styles.indicator, (_c = {},
85
90
  _c[styles.vertical] = isVerticalAlign,
@@ -93,6 +98,7 @@ var Step = function (_a) {
93
98
  isNotLastStep && isVerticalAlign && renderDash()),
94
99
  React__default.default.createElement("div", { className: cn__default.default(styles.text, (_e = {},
95
100
  _e[styles.interactive] = interactive,
101
+ _e[styles.fullWidth] = fullWidth && isVerticalAlign,
96
102
  _e)), onClick: handleTextClick }, children),
97
103
  isNotLastStep && !isVerticalAlign && renderDash()));
98
104
  };
package/components/step/index.css CHANGED
@@ -1,12 +1,12 @@
1
- /* hash: k7srz */
2
- :root {
1
+ /* hash: 1hf3o */
2
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #2288fa;
5
- --color-light-neutral-1500: #0e0e0e;
5
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
6
6
  --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
7
7
  --color-light-status-positive: #0cc44d;
8
- --color-light-text-primary: #0e0e0e;
9
- --color-light-text-primary-inverted: #fff;
8
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
9
+ --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
10
10
  --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
11
11
  --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
12
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,26 +30,26 @@
30
30
  } :root {
31
31
  --steps-option-svg-color: var(--color-light-status-positive);
32
32
  --steps-dash-border: 2px solid var(--color-light-status-positive);
33
- } .steps__step_2yi0h {
33
+ } .steps__step_1ohj2 {
34
34
  display: flex;
35
35
  outline: none
36
- } .steps__step_2yi0h:not(.steps__vertical_2yi0h) {
36
+ } .steps__step_1ohj2:not(.steps__vertical_1ohj2) {
37
37
  align-items: center;
38
- } .steps__step_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
38
+ } .steps__step_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
39
39
  cursor: pointer;
40
- } .steps__step_2yi0h.steps__disabled_2yi0h:hover .steps__text_2yi0h {
40
+ } .steps__step_1ohj2.steps__disabled_1ohj2:hover .steps__text_1ohj2 {
41
41
  background: unset;
42
- } .steps__step_2yi0h.steps__disabled_2yi0h .steps__indicator_2yi0h {
42
+ } .steps__step_1ohj2.steps__disabled_1ohj2 .steps__indicator_1ohj2 {
43
43
  cursor: unset;
44
- } .steps__indicator_2yi0h {
44
+ } .steps__indicator_1ohj2 {
45
45
  cursor: pointer;
46
46
  display: flex;
47
47
  align-items: center;
48
48
  margin-right: var(--gap-2xs)
49
- } .steps__indicator_2yi0h.steps__vertical_2yi0h {
49
+ } .steps__indicator_1ohj2.steps__vertical_1ohj2 {
50
50
  flex-direction: column;
51
51
  margin-right: var(--gap-xs);
52
- } .steps__option_2yi0h {
52
+ } .steps__option_1ohj2 {
53
53
  font-size: 14px;
54
54
  line-height: 20px;
55
55
  font-weight: 700;
@@ -62,25 +62,33 @@
62
62
  min-width: 24px;
63
63
  height: 24px;
64
64
  border-radius: var(--border-radius-circle)
65
- } .steps__option_2yi0h.steps__vertical_2yi0h {
65
+ } .steps__option_1ohj2.steps__vertical_1ohj2 {
66
66
  margin-top: var(--gap-xs);
67
- } .steps__dash_2yi0h {
67
+ } .steps__dash_1ohj2 {
68
68
  flex: 1 1 auto;
69
69
  min-width: 24px;
70
70
  border-top: 2px solid var(--color-light-neutral-translucent-300);
71
71
  margin-right: var(--gap-xs)
72
- } .steps__dash_2yi0h.steps__completed_2yi0h {
72
+ } .steps__dash_1ohj2.steps__size-16_1ohj2 {
73
+ min-width: 16px;
74
+ } .steps__dash_1ohj2.steps__size-8_1ohj2 {
75
+ min-width: 8px;
76
+ } .steps__dash_1ohj2.steps__completed_1ohj2 {
73
77
  border-top: var(--steps-dash-border);
74
- } .steps__dash_2yi0h.steps__vertical_2yi0h {
78
+ } .steps__dash_1ohj2.steps__vertical_1ohj2 {
75
79
  min-width: unset;
76
80
  min-height: 24px;
77
81
  margin-right: 0;
78
82
  margin-top: var(--gap-xs);
79
83
  border-left: 2px solid var(--color-light-neutral-translucent-300);
80
- border-top: none;
81
- } .steps__dash_2yi0h.steps__completed_2yi0h.steps__vertical_2yi0h {
84
+ border-top: none
85
+ } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-16_1ohj2 {
86
+ min-height: 16px;
87
+ } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-8_1ohj2 {
88
+ min-height: 8px;
89
+ } .steps__dash_1ohj2.steps__completed_1ohj2.steps__vertical_1ohj2 {
82
90
  border-left: var(--steps-dash-border);
83
- } .steps__text_2yi0h {
91
+ } .steps__text_1ohj2 {
84
92
  font-size: 16px;
85
93
  line-height: 24px;
86
94
  font-weight: 400;
@@ -90,19 +98,19 @@
90
98
  color: var(--color-light-text-primary);
91
99
  border-radius: var(--gap-xs);
92
100
  height: min-content
93
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
101
+ } .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
94
102
  background: var(--color-light-transparent-default-hover);
95
- } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):active {
103
+ } .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):active {
96
104
  background: var(--color-light-transparent-default-press);
97
- } .steps__focused_2yi0h {
105
+ } .steps__focused_1ohj2 {
98
106
  outline: var(--gap-3xs) solid var(--focus-color);
99
107
  outline-offset: var(--gap-3xs);
100
- } .steps__selected_2yi0h .steps__text_2yi0h {
108
+ } .steps__selected_1ohj2 .steps__text_1ohj2 {
101
109
  color: var(--color-light-text-primary);
102
- } .steps__selected_2yi0h .steps__option_2yi0h {
110
+ } .steps__selected_1ohj2 .steps__option_1ohj2 {
103
111
  color: var(--color-light-text-primary-inverted);
104
- background: var(--color-light-neutral-1500);
105
- } .steps__checkbox_2yi0h {
112
+ background: var(--color-light-neutral-translucent-1300);
113
+ } .steps__checkbox_1ohj2 {
106
114
  display: flex;
107
115
  justify-content: center;
108
116
  align-items: center;
@@ -110,18 +118,20 @@
110
118
  width: 20px;
111
119
  height: 20px;
112
120
  border: 2px solid var(--color-light-neutral-translucent-300);
113
- } .steps__dot_2yi0h {
121
+ } .steps__dot_1ohj2 {
114
122
  width: 10px;
115
123
  height: 10px;
116
124
  border-radius: var(--border-radius-circle);
117
125
  background: var(--color-light-neutral-translucent-300);
118
- } .steps__selected_2yi0h .steps__checkbox_2yi0h {
119
- border: 2px solid var(--color-light-neutral-1500)
120
- } .steps__selected_2yi0h .steps__checkbox_2yi0h .steps__dot_2yi0h {
121
- background: var(--color-light-neutral-1500);
122
- } .steps__option_2yi0h:not(.steps__error_2yi0h).steps__unordered_2yi0h {
126
+ } .steps__selected_1ohj2 .steps__checkbox_1ohj2 {
127
+ border: 2px solid var(--color-light-neutral-translucent-1300)
128
+ } .steps__selected_1ohj2 .steps__checkbox_1ohj2 .steps__dot_1ohj2 {
129
+ background: var(--color-light-neutral-translucent-1300);
130
+ } .steps__option_1ohj2:not(.steps__error_1ohj2).steps__unordered_1ohj2 {
123
131
  background: unset;
124
- } .steps__completedIndicator_2yi0h > [class*='positive'] {
132
+ } .steps__completedIndicator_1ohj2 > [class*='positive'] {
125
133
  color: var(--steps-option-svg-color);
126
134
  background-color: var(--steps-option-svg-color);
135
+ } .steps__fullWidth_1ohj2 {
136
+ width: 100%;
127
137
  }
package/components/step/index.js CHANGED
@@ -3,15 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_step_Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('classnames');
9
- require('@alfalab/hooks');
10
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
11
- require('@alfalab/icons-glyph/ClockMIcon');
12
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
13
- require('../step-indicator/Component.js');
14
- require('@alfalab/core-components-badge');
15
6
 
16
7
 
17
8
 
package/components/step-indicator/Component.js CHANGED
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"component":"steps__component_qiryz"};
14
+ var styles = {"component":"steps__component_1akb5"};
15
15
  require('./index.css')
16
16
 
17
17
  var StepIndicator = function (_a) {
package/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: yw9u7 */
2
- .steps__component_qiryz {
1
+ /* hash: 1w3kq */
2
+ .steps__component_1akb5 {
3
3
  padding: 0;
4
4
  }
package/components/step-indicator/index.js CHANGED
@@ -3,9 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_stepIndicator_Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('@alfalab/core-components-badge');
9
6
 
10
7
 
11
8
 
package/cssm/Component.d.ts CHANGED
@@ -38,6 +38,16 @@ type StepsProps = {
38
38
  * Включение / отключение интерактивности шагов
39
39
  */
40
40
  interactive?: boolean;
41
+ /**
42
+ * Растягивание шагов на всю ширину блока для вертикальной ориентации
43
+ * @default false
44
+ */
45
+ fullWidth?: boolean;
46
+ /**
47
+ * Минимальное расстояние между шагами
48
+ * @default 24
49
+ */
50
+ minSpaceBetweenSteps?: 8 | 16 | 24;
41
51
  /**
42
52
  * Кастомный метод для управления состоянием disabled шага и
43
53
  * возможностью перехода на этот шаг
package/cssm/Component.js CHANGED
@@ -6,15 +6,6 @@ var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var components_step_Component = require('./components/step/Component.js');
8
8
  var styles = require('./index.module.css');
9
- require('tslib');
10
- require('@alfalab/hooks');
11
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
- require('@alfalab/icons-glyph/ClockMIcon');
13
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
14
- require('./components/step-indicator/Component.js');
15
- require('@alfalab/core-components-badge/cssm');
16
- require('./components/step-indicator/index.module.css');
17
- require('./components/step/index.module.css');
18
9
 
19
10
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
20
11
 
@@ -24,8 +15,8 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
24
15
 
25
16
  var Steps = function (_a) {
26
17
  var _b;
27
- var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
28
- var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
18
+ var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
19
+ var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
29
20
  var stepsLength = React__default.default.Children.count(children);
30
21
  React.useEffect(function () {
31
22
  if (activeStepProp) {
@@ -54,7 +45,7 @@ var Steps = function (_a) {
54
45
  var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
55
46
  var isNotLastStep = stepsLength !== stepNumber;
56
47
  var isInteractive = !disabled && interactive;
57
- return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber }, step));
48
+ return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber, fullWidth: fullWidth, minSpaceBetweenSteps: minSpaceBetweenSteps }, step));
58
49
  })));
59
50
  };
60
51
 
package/cssm/components/step/Component.d.ts CHANGED
@@ -60,6 +60,16 @@ type StepProps = {
60
60
  * Указывает, является ли текущий шаг последним в списке
61
61
  */
62
62
  isNotLastStep?: boolean;
63
+ /**
64
+ * Маркер того, что шаг растягивается на всю ширину блока
65
+ * для вертикальной ориентации
66
+ */
67
+ fullWidth?: boolean;
68
+ /**
69
+ * Минимальное расстояние между шагами
70
+ * @default 24
71
+ */
72
+ minSpaceBetweenSteps?: 8 | 16 | 24;
63
73
  /**
64
74
  * Обработчик нажатия на текущей шаг
65
75
  * @param stepNumber - номер шага
package/cssm/components/step/Component.js CHANGED
@@ -11,8 +11,6 @@ var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
11
11
  var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
12
12
  var components_stepIndicator_Component = require('../step-indicator/Component.js');
13
13
  var styles = require('./index.module.css');
14
- require('@alfalab/core-components-badge/cssm');
15
- require('../step-indicator/index.module.css');
16
14
 
17
15
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
18
16
 
@@ -20,9 +18,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
19
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
22
20
 
21
+ var SIZE_TO_CLASSNAME_MAP = {
22
+ 8: 'size-8',
23
+ 16: 'size-16',
24
+ 24: 'size-24',
25
+ };
23
26
  var Step = function (_a) {
24
27
  var _b, _c, _d, _e;
25
- var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep;
28
+ var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _f = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _f === void 0 ? 24 : _f;
26
29
  var stepRef = React.useRef(null);
27
30
  var focused = hooks.useFocus(stepRef, 'keyboard')[0];
28
31
  var handleButtonClick = function () {
@@ -70,7 +73,7 @@ var Step = function (_a) {
70
73
  return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dash, (_a = {},
71
74
  _a[styles__default.default.vertical] = isVerticalAlign,
72
75
  _a[styles__default.default.completed] = isStepCompleted,
73
- _a)) }));
76
+ _a), styles__default.default[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
74
77
  };
75
78
  return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles__default.default.step, (_b = {},
76
79
  _b[styles__default.default.completed] = isStepCompleted,
@@ -80,6 +83,7 @@ var Step = function (_a) {
80
83
  _b[styles__default.default.focused] = focused,
81
84
  _b[styles__default.default.vertical] = isVerticalAlign,
82
85
  _b[styles__default.default.interactive] = interactive,
86
+ _b[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
83
87
  _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
84
88
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.indicator, (_c = {},
85
89
  _c[styles__default.default.vertical] = isVerticalAlign,
@@ -93,6 +97,7 @@ var Step = function (_a) {
93
97
  isNotLastStep && isVerticalAlign && renderDash()),
94
98
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.text, (_e = {},
95
99
  _e[styles__default.default.interactive] = interactive,
100
+ _e[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
96
101
  _e)), onClick: handleTextClick }, children),
97
102
  isNotLastStep && !isVerticalAlign && renderDash()));
98
103
  };
package/cssm/components/step/index.js CHANGED
@@ -3,17 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_step_Component = require('./Component.js');
6
- require('tslib');
7
- require('react');
8
- require('classnames');
9
- require('@alfalab/hooks');
10
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
11
- require('@alfalab/icons-glyph/ClockMIcon');
12
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
13
- require('../step-indicator/Component.js');
14
- require('@alfalab/core-components-badge/cssm');
15
- require('../step-indicator/index.module.css');
16
- require('./index.module.css');
17
6
 
18
7
 
19
8
 
package/cssm/components/step/index.module.css CHANGED
@@ -1,11 +1,11 @@
1
- :root {
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
3
  --color-light-border-link: #2288fa;
4
- --color-light-neutral-1500: #0e0e0e;
4
+ --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
5
5
  --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
6
6
  --color-light-status-positive: #0cc44d;
7
- --color-light-text-primary: #0e0e0e;
8
- --color-light-text-primary-inverted: #fff;
7
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
8
+ --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
9
9
  --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
10
10
  --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
11
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -68,7 +68,11 @@
68
68
  min-width: 24px;
69
69
  border-top: 2px solid var(--color-light-neutral-translucent-300);
70
70
  margin-right: var(--gap-xs)
71
- } .dash.completed {
71
+ } .dash.size-16 {
72
+ min-width: 16px;
73
+ } .dash.size-8 {
74
+ min-width: 8px;
75
+ } .dash.completed {
72
76
  border-top: var(--steps-dash-border);
73
77
  } .dash.vertical {
74
78
  min-width: unset;
@@ -76,8 +80,12 @@
76
80
  margin-right: 0;
77
81
  margin-top: var(--gap-xs);
78
82
  border-left: 2px solid var(--color-light-neutral-translucent-300);
79
- border-top: none;
80
- } .dash.completed.vertical {
83
+ border-top: none
84
+ } .dash.vertical.size-16 {
85
+ min-height: 16px;
86
+ } .dash.vertical.size-8 {
87
+ min-height: 8px;
88
+ } .dash.completed.vertical {
81
89
  border-left: var(--steps-dash-border);
82
90
  } .text {
83
91
  font-size: 16px;
@@ -100,7 +108,7 @@
100
108
  color: var(--color-light-text-primary);
101
109
  } .selected .option {
102
110
  color: var(--color-light-text-primary-inverted);
103
- background: var(--color-light-neutral-1500);
111
+ background: var(--color-light-neutral-translucent-1300);
104
112
  } .checkbox {
105
113
  display: flex;
106
114
  justify-content: center;
@@ -115,12 +123,14 @@
115
123
  border-radius: var(--border-radius-circle);
116
124
  background: var(--color-light-neutral-translucent-300);
117
125
  } .selected .checkbox {
118
- border: 2px solid var(--color-light-neutral-1500)
126
+ border: 2px solid var(--color-light-neutral-translucent-1300)
119
127
  } .selected .checkbox .dot {
120
- background: var(--color-light-neutral-1500);
128
+ background: var(--color-light-neutral-translucent-1300);
121
129
  } .option:not(.error).unordered {
122
130
  background: unset;
123
131
  } .completedIndicator > [class*='positive'] {
124
132
  color: var(--steps-option-svg-color);
125
133
  background-color: var(--steps-option-svg-color);
134
+ } .fullWidth {
135
+ width: 100%;
126
136
  }
package/cssm/components/step-indicator/index.js CHANGED
@@ -3,10 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var components_stepIndicator_Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('@alfalab/core-components-badge/cssm');
9
- require('./index.module.css');
10
6
 
11
7
 
12
8
 
package/cssm/index.js CHANGED
@@ -3,19 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Component = require('./Component.js');
6
- require('react');
7
- require('classnames');
8
- require('./components/step/Component.js');
9
- require('tslib');
10
- require('@alfalab/hooks');
11
- require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
- require('@alfalab/icons-glyph/ClockMIcon');
13
- require('@alfalab/icons-glyph/ExclamationCircleMIcon');
14
- require('./components/step-indicator/Component.js');
15
- require('@alfalab/core-components-badge/cssm');
16
- require('./components/step-indicator/index.module.css');
17
- require('./components/step/index.module.css');
18
- require('./index.module.css');
19
6
 
20
7
 
21
8
 
package/cssm/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- :root {
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root {
package/esm/Component.d.ts CHANGED
@@ -38,6 +38,16 @@ type StepsProps = {
38
38
  * Включение / отключение интерактивности шагов
39
39
  */
40
40
  interactive?: boolean;
41
+ /**
42
+ * Растягивание шагов на всю ширину блока для вертикальной ориентации
43
+ * @default false
44
+ */
45
+ fullWidth?: boolean;
46
+ /**
47
+ * Минимальное расстояние между шагами
48
+ * @default 24
49
+ */
50
+ minSpaceBetweenSteps?: 8 | 16 | 24;
41
51
  /**
42
52
  * Кастомный метод для управления состоянием disabled шага и
43
53
  * возможностью перехода на этот шаг