@snack-uikit/stepper 0.5.3 → 0.5.5-preview-993a9cfb.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.4 (2024-02-14)
+
+
+### Bug Fixes
+
+* **FF-0000:** optional props ([efa7f9c](https://github.com/cloud-ru-tech/snack-uikit/commit/efa7f9cb22ffc26a27ee1eb8ccbdf4b0facea628))
+
+
+
+
+
 ## 0.5.3 (2024-02-05)
 
 ### Only dependencies have been changed

package/README.md

@@ -48,12 +48,12 @@ return (
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| onCompleteChange* | `(isCompleted: boolean) => void` | - | Колбек изменения завершенности |
-| onChangeCurrentStep* | `(newValue: number, prevValue: number) => void` | - | Колбек смены текущего степа |
 | children* | `({stepper, ...api}) => ReactElement` | - | Render function. Принимает аргументы: `stepper` - JSX-элемент степпера, `goNext` - перейти на след. шаг, `goPrev` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов. |
 | steps* | `StepData[]` | - | Массив шагов |
 | defaultCurrentStepIndex | `number` | - | Индекс текущего шага по-дефолту |
 | className | `string` | - | CSS-класс |
+| onChangeCurrentStep | `(newValue: number, prevValue: number) => void` | - | Колбек смены текущего степа |
+| onCompleteChange | `(isCompleted: boolean) => void` | - | Колбек изменения завершенности |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Stepper/Stepper.d.ts

@@ -18,8 +18,8 @@ export type StepperProps = WithSupportProps<{
      */
     children: (params: StepperState) => ReactElement;
     /** Колбек смены текущего степа */
-    onChangeCurrentStep: (newValue: number, prevValue: number) => void;
+    onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
     /** Колбек изменения завершенности */
-    onCompleteChange: (isCompleted: boolean) => void;
+    onCompleteChange?: (isCompleted: boolean) => void;
 }>;
 export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper/Stepper.js

@@ -96,7 +96,7 @@ export function Stepper(_a) {
             setCurrentStepState(STEP_STATE.Current);
         }
     }, [currentStepState]);
-    const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index) => (_jsx(Step, { step: step, "data-test-id": props['data-test-id'] }, step.title + index))) })));
+    const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index) => (_jsx(Step, { step: step, "data-test-id": props['data-test-id'], hideTailLine: index === steps.length - 1 }, step.title + index))) })));
     const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, resetValidation, stepCount: steps.length };
     return _jsx(StepperContext.Provider, { value: stepperApi, children: children(Object.assign({ stepper }, stepperApi)) });
 }

package/dist/components/Stepper/styles.module.css

@@ -1,4 +1,5 @@
 .stepper{
   display:flex;
   flex-direction:row;
+  align-items:start;
 }

package/dist/helperComponents/Icon/styles.module.css

