Web Docs - Stepper Component

[majedelass]

📌 Summary

If merged, this PR will add the Stepper component documentation to the website.

• Stepper Nav preview page
• Stepper List preview page

🛠️ Detailed description

The Stepper documentation is getting slightly restructured, where the previous Stepper Indicator will now live under a Stepper category, along side Stepper Navigation and Stepper List.

📸 Screenshots

Before

After

🔗 External links

Jira ticket: HDS-4405

---

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Mar 12, 2025 7:31am
hds-website	✅ Ready (Inspect)	Visit Preview	Mar 12, 2025 7:31am

[heatherlarsen]

It's a good start. I think the separation between the two pages also helps make it more clear that these have two distinct use cases. I left quite a few suggestions and a few comments, but nothing too major.

[jorytindall]

I haven't gotten through all of this yet, but I'll take a stab at the Nav variant tomorrow.

[jorytindall]

Ok I got through the rest of this now, dropped some more notes and some non-blocking grammar suggestions. LMK if there's anything that needs clarification!

[jorytindall]

[question] Are these screenshots from the Showcase? I'm questioning whether why the width is explicitly set to 1400px, which I don't think they will ever render at. Instead, should those screenshots be dropped into (or recreated in ) Figma and resized? For full-bleed images we generally size images at 836px (I know, also somewhat arbitrary), but that largely removes the need to set the width in markdown explicitly

[dchyun]

Yeah this one is on me. I was following what was done for the tabs accessibility docs and there they set what seemed an arbitrary width of 402px on the images. I also picked 1400 arbitrarily. I removed explicitly setting the width for now.

I made these examples locally to show the interactions. I'm not sure what the standard way we make these kind of examples is, but if it's preferable to create them in Figma instead we can do that.

[jorytindall]

Yeah, It's somewhat of an ambiguous "process", happy to pair with you on it if that would help, but @majedelass is also privy on the dimensions

[dchyun]

@majedelass I removed explicitly setting the width on the images. Do you think they need any other updates? Or do you want to recreate them in figma and change the example used?

[KristinLBradley]

@majedelass @dchyun I think we are getting close but could you both please review the current suggested edits and apply them if you agree? (Or else tweak them?)

Then I think we can wrap this up.

[dchyun]

[Issue] We may need to discuss this, but currently the nav is non-interactive by default.

[majedelass]

This is currently based off of the requirements doc in the variants section indicating that isInteractive set to true is the default.

Do we believe that our consumers will use the non-interactive variant more often than the alternative? That's usually how we define what is set by default.

[dchyun]

[Note] Not sure if this is worth documenting, but just fyi if there is only one step the progress bar will not be shown.

[KristinLBradley]

If there's only one step, the Stepper shouldn't be used but maybe we could include an explanation in parenthesis in case that needs to be clarified.

[majedelass]

Yeah, the when to use section says "multi-step flow" meaning that it should never be 1 step only.

[KristinLBradley]

Suggested change

	| Progress bar | Required |
	| Progress bar | Required (not shown if only one step) |

[majedelass]

I think we should not have this in our docs. We do not recommend folks to only have one step.

[dchyun]

@shleewhite I added a section for using the nav without panels, which we've discussed earlier. Please let me know if the accessibility notes here look correct, or if any changes need to be made to the accessibility file as well.