@alfalab/core-components-steps 1.5.0 → 1.6.0

package/Component.d.ts

@@ -38,6 +38,16 @@ type StepsProps = {
      * Включение / отключение интерактивности шагов
      */
     interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг

package/Component.js

@@ -5,26 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var components_step_Component = require('./components/step/Component.js');
-require('tslib');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('./components/step-indicator/Component.js');
-require('@alfalab/core-components-badge');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"steps__component_1o289","vertical":"steps__vertical_1o289"};
+var styles = {"component":"steps__component_1gfbz","vertical":"steps__vertical_1gfbz"};
 require('./index.css')
 
 var Steps = function (_a) {
     var _b;
-    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;
-    var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    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;
+    var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
     React.useEffect(function () {
         if (activeStepProp) {
@@ -53,7 +46,7 @@ var Steps = function (_a) {
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        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));
+        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));
     })));
 };
 

package/components/step/Component.d.ts

@@ -60,6 +60,16 @@ type StepProps = {
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага

package/components/step/Component.js

@@ -10,19 +10,23 @@ var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
 var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_stepIndicator_Component = require('../step-indicator/Component.js');
-require('@alfalab/core-components-badge');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"step":"steps__step_1fcm4","vertical":"steps__vertical_1fcm4","interactive":"steps__interactive_1fcm4","disabled":"steps__disabled_1fcm4","text":"steps__text_1fcm4","indicator":"steps__indicator_1fcm4","option":"steps__option_1fcm4","dash":"steps__dash_1fcm4","completed":"steps__completed_1fcm4","focused":"steps__focused_1fcm4","selected":"steps__selected_1fcm4","checkbox":"steps__checkbox_1fcm4","dot":"steps__dot_1fcm4","error":"steps__error_1fcm4","unordered":"steps__unordered_1fcm4","completedIndicator":"steps__completedIndicator_1fcm4"};
+var styles = {"step":"steps__step_xa3vu","vertical":"steps__vertical_xa3vu","interactive":"steps__interactive_xa3vu","disabled":"steps__disabled_xa3vu","text":"steps__text_xa3vu","indicator":"steps__indicator_xa3vu","option":"steps__option_xa3vu","dash":"steps__dash_xa3vu","size-16":"steps__size-16_xa3vu","size-8":"steps__size-8_xa3vu","completed":"steps__completed_xa3vu","focused":"steps__focused_xa3vu","selected":"steps__selected_xa3vu","checkbox":"steps__checkbox_xa3vu","dot":"steps__dot_xa3vu","error":"steps__error_xa3vu","unordered":"steps__unordered_xa3vu","completedIndicator":"steps__completedIndicator_xa3vu","fullWidth":"steps__fullWidth_xa3vu"};
 require('./index.css')
 
+var SIZE_TO_CLASSNAME_MAP = {
+    8: 'size-8',
+    16: 'size-16',
+    24: 'size-24',
+};
 var Step = function (_a) {
     var _b, _c, _d, _e;
-    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;
+    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;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
@@ -70,7 +74,7 @@ var Step = function (_a) {
         return (React__default.default.createElement("div", { className: cn__default.default(styles.dash, (_a = {},
                 _a[styles.vertical] = isVerticalAlign,
                 _a[styles.completed] = isStepCompleted,
-                _a)) }));
+                _a), styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
     };
     return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
             _b[styles.completed] = isStepCompleted,
