🪟 🎨 Use StepIndicator for connection setup steps

[timroes]

What

Introduces a new StepIndicator, which is a leightweight way of presenting which step is current active. This replaces the currently used StepMenu in the Connection Creation flow.

The step title will be shown in a tooltip on hover:

Why?

For a couple of reasons:

• We see in FullStory regularily that people think they could navigate through those steps by clicking the which they can't given it's only an indicator.
• The old indicator was specifically once the documentation panel was extended looking quiet squished because it wrote out all the titles in way too less space. Given that our primary focus is to show the user their progress and how (little) steps they have, we don't need all the indidivual step names present all the time.
• This helps us stripping down the StepMenu into a now proper interactive Tab component, since it doesn't fulfill the weird double function as a step indicator anymore.

[krishnaglick]

Looks good in storybook. Only complaint is light mode seems to have large styling differences that I feel are not clear from the name "light"

[timroes]

@krishnaglick sorry not sure I can follow. This component doesn't have any light mode? So not sure what exactly you're referring to?

[krishnaglick]

@krishnaglick sorry not sure I can follow. This component doesn't have any light mode? So not sure what exactly you're referring to?

Oh, I tested StepsMenu, not StepsIndicator! Re-tested and looks good to me 👍