Skip to content

Commit de65c66

Browse files
shleewhiteshleewhite
authored
Showcase: convert Link > Inline page to gts (#3249)
1 parent 4c34800 commit de65c66

File tree

7 files changed

+319
-204
lines changed

7 files changed

+319
-204
lines changed

‎showcase/app/components/page-components/link/inline/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 SubSectionGeneratedElement from 'showcase/components/page-components/link/inline/sub-sections/generated-element';
11+
import SubSectionContent from 'showcase/components/page-components/link/inline/sub-sections/content';
12+
import SubSectionStates from 'showcase/components/page-components/link/inline/sub-sections/states';
13+
14+
const LinkInlineIndex: TemplateOnlyComponent = <template>
15+
{{pageTitle "LinkInline component"}}
16+
17+
<ShwTextH1>LinkInline</ShwTextH1>
18+
19+
<section data-test-percy>
20+
<SubSectionGeneratedElement />
21+
<SubSectionContent />
22+
<SubSectionStates />
23+
</section>
24+
</template>;
25+
26+
export default LinkInlineIndex;

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

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
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 ShwDivider from 'showcase/components/shw/divider';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
import ShwGrid from 'showcase/components/shw/grid';
12+
13+
import {
14+
HdsLinkInline,
15+
HdsTextBody,
16+
HdsTextDisplay,
17+
HdsTextCode,
18+
} from '@hashicorp/design-system-components/components';
19+
20+
const TEXT_SIZE_CLASSES = [
21+
'hds-typography-body-100',
22+
'hds-typography-body-200',
23+
'hds-typography-body-300',
24+
];
25+
26+
const SubSectionContent: TemplateOnlyComponent = <template>
27+
<ShwTextH2>Content</ShwTextH2>
28+
29+
<ShwGrid
30+
@columns={{3}}
31+
@gap="1rem 2rem"
32+
{{style width="fit-content" grid-template-columns="repeat(3, auto)"}}
33+
as |SG|
34+
>
35+
<SG.Item @label="Only text">
36+
<div class="hds-typography-body-300">
37+
<HdsLinkInline @color="primary" @href="#">Lorem ipsum dolor</HdsLinkInline>
38+
</div>
39+
</SG.Item>
40+
<SG.Item @label="Text + leading icon">
41+
<div class="hds-typography-body-300">
42+
<HdsLinkInline
43+
@color="primary"
44+
@icon="globe"
45+
@iconPosition="leading"
46+
@href="#"
47+
>Lorem ipsum dolor</HdsLinkInline>
48+
</div>
49+
</SG.Item>
50+
<SG.Item @label="Text + trailing icon">
51+
<div class="hds-typography-body-300">
52+
<HdsLinkInline
53+
@color="primary"
54+
@icon="arrow-right-circle"
55+
@iconPosition="trailing"
56+
@href="#"
57+
>Lorem ipsum dolor</HdsLinkInline>
58+
</div>
59+
</SG.Item>
60+
<SG.Item @label="HDSTextBody">
61+
<HdsLinkInline @color="primary" @href="#"><HdsTextBody
62+
@size="300"
63+
@tag="span"
64+
>Lorem ipsum dolor</HdsTextBody></HdsLinkInline>
65+
</SG.Item>
66+
<SG.Item @label="HDSTextBody + leading icon">
67+
<HdsLinkInline
68+
@color="primary"
69+
@icon="globe"
70+
@iconPosition="leading"
71+
@href="#"
72+
><HdsTextBody @size="300" @tag="span">Lorem ipsum dolor</HdsTextBody></HdsLinkInline>
73+
</SG.Item>
74+
<SG.Item @label="HDSTextBody + trailing icon">
75+
<HdsLinkInline
76+
@color="primary"
77+
@icon="arrow-right-circle"
78+
@iconPosition="trailing"
79+
@href="#"
80+
><HdsTextBody @size="300" @tag="span">Lorem ipsum dolor</HdsTextBody></HdsLinkInline>
81+
</SG.Item>
82+
<SG.Item @label="HDSTextDisplay">
83+
<HdsLinkInline @color="primary" @href="#"><HdsTextDisplay
84+
@size="200"
85+
@tag="span"
86+
>Lorem ipsum dolor</HdsTextDisplay></HdsLinkInline>
87+
</SG.Item>
88+
<SG.Item @label="HDSTextDisplay + leading icon">
89+
<HdsLinkInline
90+
@color="primary"
91+
@icon="globe"
92+
@iconPosition="leading"
93+
@href="#"
94+
><HdsTextDisplay @size="200" @tag="span">Lorem ipsum dolor</HdsTextDisplay></HdsLinkInline>
95+
</SG.Item>
96+
<SG.Item @label="HDSTextDisplay + trailing icon">
97+
<HdsLinkInline
98+
@color="primary"
99+
@icon="arrow-right-circle"
100+
@iconPosition="trailing"
101+
@href="#"
102+
><HdsTextDisplay @size="200" @tag="span">Lorem ipsum dolor</HdsTextDisplay></HdsLinkInline>
103+
</SG.Item>
104+
<SG.Item @label="HDSTextCode">
105+
<HdsLinkInline @color="primary" @href="#"><HdsTextCode
106+
@size="200"
107+
@tag="code"
108+
>Lorem ipsum dolor</HdsTextCode></HdsLinkInline>
109+
</SG.Item>
110+
<SG.Item @label="HDSTextCode + leading icon">
111+
<HdsLinkInline
112+
@color="primary"
113+
@icon="globe"
114+
@iconPosition="leading"
115+
@href="#"
116+
><HdsTextCode @size="200" @tag="code">Lorem ipsum dolor</HdsTextCode></HdsLinkInline>
117+
</SG.Item>
118+
<SG.Item @label="HDSTextCode + trailing icon">
119+
<HdsLinkInline
120+
@color="primary"
121+
@icon="arrow-right-circle"
122+
@iconPosition="trailing"
123+
@href="#"
124+
><HdsTextCode @size="200" @tag="code">Lorem ipsum dolor</HdsTextCode></HdsLinkInline>
125+
</SG.Item>
126+
</ShwGrid>
127+
128+
<ShwDivider @level={{2}} />
129+
130+
<ShwFlex as |SF|>
131+
<SF.Item @label="With different text sizes">
132+
{{#each TEXT_SIZE_CLASSES as |textSizeClass|}}
133+
<div class={{textSizeClass}}>
134+
Lorem
135+
<HdsLinkInline
136+
@color="primary"
137+
@icon="globe"
138+
@iconPosition="leading"
139+
@href="#"
140+
>ipsum dolor</HdsLinkInline>
141+
sit amet
142+
<HdsLinkInline
143+
@color="primary"
144+
@icon="arrow-right-circle"
145+
@iconPosition="trailing"
146+
@href="#"
147+
>consectetur adipiscing</HdsLinkInline>
148+
elit.
149+
</div>
150+
{{/each}}
151+
</SF.Item>
152+
</ShwFlex>
153+
154+
<ShwDivider @level={{2}} />
155+
156+
<ShwGrid @columns={{3}} as |SG|>
157+
<SG.Item @label="Within text block">
158+
<div class="hds-typography-body-300">
159+
<HdsLinkInline @color="primary" @href="#">Lorem ipsum dolor sit amet</HdsLinkInline>,
160+
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
161+
et dolore.
162+
</div>
163+
</SG.Item>
164+
<SG.Item @label="Span two lines">
165+
<div class="hds-typography-body-300">
166+
Lorem ipsum dolor sit amet,
167+
<HdsLinkInline @color="primary" @href="#">consectetur adipiscing elit</HdsLinkInline>,
168+
sed do eiusmod tempor incididunt ut labore et dolore.
169+
</div>
170+
</SG.Item>
171+
<SG.Item @label="Span two lines and overlaps">
172+
<div class="hds-typography-body-300">
173+
Lorem ipsum dolor sit amet,
174+
<HdsLinkInline @color="primary" @href="#">consectetur adipiscing elit,
175+
sed do eiusmod tempor</HdsLinkInline>
176+
incididunt ut labore et dolore.
177+
</div>
178+
</SG.Item>
179+
</ShwGrid>
180+
181+
<ShwDivider />
182+
</template>;
183+
184+
export default SubSectionContent;

‎showcase/app/components/page-components/link/inline/sub-sections/generated-element.gts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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 ShwDivider from 'showcase/components/shw/divider';
9+
import ShwFlex from 'showcase/components/shw/flex';
10+
11+
import { HdsLinkInline } from '@hashicorp/design-system-components/components';
12+
13+
const SubSectionGeneratedElement: TemplateOnlyComponent = <template>
14+
<ShwTextH2>Generated element</ShwTextH2>
15+
16+
<ShwFlex as |SF|>
17+
<SF.Item as |SFI|>
18+
<SFI.Label>With
19+
<code>@href</code>
20+
⇒
21+
<code>&lt;a&gt;</code></SFI.Label>
22+
<div class="hds-typography-body-300">
23+
<HdsLinkInline @color="primary" @href="#">Lorem ipsum dolor</HdsLinkInline>
24+
</div>
25+
</SF.Item>
26+
<SF.Item as |SFI|>
27+
<SFI.Label>With
28+
<code>@route</code>
29+
⇒
30+
<code>&lt;LinkTo&gt;</code>
31+
⇒
32+
<code>&lt;a&gt;</code></SFI.Label>
33+
<div class="hds-typography-body-300">
34+
<HdsLinkInline @color="primary" @route="index">Lorem ipsum dolor</HdsLinkInline>
35+
</div>
36+
</SF.Item>
37+
</ShwFlex>
38+
39+
<ShwDivider />
40+
</template>;
41+
42+
export default SubSectionGeneratedElement;

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
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 ShwGrid from 'showcase/components/shw/grid';
12+
13+
import { HdsLinkInline } from '@hashicorp/design-system-components/components';
14+
import { COLORS } from '@hashicorp/design-system-components/components/hds/link/inline';
15+
16+
const STATES = ['default', 'hover', 'active', 'focus'];
17+
18+
const SubSectionStates: TemplateOnlyComponent = <template>
19+
<ShwTextH2>States</ShwTextH2>
20+
21+
{{#each COLORS as |color|}}
22+
<ShwTextH3>{{capitalize color}}</ShwTextH3>
23+
<ShwGrid @columns={{4}} {{style width="fit-content"}} as |SG|>
24+
{{#each STATES as |state|}}
25+
<SG.Item
26+
@label="{{capitalize state}}"
27+
class="shw-component-link-inline-state-samples"
28+
>
29+
<div class="hds-typography-body-300">Lorem
30+
<HdsLinkInline
31+
@color={{color}}
32+
@href="/components/link/inline"
33+
mock-state-value={{state}}
34+
>ipsum dolor</HdsLinkInline>
35+
sit amet
36+
</div>
37+
<div class="hds-typography-body-300">Lorem
38+
<HdsLinkInline
39+
@color={{color}}
40+
@href="/components/link/inline"
41+
@icon="external-link"
42+
@iconPosition="trailing"
43+
mock-state-value={{state}}
44+
>ipsum dolor</HdsLinkInline>
45+
sit amet
46+
</div>
47+
</SG.Item>
48+
{{/each}}
49+
</ShwGrid>
50+
{{/each}}
51+
</template>;
52+
53+
export default SubSectionStates;

‎showcase/app/routes/page-components/link/inline.ts‎

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

66
import Route from '@ember/routing/route';
7-
import { COLORS } from '@hashicorp/design-system-components/components/hds/link/inline';
87
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
98

109
export type PageComponentsLinkInlineModel =
1110
ModelFrom<PageComponentsLinkInlineRoute>;
1211

13-
export default class PageComponentsLinkInlineRoute extends Route {
14-
model() {
15-
// these are used only for presentation purpose in the showcase
16-
const STATES = ['default', 'hover', 'active', 'focus'];
17-
return { COLORS, STATES };
18-
}
19-
}
12+
export default class PageComponentsLinkInlineRoute extends Route {}

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

0 commit comments

Comments
 (0)