@@ -80,6 +84,7 @@ var Step = function (_a) {
             _b[styles.focused] = focused,
             _b[styles.vertical] = isVerticalAlign,
             _b[styles.interactive] = interactive,
+            _b[styles.fullWidth] = fullWidth && isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React__default.default.createElement("div", { className: cn__default.default(styles.indicator, (_c = {},
                 _c[styles.vertical] = isVerticalAlign,
@@ -93,6 +98,7 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React__default.default.createElement("div", { className: cn__default.default(styles.text, (_e = {},
                 _e[styles.interactive] = interactive,
+                _e[styles.fullWidth] = fullWidth && isVerticalAlign,
                 _e)), onClick: handleTextClick }, children),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/components/step/index.css

@@ -1,5 +1,5 @@
-/* hash: 1yc90 */
-:root {
+/* hash: 1900i */
+: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 */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
     --color-light-neutral-1500: #0e0e0e;
@@ -30,26 +30,26 @@
 } :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_1fcm4 {
+} .steps__step_xa3vu {
     display: flex;
     outline: none
-} .steps__step_1fcm4:not(.steps__vertical_1fcm4) {
+} .steps__step_xa3vu:not(.steps__vertical_xa3vu) {
         align-items: center;
-    } .steps__step_1fcm4.steps__interactive_1fcm4:not(.steps__disabled_1fcm4):hover {
+    } .steps__step_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
     cursor: pointer;
-} .steps__step_1fcm4.steps__disabled_1fcm4:hover .steps__text_1fcm4 {
+} .steps__step_xa3vu.steps__disabled_xa3vu:hover .steps__text_xa3vu {
         background: unset;
-    } .steps__step_1fcm4.steps__disabled_1fcm4 .steps__indicator_1fcm4 {
+    } .steps__step_xa3vu.steps__disabled_xa3vu .steps__indicator_xa3vu {
         cursor: unset;
-    } .steps__indicator_1fcm4 {
+    } .steps__indicator_xa3vu {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-} .steps__indicator_1fcm4.steps__vertical_1fcm4 {
+} .steps__indicator_xa3vu.steps__vertical_xa3vu {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    } .steps__option_1fcm4 {
+    } .steps__option_xa3vu {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -62,25 +62,33 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_1fcm4.steps__vertical_1fcm4 {
+} .steps__option_xa3vu.steps__vertical_xa3vu {
         margin-top: var(--gap-xs);
-    } .steps__dash_1fcm4 {
+    } .steps__dash_xa3vu {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-xs)
-} .steps__dash_1fcm4.steps__completed_1fcm4 {
+} .steps__dash_xa3vu.steps__size-16_xa3vu {
+        min-width: 16px;
+    } .steps__dash_xa3vu.steps__size-8_xa3vu {
+        min-width: 8px;
+    } .steps__dash_xa3vu.steps__completed_xa3vu {
         border-top: var(--steps-dash-border);
-    } .steps__dash_1fcm4.steps__vertical_1fcm4 {
+    } .steps__dash_xa3vu.steps__vertical_xa3vu {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none;
-    } .steps__dash_1fcm4.steps__completed_1fcm4.steps__vertical_1fcm4 {
+        border-top: none
+    } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-16_xa3vu {
+            min-height: 16px;
+        } .steps__dash_xa3vu.steps__vertical_xa3vu.steps__size-8_xa3vu {
+            min-height: 8px;
+        } .steps__dash_xa3vu.steps__completed_xa3vu.steps__vertical_xa3vu {
         border-left: var(--steps-dash-border);
-    } .steps__text_1fcm4 {
+    } .steps__text_xa3vu {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -90,19 +98,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-} .steps__text_1fcm4.steps__interactive_1fcm4:not(.steps__disabled_1fcm4):hover {
+} .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_1fcm4.steps__interactive_1fcm4:not(.steps__disabled_1fcm4):active {
+        } .steps__text_xa3vu.steps__interactive_xa3vu:not(.steps__disabled_xa3vu):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_1fcm4 {
+        } .steps__focused_xa3vu {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-} .steps__selected_1fcm4 .steps__text_1fcm4 {
+} .steps__selected_xa3vu .steps__text_xa3vu {
         color: var(--color-light-text-primary);
-    } .steps__selected_1fcm4 .steps__option_1fcm4 {
+    } .steps__selected_xa3vu .steps__option_xa3vu {
         color: var(--color-light-text-primary-inverted);
         background: var(--color-light-neutral-1500);
-    } .steps__checkbox_1fcm4 {
+    } .steps__checkbox_xa3vu {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -110,18 +118,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_1fcm4 {
+} .steps__dot_xa3vu {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_1fcm4 .steps__checkbox_1fcm4 {
+} .steps__selected_xa3vu .steps__checkbox_xa3vu {
     border: 2px solid var(--color-light-neutral-1500)
-} .steps__selected_1fcm4 .steps__checkbox_1fcm4 .steps__dot_1fcm4 {
+} .steps__selected_xa3vu .steps__checkbox_xa3vu .steps__dot_xa3vu {
         background: var(--color-light-neutral-1500);
-    } .steps__option_1fcm4:not(.steps__error_1fcm4).steps__unordered_1fcm4 {
+    } .steps__option_xa3vu:not(.steps__error_xa3vu).steps__unordered_xa3vu {
     background: unset;
-} .steps__completedIndicator_1fcm4 > [class*='positive'] {
+} .steps__completedIndicator_xa3vu > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
+} .steps__fullWidth_xa3vu {
+    width: 100%;
 }

package/components/step/index.js

@@ -3,15 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_step_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('../step-indicator/Component.js');
-require('@alfalab/core-components-badge');
 
 
 

package/components/step-indicator/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"steps__component_11fe7"};
+var styles = {"component":"steps__component_jcvzd"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

package/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: dzm0y */
-.steps__component_11fe7 {
+/* hash: 1nohl */
+.steps__component_jcvzd {
     padding: 0;
 }

package/components/step-indicator/index.js

@@ -3,9 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_stepIndicator_Component = require('./Component.js');
-require('react');
-require('classnames');
-require('@alfalab/core-components-badge');
 
 
 

package/cssm/Component.d.ts

@@ -38,6 +38,16 @@ type StepsProps = {
      * Включение / отключение интерактивности шагов
      */
     interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг

package/cssm/Component.js

@@ -6,15 +6,6 @@ var React = require('react');
 var cn = require('classnames');
 var components_step_Component = require('./components/step/Component.js');
 var styles = require('./index.module.css');
-require('tslib');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('./components/step-indicator/Component.js');
-require('@alfalab/core-components-badge/cssm');
-require('./components/step-indicator/index.module.css');
-require('./components/step/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -24,8 +15,8 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Steps = function (_a) {
     var _b;
-    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;
-    var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    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;
+    var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
     React.useEffect(function () {
         if (activeStepProp) {
@@ -54,7 +45,7 @@ var Steps = function (_a) {
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        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));
+        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));
     })));
 };
 

package/cssm/components/step/Component.d.ts

@@ -60,6 +60,16 @@ type StepProps = {
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага

package/cssm/components/step/Component.js

@@ -11,8 +11,6 @@ var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
 var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var components_stepIndicator_Component = require('../step-indicator/Component.js');
 var styles = require('./index.module.css');
-require('@alfalab/core-components-badge/cssm');
-require('../step-indicator/index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -20,9 +18,14 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
+var SIZE_TO_CLASSNAME_MAP = {
+    8: 'size-8',
+    16: 'size-16',
+    24: 'size-24',
+};
 var Step = function (_a) {
     var _b, _c, _d, _e;
-    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;
+    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;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
@@ -70,7 +73,7 @@ var Step = function (_a) {
         return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dash, (_a = {},
                 _a[styles__default.default.vertical] = isVerticalAlign,
                 _a[styles__default.default.completed] = isStepCompleted,
-                _a)) }));
+                _a), styles__default.default[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
     };
     return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles__default.default.step, (_b = {},
             _b[styles__default.default.completed] = isStepCompleted,
@@ -80,6 +83,7 @@ var Step = function (_a) {
             _b[styles__default.default.focused] = focused,
             _b[styles__default.default.vertical] = isVerticalAlign,
             _b[styles__default.default.interactive] = interactive,
+            _b[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.indicator, (_c = {},
                 _c[styles__default.default.vertical] = isVerticalAlign,
@@ -93,6 +97,7 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.text, (_e = {},
                 _e[styles__default.default.interactive] = interactive,
+                _e[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
                 _e)), onClick: handleTextClick }, children),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/cssm/components/step/index.js

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_step_Component = require('./Component.js');
-require('tslib');
-require('react');
-require('classnames');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('../step-indicator/Component.js');
-require('@alfalab/core-components-badge/cssm');
-require('../step-indicator/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/components/step/index.module.css

@@ -1,4 +1,4 @@
-:root {
+: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 */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
     --color-light-neutral-1500: #0e0e0e;
@@ -68,7 +68,11 @@
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-xs)
-} .dash.completed {
+} .dash.size-16 {
+        min-width: 16px;
+    } .dash.size-8 {
+        min-width: 8px;
+    } .dash.completed {
         border-top: var(--steps-dash-border);
     } .dash.vertical {
         min-width: unset;
@@ -76,8 +80,12 @@
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none;
-    } .dash.completed.vertical {
+        border-top: none
+    } .dash.vertical.size-16 {
+            min-height: 16px;
+        } .dash.vertical.size-8 {
+            min-height: 8px;
+        } .dash.completed.vertical {
         border-left: var(--steps-dash-border);
     } .text {
     font-size: 16px;
@@ -123,4 +131,6 @@
 } .completedIndicator > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
+} .fullWidth {
+    width: 100%;
 }

package/cssm/components/step-indicator/index.js

@@ -3,10 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_stepIndicator_Component = require('./Component.js');
-require('react');
-require('classnames');
-require('@alfalab/core-components-badge/cssm');
-require('./index.module.css');
 
 
 

package/cssm/index.js

@@ -3,19 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
-require('react');
-require('classnames');
-require('./components/step/Component.js');
-require('tslib');
-require('@alfalab/hooks');
-require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
-require('./components/step-indicator/Component.js');
-require('@alfalab/core-components-badge/cssm');
-require('./components/step-indicator/index.module.css');
-require('./components/step/index.module.css');
-require('./index.module.css');
 
 
 

package/cssm/index.module.css

@@ -1,4 +1,4 @@
-:root {
+: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 */
 } /* 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 */
 } :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 */
 } :root {

package/esm/Component.d.ts

@@ -38,6 +38,16 @@ type StepsProps = {
      * Включение / отключение интерактивности шагов
      */
     interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг

package/esm/Component.js

@@ -1,21 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
-import 'tslib';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import './components/step-indicator/Component.js';
-import '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_1o289","vertical":"steps__vertical_1o289"};
+var styles = {"component":"steps__component_1gfbz","vertical":"steps__vertical_1gfbz"};
 require('./index.css')
 
 var Steps = function (_a) {
     var _b;
-    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;
-    var _h = useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
+    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;
+    var _k = useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React.Children.count(children);
     useEffect(function () {
         if (activeStepProp) {
@@ -44,7 +37,7 @@ var Steps = function (_a) {
         var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
         var isNotLastStep = stepsLength !== stepNumber;
         var isInteractive = !disabled && interactive;
-        return (React.createElement(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));
+        return (React.createElement(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));
     })));
 };
 

package/esm/components/step/Component.d.ts

@@ -60,6 +60,16 @@ type StepProps = {
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага