Stepper::Navigation and Stepper::List: Create components

[dchyun]

📌 Summary

This PR adds the following new components to the HDS components library.

• Hds::Stepper::Nav
  • Subcomponents: Hds::Stepper::Nav::Step and Hds::Stepper::Nav::Panel
• Hds::Stepper::List
  • Subcomponent: Hds::Stepper::List::Step

Preview pages

• Stepper Nav
• Stepper List

Requirements Doc

🛠️ Detailed description

Hds::Stepper::Nav Component

This component is a visual indicator of an on-page linear progress, where users can see where they are in a given flow.

The component can be used in two ways. Either using the contextual <S.Step> and <S.Panel> components, or using the @steps argument and passing in an array.

Using Contextual Components

// Example
<Hds::Stepper::Nav
  @currentStep={{this.currentStep}}
  @onStepClick={{this.updateCurrentStep}}
  as |S|
>
  <S.Step>
    <:title>Step 1 Title</:title>
    <:description>Description</:description>
  </S.Step>
  <S.Step>
    <:title>Step 2 Title</:title>
  </S.Step>
  <S.Panel>
    Step 1 content
  </S.Panel>
  <S.Panel>
    Step 2 content
  </S.Panel>
</Hds::Stepper::Nav>

Using @steps argument

// Example
{{#let
  (array
    (hash title='Step 1 Title' description='Description')
    (hash title='Step 2 Title')
  )
  as |steps|
}}

<Hds::Stepper::Nav
  @steps={{steps}}
  @currentStep={{this.currentStep}}
  @onStepChange={{this.updateCurrentStep}}
>
  <:body>
    {{#if (eq this.currentStep 0)}}
      Step 1 content
    {{else}}
      Step 2 content
    {{/if}}
  </:body>
</Hds::Stepper::Nav>

Stepper::Nav

• <[S.Step]>: Stepper::Nav::Step as yielded component
• <[S.Panel]>: Stepper::Nav::Panel as yielded component
• <:body>: Named block used for step content when using steps argument
• steps: Array of data for steps to be created
• currentStep: Base indexed value for step that is currently active
• isInteractive: If true, the user may use the stepper to navigation to previous steps
• titleTag: Sets the DOM tag used for step title text
• onStepChange: Event triggered when the active step is changed through a click on a step

[S].Step

• <:title>: Contextual block for title text
• <:description>: Contextual block for description text

[S].Panel

• yield: Elements passed as children are yielded as inner content of a
  HTML element

Hds::Stepper::List Component

This component is a visual indicator of a linear progress, where users can see where they are in a given flow.

// Example
<Hds::Stepper::List as |S|>
  <S.Step @status="complete">
    <:title>Title</:title>
    <:description>Description</:description>
    <:content>
      Step 1 content
    </:content>
  </S.Step>
  <S.Step @status="progress">
    <:title>Title</:title>
    <:description>Description</:description>
    <:content>
      Step 2 content
    </:content>
  </S.Step>
  <S.Step @status="incomplete">
    <:title>Title</:title>
  </S.Step>
</Hds::Stepper::List>

Stepper::List

• <[S].Step>: Stepper::List::Step as yielded component
• titleTag: Sets the DOM tag used for step title text

[S].Step

• <:title>: Contextual block for title text
• <:description>: Contextual block for description text
• <:content>: Contextual block for any additional content
• status: Status of the step based on current indicator statuses

📸 Screenshots

Hds::Stepper::Nav

Interactive

Non-interactive

Hds::Stepper::List

🔗 External links

Jira ticket: HDS-4411
Requirements Doc: Link
Figma file: Link

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 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 17, 2025 3:07pm
hds-website	✅ Ready (Inspect)	Visit Preview	Mar 17, 2025 3:07pm

[github-actions]

📦 RC Packages Published

Latest commit: 6de254f

Published 1 packages

@hashicorp/design-system-components@4.18.0-rc-20250317151151

yarn up -C @hashicorp/design-system-components@rc

[shleewhite]

Nice! Thanks for making all the fixes.