@alfalab/core-components-steps 1.5.1 → 1.6.0

package/modern/index.js

@@ -1,10 +1 @@
 export { Steps } from './Component.js';
-import 'react';
-import 'classnames';
-import './components/step/Component.js';
-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/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "",
     "keywords": [],
     "license": "MIT",

package/src/Component.tsx

@@ -50,6 +50,18 @@ export type StepsProps = {
      */
     interactive?: boolean;
 
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
+
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг
@@ -114,6 +126,8 @@ export const Steps: React.FC<StepsProps> = ({
     isVerticalAlign = false,
     ordered = true,
     interactive = true,
+    fullWidth = false,
+    minSpaceBetweenSteps = 24,
     checkIsStepDisabled,
     checkIsStepError,
     checkIsStepWarning,
@@ -180,6 +194,8 @@ export const Steps: React.FC<StepsProps> = ({
                         isVerticalAlign={isVerticalAlign}
                         isNotLastStep={isNotLastStep}
                         key={stepNumber}
+                        fullWidth={fullWidth}
+                        minSpaceBetweenSteps={minSpaceBetweenSteps}
                     >
                         {step}
                     </Step>

package/src/components/step/Component.tsx

@@ -82,6 +82,18 @@ export type StepProps = {
      */
     isNotLastStep?: boolean;
 
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
+
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага
@@ -89,6 +101,12 @@ export type StepProps = {
     onClick: (stepNumber: number) => void;
 };
 
+const SIZE_TO_CLASSNAME_MAP = {
+    8: 'size-8',
+    16: 'size-16',
+    24: 'size-24',
+};
+
 export const Step: React.FC<StepProps> = ({
     children,
     stepNumber,
@@ -105,6 +123,8 @@ export const Step: React.FC<StepProps> = ({
     interactive,
     isVerticalAlign,
     isNotLastStep,
+    fullWidth,
+    minSpaceBetweenSteps = 24,
 }) => {
     const stepRef = useRef<HTMLDivElement>(null);
 
@@ -166,10 +186,14 @@ export const Step: React.FC<StepProps> = ({
 
     const renderDash = () => (
         <div
-            className={cn(styles.dash, {
-                [styles.vertical]: isVerticalAlign,
-                [styles.completed]: isStepCompleted,
-            })}
+            className={cn(
+                styles.dash,
+                {
+                    [styles.vertical]: isVerticalAlign,
+                    [styles.completed]: isStepCompleted,
+                },
+                styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]],
+            )}
         />
     );
 
@@ -186,6 +210,7 @@ export const Step: React.FC<StepProps> = ({
                 [styles.focused]: focused,
                 [styles.vertical]: isVerticalAlign,
                 [styles.interactive]: interactive,
+                [styles.fullWidth]: fullWidth && isVerticalAlign,
             })}
             onClick={handleButtonClick}
             onKeyDown={handleKeyDown}
@@ -211,6 +236,7 @@ export const Step: React.FC<StepProps> = ({
             <div
                 className={cn(styles.text, {
                     [styles.interactive]: interactive,
+                    [styles.fullWidth]: fullWidth && isVerticalAlign,
                 })}
                 onClick={handleTextClick}
             >

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

@@ -65,6 +65,14 @@
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-xs);
 
+    &.size-16 {
+        min-width: 16px;
+    }
+
+    &.size-8 {
+        min-width: 8px;
+    }
+
     &.completed {
         border-top: var(--steps-dash-border);
     }
@@ -76,6 +84,14 @@
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none;
+
+        &.size-16 {
+            min-height: 16px;
+        }
+
+        &.size-8 {
+            min-height: 8px;
+        }
     }
 
     &.completed.vertical {
@@ -152,3 +168,7 @@
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }
+
+.fullWidth {
+    width: 100%;
+}