feat(stepped-progress-bar): add component (#747)

* feat(stepped-progress-bar): add component

* test(stepped-progress-bar): update snapshot

* refactor(stepped-progress-bar): minor refactor and change test strategy

* style(stepped-progress-bar): use sprite screenshot

* style(stepped-progress-bar): add common tests

* test(stepped-progress-bar): change testing strategy

* style(stepped-progress-bar): fix screenshot testing

* refactor(stepped-progress-bar): change description format

Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com>

packages/stepped-progress-bar/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@alfalab/core-components-stepped-progress-bar",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1"
+    },
+    "dependencies": {
+        "classnames": "^2.2.6",
+        "@alfalab/core-components-typography": "^2.0.1"
+    }
+}

packages/stepped-progress-bar/src/Component.screenshots.test.tsx

@@ -0,0 +1,27 @@
+import { setupScreenshotTesting, createSpriteStorybookUrl } from '../../screenshot-utils';
+
+const screenshotTesting = setupScreenshotTesting({
+    it,
+    beforeAll,
+    afterAll,
+    expect,
+});
+
+describe(
+    'SteppedProgressBar | main props',
+    screenshotTesting({
+        cases: [
+            [
+                'sprite',
+                createSpriteStorybookUrl({
+                    componentName: 'SteppedProgressBar',
+                    knobs: {
+                        step: [0, 2, 10],
+                        maxStep: 10,
+                        description: 'Шаг 2 из 10: Выбор карты',
+                    },
+                }),
+            ],
+        ],
+    }),
+);

packages/stepped-progress-bar/src/Component.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { SteppedProgressBar } from './Component';
+
+const defaultProps = {
+    step: 7,
+    maxStep: 8,
+};
+
+describe('SteppedProgressBar', () => {
+    describe('common tests', () => {
+        it('should set `data-test-id` attribute', () => {
+            const dataTestId = 'test-id';
+            const { queryByTestId } = render(
+                <SteppedProgressBar {...defaultProps} dataTestId={dataTestId} />,
+            );
+
+            expect(queryByTestId(dataTestId)).toBeInTheDocument();
+        });
+
+        it('should set `className` class', () => {
+            const className = 'test-class';
+            const { container } = render(
+                <SteppedProgressBar {...defaultProps} className={className} />,
+            );
+
+            expect(container.firstElementChild).toHaveClass(className);
+        });
+
+        it('should unmount without errors', () => {
+            const { unmount } = render(<SteppedProgressBar {...defaultProps} />);
+
+            expect(unmount).not.toThrowError();
+        });
+    });
+
+    describe('edge cases', () => {
+        it('min step should be 0', async () => {
+            render(<SteppedProgressBar {...defaultProps} step={-defaultProps.step} />);
+
+            const doneBars = await screen.queryAllByTestId('on');
+            const emptyBars = await screen.queryAllByTestId('off');
+
+            expect(doneBars.length).toBe(0);
+            expect(emptyBars.length).toBe(defaultProps.maxStep);
+        });
+
+        it('max value for step should be equal with maxStep', async () => {
+            render(
+                <SteppedProgressBar
+                    {...defaultProps}
+                    step={defaultProps.maxStep + defaultProps.step}
+                />,
+            );
+
+            const doneBars = await screen.queryAllByTestId('on');
+            const emptyBars = await screen.queryAllByTestId('off');
+
+            expect(doneBars.length).toBe(defaultProps.maxStep);
+            expect(emptyBars.length).toBe(0);
+        });
+        it('min value for maxStep should be 1', async () => {
+            render(<SteppedProgressBar step={1} maxStep={0} />);
+
+            const emptyBars = await screen.queryAllByTestId('off');
+            const doneBars = await screen.queryAllByTestId('on');
+
+            expect(emptyBars.length).toBe(0);
+            expect(doneBars.length).toBe(1);
+        });
+    });
+});

packages/stepped-progress-bar/src/Component.tsx

