Skip to content

Commit c2f491f

Browse files
shleewhiteshleewhite
authored
Showcase: convert Toast page to gts (#3191)
1 parent d42b5b2 commit c2f491f

File tree

9 files changed

+276
-187
lines changed

9 files changed

+276
-187
lines changed

‎showcase/app/components/page-components/toast/index.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+
import { pageTitle } from 'ember-page-title';
7+
8+
import ShwTextH1 from 'showcase/components/shw/text/h1';
9+
10+
import SubSectionColor from 'showcase/components/page-components/toast/sub-sections/color';
11+
import SubSectionIcon from 'showcase/components/page-components/toast/sub-sections/icon';
12+
import SubSectionContent from 'showcase/components/page-components/toast/sub-sections/content';
13+
import SubSectionActions from 'showcase/components/page-components/toast/sub-sections/actions';
14+
15+
const ToastIndex: TemplateOnlyComponent = <template>
16+
{{pageTitle "Toast Component"}}
17+
18+
<ShwTextH1>Toast</ShwTextH1>
19+
20+
<section data-test-percy>
21+
<SubSectionColor />
22+
<SubSectionIcon />
23+
<SubSectionContent />
24+
<SubSectionActions />
25+
</section>
26+
</template>;
27+
28+
export default ToastIndex;

‎showcase/app/components/page-components/toast/sub-sections/actions.gts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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 NOOP from 'showcase/utils/noop';
10+
11+
import { HdsToast } from '@hashicorp/design-system-components/components';
12+
13+
const SubSectionActions: TemplateOnlyComponent = <template>
14+
<ShwTextH2>Actions</ShwTextH2>
15+
16+
<ShwFlex as |SF|>
17+
<SF.Item>
18+
<HdsToast @color="warning" @onDismiss={{NOOP}} as |T|>
19+
<T.Title>Action passed as yielded component</T.Title>
20+
<T.Description>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</T.Description>
21+
<T.Button @text="Action" @color="secondary" />
22+
</HdsToast>
23+
</SF.Item>
24+
<SF.Item>
25+
<HdsToast @color="warning" @onDismiss={{NOOP}} as |T|>
26+
<T.Title>With multiple actions passed as yielded components</T.Title>
27+
<T.Description>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</T.Description>
28+
<T.Button @text="Secondary" @color="secondary" />
29+
<T.Button @icon="plus" @text="Tertiary" @color="tertiary" />
30+
<T.LinkStandalone
31+
@icon="plus"
32+
@text="Standalone"
33+
@href="#"
34+
@color="secondary"
35+
/>
36+
</HdsToast>
37+
</SF.Item>
38+
</ShwFlex>
39+
</template>;
40+
41+
export default SubSectionActions;

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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 ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
import NOOP from 'showcase/utils/noop';
11+
12+
import { HdsToast } from '@hashicorp/design-system-components/components';
13+
14+
// the "Toast" is built on top of the "Alert" so it shares the same colors
15+
import { COLORS } from '@hashicorp/design-system-components/components/hds/alert/index';
16+
17+
const SubSectionColor: TemplateOnlyComponent = <template>
18+
<ShwTextH2>Color</ShwTextH2>
19+
20+
<ShwFlex as |SF|>
21+
{{#each COLORS as |color|}}
22+
<SF.Item @label={{capitalize color}}>
23+
<HdsToast @color={{color}} @onDismiss={{NOOP}} as |T|>
24+
<T.Title>Lorem ipsum dolor</T.Title>
25+
<T.Description>This is the toast with
26+
<em>{{color}}</em>
27+
color.</T.Description>
28+
</HdsToast>
29+
</SF.Item>
30+
{{/each}}
31+
</ShwFlex>
32+
</template>;
33+
34+
export default SubSectionColor;

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
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 ShwGrid from 'showcase/components/shw/grid';
10+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
11+
import NOOP from 'showcase/utils/noop';
12+
13+
import {
14+
HdsToast,
15+
HdsLinkInline,
16+
} from '@hashicorp/design-system-components/components';
17+
18+
const SubSectionContent: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Content</ShwTextH2>
20+
21+
<ShwGrid @columns={{2}} as |SG|>
22+
<SG.Item>
23+
<ShwFlex @direction="column" as |SF|>
24+
<SF.Item>
25+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
26+
<T.Title>A simple title</T.Title>
27+
<T.Description>A simple description text</T.Description>
28+
</HdsToast>
29+
</SF.Item>
30+
<SF.Item>
31+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
32+
<T.Title>A toast with a title and no description text.</T.Title>
33+
</HdsToast>
34+
</SF.Item>
35+
<SF.Item>
36+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
37+
<T.Description>A toast with no title and just a description text</T.Description>
38+
</HdsToast>
39+
</SF.Item>
40+
<SF.Item>
41+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
42+
<T.Title>A toast with a very long title and a long description text
43+
that should go on multiple lines</T.Title>
44+
<T.Description>Lorem ipsum dolor sit amet, consectetur adipiscing
45+
elit. Pellentesque erat elit, lacinia at magna eget, porttitor
46+
lobortis nulla.</T.Description>
47+
</HdsToast>
48+
</SF.Item>
49+
<SF.Item>
50+
<HdsToast @color="success" as |A|>
51+
<A.Title>A toast comparing different types of links in the
52+
description</A.Title>
53+
<A.Description>
54+
Description with
55+
<a href="#">HTML link</a>
56+
compared with
57+
<HdsLinkInline @href="#">Primary HdsLinkInline</HdsLinkInline>
58+
and
59+
<HdsLinkInline @href="#" @color="secondary">Secondary
60+
HdsLinkInline</HdsLinkInline>.
61+
</A.Description>
62+
</HdsToast>
63+
</SF.Item>
64+
</ShwFlex>
65+
</SG.Item>
66+
<SG.Item>
67+
<ShwFlex @direction="column" as |SF|>
68+
<SF.Item>
69+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
70+
<T.Title>A toast with a rich description (HTML)</T.Title>
71+
<T.Description>Using the
72+
<code>A.Description</code>
73+
contextual component it's possible to have content that contains
74+
HTML tags, like
75+
<strong>strong text</strong>
76+
and
77+
<em>emphasized text</em>
78+
as well as
79+
<code>code</code>,
80+
<pre>pre</pre>
81+
and
82+
<a href="#">inline links</a>.</T.Description>
83+
</HdsToast>
84+
</SF.Item>
85+
<SF.Item>
86+
<HdsToast @onDismiss={{NOOP}} @color="success" as |T|>
87+
<T.Title>Multiple lines of description using more than one
88+
'description' contextual component</T.Title>
89+
<T.Description>This is the first line of description, yielded to a
90+
<code>A.Description</code>
91+
contextual component.</T.Description>
92+
<T.Description>And this is the second line of description, yielded
93+
to another
94+
<code>A.Description</code>
95+
contextual component.</T.Description>
96+
</HdsToast>
97+
</SF.Item>
98+
<SF.Item>
99+
<HdsToast @color="success" @onDismiss={{NOOP}} as |T|>
100+
<T.Title>A toast with extra/custom content</T.Title>
101+
<T.Description>In special cases, you can pass extra content to the
102+
toast using the
103+
<code>A.Generic</code>
104+
contextual component.</T.Description>
105+
<T.Generic>
106+
<ShwPlaceholder @text="some generic content" @height="50" />
107+
</T.Generic>
108+
</HdsToast>
109+
</SF.Item>
110+
</ShwFlex>
111+
</SG.Item>
112+
</ShwGrid>
113+
</template>;
114+
115+
export default SubSectionContent;

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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 NOOP from 'showcase/utils/noop';
10+
11+
import { HdsToast } from '@hashicorp/design-system-components/components';
12+
13+
const SubSectionIcon: TemplateOnlyComponent = <template>
14+
<ShwTextH2>Icon</ShwTextH2>
15+
16+
<ShwFlex as |SF|>
17+
<SF.Item>
18+
<HdsToast @color="highlight" @onDismiss={{NOOP}} as |T|>
19+
<T.Title>Default icon</T.Title>
20+
<T.Description>Lorem ipsum dolor sit amet.</T.Description>
21+
</HdsToast>
22+
</SF.Item>
23+
<SF.Item>
24+
<HdsToast @color="highlight" @icon="meh" @onDismiss={{NOOP}} as |T|>
25+
<T.Title>With icon override</T.Title>
26+
<T.Description>Lorem ipsum dolor sit amet.</T.Description>
27+
</HdsToast>
28+
</SF.Item>
29+
<SF.Item>
30+
<HdsToast @color="highlight" @icon="running" @onDismiss={{NOOP}} as |T|>
31+
<T.Title>With animated icon</T.Title>
32+
<T.Description>Lorem ipsum dolor sit amet.</T.Description>
33+
</HdsToast>
34+
</SF.Item>
35+
<SF.Item>
36+
<HdsToast @color="highlight" @icon={{false}} @onDismiss={{NOOP}} as |T|>
37+
<T.Title>Without icon</T.Title>
38+
<T.Description>Lorem ipsum dolor sit amet.</T.Description>
39+
</HdsToast>
40+
</SF.Item>
41+
</ShwFlex>
42+
</template>;
43+
44+
export default SubSectionIcon;

‎showcase/app/controllers/page-components/toast.ts‎

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

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

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

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

8-
// the "Toast" is built on top of the "Alert" so it shares the same colors
9-
import { COLORS } from '@hashicorp/design-system-components/components/hds/alert/index';
10-
118
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
129

1310
export type PageComponentsToastModel = ModelFrom<PageComponentsToastRoute>;
1411

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

‎showcase/app/templates/page-components/toast.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+
6+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
7+
import ToastIndex from 'showcase/components/page-components/toast/index';
8+
9+
const PageComponentsToast: TemplateOnlyComponent = <template>
10+
<ToastIndex />
11+
</template>;
12+
13+
export default PageComponentsToast;

0 commit comments

Comments
 (0)