Use of Progress Steps Component

[simsemma]

hi team - i'm working on building out a design to display an overview of steps required for getting set up with a feature within segment. we currently use a pattern in prod that has a badge indicating the step name and status, as well as content underneath each step with a CTA (below).

the content may change based on what the user has completed, but the card is generally always at the top of the page that contains CTAs that routes customers to different places in the app to complete the steps (or to docs).

as i started thinking about converting this pattern to paste, i had a few questions:

• is this something that could leverage the progress step component?
• if not, is there any other pattern or component that we've used previously that we can leverage here?

i'm attaching two explorations, one using the progress steps but adding content underneath each step (not sure we can currently do something like this)

...and the second leveraging various paste components to build the pattern similarly to how it was done in production. i'm also thinking about exploring an option using the disclosure component.

would love some guidance here on best practices and patterns/components to leverage

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hello! Based on your description and the images provided, it seems like the Progress Steps component could be a good fit for your needs.

Progress Steps are a visual representation of a complex task broken up into multiple steps. They indicate what has and what needs to be done to fully complete the task. This seems to align with your requirement of displaying an overview of steps required for getting set up with a feature.

Each step in the Progress Steps component can communicate one of these statuses: Complete, Incomplete, Current, Error, or Incomplete + Disabled. This could be useful for indicating the status of each step in your setup process.

In terms of adding content underneath each step, the documentation doesn't explicitly mention this as a feature of the Progress Steps component. However, you could potentially achieve this by using other Paste components in combination with Progress Steps.

For example, you could use the Progress Steps component to display the steps and their statuses, and then use other components (like Text or Paragraph) to add additional information below each step. This would involve some custom layout work on your part, but it could be a way to achieve the design you're aiming for.

Here's a simple example of how you might use the Progress Steps component:

<ProgressSteps currentStep="step2">
  <ProgressStep label="Step 1" state="complete" />
  <ProgressStep label="Step 2" state="current" />
  <ProgressStep label="Step 3" state="incomplete" />
</ProgressSteps>

In terms of accessibility, remember to give each step a concise label describing what the goal of that step is. Each step icon has a title prop whose value is the current status of that step (e.g. complete, incomplete, etc.) to inform screen readers of a step's status.

If the Progress Steps component doesn't quite fit your needs, you might consider using a combination of other Paste components to create a custom solution. The documentation suggests working with your design partner to evaluate compositional methods to use Paste components to create a larger, more complex component.

I hope this helps! If you have further questions, don't hesitate to ask.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Announcement pattern (updated: 04/17/2023, similarity score: 88%)
• unifying the 'step card' component pattern (updated: 08/02/2023, similarity score: 88%)
• Adding a supporting documents - Answer (updated: 06/15/2022, similarity score: 87%)

[serifluous]

(Ignore PasteBot)

Progress Steps currently won't work in the way you've laid out. It centers the status icon with the content like this:

But this is only because when we first designed Progress Steps, we didn't get many use cases from teams that they needed extra content. We're open to adding more features, though, so please submit a dependency request if you need it!: https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l

In the meantime, I personally think the exploration you have with the badges works better in this case since it's the main set-up experience here. Progress Steps was designed as more of a supplementary navigation component, so its success state is more muted. If you decide to go this route, please submit a dependency request anyway! We'll take it into account as we build out more process/progress-type patterns.

[simsemma]

ahhh ok this is super helpful - i'll play around with both! i agree, i think the badges may work better so it's good to get your thoughts on that too. either way i'll submit a dependency request :) thank you!!