@@ -0,0 +1,60 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+
+import { Typography } from '@alfalab/core-components-typography';
+
+import { StepBar } from './components/step-bar';
+
+import styles from './index.module.css';
+
+export type SteppedProgressBarProps = {
+    /**
+     * Общее количество шагов
+     */
+    maxStep: number;
+
+    /**
+     * Постфикс описание под прогрессбаром
+     */
+    description?: string;
+
+    /**
+     * Количество пройденных шагов
+     */
+    step?: number;
+
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+
+export const SteppedProgressBar: FC<SteppedProgressBarProps> = ({
+    maxStep,
+    description,
+    step = 0,
+    dataTestId,
+    className,
+}) => {
+    const validMaxSteps = maxStep <= 0 ? 1 : maxStep;
+
+    return (
+        <div className={cn(styles.component, className)} data-test-id={dataTestId}>
+            <div className={styles.stepsContainer}>
+                {Array.from(Array(validMaxSteps), (_, index) => (
+                    <StepBar key={index} isDone={index < step} />
+                ))}
+            </div>
+            {description && (
+                <Typography.Text tag='div' className={styles.description} view='primary-small'>
+                    Шаг {step} из {maxStep}: {description}
+                </Typography.Text>
+            )}
+        </div>
+    );
+};

packages/stepped-progress-bar/src/components/step-bar/Component.tsx

@@ -0,0 +1,12 @@
+import React, { FC, memo } from 'react';
+import cn from 'classnames';
+
+import styles from './index.module.css';
+
+type StepBarProps = {
+    isDone: boolean;
+};
+
+export const StepBar: FC<StepBarProps> = memo(({ isDone }) => (
+    <span data-test-id={isDone ? 'on' : 'off'} className={cn(styles.bar, isDone && styles.done)} />
+));

packages/stepped-progress-bar/src/components/step-bar/index.module.css

@@ -0,0 +1,15 @@
+.bar {
+    width: 100%;
+    height: var(--gap-2xs);
+    margin-right: var(--gap-2xs);
+    border-radius: var(--border-radius-xs);
+    background: var(--color-light-border-primary);
+}
+
+.bar:last-child {
+    margin-right: 0;
+}
+
+.done {
+    background: var(--color-light-graphic-positive);
+}

packages/stepped-progress-bar/src/components/step-bar/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/stepped-progress-bar/src/docs/Component.stories.mdx

@@ -0,0 +1,44 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { text, number } from '@storybook/addon-knobs';
+import { ComponentHeader, Tabs } from 'storybook/blocks';
+
+import { SteppedProgressBar } from '../Component';
+import { name, version } from '../../package.json';
+import Description from './description.mdx';
+import Changelog from '../../CHANGELOG.md';
+
+<Meta
+    title='Компоненты/SteppedProgressBar'
+    component={SteppedProgressBar}
+/>
+
+<!-- Canvas -->
+
+<Story name='SteppedProgressBar'>
+    <SteppedProgressBar
+        step={number('step', 1)}
+        maxStep={number('maxStep', 3)}
+        description={text('description', "Выбор карты")}
+    />
+</Story>
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='SteppedProgressBar'
+    version={version}
+    package='@alfalab/core-components/stepped-progress-bar'
+    stage={1}
+    design='https://www.figma.com/file/sg7PXgmiiFjLXC6YJfoCKD/%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80-%D1%81%D1%86%D0%B5%D0%BD%D0%B0%D1%80%D0%B8%D0%B5%D0%B2-%D0%BF%D1%80%D0%B5%D0%B4%D0%BE%D0%B4%D0%BE%D0%B1%D1%80%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%B0%D1%80%D1%82-%D0%92%D0%BE%D0%BB%D0%B3%D0%B0?node-id=2830%3A25'
+/>
+
+```tsx
+import { SteppedProgressBar } from '@alfalab/core-components/stepped-progress-bar';
+```
+
+<Tabs
+    props={<Props of={SteppedProgressBar} />}
+    description={<Description />}
+    changelog={<Changelog />}
+/>
+

packages/stepped-progress-bar/src/docs/description.mdx

@@ -0,0 +1,9 @@
+### Пошаговый прогрессбар с описанием под шкалой
+
+```tsx live
+<SteppedProgressBar
+    step={5}
+    maxStep={10}
+    description={"Шаг 5 из 10"}
+/>
+```

packages/stepped-progress-bar/src/index.module.css

@@ -0,0 +1,17 @@
+@import '../../themes/src/default.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+}
+
+.stepsContainer {
+    width: 100%;
+    display: flex;
+    margin-bottom: var(--gap-xs);
+}
+
+.description {
+    color: var(--color-light-text-secondary-transparent);
+}

packages/stepped-progress-bar/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/stepped-progress-bar/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "include": ["src", "../../typings"],
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "rootDirs": ["src"],
+        "baseUrl": ".",
+        "paths": {
+            "@alfalab/core-components-progress-bar": ["../*/src"],
+        }
+    },
+    "references": [
+        { "path": "../typography" }
+    ]
+}