@alfalab/core-components-steps 1.7.5 → 1.8.0

package/moderncssm/components/step/Component.js

@@ -1,18 +1,15 @@
 import React, { useRef } from 'react';
 import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { useFocus } from '@alfalab/hooks';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
+import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
 import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { StepIndicator } from '../step-indicator/Component.js';
 import styles from './index.module.css';
 
-const SIZE_TO_CLASSNAME_MAP = {
-    8: 'size-8',
-    16: 'size-16',
-    24: 'size-24',
-};
-const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, }) => {
+const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isCriticalError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, fullWidth, minSpaceBetweenSteps = 24, completedDashColor, dataTestId, }) => {
     const stepRef = useRef(null);
     const [focused] = useFocus(stepRef, 'keyboard');
     const handleButtonClick = () => {
@@ -34,6 +31,9 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
         if (customStepIndicator) {
             return React.createElement(StepIndicator, { ...customStepIndicator });
         }
+        if (isCriticalError) {
+            return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(CrossCompactMIcon, null) });
+        }
         if (isError) {
             return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, null) });
         }
@@ -55,11 +55,21 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
         }
         return stepNumber;
     };
+    const getCustomDashColor = () => {
+        if (isStepCompleted && completedDashColor) {
+            return {
+                borderColor: completedDashColor,
+            };
+        }
+        return {};
+    };
     const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
             [styles.vertical]: isVerticalAlign,
             [styles.completed]: isStepCompleted,
-        }, styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]]) }));
-    return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
+        }), style: {
+            ...getCustomDashColor(),
+        } }));
+    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'step'), role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
             [styles.completed]: isStepCompleted,
             [styles.error]: isError,
             [styles.selected]: isSelected,
@@ -68,6 +78,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
             [styles.vertical]: isVerticalAlign,
             [styles.interactive]: interactive,
             [styles.fullWidth]: fullWidth && isVerticalAlign,
+            [styles.horizontal]: !isVerticalAlign,
         }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React.createElement("div", { className: cn(styles.indicator, {
                 [styles.vertical]: isVerticalAlign,
@@ -79,10 +90,13 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
                     [styles.error]: isError,
                 }) }, getStepIndicator()),
             isNotLastStep && isVerticalAlign && renderDash()),
-        React.createElement("div", { className: cn(styles.text, {
-                [styles.interactive]: interactive,
-                [styles.fullWidth]: fullWidth && isVerticalAlign,
-            }), onClick: handleTextClick }, children),
+        React.createElement("div", { className: cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {
+                [styles.vertical]: isVerticalAlign,
+            }) },
+            React.createElement("div", { className: cn(styles.text, {
+                    [styles.interactive]: interactive,
+                    [styles.fullWidth]: fullWidth && isVerticalAlign,
+                }), onClick: handleTextClick }, children)),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };
 

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

@@ -10,6 +10,10 @@
     outline: none
 }
 
+.step.horizontal {
+        flex-grow: 1;
+    }
+
 .step:not(.vertical) {
         align-items: center;
     }
@@ -64,39 +68,35 @@
     margin-right: var(--gap-8)
 }
 
-.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;
-        min-height: 24px;
+        min-height: 8px;
         margin-right: var(--gap-0);
         margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none
+        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);
     }
 
+.textWrapper.vertical {
+        min-height: 48px
+    }
+
+.textWrapper.vertical.gap-24 {
+            margin-bottom: var(--gap-8);
+        }
+
+.textWrapper.vertical.gap-32 {
+            margin-bottom: var(--gap-16);
+        }
+
 .text {
     font-size: 16px;
     line-height: 24px;

package/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getStepsTestIds } from "../utils/getStepsTestIds";

package/moderncssm/shared/index.js

@@ -0,0 +1 @@
+export { getStepsTestIds } from '../utils/getStepsTestIds.js';

