Skip to content

Commit d42b5b2

Browse files
dchyundchyun
authored
Showcase: StepperList page gts conversion (#3190)
1 parent 6ca0cae commit d42b5b2

File tree

9 files changed

+357
-278
lines changed

9 files changed

+357
-278
lines changed

‎showcase/app/components/page-components/stepper/list/code-fragments/with-default-implementation.gts‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import Component from '@glimmer/component';
6+
import { tracked } from '@glimmer/tracking';
7+
import { on } from '@ember/modifier';
8+
import style from 'ember-style-modifier';
9+
import type Owner from '@ember/owner';
10+
11+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
12+
13+
import {
14+
HdsButton,
15+
HdsButtonSet,
16+
HdsStepperList,
17+
} from '@hashicorp/design-system-components/components';
18+
19+
import type { HdsStepperStatuses } from '@hashicorp/design-system-components/components/hds/stepper/types';
20+
import type { HdsStepperListSignature } from '@hashicorp/design-system-components/components/hds/stepper/list/index';
21+
22+
type ListData = {
23+
title: string;
24+
status: HdsStepperStatuses;
25+
description: string;
26+
};
27+
28+
const STEP_DATA: ListData[] = [
29+
{
30+
title: 'Step 1',
31+
status: 'complete',
32+
description: 'Description for Step 1',
33+
},
34+
{
35+
title: 'Step 2',
36+
status: 'progress',
37+
description: 'Description for Step 2',
38+
},
39+
{
40+
title: 'Step 3',
41+
status: 'incomplete',
42+
description: 'Description for Step 3',
43+
},
44+
];
45+
46+
export interface CodeFragmentWithDefaultImplementationSignature {
47+
Args: {
48+
currentStep?: number;
49+
isProcessing?: boolean;
50+
};
51+
Element: HdsStepperListSignature['Element'];
52+
}
53+
54+
export default class CodeFragmentWithDefaultImplementationComponents extends Component<CodeFragmentWithDefaultImplementationSignature> {
55+
@tracked currentStep;
56+
@tracked steps = STEP_DATA;
57+
58+
constructor(
59+
owner: Owner,
60+
args: CodeFragmentWithDefaultImplementationSignature['Args'],
61+
) {
62+
super(owner, args);
63+
this.currentStep = this.args.currentStep ?? 0;
64+
}
65+
66+
updateSteps = () => {
67+
const stepsNew = structuredClone(this.steps);
68+
stepsNew.forEach((step, index) => {
69+
if (index < this.currentStep) {
70+
step.status = 'complete';
71+
} else if (index === this.currentStep) {
72+
step.status = 'progress';
73+
} else {
74+
step.status = 'incomplete';
75+
}
76+
});
77+
this.steps = [...stepsNew];
78+
};
79+
80+
updateStepsProcessing = () => {
81+
const stepsNew = structuredClone(this.steps);
82+
stepsNew.forEach((step, index) => {
83+
if (index < this.currentStep) {
84+
step.status = 'complete';
85+
} else if (index === this.currentStep) {
86+
step.status = 'processing';
87+
} else {
88+
step.status = 'incomplete';
89+
}
90+
});
91+
this.steps = [...stepsNew];
92+
};
93+
94+
onNextClick = () => {
95+
if (this.currentStep < this.steps.length) {
96+
this.currentStep++;
97+
this.updateSteps();
98+
}
99+
};
100+
101+
onNextClickProcessing = () => {
102+
if (this.currentStep < this.steps.length) {
103+
this.updateStepsProcessing();
104+
window.setTimeout(() => {
105+
this.currentStep++;
106+
this.updateSteps();
107+
}, 3000);
108+
}
109+
};
110+
111+
onPreviousClick = () => {
112+
if (this.currentStep >= 0) {
113+
this.currentStep--;
114+
this.updateSteps();
115+
}
116+
};
117+
118+
<template>
119+
<HdsStepperList
120+
@titleTag="h3"
121+
@ariaLabel="Label"
122+
{{style width="200px"}}
123+
as |S|
124+
>
125+
{{#each this.steps as |step|}}
126+
<S.Step @status={{step.status}}>
127+
<:title>{{step.title}}</:title>
128+
<:description>{{step.description}}</:description>
129+
<:content>
130+
<ShwPlaceholder @text="Generic content" @height="20" />
131+
</:content>
132+
</S.Step>
133+
{{/each}}
134+
</HdsStepperList>
135+
<HdsButtonSet class="shw-component-stepper-list-sample-form-btn">
136+
<HdsButton
137+
type="button"
138+
@text="Previous"
139+
@color="secondary"
140+
@isInline={{true}}
141+
{{on "click" this.onPreviousClick}}
142+
/>
143+
<HdsButton
144+
type="button"
145+
@text="Next"
146+
@isInline={{true}}
147+
{{on
148+
"click"
149+
(if @isProcessing this.onNextClickProcessing this.onNextClick)
150+
}}
151+
/>
152+
</HdsButtonSet>
153+
</template>
154+
}

‎showcase/app/components/page-components/stepper/list/index.gts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import { pageTitle } from 'ember-page-title';
7+
8+
import ShwTextH1 from 'showcase/components/shw/text/h1';
9+
10+
import SubSectionBaseElements from 'showcase/components/page-components/stepper/list/sub-sections/base-elements';
11+
import SubSectionExampleImplementations from 'showcase/components/page-components/stepper/list/sub-sections/example-implementations';
12+
import SubSectionStatus from 'showcase/components/page-components/stepper/list/sub-sections/status';
13+
14+
const StepperListIndex: TemplateOnlyComponent = <template>
15+
{{pageTitle "StepperList Component"}}
16+
17+
<ShwTextH1>StepperList</ShwTextH1>
18+
19+
<section data-test-percy>
20+
<SubSectionStatus />
21+
<SubSectionBaseElements />
22+
<SubSectionExampleImplementations />
23+
</section>
24+
</template>;
25+
26+
export default StepperListIndex;

‎showcase/app/components/page-components/stepper/list/sub-sections/base-elements.gts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import { capitalize } from '@ember/string';
7+
8+
import ShwDivider from 'showcase/components/shw/divider';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
11+
import ShwTextH2 from 'showcase/components/shw/text/h2';
12+
import ShwTextH3 from 'showcase/components/shw/text/h3';
13+
import ShwTextH4 from 'showcase/components/shw/text/h4';
14+
15+
import { HdsStepperList } from '@hashicorp/design-system-components/components';
16+
17+
import { STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';
18+
19+
const SubSectionBaseElements: TemplateOnlyComponent = <template>
20+
<ShwTextH2>Base elements</ShwTextH2>
21+
22+
<ShwTextH3>ListStep</ShwTextH3>
23+
24+
<ShwTextH4>Status</ShwTextH4>
25+
26+
<ShwGrid @columns={{4}} as |SG|>
27+
{{#each STATUSES as |status|}}
28+
<SG.Item @label="{{capitalize status}}">
29+
<HdsStepperList @ariaLabel="Label" as |S|>
30+
<S.Step @status={{status}}>
31+
<:title>Title</:title>
32+
<:description>Description</:description>
33+
<:content>
34+
<ShwPlaceholder @text="Generic content" @height="20" />
35+
</:content>
36+
</S.Step>
37+
</HdsStepperList>
38+
</SG.Item>
39+
{{/each}}
40+
</ShwGrid>
41+
42+
<ShwDivider />
43+
</template>;
44+
45+
export default SubSectionBaseElements;

‎showcase/app/components/page-components/stepper/list/sub-sections/example-implementations.gts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
7+
import ShwGrid from 'showcase/components/shw/grid';
8+
import ShwTextH2 from 'showcase/components/shw/text/h2';
9+
10+
import CodeFragmentWithDefaultImplementationComponents from 'showcase/components/page-components/stepper/list/code-fragments/with-default-implementation';
11+
12+
const SubSectionExampleImplementations: TemplateOnlyComponent = <template>
13+
<ShwTextH2>Example implementations</ShwTextH2>
14+
15+
<ShwGrid @columns={{2}} as |SG|>
16+
<SG.Item @label="Default">
17+
<CodeFragmentWithDefaultImplementationComponents @currentStep={{1}} />
18+
</SG.Item>
19+
<SG.Item @label="Processing state">
20+
<CodeFragmentWithDefaultImplementationComponents
21+
@currentStep={{1}}
22+
@isProcessing={{true}}
23+
/>
24+
</SG.Item>
25+
</ShwGrid>
26+
</template>;
27+
28+
export default SubSectionExampleImplementations;

‎showcase/app/components/page-components/stepper/list/sub-sections/status.gts‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import style from 'ember-style-modifier';
7+
8+
import ShwDivider from 'showcase/components/shw/divider';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
11+
import ShwTextH2 from 'showcase/components/shw/text/h2';
12+
13+
import { HdsStepperList } from '@hashicorp/design-system-components/components';
14+
15+
const SubSectionStatus: TemplateOnlyComponent = <template>
16+
<ShwTextH2>Status</ShwTextH2>
17+
18+
<ShwGrid @columns={{2}} as |SG|>
19+
<SG.Item @label="Default">
20+
<HdsStepperList
21+
@titleTag="h3"
22+
@ariaLabel="Label"
23+
{{style width="200px"}}
24+
as |S|
25+
>
26+
<S.Step @status="complete">
27+
<:title>Title</:title>
28+
<:description>Description</:description>
29+
<:content>
30+
<ShwPlaceholder @text="Step 1: Generic content" @height="20" />
31+
</:content>
32+
</S.Step>
33+
<S.Step @status="complete">
34+
<:title>Title</:title>
35+
<:description>Description</:description>
36+
<:content>
37+
<ShwPlaceholder @text="Step 2: Generic content" @height="20" />
38+
</:content>
39+
</S.Step>
40+
<S.Step @status="progress">
41+
<:title>Title</:title>
42+
<:description>Description</:description>
43+
<:content>
44+
<ShwPlaceholder @text="Step 3: Generic content" @height="20" />
45+
</:content>
46+
</S.Step>
47+
<S.Step @status="incomplete">
48+
<:title>Title</:title>
49+
</S.Step>
50+
</HdsStepperList>
51+
</SG.Item>
52+
<SG.Item @label="All complete">
53+
<HdsStepperList
54+
@titleTag="h3"
55+
{{style width="200px"}}
56+
@ariaLabel="Label"
57+
as |S|
58+
>
59+
<S.Step @status="complete">
60+
<:title>Title</:title>
61+
<:description>Description</:description>
62+
<:content>
63+
<ShwPlaceholder @text="Step 1: Generic content" @height="20" />
64+
</:content>
65+
</S.Step>
66+
<S.Step @status="complete">
67+
<:title>Title</:title>
68+
<:description>Description</:description>
69+
<:content>
70+
<ShwPlaceholder @text="Step 2: Generic content" @height="20" />
71+
</:content>
72+
</S.Step>
73+
<S.Step @status="complete">
74+
<:title>Title</:title>
75+
<:description>Description</:description>
76+
<:content>
77+
<ShwPlaceholder @text="Step 3: Generic content" @height="20" />
78+
</:content>
79+
</S.Step>
80+
<S.Step @status="complete">
81+
<:title>Title</:title>
82+
</S.Step>
83+
</HdsStepperList>
84+
</SG.Item>
85+
</ShwGrid>
86+
87+
<ShwDivider />
88+
</template>;
89+
90+
export default SubSectionStatus;

0 commit comments

Comments
 (0)