@alfalab/core-components-steps 1.5.1 → 1.6.1

package/modern/components/step/index.css

@@ -1,12 +1,12 @@
-/* hash: k7srz */
-:root {
+/* hash: 1hf3o */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa;
-    --color-light-neutral-1500: #0e0e0e;
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-status-positive: #0cc44d;
-    --color-light-text-primary: #0e0e0e;
-    --color-light-text-primary-inverted: #fff;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
     --color-light-transparent-default-press: rgba(30, 43, 68, 0.08); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,26 +30,26 @@
 } :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_2yi0h {
+} .steps__step_1ohj2 {
     display: flex;
     outline: none
-} .steps__step_2yi0h:not(.steps__vertical_2yi0h) {
+} .steps__step_1ohj2:not(.steps__vertical_1ohj2) {
         align-items: center;
-    } .steps__step_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
+    } .steps__step_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
     cursor: pointer;
-} .steps__step_2yi0h.steps__disabled_2yi0h:hover .steps__text_2yi0h {
+} .steps__step_1ohj2.steps__disabled_1ohj2:hover .steps__text_1ohj2 {
         background: unset;
-    } .steps__step_2yi0h.steps__disabled_2yi0h .steps__indicator_2yi0h {
+    } .steps__step_1ohj2.steps__disabled_1ohj2 .steps__indicator_1ohj2 {
         cursor: unset;
-    } .steps__indicator_2yi0h {
+    } .steps__indicator_1ohj2 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-} .steps__indicator_2yi0h.steps__vertical_2yi0h {
+} .steps__indicator_1ohj2.steps__vertical_1ohj2 {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    } .steps__option_2yi0h {
+    } .steps__option_1ohj2 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -62,25 +62,33 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_2yi0h.steps__vertical_2yi0h {
+} .steps__option_1ohj2.steps__vertical_1ohj2 {
         margin-top: var(--gap-xs);
-    } .steps__dash_2yi0h {
+    } .steps__dash_1ohj2 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-xs)
-} .steps__dash_2yi0h.steps__completed_2yi0h {
+} .steps__dash_1ohj2.steps__size-16_1ohj2 {
+        min-width: 16px;
+    } .steps__dash_1ohj2.steps__size-8_1ohj2 {
+        min-width: 8px;
+    } .steps__dash_1ohj2.steps__completed_1ohj2 {
         border-top: var(--steps-dash-border);
-    } .steps__dash_2yi0h.steps__vertical_2yi0h {
+    } .steps__dash_1ohj2.steps__vertical_1ohj2 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
-        border-top: none;
-    } .steps__dash_2yi0h.steps__completed_2yi0h.steps__vertical_2yi0h {
+        border-top: none
+    } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-16_1ohj2 {
+            min-height: 16px;
+        } .steps__dash_1ohj2.steps__vertical_1ohj2.steps__size-8_1ohj2 {
+            min-height: 8px;
+        } .steps__dash_1ohj2.steps__completed_1ohj2.steps__vertical_1ohj2 {
         border-left: var(--steps-dash-border);
-    } .steps__text_2yi0h {
+    } .steps__text_1ohj2 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -90,19 +98,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-} .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):hover {
+} .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_2yi0h.steps__interactive_2yi0h:not(.steps__disabled_2yi0h):active {
+        } .steps__text_1ohj2.steps__interactive_1ohj2:not(.steps__disabled_1ohj2):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_2yi0h {
+        } .steps__focused_1ohj2 {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-} .steps__selected_2yi0h .steps__text_2yi0h {
+} .steps__selected_1ohj2 .steps__text_1ohj2 {
         color: var(--color-light-text-primary);
-    } .steps__selected_2yi0h .steps__option_2yi0h {
+    } .steps__selected_1ohj2 .steps__option_1ohj2 {
         color: var(--color-light-text-primary-inverted);
-        background: var(--color-light-neutral-1500);
-    } .steps__checkbox_2yi0h {
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__checkbox_1ohj2 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -110,18 +118,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_2yi0h {
+} .steps__dot_1ohj2 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_2yi0h .steps__checkbox_2yi0h {
-    border: 2px solid var(--color-light-neutral-1500)
-} .steps__selected_2yi0h .steps__checkbox_2yi0h .steps__dot_2yi0h {
-        background: var(--color-light-neutral-1500);
-    } .steps__option_2yi0h:not(.steps__error_2yi0h).steps__unordered_2yi0h {
+} .steps__selected_1ohj2 .steps__checkbox_1ohj2 {
+    border: 2px solid var(--color-light-neutral-translucent-1300)
+} .steps__selected_1ohj2 .steps__checkbox_1ohj2 .steps__dot_1ohj2 {
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__option_1ohj2:not(.steps__error_1ohj2).steps__unordered_1ohj2 {
     background: unset;
-} .steps__completedIndicator_2yi0h > [class*='positive'] {
+} .steps__completedIndicator_1ohj2 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
+} .steps__fullWidth_1ohj2 {
+    width: 100%;
 }

package/modern/components/step/index.js

@@ -1,9 +1 @@
 export { Step } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
-import '../step-indicator/Component.js';
-import '@alfalab/core-components-badge/modern';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/modern';
 
-const styles = {"component":"steps__component_qiryz"};
+const styles = {"component":"steps__component_1akb5"};
 require('./index.css')
 
 const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));

package/modern/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: yw9u7 */
-.steps__component_qiryz {
+/* hash: 1w3kq */
+.steps__component_1akb5 {
     padding: 0;
 }

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

@@ -1,4 +1 @@
 export { StepIndicator } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/core-components-badge/modern';

package/modern/index.css

@@ -1,5 +1,5 @@
-/* hash: 29j93 */
-:root {
+/* hash: 4o5j9 */
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -14,11 +14,11 @@
 } :root {
 } :root {
 } :root {
-} .steps__component_1yc4g {
+} .steps__component_1n1l2 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_1yc4g.steps__vertical_1yc4g {
+} .steps__component_1n1l2.steps__vertical_1n1l2 {
         flex-direction: column;
         align-items: flex-start;
     }

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.1",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.5.1",
+        "@alfalab/core-components-badge": "^5.5.2",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.139.0",
         "classnames": "^2.3.1",

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 {
@@ -115,7 +131,7 @@
 
     & .option {
         color: var(--color-light-text-primary-inverted);
-        background: var(--color-light-neutral-1500);
+        background: var(--color-light-neutral-translucent-1300);
     }
 }
 
@@ -137,10 +153,10 @@
 }
 
 .selected .checkbox {
-    border: 2px solid var(--color-light-neutral-1500);
+    border: 2px solid var(--color-light-neutral-translucent-1300);
 
     & .dot {
-        background: var(--color-light-neutral-1500);
+        background: var(--color-light-neutral-translucent-1300);
     }
 }
 
@@ -152,3 +168,7 @@
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }
+
+.fullWidth {
+    width: 100%;
+}