Stepper components is kind of tricky when it comes to styles and functionalities to build up, here I will share my development experience in details.

Think of its style as a whole.

When it comes to the styles, first of all we should think about structures of the component, as for the Stepper, beside the title of one stepper button, we normally have the indicator below it and maybe cover with a line between each indicator to make user notice that it is a procedure form that they have to complete. Normally, we will take indicators and titles as separate elements in different divs, however, because in my development case, indicators need to have the same functionalities as the stepper title button, we will combine indicators into the title button as will and use flex box to adjust children styles. The stepper line in this case will be a div element inside the button div and use the absolute position to control its location, in this way, we don't have to worry about setting the width length to the stepper line div, use the whole width and control its length by adjusting its parent div through padding.

Here is the sketch example of my ideas above:

<div className="stepper">
  <div className="step">
    <div className="stepper line" />
    {
     // maps out the array of each step button
     <div className"button">
      <p>{title}</p>
      <div className="indcator" />
     </div>
    }
  </div>
</div>

Next, we should mark the steps that user passed as complete with complete styles and the current step as the current style. To check if a step is completed, we will use the index of the current step to compare with the index of each step that is mapping out, if the current step's index is greater than the step's index, a class name that represent complete status should be given. To check which step is our current step, we can compare the route's name with our current step's name if they are match, a current status class name should be given to the button, to achieve this function, make sure the router name we use is the step name.

eg:

const activeStep = findIndex(steps, step => step.value === location.pathname);
{
  steps.map((step, i) => {
    const currentStep = step.value ==== location.pathname ? 'color-orange' : ''
    const completeStep = activeStep > i ? 'bg-mello-grey border-mello-grey' : currentStep
  })
}

The key part is completed if you build your stepper under this concept.

Happy coding!