Skip to content

Commit 5d2033f

Browse files
dchyundchyun
authored
Showcase: Convert StepperIndicator page to gts (#3197)
1 parent 806dbe4 commit 5d2033f

File tree

6 files changed

+144
-83
lines changed

6 files changed

+144
-83
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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 SubSectionStepIndicator from 'showcase/components/page-components/stepper/indicator/sub-sections/step-indicator';
11+
import SubSectionTaskIndicator from 'showcase/components/page-components/stepper/indicator/sub-sections/task-indicator';
12+
13+
const StepperIndicatorIndex: TemplateOnlyComponent = <template>
14+
{{pageTitle "Stepper Component"}}
15+
16+
<ShwTextH1>Stepper</ShwTextH1>
17+
18+
<section data-test-percy>
19+
<SubSectionStepIndicator />
20+
<SubSectionTaskIndicator />
21+
</section>
22+
</template>;
23+
24+
export default StepperIndicatorIndex;

‎showcase/app/components/page-components/stepper/indicator/sub-sections/step-indicator.gts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
11+
import ShwTextH3 from 'showcase/components/shw/text/h3';
12+
13+
import { HdsStepperStepIndicator } from '@hashicorp/design-system-components/components';
14+
15+
import { STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';
16+
17+
const STATES = ['default', 'hover', 'active'];
18+
19+
const SubSectionStepIndicator: TemplateOnlyComponent = <template>
20+
<ShwTextH2>StepIndicator</ShwTextH2>
21+
22+
<ShwTextH3>Default</ShwTextH3>
23+
24+
<ShwGrid @columns={{6}} as |SG|>
25+
{{#each STATUSES as |status|}}
26+
<SG.Item @label={{capitalize status}}>
27+
<HdsStepperStepIndicator @status={{status}} @text="1" />
28+
</SG.Item>
29+
{{/each}}
30+
</ShwGrid>
31+
32+
<ShwTextH3>Interactive</ShwTextH3>
33+
34+
<ShwGrid @columns={{6}} as |SG|>
35+
{{#each STATUSES as |status|}}
36+
{{#each STATES as |state|}}
37+
<SG.Item @label="{{capitalize status}}/{{state}}">
38+
<HdsStepperStepIndicator
39+
@status={{status}}
40+
@text="1"
41+
@isInteractive={{true}}
42+
mock-state-value={{state}}
43+
/>
44+
</SG.Item>
45+
{{/each}}
46+
<SG.Item />
47+
<SG.Item />
48+
<SG.Item />
49+
{{/each}}
50+
</ShwGrid>
51+
52+
<ShwDivider />
53+
</template>;
54+
55+
export default SubSectionStepIndicator;

‎showcase/app/components/page-components/stepper/indicator/sub-sections/task-indicator.gts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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 ShwGrid from 'showcase/components/shw/grid';
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH3 from 'showcase/components/shw/text/h3';
11+
12+
import { HdsStepperTaskIndicator } from '@hashicorp/design-system-components/components';
13+
14+
import { STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/task/indicator';
15+
16+
const STATES = ['default', 'hover', 'active'];
17+
18+
const SubSectionTaskIndicator: TemplateOnlyComponent = <template>
19+
<ShwTextH2>TaskIndicator</ShwTextH2>
20+
21+
<ShwTextH3>Default</ShwTextH3>
22+
23+
<ShwGrid @columns={{6}} as |SG|>
24+
{{#each STATUSES as |status|}}
25+
<SG.Item @label={{capitalize status}}>
26+
<HdsStepperTaskIndicator @status={{status}} />
27+
</SG.Item>
28+
{{/each}}
29+
</ShwGrid>
30+
31+
<ShwTextH3>Interactive</ShwTextH3>
32+
33+
<ShwGrid @columns={{6}} as |SG|>
34+
{{#each STATUSES as |status|}}
35+
{{#each STATES as |state|}}
36+
<SG.Item @label="{{capitalize status}}/{{state}}">
37+
<HdsStepperTaskIndicator
38+
@status={{status}}
39+
@isInteractive={{true}}
40+
mock-state-value={{state}}
41+
/>
42+
</SG.Item>
43+
{{/each}}
44+
<SG.Item />
45+
<SG.Item />
46+
<SG.Item />
47+
{{/each}}
48+
</ShwGrid>
49+
</template>;
50+
51+
export default SubSectionTaskIndicator;

‎showcase/app/routes/page-components/stepper/indicator.ts‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,9 @@
55

66
import Route from '@ember/routing/route';
77

8-
import { STATUSES as STEP_STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';
9-
import { STATUSES as TASK_STATUSES } from '@hashicorp/design-system-components/components/hds/stepper/task/indicator';
10-
118
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
129

1310
export type PageComponentsStepperIndicatorModel =
1411
ModelFrom<PageComponentsStepperIndicatorRoute>;
1512

16-
export default class PageComponentsStepperIndicatorRoute extends Route {
17-
model() {
18-
const INDICATOR_STATES = ['default', 'hover', 'active'];
19-
return {
20-
INDICATOR_STATES,
21-
STEP_STATUSES,
22-
TASK_STATUSES,
23-
};
24-
}
25-
}
13+
export default class PageComponentsStepperIndicatorRoute extends Route {}

‎showcase/app/templates/page-components/stepper/indicator.gts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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 StepperIndicatorIndex from 'showcase/components/page-components/stepper/indicator';
8+
9+
const PageComponentsStepperIndicator: TemplateOnlyComponent = <template>
10+
<StepperIndicatorIndex />
11+
</template>;
12+
13+
export default PageComponentsStepperIndicator;

‎showcase/app/templates/page-components/stepper/indicator.hbs‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

0 commit comments

Comments
 (0)