Skip to content

Commit 1040393

Browse files
didoodidoo
authored
Showcase: Convert Icon to gts (#3173)
1 parent bbc8e19 commit 1040393

File tree

7 files changed

+259
-174
lines changed

7 files changed

+259
-174
lines changed

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

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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 style from 'ember-style-modifier/modifiers/style';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH4 from 'showcase/components/shw/text/h4';
11+
import ShwFlex from 'showcase/components/shw/flex';
12+
import ShwGrid from 'showcase/components/shw/grid';
13+
import ShwDivider from 'showcase/components/shw/divider';
14+
15+
import { HdsIcon } from '@hashicorp/design-system-components/components';
16+
import { COLORS } from '@hashicorp/design-system-components/components/hds/icon/index';
17+
18+
const SubSectionColor: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Color</ShwTextH2>
20+
21+
<ShwTextH4 @tag="h3">Color inheritance</ShwTextH4>
22+
<ShwFlex @direction="column" as |SF|>
23+
<SF.Item as |SFI|>
24+
<SFI.Label>unspecified color (<code>currentColor</code>)</SFI.Label>
25+
<div>
26+
<HdsIcon @name="lock-fill" @size="24" />
27+
</div>
28+
</SF.Item>
29+
<SF.Item as |SGI|>
30+
<SGI.Label>parent with <code>#e12568</code> color</SGI.Label>
31+
<div {{style color="#e12568"}}>
32+
<HdsIcon @name="lock-fill" @size="24" />
33+
</div>
34+
</SF.Item>
35+
</ShwFlex>
36+
37+
<ShwDivider @level={{2}} />
38+
39+
<ShwTextH4 @tag="h3">Pre-defined colors</ShwTextH4>
40+
<ShwGrid @columns={{5}} as |SG|>
41+
{{#each COLORS as |color|}}
42+
<SG.Item @label={{color}}>
43+
<div class="shw-component-icon-sample-color--{{color}}">
44+
<HdsIcon @name="lock-fill" @color={{color}} @size="24" />
45+
</div>
46+
</SG.Item>
47+
{{/each}}
48+
</ShwGrid>
49+
50+
<ShwDivider @level={{2}} />
51+
52+
<ShwTextH4 @tag="h3">Custom colors</ShwTextH4>
53+
<ShwFlex @direction="column" as |SF|>
54+
<SF.Item as |SGI|>
55+
<SGI.Label><code>#e91e63</code></SGI.Label>
56+
<HdsIcon @name="lock-fill" @color="#e91e63" @size="24" />
57+
</SF.Item>
58+
<SF.Item as |SGI|>
59+
<SGI.Label><code>--token-color-palette-purple-400</code></SGI.Label>
60+
<HdsIcon
61+
@name="lock-fill"
62+
@color="var(--token-color-palette-purple-400)"
63+
@size="24"
64+
/>
65+
</SF.Item>
66+
<SF.Item as |SGI|>
67+
<SGI.Label><code>orange</code>
68+
+ parent with
69+
<code>green !important</code>
70+
</SGI.Label>
71+
<div {{style color="green !important"}}>
72+
<HdsIcon @name="lock-fill" @color="orange" @size="24" />
73+
</div>
74+
</SF.Item>
75+
</ShwFlex>
76+
77+
<ShwDivider />
78+
</template>;
79+
80+
export default SubSectionColor;

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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 { array } from '@ember/helper';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH4 from 'showcase/components/shw/text/h4';
11+
import ShwFlex from 'showcase/components/shw/flex';
12+
13+
import { HdsIcon } from '@hashicorp/design-system-components/components';
14+
15+
const SubSectionDisplay: TemplateOnlyComponent = <template>
16+
<ShwTextH2>Display</ShwTextH2>
17+
18+
{{#let (array false true) as |booleans|}}
19+
{{#each booleans as |isInline|}}
20+
<ShwTextH4 @tag="h3">{{if
21+
isInline
22+
"Inline"
23+
"Block (default)"
24+
}}</ShwTextH4>
25+
26+
<ShwFlex class="shw-foundation-outline-icons" as |SF|>
27+
<SF.Item @label="single icon">
28+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
29+
</SF.Item>
30+
<SF.Item @label="multiple icons">
31+
<HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
32+
<HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
33+
<HdsIcon @name="alert-triangle-fill" @isInline={{isInline}} />
34+
</SF.Item>
35+
</ShwFlex>
36+
37+
<ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SG|>
38+
<SG.Item @label="icon + inline text">
39+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
40+
<span class="hds-typography-body-200">Lorem ipsum dolor</span>
41+
</SG.Item>
42+
<SG.Item @label="icon + inline text (inside flexbox)">
43+
<div class="shw-foundation-icon-container-flex">
44+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
45+
<span class="hds-typography-body-200">Lorem ipsum dolor</span>
46+
</div>
47+
</SG.Item>
48+
<SG.Item @label="icon + inline text (inside grid)">
49+
<div class="shw-foundation-icon-container-grid">
50+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
51+
<span class="hds-typography-body-200">Lorem ipsum dolor</span>
52+
</div>
53+
</SG.Item>
54+
</ShwFlex>
55+
56+
<ShwFlex class="shw-foundation-outline-icons" @gap="4rem" as |SF|>
57+
<SF.Item @label="icons interleaved with inline text">
58+
<span class="hds-typography-body-200">Lorem ipsum dolor</span>
59+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
60+
<span class="hds-typography-body-200">Sit amet consectetur</span>
61+
<HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
62+
<HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
63+
<HdsIcon @name="alert-triangle-fill" @isInline={{isInline}} />
64+
<span class="hds-typography-body-200">Adipisicing elit</span>
65+
</SF.Item>
66+
<SF.Item @label="icons interleaved with block text">
67+
<p class="hds-typography-body-200">Lorem ipsum dolor</p>
68+
<HdsIcon @name="bookmark" @isInline={{isInline}} />
69+
<p class="hds-typography-body-200">Sit amet consectetur</p>
70+
<HdsIcon @name="alert-circle-fill" @isInline={{isInline}} />
71+
<HdsIcon @name="alert-diamond-fill" @isInline={{isInline}} />
72+
<HdsIcon @name="alert-triangle-fill" @isInline={{isInline}} />
73+
<p class="hds-typography-body-200">Adipisicing elit</p>
74+
</SF.Item>
75+
</ShwFlex>
76+
77+
{{/each}}
78+
{{/let}}
79+
</template>;
80+
81+
export default SubSectionDisplay;

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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 style from 'ember-style-modifier/modifiers/style';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextBody from 'showcase/components/shw/text/body';
11+
import ShwFlex from 'showcase/components/shw/flex';
12+
import ShwDivider from 'showcase/components/shw/divider';
13+
14+
import { HdsIcon } from '@hashicorp/design-system-components/components';
15+
16+
const SubSectionSize: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Size</ShwTextH2>
18+
19+
<ShwTextBody>Base sizes</ShwTextBody>
20+
21+
<ShwFlex as |SF|>
22+
<SF.Item @label="16px (default)">
23+
<HdsIcon @name="bug" />
24+
</SF.Item>
25+
<SF.Item @label="24px">
26+
<HdsIcon @name="bug" @size="24" />
27+
</SF.Item>
28+
</ShwFlex>
29+
30+
<ShwTextBody>Custom sizes</ShwTextBody>
31+
32+
<ShwFlex as |SF|>
33+
<SF.Item @label="12px (stretched)">
34+
<div {{style width="12px" height="12px"}}>
35+
<HdsIcon @name="bug" @size="16" @stretched={{true}} />
36+
</div>
37+
</SF.Item>
38+
<SF.Item @label="32px (stretched)">
39+
<div {{style width="32px" height="32px"}}>
40+
<HdsIcon @name="bug" @size="24" @stretched={{true}} />
41+
</div>
42+
</SF.Item>
43+
<SF.Item @label="32px (stretched + inline)">
44+
<div {{style width="32px" height="32px"}}>
45+
<HdsIcon
46+
@name="bug"
47+
@size="24"
48+
@stretched={{true}}
49+
@isInline={{true}}
50+
/>
51+
</div>
52+
</SF.Item>
53+
</ShwFlex>
54+
55+
<ShwDivider />
56+
</template>;
57+
58+
export default SubSectionSize;

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

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

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

8-
import { COLORS } from '@hashicorp/design-system-components/components/hds/icon/index';
9-
108
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
119

1210
export type PageComponentsIconModel = ModelFrom<PageComponentsIconRoute>;
1311

14-
export default class PageComponentsIconRoute extends Route {
15-
model() {
16-
return {
17-
COLORS,
18-
};
19-
}
20-
}
12+
export default class PageComponentsIconRoute extends Route {}

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

0 commit comments

Comments
 (0)