Feat/steps rework

.changeset/angry-tables-tease.md

@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-steps': minor
+---
+
+- Изменена работа пропса `minSpaceBetweenSteps`. Теперь отступы между шагами определяются по другому. Размер `8` в расчетах не учитывается. Добавлен отступ `32`. Также `minSpaceBetweenSteps` теперь никак не влияет на работу компонента в горизонтальном расположении.
+- Добавлен пропс `completedDashColor` с помощью которого можно переопределить цвет "тире" выполенного шага.

packages/steps/package.json

@@ -16,6 +16,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-badge": "^5.6.4",
+        "@alfalab/core-components-shared": "^0.14.1",
         "@alfalab/hooks": "^1.13.1",
         "@alfalab/icons-glyph": "^2.210.0",
         "classnames": "^2.5.1",

packages/steps/src/Component.screenshots.test.tsx

@@ -0,0 +1,82 @@
+import { setupScreenshotTesting, createSpriteStorybookUrl } from '../../screenshot-utils';
+
+const screenshotTesting = setupScreenshotTesting({
+    it,
+    beforeAll,
+    afterAll,
+    expect,
+});
+
+describe(
+    'Vertical sprite`',
+    screenshotTesting({
+        cases: [
+            [
+                'minSpaceBetweenSteps',
+                createSpriteStorybookUrl({
+                    componentName: 'Steps',
+                    knobs: {
+                        children: [['Шаг 1', 'Шаг 2', 'Шаг 3', 'Шаг 4']],
+                        isVerticalAlign: true,
+                        minSpaceBetweenSteps: [16, 24, 32],
+                    },
+                }),
+            ],
+            [
+                'completedDashColor',
+                createSpriteStorybookUrl({
+                    componentName: 'Steps',
+                    knobs: {
+                        children: [['Шаг 1', 'Шаг 2', 'Шаг 3', 'Шаг 4']],
+                        isVerticalAlign: true,
+                        activeStep: 3,
+                        completedDashColor: ['', 'tomato', 'var(--color-dark-status-attention)'],
+                    },
+                }),
+            ],
+        ],
+        screenshotOpts: {
+            clip: { x: 0, y: 0, width: 720, height: 320 },
+        },
+    }),
+);
+
+describe(
+    'Horizontal sprite`',
+    screenshotTesting({
+        cases: [
+            [
+                'dash stretching',
+                createSpriteStorybookUrl({
+                    componentName: 'Steps',
+                    knobs: {
+                        children: [
+                            ['Шаг 1', 'Шаг 2', 'Шаг 3'],
+                            ['Шаг 1', 'Шаг 2', 'Шаг 3', 'Шаг 4'],
+                            ['Шаг 1', 'Шаг 2', 'Шаг 3', 'Шаг 4', 'Шаг 5'],
+                        ],
+                        isVerticalAlign: false,
+                        activeStep: 2,
+                    },
+                    size: { width: 720, height: 50 },
+                }),
+            ],
+            [
+                'completedDashColor',
+                createSpriteStorybookUrl({
+                    componentName: 'Steps',
+                    knobs: {
+                        children: [['Шаг 1', 'Шаг 2', 'Шаг 3', 'Шаг 4']],
+                        isVerticalAlign: false,
+                        activeStep: 3,
+                        completedDashColor: ['', 'tomato', 'var(--color-dark-status-attention)'],
+                    },
+                    size: { width: 720, height: 50 },
+                }),
+            ],
+        ],
+        screenshotOpts: {
+            clip: { x: 0, y: 0, width: 720, height: 280 },
+        },
+    }),
+);

