Skip to content

Commit a7f568a

Browse files
author
shleewhite
committed
feat: convert link inline to gts
1 parent 9f5ea9d commit a7f568a

File tree

7 files changed

+323
-204
lines changed

7 files changed

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

‎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)