The ProgressSteps component is currently implemented as a single monolithic component. This task involves refactoring it into smaller, reusable subcomponents to avoid code repetition.
Eliminate repetitive code patterns.
Extract mockup data to a separate file or a constant within the component.
Create reusable subcomponents for each part of the ProgressSteps component.
The refactored ProgressSteps component should function identically to the current implementation.
All components should be fully tested to ensure they work as expected.
Ensure that the new subcomponents are flexible and can be reused in other parts of the application if needed.
[x] Create a StepIcon component that takes completed and iconType as props.
[ ] Develop a StepLine component that renders the connecting line based on the completed prop.
[ ] Implement a Step component that composes the StepIcon, StepLine, and step details.
[ ] Refactor the ProgressSteps component to use the new subcomponents.
[ ] Remove hardcoded mockup data and replace it with props or context.
The
ProgressStepscomponent is currently implemented as a single monolithic component. This task involves refactoring it into smaller, reusable subcomponents to avoid code repetition.ProgressStepscomponent.ProgressStepscomponent should function identically to the current implementation.StepIconcomponent that takescompletedandiconTypeas props.StepLinecomponent that renders the connecting line based on thecompletedprop.Stepcomponent that composes theStepIcon,StepLine, and step details.ProgressStepscomponent to use the new subcomponents.