📌 Summary

If merged, this PR would update the type of the STATUSES export in the StepperList::Step to fix linting issues.

🛠️ Detailed description

Originally this PR was to update an incorrect import path in the showcase pages of the StepperList. Upon fixing this path, however a new linting error was thrown in the showcase.

Upon further investigation, this linting error is due to the type of the STATUES export of the StepperList. The type of STATUSES is set to string[], but the @status argument of the component is typed as the component specific type HdsStepperStatuses. When using STATUSES in the showcase examples this then causes a type mismatch.

 {{#each STATUSES as |status|}}
      <SG.Item @label="{{capitalize status}}">
        <HdsStepperList @ariaLabel="Label" as |S|>
          <S.Step @status={{status}}>
          ...

To fix this issue, the type of the export STATUSES was updated from string[] to HdsStepperStatuses[]

export enum HdsStepperStatusesValues {
  Incomplete = 'incomplete',
  Progress = 'progress',
  Processing = 'processing',
  Complete = 'complete',
}

export type HdsStepperStatuses = `${HdsStepperStatusesValues}`;

Potential follow-ups

In the component library, the majority of exported arrays of possible values for an argument are typed as the custom type for that component. However, there are various exports that follow this same pattern of typing the export as string[]. These exports will most likely run into the same type issues as those found here.

An effort could be taken to update these types to follow the changes made here.

Example from the Separator component

export const SPACING: string[] = Object.values(HdsSeparatorSpacingValues);

👀 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.