diff --git a/packages/manager-react-components/src/components/container/step/Step.component.tsx b/packages/manager-react-components/src/components/container/step/Step.component.tsx index 6ba8a5feb9da..00d32b72b0ec 100644 --- a/packages/manager-react-components/src/components/container/step/Step.component.tsx +++ b/packages/manager-react-components/src/components/container/step/Step.component.tsx @@ -14,6 +14,7 @@ import { import { v4 as uuidV4 } from 'uuid'; import { ODS_BUTTON_SIZE, + ODS_BUTTON_VARIANT, ODS_ICON_NAME, ODS_ICON_SIZE, ODS_SPINNER_SIZE, @@ -38,6 +39,12 @@ export type TStepProps = { label: string | JSX.Element; isDisabled?: boolean; }; + skip?: { + action: (id: string) => void; + label: string | JSX.Element; + isDisabled?: boolean; + hint?: string; + }; children?: JSX.Element | JSX.Element[]; }; @@ -52,105 +59,130 @@ export const StepComponent = ({ children, next, edit, -}: TStepProps): JSX.Element => { - return ( -
-
- {isChecked ? ( - - ) : ( + skip, +}: TStepProps): JSX.Element => ( +
+
+ {isChecked ? ( + + ) : ( +
+ + {order} + +
+ )} +
+
+
+
- + {skip?.hint &&
{skip.hint}
} +
+ {edit?.action && isLocked && ( +
+ { + if (!edit.isDisabled) { + edit.action(id); + } + }} > - {order} - + {edit.label} +
)}
-
-
+ {isOpen && ( + <> + {subtitle &&
{subtitle}
}
- {title} + } + > + {children} +
- {edit?.action && isLocked && ( -
- { - if (!edit.isDisabled) { - edit.action(id); - } - }} - > - {edit.label} - -
- )} -
- {isOpen && ( - <> - {subtitle &&
{subtitle}
} -
+ {next?.action && ( +
+ { + next.action(id); + }} + className="w-fit" + {...(next.isDisabled ? { disabled: true } : {})} + > + {next.label} + +
+ )} + {skip?.action && ( +
+ { + skip.action(id); + }} + className="w-fit" + {...(skip.isDisabled ? { disabled: true } : {})} + > + {skip.label} + +
)} - > - } - > - {children} -
- {next?.action && !isLocked && ( -
- { - next.action(id); - }} - className="w-fit" - {...(next.isDisabled ? { disabled: true } : {})} - > - {next.label} - -
- )} - - )} -
-
- ); -}; + )} + + )} +
+
+); export default StepComponent;