Skip to content

Commit d497b4d

Browse files
shleewhiteshleewhite
authored
Showcase: convert Icon Tile page to gts (#3248)
1 parent fec7c9a commit d497b4d

File tree

7 files changed

+184
-102
lines changed

7 files changed

+184
-102
lines changed

‎showcase/app/components/page-components/icon-tile/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 SubSectionSize from 'showcase/components/page-components/icon-tile/sub-sections/size';
11+
import SubSectionIconColor from 'showcase/components/page-components/icon-tile/sub-sections/icon-color';
12+
import SubSectionLogo from 'showcase/components/page-components/icon-tile/sub-sections/logo';
13+
14+
const IconTileIndex: TemplateOnlyComponent = <template>
15+
{{pageTitle "IconTile Component"}}
16+
17+
<ShwTextH1>IconTile</ShwTextH1>
18+
19+
<section data-test-percy>
20+
<SubSectionSize />
21+
<SubSectionLogo />
22+
<SubSectionIconColor />
23+
</section>
24+
</template>;
25+
26+
export default IconTileIndex;

‎showcase/app/components/page-components/icon-tile/sub-sections/icon-color.gts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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 { notEq } from 'ember-truth-helpers';
7+
8+
import ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
12+
import { HdsIconTile } from '@hashicorp/design-system-components/components';
13+
import {
14+
SIZES,
15+
COLORS,
16+
} from '@hashicorp/design-system-components/components/hds/icon-tile/index';
17+
18+
const SubSectionIconColor: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Icon color</ShwTextH2>
20+
21+
<ShwGrid @columns={{5}} as |SG|>
22+
{{#each COLORS as |color|}}
23+
{{! As agreed with designers, we prefer to hide the option of icon with "hcp" color }}
24+
{{#if (notEq color "hcp")}}
25+
<SG.Item @label={{color}}>
26+
<ShwFlex as |SF|>
27+
{{#each SIZES as |size|}}
28+
<SF.Item>
29+
<HdsIconTile
30+
@icon="dashboard"
31+
@size={{size}}
32+
@color={{color}}
33+
/>
34+
</SF.Item>
35+
{{/each}}
36+
</ShwFlex>
37+
</SG.Item>
38+
{{/if}}
39+
{{/each}}
40+
</ShwGrid>
41+
</template>;
42+
43+
export default SubSectionIconColor;

‎showcase/app/components/page-components/icon-tile/sub-sections/logo.gts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
8+
import ShwGrid from 'showcase/components/shw/grid';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
11+
import { HdsIconTile } from '@hashicorp/design-system-components/components';
12+
import {
13+
SIZES,
14+
PRODUCTS,
15+
} from '@hashicorp/design-system-components/components/hds/icon-tile/index';
16+
17+
const SubSectionLogo: TemplateOnlyComponent = <template>
18+
<ShwTextH2>Logo</ShwTextH2>
19+
20+
<ShwGrid @columns={{5}} as |SG|>
21+
{{#each PRODUCTS as |product|}}
22+
<SG.Item @label={{product}}>
23+
<ShwFlex as |SF2|>
24+
{{#each SIZES as |size|}}
25+
<SF2.Item>
26+
<HdsIconTile @logo={{product}} @size={{size}} />
27+
</SF2.Item>
28+
{{/each}}
29+
</ShwFlex>
30+
</SG.Item>
31+
{{/each}}
32+
</ShwGrid>
33+
</template>;
34+
35+
export default SubSectionLogo;

‎showcase/app/components/page-components/icon-tile/sub-sections/size.gts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwGrid from 'showcase/components/shw/grid';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
12+
import { HdsIconTile } from '@hashicorp/design-system-components/components';
13+
import { SIZES } from '@hashicorp/design-system-components/components/hds/icon-tile/index';
14+
15+
const SubSectionSize: TemplateOnlyComponent = <template>
16+
<ShwTextH2>Size</ShwTextH2>
17+
18+
<ShwGrid @columns={{2}} {{style width="fit-content"}} as |SG|>
19+
<SG.Item @label="With logo">
20+
<ShwFlex as |SF|>
21+
{{#each SIZES as |size|}}
22+
<SF.Item>
23+
<HdsIconTile @logo="boundary" @size={{size}} />
24+
</SF.Item>
25+
{{/each}}
26+
</ShwFlex>
27+
</SG.Item>
28+
<SG.Item @label="With icon">
29+
<ShwFlex as |SF|>
30+
{{#each SIZES as |size|}}
31+
<SF.Item>
32+
<HdsIconTile @icon="dashboard" @size={{size}} />
33+
</SF.Item>
34+
{{/each}}
35+
</ShwFlex>
36+
</SG.Item>
37+
<SG.Item @label="With logo + secondary icon">
38+
<ShwFlex as |SF|>
39+
{{#each SIZES as |size|}}
40+
<SF.Item>
41+
<HdsIconTile
42+
@logo="boundary"
43+
@size={{size}}
44+
@iconSecondary="plus"
45+
/>
46+
</SF.Item>
47+
{{/each}}
48+
</ShwFlex>
49+
</SG.Item>
50+
<SG.Item @label="With icon + secondary icon">
51+
<ShwFlex as |SF|>
52+
{{#each SIZES as |size|}}
53+
<SF.Item>
54+
<HdsIconTile
55+
@icon="dashboard"
56+
@size={{size}}
57+
@iconSecondary="trash"
58+
/>
59+
</SF.Item>
60+
{{/each}}
61+
</ShwFlex>
62+
</SG.Item>
63+
</ShwGrid>
64+
</template>;
65+
66+
export default SubSectionSize;

‎showcase/app/routes/page-components/icon-tile.ts‎

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

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

8-
import {
9-
SIZES,
10-
COLORS,
11-
PRODUCTS,
12-
} from '@hashicorp/design-system-components/components/hds/icon-tile/index';
13-
148
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
159

1610
export type PageComponentsIconTileModel =
1711
ModelFrom<PageComponentsIconTileRoute>;
1812

19-
export default class PageComponentsIconTileRoute extends Route {
20-
model() {
21-
return {
22-
SIZES,
23-
COLORS,
24-
PRODUCTS,
25-
};
26-
}
27-
}
13+
export default class PageComponentsIconTileRoute extends Route {}

‎showcase/app/templates/page-components/icon-tile.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 IconTileIndex from 'showcase/components/page-components/icon-tile';
8+
9+
const PageComponentsIconTile: TemplateOnlyComponent = <template>
10+
<IconTileIndex />
11+
</template>;
12+
13+
export default PageComponentsIconTile;

‎showcase/app/templates/page-components/icon-tile.hbs‎

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

0 commit comments

Comments
 (0)