feat(Wizard): allow disabled and loading state through the wizard con…

…text. (#4085)

* fix: prevent wizard tab change if no return from handleBeforeNext
* feat: allow user to define disable and loading state through the wizard context

packages/lab/src/Wizard/WizardActions/WizardActions.tsx

@@ -150,7 +150,13 @@ export const HvWizardActions = ({
           <HvButton
             variant="secondaryGhost"
             className={cx(classes.buttonWidth, classes.buttonSpacing)}
-            onClick={() => handleBeforeNext?.() || setTab((t) => t + 1)}
+            onClick={() => {
+              if (handleBeforeNext) {
+                handleBeforeNext();
+              } else {
+                setTab((t) => t + 1);
+              }
+            }}
             disabled={!skippable && !context?.[tab]?.valid}
             endIcon={<Forwards />}
           >

packages/lab/src/Wizard/WizardContext/WizardContext.tsx

@@ -7,6 +7,8 @@ export type HvWizardTab = {
   touched?: boolean;
   form?: any;
   children?: React.ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
   [other: string]: any;
 };
 

packages/lab/src/Wizard/WizardTitle/WizardTitle.tsx

@@ -35,12 +35,12 @@ export interface HvWizardTitleProps extends HvBaseProps {
 }
 
 const switchTabState = (state, currentTab, index) => {
+  if (state.loading) return "Pending";
   if (index === currentTab) return "Current";
   if (state.valid) return "Completed";
+  if (state.disabled) return "Disabled";
   if (state.valid === null) return "Enabled";
   if (state.touched && state.valid === false) return "Failed";
-  // "Disabled"
-  // "Pending"
   return "Enabled";
 };