Skip to content

StepperList - Fix type for status #3073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 31, 2025
Merged

StepperList - Fix type for status #3073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b78fb7
HDS-5169 Fix: Update `status` type in `StepperList`
dchyun Jul 31, 2025
9581838
Chore: Add changeset
dchyun Jul 31, 2025
d466ddf
Fix: Remove comments
dchyun Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/eight-lies-bathe.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": patch
---

<!-- START components/stepper/list -->
`Stepper::List` - Fixed type for `status` argument in `List::Step` to be `HdsStepperStatuses` instead of enum `HdsStepperStatusesValues`
<!-- END -->
2 changes: 1 addition & 1 deletion packages/components/src/components/hds/stepper/list/step.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const MAPPING_STATUS_TO_SR_ONLY_TEXT = HdsStepperStatusToSrOnlyText;

export interface HdsStepperListStepSignature {
Args: {
status?: HdsStepperStatusesValues;
status?: HdsStepperStatuses;
titleTag?: HdsStepperTitleTags;
stepIds?: HdsStepperListStepIds;
didInsertNode?: (element: HTMLElement) => void;
Expand Down
32 changes: 11 additions & 21 deletions showcase/app/controllers/page-components/stepper/list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,68 +8,58 @@ import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { deepTracked } from 'ember-deep-tracked';

import type { HdsStepperStatuses } from '@hashicorp/design-system-components/components/hds/stepper/types';
import type { PageComponentsStepperListModel } from 'showcase/routes/page-components/stepper/list';

import { HdsStepperStatusesValues as STEP_STATUSES_ENUM } from '@hashicorp/design-system-components/components/hds/stepper/types';

// basic function that clones an array of objects (not deep)
export const clone = <T>(arr: T[]): T[] => {
return arr.map((item) => ({ ...item }));
};

type ListData = {
title: string;
status: STEP_STATUSES_ENUM;
status: HdsStepperStatuses;
description: string;
};

const DEFAULT_DATA: ListData[] = [
{
title: 'Step 1',
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
status: STEP_STATUSES_ENUM.Complete,
status: 'complete',
description: 'Description for Step 1',
},
{
title: 'Step 2',
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
status: STEP_STATUSES_ENUM.Progress,
status: 'progress',
description: 'Description for Step 2',
},
{
title: 'Step 3',
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
status: STEP_STATUSES_ENUM.Incomplete,
status: 'incomplete',
description: 'Description for Step 3',
},
];

const updateSteps = (steps: ListData[], stepNumber: number) => {
steps.forEach((step, index) => {
if (index < stepNumber) {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Complete;
step.status = 'complete';
} else if (index === stepNumber) {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Progress;
step.status = 'progress';
} else {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Incomplete;
step.status = 'incomplete';
}
});
};

const updateStepsProcessing = (steps: ListData[], stepNumber: number) => {
steps.forEach((step, index) => {
if (index < stepNumber) {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Complete;
step.status = 'complete';
} else if (index === stepNumber) {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Processing;
step.status = 'processing';
} else {
// TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169
step.status = STEP_STATUSES_ENUM.Incomplete;
step.status = 'incomplete';
}
});
};
Expand Down
3 changes: 0 additions & 3 deletions showcase/app/routes/page-components/stepper/list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import Route from '@ember/routing/route';

import { STATUSES as STEP_STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';
import { HdsStepperStatusesValues as STEP_STATUSES_ENUM } from '@hashicorp/design-system-components/components/hds/stepper/types';

import type { ModelFrom } from 'showcase/utils/ModelFromRoute';

Expand All @@ -17,8 +16,6 @@ export default class PageComponentsStepperListRoute extends Route {
model() {
return {
STEP_STATUSES,
// TODO: will not need this after https://hashicorp.atlassian.net/browse/HDS-5169
STEP_STATUSES_ENUM,
};
}
}
25 changes: 8 additions & 17 deletions showcase/app/templates/page-components/stepper/list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,64 +14,56 @@
<Shw::Grid @columns={{2}} as |SG|>
<SG.Item @label="Default">
<Hds::Stepper::List @titleTag="h3" @ariaLabel="Label" {{style width="200px"}} as |S|>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 1: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 2: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Progress}}>
<S.Step @status="progress">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 3: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Incomplete}}>
<S.Step @status="incomplete">
<:title>Title</:title>
</S.Step>
</Hds::Stepper::List>
</SG.Item>
<SG.Item @label="All complete">
<Hds::Stepper::List @titleTag="h3" {{style width="200px"}} @ariaLabel="Label" as |S|>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 1: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 2: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
<:description>Description</:description>
<:content>
<Shw::Placeholder @text="Step 3: Generic content" @height="20" />
</:content>
</S.Step>
{{! TODO: will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{@model.STEP_STATUSES_ENUM.Complete}}>
<S.Step @status="complete">
<:title>Title</:title>
</S.Step>
</Hds::Stepper::List>
Expand All @@ -91,7 +83,6 @@
{{#each @model.STEP_STATUSES as |status|}}
<SG.Item @label="{{capitalize status}}">
<Hds::Stepper::List @ariaLabel="Label" as |S|>
{{! @glint-expect-error - will be fixed by https://hashicorp.atlassian.net/browse/HDS-5169 }}
<S.Step @status={{status}}>
<:title>Title</:title>
<:description>Description</:description>
Expand Down