@@ -9,8 +9,8 @@
   justify-content:center;
 }
 .icon svg{
-  width:var(--dimension-3m, 24px) !important;
-  height:var(--dimension-3m, 24px) !important;
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
 }
 .icon[data-state=completed]{
   color:var(--sys-primary-accent-default, #794ed3);
@@ -22,17 +22,17 @@
 }
 .icon[data-state=waiting]{
   box-sizing:border-box;
-  color:var(--sys-neutral-text-support, #565656);
-  border-color:var(--sys-neutral-decor-default, #dedede);
+  color:var(--sys-neutral-text-support, #656771);
+  border-color:var(--sys-neutral-decor-default, #dfe2ec);
   border-style:solid;
 }
 .icon[data-state=loading]{
   box-sizing:border-box;
-  color:var(--sys-neutral-accent-default, #757575);
-  border-color:var(--sys-neutral-decor-default, #dedede);
+  color:var(--sys-neutral-accent-default, #6f717c);
+  border-color:var(--sys-neutral-decor-default, #dfe2ec);
   border-style:solid;
 }
 .icon[data-state=rejected]{
-  color:var(--sys-red-on-accent, #fffbfa);
-  background-color:var(--sys-red-accent-default, #d93f2f);
+  color:var(--sys-red-on-accent, #fffbf9);
+  background-color:var(--sys-red-accent-default, #cd3c3c);
 }

package/dist/helperComponents/Step/Step.d.ts

@@ -1,7 +1,8 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { StepViewData } from '../../types';
 export type StepProps = WithSupportProps<{
+    hideTailLine?: boolean;
     step: StepViewData;
     className?: string;
 }>;
-export declare function Step({ step, className, 'data-test-id': testId, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;
+export declare function Step({ step, className, 'data-test-id': testId, hideTailLine, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Step/Step.js

@@ -21,6 +21,6 @@ import styles from './styles.module.css';
 const getTailTestId = getTestIdBuilder('_element-tail');
 const getStepTestId = getTestIdBuilder('_element-step');
 export function Step(_a) {
-    var { step, className, 'data-test-id': testId } = _a, props = __rest(_a, ["step", "className", 'data-test-id']);
-    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("div", { className: styles.track, children: [_jsx("button", { className: styles.statusContainer, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: _jsx(Icon, Object.assign({}, step, { className: styles.icon })) }), _jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) })] }), _jsxs("div", { className: styles.content, children: [_jsx(Typography.SansBodyM, { className: styles.title, tag: 'div', children: _jsx(TruncateString, { text: step.title }) }), step.description && (_jsx(Typography.SansBodyS, { className: styles.description, tag: 'div', children: _jsx(TruncateString, { text: step.description, maxLines: 2 }) }))] })] })));
+    var { step, className, 'data-test-id': testId, hideTailLine } = _a, props = __rest(_a, ["step", "className", 'data-test-id', "hideTailLine"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("div", { className: styles.track, children: [_jsx("button", { className: styles.statusContainer, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: _jsx(Icon, Object.assign({}, step, { className: styles.icon })) }), !hideTailLine && (_jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) }))] }), _jsxs("div", { className: styles.content, children: [_jsx(Typography.SansBodyM, { className: styles.title, tag: 'div', children: _jsx(TruncateString, { text: step.title }) }), step.description && (_jsx(Typography.SansBodyS, { className: styles.description, tag: 'div', children: _jsx(TruncateString, { text: step.description, maxLines: 2 }) }))] })] })));
 }

package/dist/helperComponents/Step/styles.module.css

@@ -2,7 +2,7 @@
   height:var(--size-stepper-step-track-line, 2px);
   border-radius:var(--radius-stepper-step-track-line, 2px);
   flex-grow:1;
-  background-color:var(--sys-neutral-decor-default, #dedede);
+  background-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
 
 .tail{
@@ -18,12 +18,12 @@
 
 .title{
   overflow:hidden;
-  color:var(--sys-neutral-text-main, #333333);
+  color:var(--sys-neutral-text-main, #33333b);
 }
 
 .description{
   overflow:hidden;
-  color:var(--sys-neutral-text-light, #898989);
+  color:var(--sys-neutral-text-light, #868892);
 }
 
 .step{
@@ -54,7 +54,7 @@
   align-items:center;
   margin:0;
   padding:0;
-  color:var(--sys-neutral-text-main, #333333);
+  color:var(--sys-neutral-text-main, #33333b);
   background-color:transparent;
   border:none;
 }
@@ -62,22 +62,22 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  outline-color:var(--sys-available-complementary, #131313);
+  outline-color:var(--sys-available-complementary, #141415);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
 .statusContainer:not([disabled]){
   cursor:pointer;
 }
 .statusContainer:not([disabled]):focus-visible, .statusContainer:not([disabled]):hover{
-  color:var(--sys-neutral-text-light, #898989);
-}
-
-.icon{
-  flex-shrink:0;
+  color:var(--sys-neutral-text-light, #868892);
 }
 
 .content{
   display:flex;
   flex-direction:column;
   width:100%;
+}
+
+.icon{
+  flex-shrink:0;
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.5.3",
+  "version": "0.5.5-preview-993a9cfb.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,11 +33,11 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/loaders": "0.5.0",
-    "@snack-uikit/truncate-string": "0.4.7",
+    "@snack-uikit/loaders": "0.5.1-preview-993a9cfb.0",
+    "@snack-uikit/truncate-string": "0.4.8-preview-993a9cfb.0",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
+  "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
 }

package/src/components/Stepper/Stepper.tsx

@@ -27,9 +27,9 @@ export type StepperProps = WithSupportProps<{
    */
   children: (params: StepperState) => ReactElement;
   /** Колбек смены текущего степа */
-  onChangeCurrentStep: (newValue: number, prevValue: number) => void;
+  onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
   /** Колбек изменения завершенности */
-  onCompleteChange: (isCompleted: boolean) => void;
+  onCompleteChange?: (isCompleted: boolean) => void;
 }>;
 
 export function Stepper({
@@ -149,7 +149,12 @@ export function Stepper({
   const stepper = (
     <div className={cn(styles.stepper, className)} {...extractSupportProps(props)}>
       {stepsView.map((step, index) => (
-        <Step key={step.title + index} step={step} data-test-id={props['data-test-id']} />
+        <Step
+          key={step.title + index}
+          step={step}
+          data-test-id={props['data-test-id']}
+          hideTailLine={index === steps.length - 1}
+        />
       ))}
     </div>
   );

package/src/components/Stepper/styles.module.scss

@@ -1,4 +1,5 @@
 .stepper {
   display: flex;
   flex-direction: row;
+  align-items: start;
 }

package/src/helperComponents/Step/Step.tsx

@@ -11,6 +11,7 @@ import { Icon } from '../Icon';
 import styles from './styles.module.scss';
 
 export type StepProps = WithSupportProps<{
+  hideTailLine?: boolean;
   step: StepViewData;
   className?: string;
 }>;
@@ -18,7 +19,7 @@ export type StepProps = WithSupportProps<{
 const getTailTestId = getTestIdBuilder('_element-tail');
 const getStepTestId = getTestIdBuilder('_element-step');
 
-export function Step({ step, className, 'data-test-id': testId, ...props }: StepProps) {
+export function Step({ step, className, 'data-test-id': testId, hideTailLine, ...props }: StepProps) {
   return (
     <div className={cn(styles.step, className)} data-state={step.state} {...extractSupportProps(props)}>
       <div className={styles.track}>
@@ -32,13 +33,15 @@ export function Step({ step, className, 'data-test-id': testId, ...props }: Step
           <Icon {...step} className={styles.icon} />
         </button>
 
-        <div
-          className={styles.tail}
-          data-completed={step.state === STEP_STATE.Completed || undefined}
-          data-test-id={getTailTestId(testId)}
-        >
-          <div className={styles.tailLine} />
-        </div>
+        {!hideTailLine && (
+          <div
+            className={styles.tail}
+            data-completed={step.state === STEP_STATE.Completed || undefined}
+            data-test-id={getTailTestId(testId)}
+          >
+            <div className={styles.tailLine} />
+          </div>
+        )}
       </div>
 
       <div className={styles.content}>

package/src/helperComponents/Step/styles.module.scss

@@ -81,12 +81,13 @@
   }
 }
 
-.icon {
-  flex-shrink: 0;
-}
-
 .content {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
+
+.icon {
+  flex-shrink: 0;
+}
+