packages/steps/src/Component.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { Steps } from './index';
+import { getStepsTestIds } from './utils/getStepsTestIds';
 
 describe('Steps', () => {
     describe('Snapshots tests', () => {
@@ -43,17 +44,21 @@ describe('Steps', () => {
     });
 
     describe('Attributes tests', () => {
-        it('should set `data-test-id` atribute', () => {
+        it('should set `data-test-id` attribute', () => {
             const dataTestId = 'test-id';
 
-            const { getByTestId } = render(
+            const testIds = getStepsTestIds(dataTestId);
+
+            const { getByTestId, getAllByTestId } = render(
                 <Steps dataTestId={dataTestId}>
                     <div>Шаг 1</div>
                     <div>Шаг 2</div>
                 </Steps>,
             );
 
             expect(getByTestId(dataTestId).tagName).toBe('DIV');
+            expect(getByTestId(testIds.steps)).toBeInTheDocument();
+            expect(getAllByTestId(testIds.step).length).toBe(2);
         });
     });
 
@@ -113,4 +118,48 @@ describe('Steps', () => {
             expect(unmount).not.toThrowError();
         });
     });
+
+    describe('Custom dash color', () => {
+        it('should set custom color', () => {
+            const dataTestId = 'test-id';
+
+            const testIds = getStepsTestIds(dataTestId);
+
+            const { getAllByTestId } = render(
+                <Steps activeStep={3} dataTestId={dataTestId} completedDashColor='tomato'>
+                    <div>Шаг 1</div>
+                    <div>Шаг 2</div>
+                    <div>Шаг 3</div>
+                </Steps>,
+            );
+
+            const stepCollection = getAllByTestId(testIds.step);
+            const dash = stepCollection[0].querySelector('.dash');
+
+            expect(dash).toHaveStyle('border-color:tomato');
+        });
+
+        it('should set custom var color', () => {
+            const dataTestId = 'test-id';
+
+            const testIds = getStepsTestIds(dataTestId);
+
+            const { getAllByTestId } = render(
+                <Steps
+                    activeStep={3}
+                    dataTestId={dataTestId}
+                    completedDashColor='var(--color-dark-status-attention)'
+                >
+                    <div>Шаг 1</div>
+                    <div>Шаг 2</div>
+                    <div>Шаг 3</div>
+                </Steps>,
+            );
+
+            const stepCollection = getAllByTestId(testIds.step);
+            const dash = stepCollection[0].querySelector('.dash');
+
+            expect(dash).toHaveStyle('border-color:var(--color-dark-status-attention)');
+        });
+    });
 });

packages/steps/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 шага и
      * возможностью перехода на этот шаг
@@ -110,12 +78,7 @@ export type StepsProps = {
      * @param stepNumber - номер активного шага
      */
     onChange?: (stepNumber: number) => void;
-
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+} & CommonProps;
 
 export const Steps: React.FC<StepsProps> = ({
     className,
@@ -136,6 +99,7 @@ export const Steps: React.FC<StepsProps> = ({
     checkIsStepCustom,
     onChange,
     dataTestId,
+    completedDashColor,
 }) => {
     const uncontrolled = activeStepProp === undefined;
     const [activeStep, setActiveStep] = useState(defaultActiveStep);
@@ -195,6 +159,8 @@ export const Steps: React.FC<StepsProps> = ({
                         key={stepNumber}
                         fullWidth={fullWidth}
                         minSpaceBetweenSteps={minSpaceBetweenSteps}
+                        completedDashColor={completedDashColor}
+                        dataTestId={dataTestId}
                     >
                         {step}
                     </Step>

packages/steps/src/__snapshots__/Component.test.tsx.snap

@@ -9,7 +9,7 @@ Object {
         class="component"
       >
         <div
-          class="step selected interactive"
+          class="step selected interactive horizontal"
           role="button"
           tabindex="0"
         >
@@ -23,18 +23,22 @@ Object {
             </div>
           </div>
           <div
-            class="text interactive"
+            class="textWrapper gap-24"
           >
-            <div>
-              Шаг 1
+            <div
+              class="text interactive"
+            >
+              <div>
+                Шаг 1
+              </div>
             </div>
           </div>
           <div
-            class="dash size-24"
+            class="dash"
           />
         </div>
         <div
-          class="step interactive"
+          class="step interactive horizontal"
           role="button"
           tabindex="0"
         >
@@ -48,10 +52,14 @@ Object {
             </div>
           </div>
           <div
-            class="text interactive"
+            class="textWrapper gap-24"
           >
-            <div>
-              Шаг 2
+            <div
+              class="text interactive"
+            >
+              <div>
+                Шаг 2
+              </div>
             </div>
           </div>
         </div>
@@ -63,7 +71,7 @@ Object {
       class="component"
     >
       <div
-        class="step selected interactive"
+        class="step selected interactive horizontal"
         role="button"
         tabindex="0"
       >
@@ -77,18 +85,22 @@ Object {
           </div>
         </div>
         <div
-          class="text interactive"
+          class="textWrapper gap-24"
         >
-          <div>
-            Шаг 1
+          <div
+            class="text interactive"
+          >
+            <div>
+              Шаг 1
+            </div>
           </div>
         </div>
         <div
-          class="dash size-24"
+          class="dash"
         />
       </div>
       <div
-        class="step interactive"
+        class="step interactive horizontal"
         role="button"
         tabindex="0"
       >
@@ -102,10 +114,14 @@ Object {
           </div>
         </div>
         <div
-          class="text interactive"
+          class="textWrapper gap-24"
         >
-          <div>
-            Шаг 2
+          <div
+            class="text interactive"
+          >
+            <div>
+              Шаг 2
+            </div>
           </div>
         </div>
       </div>