package/moderncssm/types/common-props.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+/** Обобщенный набор типов который подходит для Steps, но также прокинут в дочерний Step */
+type CommonProps = {
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: ReactNode;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами для горизонтального расположения компонента
+     * @default 24
+     * @description Значение 8 устарело и будет удалено в будущих версиях. Используйте 16, 24 или 32.
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24 | 32;
+    /**
+     * Цвет тире выполненного шага
+     */
+    completedDashColor?: string;
+};
+export { CommonProps };

package/moderncssm/types/common-props.js

@@ -0,0 +1 @@
+

package/moderncssm/utils/getStepsTestIds.d.ts

@@ -0,0 +1,5 @@
+declare function getStepsTestIds(dataTestId: string): {
+    steps: string;
+    step: string;
+};
+export { getStepsTestIds };

package/moderncssm/utils/getStepsTestIds.js

@@ -0,0 +1,10 @@
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+
+function getStepsTestIds(dataTestId) {
+    return {
+        steps: dataTestId,
+        step: getDataTestId(dataTestId, 'step'),
+    };
+}
+
+export { getStepsTestIds };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.7.5",
+    "version": "1.8.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -16,11 +16,12 @@
     },
     "dependencies": {
         "@alfalab/core-components-badge": "^5.6.4",
+        "@alfalab/core-components-shared": "^0.16.0",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.210.0",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.7.0",
-    "varsVersion": "9.16.0"
+    "themesVersion": "13.7.1",
+    "varsVersion": "9.18.0"
 }

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { getStepsTestIds } from "../utils/getStepsTestIds";

package/shared/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils_getStepsTestIds = require('../utils/getStepsTestIds.js');
+
+
+
+exports.getStepsTestIds = utils_getStepsTestIds.getStepsTestIds;

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/Component.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode, useState } from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
 
 import { Step } from './components/step';
 import { StepIndicatorProps } from './components/step-indicator';
+import { CommonProps } from './types/common-props';
 
 import styles from './index.module.css';
 
