@snack-uikit/stepper 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 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
+* [@snack-uikit/icons@0.20.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.5.2 (2024-02-01)
 
 ### 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/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.20.0",
+    "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/loaders": "0.5.0",
-    "@snack-uikit/truncate-string": "0.4.6",
+    "@snack-uikit/truncate-string": "0.4.7",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "0726752996aeaf01f58b892fef581c38c1528ea1"
+  "gitHead": "529392c26fdb9c9b6e51a3f5c47419c726c57410"
 }

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}>