Skip to content

Commit c6b6a38

Browse files
shleewhiteshleewhite
authored
Showcase: convert Text page to gts (#3188)
1 parent f02ec95 commit c6b6a38

File tree

7 files changed

+242
-154
lines changed

7 files changed

+242
-154
lines changed

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

‎showcase/app/components/page-components/text/sub-sections/alignment.gts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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 ShwFlex from 'showcase/components/shw/flex';
10+
import ShwGrid from 'showcase/components/shw/grid';
11+
import ShwDivider from 'showcase/components/shw/divider';
12+
import ShwOutliner from 'showcase/components/shw/outliner';
13+
14+
import { ALIGNS } from '@hashicorp/design-system-components/components/hds/text/index';
15+
16+
import { HdsTextBody } from '@hashicorp/design-system-components/components';
17+
18+
const SubSectionAlignment: TemplateOnlyComponent = <template>
19+
<ShwTextH2>Alignment</ShwTextH2>
20+
<ShwGrid @columns={{3}} as |SG|>
21+
{{#each ALIGNS as |alignment|}}
22+
<SG.Item>
23+
<ShwFlex @direction="column" as |SF|>
24+
<SF.Item @label="parent with text-align={{alignment}}">
25+
<ShwOutliner {{style textAlign=alignment}}>
26+
<HdsTextBody @size="200" @tag="p">The fox jumped over the lazy dog</HdsTextBody>
27+
</ShwOutliner>
28+
</SF.Item>
29+
<SF.Item @label="with @align={{alignment}}">
30+
<ShwOutliner>
31+
<HdsTextBody @size="200" @tag="p" @align={{alignment}}>The fox
32+
jumped over the lazy dog</HdsTextBody>
33+
</ShwOutliner>
34+
</SF.Item>
35+
</ShwFlex>
36+
</SG.Item>
37+
{{/each}}
38+
</ShwGrid>
39+
40+
<ShwDivider @level={{2}} />
41+
</template>;
42+
43+
export default SubSectionAlignment;

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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 ShwTextH4 from 'showcase/components/shw/text/h4';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
12+
import { COLORS } from '@hashicorp/design-system-components/components/hds/text/index';
13+
14+
import { HdsTextBody } from '@hashicorp/design-system-components/components';
15+
16+
const SubSectionColor: TemplateOnlyComponent = <template>
17+
<ShwTextH2>Color</ShwTextH2>
18+
19+
<ShwTextH4 @tag="h3">Color inheritance</ShwTextH4>
20+
<ShwFlex @direction="row" @gap="2rem" as |SF|>
21+
<SF.Item @label="parent with no specific color">
22+
<div>
23+
<HdsTextBody @size="300" @tag="p">Lorem ipsum dolor</HdsTextBody>
24+
</div>
25+
</SF.Item>
26+
<SF.Item @label="parent with #e12568 color">
27+
<div {{style color="#e12568"}}>
28+
<HdsTextBody @size="300" @tag="p">Lorem ipsum dolor</HdsTextBody>
29+
</div>
30+
</SF.Item>
31+
</ShwFlex>
32+
33+
<ShwTextH4 @tag="h3">Pre-defined colors</ShwTextH4>
34+
<ShwFlex @direction="row" @gap="2rem" as |SF|>
35+
{{#each COLORS as |color|}}
36+
<SF.Item @label={{color}}>
37+
<div class="shw-component-text-sample-color--{{color}}">
38+
<HdsTextBody
39+
@size="300"
40+
@weight="semibold"
41+
@tag="p"
42+
@color={{color}}
43+
>Lorem ipsum dolor</HdsTextBody>
44+
<HdsTextBody
45+
@size="300"
46+
@weight="medium"
47+
@tag="p"
48+
@color={{color}}
49+
>Lorem ipsum dolor</HdsTextBody>
50+
<HdsTextBody @size="300" @tag="p" @color={{color}}>Lorem ipsum dolor</HdsTextBody>
51+
</div>
52+
</SF.Item>
53+
{{/each}}
54+
</ShwFlex>
55+
56+
<ShwTextH4 @tag="h3">Custom colors</ShwTextH4>
57+
<ShwFlex @direction="row" @gap="2rem" as |SF|>
58+
<SF.Item @label="text with #e91e63 color">
59+
<HdsTextBody @size="300" @tag="p" @color="#e91e63">Lorem ipsum dolor</HdsTextBody>
60+
</SF.Item>
61+
<SF.Item @label="text with '--token-color-palette-purple-400' color">
62+
<HdsTextBody
63+
@size="300"
64+
@tag="p"
65+
@color="var(--token-color-palette-purple-400)"
66+
>Lorem ipsum dolor</HdsTextBody>
67+
</SF.Item>
68+
</ShwFlex>
69+
</template>;
70+
71+
export default SubSectionColor;

‎showcase/app/components/page-components/text/sub-sections/variants.gts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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 { get } from '@ember/helper';
7+
8+
import ShwTextH2 from 'showcase/components/shw/text/h2';
9+
import ShwTextH4 from 'showcase/components/shw/text/h4';
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 {
15+
SIZES as DISPLAY_SIZES,
16+
WEIGHTS_PER_SIZE as DISPLAY_WEIGHTS_PER_SIZE,
17+
} from '@hashicorp/design-system-components/components/hds/text/display';
18+
import {
19+
SIZES as BODY_SIZES,
20+
WEIGHTS_PER_SIZE as BODY_WEIGHTS_PER_SIZE,
21+
} from '@hashicorp/design-system-components/components/hds/text/body';
22+
import {
23+
SIZES as CODE_SIZES,
24+
WEIGHTS_PER_SIZE as CODE_WEIGHTS_PER_SIZE,
25+
} from '@hashicorp/design-system-components/components/hds/text/code';
26+
27+
import {
28+
HdsTextBody,
29+
HdsTextCode,
30+
HdsTextDisplay,
31+
} from '@hashicorp/design-system-components/components';
32+
33+
const SubSectionVariants: TemplateOnlyComponent = <template>
34+
<ShwTextH2>Variants</ShwTextH2>
35+
<ShwTextBody><em>Notice: we are showing only the combinations of
36+
<code>font-size</code>
37+
("style") and
38+
<code>font-weight</code>
39+
that the design system
40+
<strong>suggests</strong>
41+
to use.</em></ShwTextBody>
42+
43+
<ShwTextH4 @tag="h3">TextDisplay</ShwTextH4>
44+
<ShwFlex @direction="column" as |SF|>
45+
{{#each DISPLAY_SIZES as |size|}}
46+
<SF.Item @label="size={{size}}">
47+
{{#let (get DISPLAY_WEIGHTS_PER_SIZE size) as |weights|}}
48+
{{#each weights as |weight|}}
49+
<HdsTextDisplay @size={{size}} @tag="p" @weight={{weight}}>The fox
50+
jumped over the lazy dog ({{weight}})</HdsTextDisplay>
51+
{{/each}}
52+
{{/let}}
53+
</SF.Item>
54+
{{/each}}
55+
</ShwFlex>
56+
57+
<ShwTextH4 @tag="h3">TextBody</ShwTextH4>
58+
<ShwFlex @direction="column" as |SF|>
59+
{{#each BODY_SIZES as |size|}}
60+
<SF.Item @label="size={{size}}">
61+
{{#let (get BODY_WEIGHTS_PER_SIZE size) as |weights|}}
62+
{{#each weights as |weight|}}
63+
<HdsTextBody @size={{size}} @tag="p" @weight={{weight}}>The fox
64+
jumped over the lazy dog ({{weight}})</HdsTextBody>
65+
{{/each}}
66+
{{/let}}
67+
</SF.Item>
68+
{{/each}}
69+
</ShwFlex>
70+
71+
<ShwTextH4 @tag="h3">TextCode</ShwTextH4>
72+
<ShwFlex @direction="column" as |SF|>
73+
{{#each CODE_SIZES as |size|}}
74+
<SF.Item @label="size={{size}}">
75+
{{#let (get CODE_WEIGHTS_PER_SIZE size) as |weights|}}
76+
{{#each weights as |weight|}}
77+
<HdsTextCode @size={{size}} @tag="p" @weight={{weight}}>The fox
78+
jumped over the lazy dog ({{weight}})</HdsTextCode>
79+
{{/each}}
80+
{{/let}}
81+
</SF.Item>
82+
{{/each}}
83+
</ShwFlex>
84+
85+
<ShwDivider @level={{2}} />
86+
</template>;
87+
88+
export default SubSectionVariants;

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

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

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

8-
import {
9-
SIZES as DISPLAY_SIZES,
10-
WEIGHTS_PER_SIZE as DISPLAY_WEIGHTS_PER_SIZE,
11-
} from '@hashicorp/design-system-components/components/hds/text/display';
12-
import {
13-
SIZES as BODY_SIZES,
14-
WEIGHTS_PER_SIZE as BODY_WEIGHTS_PER_SIZE,
15-
} from '@hashicorp/design-system-components/components/hds/text/body';
16-
import {
17-
SIZES as CODE_SIZES,
18-
WEIGHTS_PER_SIZE as CODE_WEIGHTS_PER_SIZE,
19-
} from '@hashicorp/design-system-components/components/hds/text/code';
20-
import {
21-
ALIGNS,
22-
COLORS,
23-
} from '@hashicorp/design-system-components/components/hds/text/index';
24-
258
import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
269

2710
export type PageComponentsTextModel = ModelFrom<PageComponentsTextRoute>;
2811

29-
export default class PageComponentsTextRoute extends Route {
30-
model() {
31-
return {
32-
DISPLAY_SIZES,
33-
DISPLAY_WEIGHTS_PER_SIZE,
34-
BODY_SIZES,
35-
BODY_WEIGHTS_PER_SIZE,
36-
CODE_SIZES,
37-
CODE_WEIGHTS_PER_SIZE,
38-
ALIGNS,
39-
COLORS,
40-
};
41-
}
42-
}
12+
export default class PageComponentsTextRoute extends Route {}

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

0 commit comments

Comments
 (0)