Skip to content

Commit 806dbe4

Browse files
shleewhiteshleewhite
authored
Showcase: convert Tag pages to gts (#3192)
1 parent 35d22e5 commit 806dbe4

File tree

15 files changed

+462
-279
lines changed

15 files changed

+462
-279
lines changed

‎showcase/app/components/page-components/tag/index.gts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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 SubSectionContent from 'showcase/components/page-components/tag/sub-sections/content';
11+
import SubSectionStates from 'showcase/components/page-components/tag/sub-sections/states';
12+
import SubSectionLinkColors from 'showcase/components/page-components/tag/sub-sections/link-colors';
13+
import SubSectionContainers from 'showcase/components/page-components/tag/sub-sections/containers';
14+
import SubSectionTooltipPlacements from 'showcase/components/page-components/tag/sub-sections/tooltip-placements';
15+
import SubSectionInheritance from 'showcase/components/page-components/tag/sub-sections/inheritance';
16+
import SubSectionDemos from 'showcase/components/page-components/tag/sub-sections/demos';
17+
18+
const TagIndex: TemplateOnlyComponent = <template>
19+
{{pageTitle "Tag Component"}}
20+
21+
<ShwTextH1>Tag</ShwTextH1>
22+
23+
<section data-test-percy>
24+
<SubSectionContent />
25+
<SubSectionStates />
26+
<SubSectionLinkColors />
27+
<SubSectionContainers />
28+
<SubSectionTooltipPlacements />
29+
<SubSectionInheritance />
30+
</section>
31+
32+
{{! For some reason, Ember tests don't play well with iframes (URL not found) so we can't take snapshots of these examples in Percy }}
33+
<section>
34+
<SubSectionDemos />
35+
</section>
36+
</template>;
37+
38+
export default TagIndex;

‎showcase/app/components/page-components/tag/sub-sections/containers.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 style from 'ember-style-modifier/modifiers/style';
7+
import { array } from '@ember/helper';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
import NOOP from 'showcase/utils/noop';
13+
14+
import { HdsTag } from '@hashicorp/design-system-components/components';
15+
16+
const SubSectionContainers: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Containers</ShwTextH2>
18+
19+
<ShwGrid @columns={{3}} as |SG|>
20+
{{#let (array "block" "flex" "grid") as |displays|}}
21+
{{#each displays as |display|}}
22+
<SG.Item as |SGI|>
23+
<SGI.Label>Parent with <code>display: {{display}}</code></SGI.Label>
24+
<div
25+
class="shw-component-tag-group"
26+
{{style display=display flex-wrap="wrap"}}
27+
>
28+
<HdsTag @text="My text tag" @onDismiss={{NOOP}} />
29+
<HdsTag @text="My text tag" @onDismiss={{NOOP}} />
30+
<HdsTag @text="My slightly longer tag" @onDismiss={{NOOP}} />
31+
<HdsTag @text="My text tag" @onDismiss={{NOOP}} />
32+
<HdsTag
33+
@text="This is a very long text that should go on multiple lines"
34+
@onDismiss={{NOOP}}
35+
/>
36+
</div>
37+
</SG.Item>
38+
{{/each}}
39+
{{/let}}
40+
</ShwGrid>
41+
42+
<ShwDivider @level={{2}} />
43+
</template>;
44+
45+
export default SubSectionContainers;

‎showcase/app/components/page-components/tag/sub-sections/content.gts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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 ShwFlex from 'showcase/components/shw/flex';
9+
import ShwDivider from 'showcase/components/shw/divider';
10+
import NOOP from 'showcase/utils/noop';
11+
12+
import {
13+
HdsTag,
14+
HdsTextBody,
15+
} from '@hashicorp/design-system-components/components';
16+
17+
const SubSectionContent: TemplateOnlyComponent = <template>
18+
<ShwTextH2>Content</ShwTextH2>
19+
20+
<ShwFlex as |SF|>
21+
<SF.Item>
22+
<HdsTag @text="My text tag" @onDismiss={{NOOP}} />
23+
</SF.Item>
24+
<SF.Item>
25+
<HdsTag @text="My text tag" />
26+
</SF.Item>
27+
<SF.Item>
28+
<HdsTag
29+
@text="My link tag"
30+
@onDismiss={{NOOP}}
31+
@route="page-components.tag"
32+
/>
33+
</SF.Item>
34+
<SF.Item>
35+
<HdsTag @text="My link tag" @route="page-components.tag" />
36+
</SF.Item>
37+
</ShwFlex>
38+
39+
<ShwFlex @label="Inline with other text" as |SF|>
40+
<SF.Item>
41+
<HdsTextBody @size="200" @tag="p">This is a paragraph:
42+
<HdsTag @text="My text tag" /></HdsTextBody>
43+
</SF.Item>
44+
</ShwFlex>
45+
46+
<ShwFlex @label="With long text" as |SF|>
47+
<SF.Item>
48+
<HdsTag
49+
@text="This is a very long text that should go on multiple lines"
50+
@onDismiss={{NOOP}}
51+
/>
52+
</SF.Item>
53+
<SF.Item>
54+
<HdsTag
55+
@text="This is a very long text that should go on multiple lines"
56+
/>
57+
</SF.Item>
58+
<SF.Item>
59+
<HdsTag
60+
@text="This is a very long text that should go on multiple lines"
61+
@onDismiss={{NOOP}}
62+
@route="page-components.tag"
63+
/>
64+
</SF.Item>
65+
<SF.Item>
66+
<HdsTag
67+
@text="This is a very long text that should go on multiple lines"
68+
@route="page-components.tag"
69+
/>
70+
</SF.Item>
71+
</ShwFlex>
72+
73+
<ShwDivider @level={{2}} />
74+
</template>;
75+
76+
export default SubSectionContent;

‎showcase/app/components/page-components/tag/sub-sections/demos.gts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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 ShwFrame from 'showcase/components/shw/frame';
9+
10+
const SubSectionDemos: TemplateOnlyComponent = <template>
11+
<ShwTextH2>Demos</ShwTextH2>
12+
13+
<ShwFrame
14+
@id="demo-tag-performance"
15+
@src="/components/tag/frameless/demo-observer-performance"
16+
@height="300"
17+
@label="Performance test for ResizeObserver"
18+
/>
19+
</template>;
20+
21+
export default SubSectionDemos;

‎showcase/app/components/page-components/tag/sub-sections/inheritance.gts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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 ShwFlex from 'showcase/components/shw/flex';
9+
import ShwDivider from 'showcase/components/shw/divider';
10+
import NOOP from 'showcase/utils/noop';
11+
12+
import { HdsTag } from '@hashicorp/design-system-components/components';
13+
14+
const SubSectionInheritance: TemplateOnlyComponent = <template>
15+
<ShwTextH2>Inheritance</ShwTextH2>
16+
17+
<ShwFlex @label="Applied to parent" as |SF|>
18+
<SF.Item>
19+
<div class="shw-component-tag-inheritance-font-style">
20+
<HdsTag @text="My text tag" @onDismiss={{NOOP}} />
21+
</div>
22+
</SF.Item>
23+
<SF.Item>
24+
<div class="shw-component-tag-inheritance-font-style">
25+
<HdsTag
26+
@text="My link tag"
27+
@onDismiss={{NOOP}}
28+
@route="page-components.tag"
29+
/>
30+
</div>
31+
</SF.Item>
32+
<SF.Item>
33+
<div class="shw-component-tag-inheritance-font-style">
34+
<HdsTag
35+
@text="This is a very long text that should go on multiple lines"
36+
@onDismiss={{NOOP}}
37+
/>
38+
</div>
39+
</SF.Item>
40+
<SF.Item>
41+
<div class="shw-component-tag-inheritance-font-style">
42+
<HdsTag
43+
@text="This is a very long text that should go on multiple lines"
44+
@onDismiss={{NOOP}}
45+
@route="page-components.tag"
46+
/>
47+
</div>
48+
</SF.Item>
49+
</ShwFlex>
50+
51+
<ShwFlex @label="Applied to the tag" as |SF|>
52+
<SF.Item>
53+
<HdsTag
54+
@text="My text tag"
55+
@onDismiss={{NOOP}}
56+
class="shw-component-tag-inheritance-font-style shw-component-tag-inheritance-background-color"
57+
/>
58+
</SF.Item>
59+
<SF.Item>
60+
<HdsTag
61+
@text="My link tag"
62+
@onDismiss={{NOOP}}
63+
@route="page-components.tag"
64+
class="shw-component-tag-inheritance-font-style shw-component-tag-inheritance-background-color"
65+
/>
66+
</SF.Item>
67+
<SF.Item>
68+
<HdsTag
69+
@text="This is a very long text that should go on multiple lines"
70+
@onDismiss={{NOOP}}
71+
class="shw-component-tag-inheritance-font-style shw-component-tag-inheritance-background-color"
72+
/>
73+
</SF.Item>
74+
<SF.Item>
75+
<HdsTag
76+
@text="This is a very long text that should go on multiple lines"
77+
@onDismiss={{NOOP}}
78+
@route="page-components.tag"
79+
class="shw-component-tag-inheritance-font-style shw-component-tag-inheritance-background-color"
80+
/>
81+
</SF.Item>
82+
</ShwFlex>
83+
84+
<ShwDivider @level={{2}} />
85+
</template>;
86+
87+
export default SubSectionInheritance;

‎showcase/app/components/page-components/tag/sub-sections/link-colors.gts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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/modifiers/style';
7+
import { capitalize } from '@ember/string';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwTextH3 from 'showcase/components/shw/text/h3';
11+
import ShwFlex from 'showcase/components/shw/flex';
12+
import ShwDivider from 'showcase/components/shw/divider';
13+
import ShwGrid from 'showcase/components/shw/grid';
14+
import NOOP from 'showcase/utils/noop';
15+
16+
import { HdsTag } from '@hashicorp/design-system-components/components';
17+
import { COLORS } from '@hashicorp/design-system-components/components/hds/tag/index';
18+
19+
// these are used only for presentation purpose in the showcase
20+
const STATES = ['default', 'hover', 'active', 'focus'];
21+
22+
const SubSectionLinkColors: TemplateOnlyComponent = <template>
23+
<ShwTextH2>Link Colors</ShwTextH2>
24+
25+
{{#each COLORS as |color|}}
26+
<ShwTextH3>{{capitalize color}}</ShwTextH3>
27+
<ShwGrid @columns={{4}} {{style width="max-content"}} as |SG|>
28+
{{#each STATES as |state|}}
29+
<SG.Item @label={{capitalize state}}>
30+
<ShwFlex @direction="column" as |SF|>
31+
<SF.Item>
32+
<HdsTag
33+
@color={{color}}
34+
@text="My link tag"
35+
@onDismiss={{NOOP}}
36+
@route="page-components.tag"
37+
mock-state-value={{state}}
38+
mock-state-selector="button"
39+
/>
40+
</SF.Item>
41+
<SF.Item>
42+
<HdsTag
43+
@color={{color}}
44+
@text="My link tag"
45+
@onDismiss={{NOOP}}
46+
@route="page-components.tag"
47+
mock-state-value={{state}}
48+
mock-state-selector="a"
49+
/>
50+
</SF.Item>
51+
<SF.Item>
52+
<HdsTag
53+
@color={{color}}
54+
@text="My link tag"
55+
@route="page-components.tag"
56+
mock-state-value={{state}}
57+
mock-state-selector="a"
58+
/>
59+
</SF.Item>
60+
</ShwFlex>
61+
</SG.Item>
62+
{{/each}}
63+
</ShwGrid>
64+
{{/each}}
65+
66+
<ShwDivider @level={{2}} />
67+
</template>;
68+
69+
export default SubSectionLinkColors;

‎showcase/app/components/page-components/tag/sub-sections/states.gts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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/modifiers/style';
7+
import { capitalize } from '@ember/string';
8+
9+
import ShwTextH2 from 'showcase/components/shw/text/h2';
10+
import ShwDivider from 'showcase/components/shw/divider';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
import NOOP from 'showcase/utils/noop';
13+
14+
import { HdsTag } from '@hashicorp/design-system-components/components';
15+
16+
// these are used only for presentation purpose in the showcase
17+
const STATES = ['default', 'hover', 'active', 'focus'];
18+
19+
const SubSectionStates: TemplateOnlyComponent = <template>
20+
<ShwTextH2>States</ShwTextH2>
21+
22+
<ShwGrid @columns={{4}} {{style width="max-content"}} as |SG|>
23+
{{#each STATES as |state|}}
24+
<SG.Item @label={{capitalize state}}>
25+
<HdsTag
26+
@text="My tag"
27+
@onDismiss={{NOOP}}
28+
mock-state-value={{state}}
29+
mock-state-selector="button"
30+
/>
31+
</SG.Item>
32+
{{/each}}
33+
</ShwGrid>
34+
35+
<ShwDivider @level={{2}} />
36+
</template>;
37+
38+
export default SubSectionStates;

0 commit comments

Comments
 (0)