@mailstep/design-system 0.6.59 → 0.6.60-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.59",
+  "version": "0.6.60-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Stepper/Stepper.js

@@ -3,12 +3,12 @@ import { useMemo } from 'react';
 import { StepItem } from './components/StepItem';
 import { Container, ItemsWrapper } from './styles';
 export var Stepper = function (_a) {
-    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
+    var items = _a.items, activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return null;
     var Component = useMemo(function () { return items[activeStep].component; }, [items, activeStep]);
     return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { children: items.map(function (_a, index) {
                     var title = _a.title, disabled = _a.disabled, completed = _a.completed;
                     return (_jsx(StepItem, { onClick: handleChangeStep(index), title: title, index: index, activeStep: activeStep, disabled: disabled, completed: completed }, title));
-                }) }), _jsx(Component, { handleGoToNextStep: handleChangeStep(activeStep + 1) })] }));
+                }) }), _jsx(Component, { handleGoToNextStep: handleGoToNextStep })] }));
 };

package/ui/Blocks/Stepper/hooks/useStepper.d.ts

@@ -1,6 +1,10 @@
-type HookType = () => {
+type Props = {
+    totalSteps: number;
+};
+type HookType = (props: Props) => {
     activeStep: number;
     handleChangeStep: (step: number) => () => void;
+    handleGoToNextStep: () => void;
 };
 export declare const useStepper: HookType;
 export {};

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -1,8 +1,17 @@
 import { useCallback, useState } from 'react';
-export var useStepper = function () {
-    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
+export var useStepper = function (_a) {
+    var totalSteps = _a.totalSteps;
+    var _b = useState(0), activeStep = _b[0], setActiveStep = _b[1];
+    var _c = useState(false), success = _c[0], setSuccess = _c[1];
+    var handleGoToNextStep = useCallback(function () {
+        if (activeStep + 1 === totalSteps) {
+            setSuccess(true);
+            return;
+        }
+        setActiveStep(activeStep + 1);
+    }, [activeStep, totalSteps]);
     var handleChangeStep = useCallback(function (step) { return function () {
         setActiveStep(step);
     }; }, []);
-    return { activeStep: activeStep, handleChangeStep: handleChangeStep };
+    return { activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep };
 };

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -51,10 +51,10 @@ var meta = {
 };
 export default meta;
 export var Default = function () {
-    var _a = useStepper(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
-    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+    var _a = useStepper({ totalSteps: items.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
 };
 export var AllStepsCompleted = function () {
-    var _a = useStepper(), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep;
-    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep }) }));
+    var _a = useStepper({ totalSteps: completedItems.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
+    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
 };

package/ui/Blocks/Stepper/types.d.ts

@@ -3,6 +3,7 @@ export type StepperProps = {
     items: StepperItem[];
     activeStep: number;
     handleChangeStep: (step: number) => () => void;
+    handleGoToNextStep: () => void;
 };
 export type StepperPassedDownProps = {
     handleGoToNextStep: () => void;