@alfalab/core-components-steps 1.6.3 → 1.7.1

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

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { StepIndicatorProps } from "../step-indicator/index";
+type StepProps = {
+    /**
+     * Название шага
+     */
+    children: ReactNode;
+    /**
+     * Номер шага
+     */
+    stepNumber: number;
+    /**
+     * Маркер того, что текущий шаг выбран
+     */
+    isSelected: boolean;
+    /**
+     * Маркер того, что текущий шаг доступен для клика
+     */
+    disabled: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Positive"
+     */
+    isPositive: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Error"
+     */
+    isError: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Warning"
+     */
+    isWarning: boolean;
+    /**
+     * Маркер того, что текущий шаг находится в состоянии "Waiting"
+     */
+    isWaiting: boolean;
+    /**
+     * Маркер того, что текущий шаг нужно пометить как завершенный
+     */
+    isStepCompleted: boolean;
+    /**
+     * Свойства кастомного индикатора текущего шага
+     */
+    customStepIndicator?: StepIndicatorProps | null;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Указывает, является ли текущий шаг последним в списке
+     */
+    isNotLastStep?: boolean;
+    /**
+     * Маркер того, что шаг растягивается на всю ширину блока
+     * для вертикальной ориентации
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами
+     * @default 24
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24;
+    /**
+     * Обработчик нажатия на текущей шаг
+     * @param stepNumber - номер шага
+     */
+    onClick: (stepNumber: number) => void;
+};
+declare const Step: React.FC<StepProps>;
+export { StepProps, Step };

package/moderncssm/components/step/Component.js

@@ -0,0 +1,89 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
+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 stepRef = useRef(null);
+    const [focused] = useFocus(stepRef, 'keyboard');
+    const handleButtonClick = () => {
+        if (!disabled && interactive && onClick) {
+            onClick(stepNumber);
+        }
+    };
+    const handleTextClick = (e) => {
+        if (!interactive) {
+            e.stopPropagation();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleButtonClick();
+        }
+    };
+    const getStepIndicator = () => {
+        if (customStepIndicator) {
+            return React.createElement(StepIndicator, { ...customStepIndicator });
+        }
+        if (isError) {
+            return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWarning) {
+            return React.createElement(StepIndicator, { iconColor: 'attention', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWaiting) {
+            return React.createElement(StepIndicator, { iconColor: 'secondary', content: React.createElement(ClockMIcon, null) });
+        }
+        if (isPositive) {
+            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) });
+        }
+        if (isStepCompleted) {
+            return (React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
+        }
+        if (!ordered) {
+            return (React.createElement("div", { className: styles.checkbox },
+                React.createElement("span", { className: styles.dot })));
+        }
+        return stepNumber;
+    };
+    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, {
+            [styles.completed]: isStepCompleted,
+            [styles.error]: isError,
+            [styles.selected]: isSelected,
+            [styles.disabled]: disabled,
+            [styles.focused]: focused,
+            [styles.vertical]: isVerticalAlign,
+            [styles.interactive]: interactive,
+            [styles.fullWidth]: fullWidth && isVerticalAlign,
+        }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: cn(styles.indicator, {
+                [styles.vertical]: isVerticalAlign,
+                [styles.interactive]: interactive,
+            }) },
+            React.createElement("div", { className: cn(styles.option, {
+                    [styles.unordered]: !ordered,
+                    [styles.vertical]: isVerticalAlign,
+                    [styles.error]: isError,
+                }) }, getStepIndicator()),
+            isNotLastStep && isVerticalAlign && renderDash()),
+        React.createElement("div", { className: cn(styles.text, {
+                [styles.interactive]: interactive,
+                [styles.fullWidth]: fullWidth && isVerticalAlign,
+            }), onClick: handleTextClick }, children),
+        isNotLastStep && !isVerticalAlign && renderDash()));
+};
+
+export { Step };

package/moderncssm/components/step/index.d.ts

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

package/moderncssm/components/step/index.js

@@ -0,0 +1 @@
+export { Step } from './Component.js';

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