@@ -12,11 +13,6 @@ export type StepsProps = {
      */
     className?: string;
 
-    /**
-     * Дочерние элементы
-     */
-    children: ReactNode;
-
     /**
      * Активный шаг, указанный по умолчанию
      * @default 1
@@ -34,34 +30,6 @@ export type StepsProps = {
      */
     isMarkCompletedSteps?: boolean;
 
-    /**
-     * Управление ориентацией компонента
-     * @default false
-     */
-    isVerticalAlign?: boolean;
-
-    /**
-     * Управление отображением номера шага
-     */
-    ordered?: boolean;
-
-    /**
-     * Включение / отключение интерактивности шагов
-     */
-    interactive?: boolean;
-
-    /**
-     * Растягивание шагов на всю ширину блока для вертикальной ориентации
-     * @default false
-     */
-    fullWidth?: boolean;
-
-    /**
-     * Минимальное расстояние между шагами
-     * @default 24
-     */
-    minSpaceBetweenSteps?: 8 | 16 | 24;
-
     /**
      * Кастомный метод для управления состоянием disabled шага и
      * возможностью перехода на этот шаг
@@ -77,6 +45,13 @@ export type StepsProps = {
      */
     checkIsStepError?: (stepNumber: number) => boolean;
 
+    /**
+     * Кастомный метод для управления состоянием шага criticalError
+     * @param stepNumber - номер шага
+     * @return Флаг состояния error
+     */
+    checkIsStepCriticalError?: (stepNumber: number) => boolean;
+
     /**
      * Кастомный метод для управления состоянием шага warning
      * @param stepNumber - номер шага
@@ -110,12 +85,7 @@ export type StepsProps = {
      * @param stepNumber - номер активного шага
      */
     onChange?: (stepNumber: number) => void;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+} & CommonProps;
 
 export const Steps: React.FC<StepsProps> = ({
     className,
@@ -130,12 +100,14 @@ export const Steps: React.FC<StepsProps> = ({
     minSpaceBetweenSteps = 24,
     checkIsStepDisabled,
     checkIsStepError,
+    checkIsStepCriticalError,
     checkIsStepWarning,
     checkIsStepWaiting,
     checkIsStepPositive,
     checkIsStepCustom,
     onChange,
     dataTestId,
+    completedDashColor,
 }) => {
     const uncontrolled = activeStepProp === undefined;
     const [activeStep, setActiveStep] = useState(defaultActiveStep);
@@ -170,6 +142,9 @@ export const Steps: React.FC<StepsProps> = ({
                 const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
                 const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
                 const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
+                const isCriticalError = checkIsStepCriticalError
+                    ? checkIsStepCriticalError(stepNumber)
+                    : false;
                 const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
                 const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
                 const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
@@ -184,6 +159,7 @@ export const Steps: React.FC<StepsProps> = ({
                         disabled={disabled}
                         isPositive={isPositive}
                         isError={isError}
+                        isCriticalError={isCriticalError}
                         isWarning={isWarning}
                         isWaiting={isWaiting}
                         customStepIndicator={customStepIndicator}
@@ -195,6 +171,8 @@ export const Steps: React.FC<StepsProps> = ({
                         key={stepNumber}
                         fullWidth={fullWidth}
                         minSpaceBetweenSteps={minSpaceBetweenSteps}
+                        completedDashColor={completedDashColor}
+                        dataTestId={dataTestId}
                     >
                         {step}
                     </Step>

package/src/components/step/Component.tsx

@@ -1,21 +1,19 @@
-import React, { ReactNode, useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import cn from 'classnames';
 
+import { getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
+import { CrossCompactMIcon } from '@alfalab/icons-glyph/CrossCompactMIcon';
 import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 
+import { CommonProps } from '../../types/common-props';
 import { StepIndicator, StepIndicatorProps } from '../step-indicator';
 
 import styles from './index.module.css';
 
-export type StepProps = {
-    /**
-     * Название шага
-     */
-    children: ReactNode;
-
+type StepProps = {
     /**
      * Номер шага
      */
@@ -31,16 +29,6 @@ export type StepProps = {
      */
     disabled: boolean;
 
-    /**
-     * Управление отображением номера шага
-     */
-    ordered?: boolean;
-
-    /**
-     * Включение / отключение интерактивности шагов
-     */
-    interactive?: boolean;
-
     /**
      * Маркер того, что текущий шаг находится в состоянии "Positive"
      */
@@ -51,6 +39,11 @@ export type StepProps = {
      */
     isError: boolean;
 
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "isCriticalError"
+     */
+    isCriticalError: boolean;
+
     /**
      * Маркер того, что текущий шаг находится в состоянии "Warning"
      */
@@ -71,43 +64,19 @@ export type StepProps = {
      */
     customStepIndicator?: StepIndicatorProps | null;
 
-    /**
-     * Управление ориентацией компонента
-     * @default false
-     */
-    isVerticalAlign?: boolean;
-
     /**
      * Указывает, является ли текущий шаг последним в списке
      */
     isNotLastStep?: boolean;
 
-    /**
-     * Маркер того, что шаг растягивается на всю ширину блока
-     * для вертикальной ориентации
-     */
-    fullWidth?: boolean;
-
-    /**
-     * Минимальное расстояние между шагами
-     * @default 24
-     */
-    minSpaceBetweenSteps?: 8 | 16 | 24;
-
     /**
      * Обработчик нажатия на текущей шаг
      * @param stepNumber - номер шага
      */
     onClick: (stepNumber: number) => void;
-};
+} & CommonProps;
 
-const SIZE_TO_CLASSNAME_MAP = {
-    8: 'size-8',
-    16: 'size-16',
-    24: 'size-24',
-};
-
-export const Step: React.FC<StepProps> = ({
+export const Step: FC<StepProps> = ({
     children,
     stepNumber,
     isSelected,
@@ -115,6 +84,7 @@ export const Step: React.FC<StepProps> = ({
     ordered,
     isPositive,
     isError,
+    isCriticalError,
     isWarning,
     isWaiting,
     customStepIndicator,
@@ -125,6 +95,8 @@ export const Step: React.FC<StepProps> = ({
     isNotLastStep,
     fullWidth,
     minSpaceBetweenSteps = 24,
+    completedDashColor,
+    dataTestId,
 }) => {
     const stepRef = useRef<HTMLDivElement>(null);
 
@@ -152,6 +124,9 @@ export const Step: React.FC<StepProps> = ({
         if (customStepIndicator) {
             return <StepIndicator {...customStepIndicator} />;
         }
+        if (isCriticalError) {
+            return <StepIndicator iconColor='negative' content={<CrossCompactMIcon />} />;
+        }
         if (isError) {
             return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;
         }
@@ -184,21 +159,31 @@ export const Step: React.FC<StepProps> = ({
         return stepNumber;
     };
 
+    const getCustomDashColor = () => {
+        if (isStepCompleted && completedDashColor) {
+            return {
+                borderColor: completedDashColor,
+            };
+        }
+
+        return {};
+    };
+
     const renderDash = () => (
         <div
-            className={cn(
-                styles.dash,
-                {
-                    [styles.vertical]: isVerticalAlign,
-                    [styles.completed]: isStepCompleted,
-                },
-                styles[SIZE_TO_CLASSNAME_MAP[minSpaceBetweenSteps]],
-            )}
+            className={cn(styles.dash, {
+                [styles.vertical]: isVerticalAlign,
+                [styles.completed]: isStepCompleted,
+            })}
+            style={{
+                ...getCustomDashColor(),
+            }}
         />
     );
 
     return (
         <div
+            data-test-id={getDataTestId(dataTestId, 'step')}
             role='button'
             tabIndex={0}
             ref={stepRef}
@@ -211,6 +196,7 @@ export const Step: React.FC<StepProps> = ({
                 [styles.vertical]: isVerticalAlign,
                 [styles.interactive]: interactive,
                 [styles.fullWidth]: fullWidth && isVerticalAlign,
+                [styles.horizontal]: !isVerticalAlign,
             })}
             onClick={handleButtonClick}
             onKeyDown={handleKeyDown}
@@ -232,15 +218,21 @@ export const Step: React.FC<StepProps> = ({
                 </div>
                 {isNotLastStep && isVerticalAlign && renderDash()}
             </div>
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
             <div
-                className={cn(styles.text, {
-                    [styles.interactive]: interactive,
-                    [styles.fullWidth]: fullWidth && isVerticalAlign,
+                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {
+                    [styles.vertical]: isVerticalAlign,
                 })}
-                onClick={handleTextClick}
             >
-                {children}
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                <div
+                    className={cn(styles.text, {
+                        [styles.interactive]: interactive,
+                        [styles.fullWidth]: fullWidth && isVerticalAlign,
+                    })}
+                    onClick={handleTextClick}
+                >
+                    {children}
+                </div>
             </div>
             {isNotLastStep && !isVerticalAlign && renderDash()}
         </div>

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

@@ -9,6 +9,10 @@
     display: flex;
     outline: none;
 
+    &.horizontal {
+        flex-grow: 1;
+    }
+
     &:not(.vertical) {
         align-items: center;
     }
@@ -65,33 +69,17 @@
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-8);
 
-    &.size-16 {
-        min-width: 16px;
-    }
-
-    &.size-8 {
-        min-width: 8px;
-    }
-
     &.completed {
         border-top: var(--steps-dash-border);
     }
 
     &.vertical {
         min-width: unset;
-        min-height: 24px;
+        min-height: 8px;
         margin-right: var(--gap-0);
         margin-top: var(--gap-8);
         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 {
@@ -99,6 +87,20 @@
     }
 }
 
+.textWrapper {
+    &.vertical {
+        min-height: 48px;
+
+        &.gap-24 {
+            margin-bottom: var(--gap-8);
+        }
+
+        &.gap-32 {
+            margin-bottom: var(--gap-16);
+        }
+    }
+}
+
 .text {
     @mixin paragraph_primary_medium;
 

package/src/shared/index.ts

@@ -0,0 +1 @@
+export { getStepsTestIds } from '../utils/getStepsTestIds';

package/src/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}