@@ -0,0 +1,170 @@
+/* */
+
+:root {
+    --steps-option-svg-color: var(--color-light-status-positive);
+    --steps-dash-border: 2px solid var(--color-light-status-positive);
+}
+
+.step {
+    display: flex;
+    outline: none
+}
+
+.step:not(.vertical) {
+        align-items: center;
+    }
+
+.step.interactive:not(.disabled):hover {
+    cursor: pointer;
+}
+
+.step.disabled:hover .text {
+        background: unset;
+    }
+
+.step.disabled .indicator {
+        cursor: unset;
+    }
+
+.indicator {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-4)
+}
+
+.indicator.vertical {
+        flex-direction: column;
+        margin-right: var(--gap-8);
+    }
+
+.option {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-primary);
+    background: var(--color-light-neutral-translucent-300);
+    min-width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-circle)
+}
+
+.option.vertical {
+        margin-top: var(--gap-8);
+    }
+
+.dash {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-neutral-translucent-300);
+    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;
+        margin-right: var(--gap-0);
+        margin-top: var(--gap-8);
+        border-left: 2px solid var(--color-light-neutral-translucent-300);
+        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;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-8);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-8);
+    height: min-content
+}
+
+.text.interactive:not(.disabled):hover {
+            background: var(--color-light-transparent-default-hover);
+        }
+
+.text.interactive:not(.disabled):active {
+            background: var(--color-light-transparent-default-press);
+        }
+
+.focused {
+    outline: var(--gap-2) solid var(--focus-color);
+    outline-offset: var(--gap-2);
+}
+
+.selected .text {
+        color: var(--color-light-text-primary);
+    }
+
+.selected .option {
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-neutral-translucent-1300);
+    }
+
+.checkbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-circle);
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-neutral-translucent-300);
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--border-radius-circle);
+    background: var(--color-light-neutral-translucent-300);
+}
+
+.selected .checkbox {
+    border: 2px solid var(--color-light-neutral-translucent-1300)
+}
+
+.selected .checkbox .dot {
+        background: var(--color-light-neutral-translucent-1300);
+    }
+
+.option:not(.error).unordered {
+    background: unset;
+}
+
+.completedIndicator > [class*='positive'] {
+    color: var(--steps-option-svg-color);
+    background-color: var(--steps-option-svg-color);
+}
+
+.fullWidth {
+    width: 100%;
+}

package/moderncssm/components/step-indicator/Component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BadgeProps } from "@alfalab/core-components-badge";
+type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export { StepIndicatorProps, StepIndicator };

package/moderncssm/components/step-indicator/Component.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-badge/moderncssm';
+import styles from './index.module.css';
+
+const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
+
+export { StepIndicator };

package/moderncssm/components/step-indicator/index.d.ts

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

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

@@ -0,0 +1 @@
+export { StepIndicator } from './Component.js';

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

@@ -0,0 +1,5 @@
+/* */
+
+.component.component {
+    padding: var(--gap-0);
+}

package/moderncssm/index.d.ts

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

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { Steps } from './Component.js';

package/moderncssm/index.module.css

@@ -0,0 +1,12 @@
+/* */
+
+.component {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+
+.component.vertical {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.6.3",
+    "version": "1.7.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,12 +14,12 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.5.3",
+        "@alfalab/core-components-badge": "^5.6.1",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.0.2",
-    "varsVersion": "9.11.1"
+    "themesVersion": "13.2.0",
+    "varsVersion": "9.13.0"
 }

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 :root {
     --steps-option-svg-color: var(--color-light-status-positive);
@@ -80,7 +80,7 @@
     &.vertical {
         min-width: unset;
         min-height: 24px;
-        margin-right: 0;
+        margin-right: var(--gap-0);
         margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none;

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

@@ -1,3 +1,5 @@
+@import '@alfalab/core-components-vars/src/index.css';
+
 .component.component {
-    padding: 0;
+    padding: var(--gap-0);
 }

package/src/index.module.css

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-vars/src/index.css';
 
 .component {
     display: flex;