Skip to content

Commit e0c1766

Browse files
shleewhiteshleewhite
authored
Merge pull request #2422 from hashicorp/hds-3838/gts-shw-text
Showcase: convert ShwText components to `.gts`
2 parents b185938 + 4501f49 commit e0c1766

16 files changed

+118
-83
lines changed

‎showcase/.eslintrc.js

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ module.exports = {
2626
functions: 'only-multiline',
2727
},
2828
],
29+
// ember doesn't support template only components that have type signatures so we need to use empty component classes
30+
'ember/no-empty-glimmer-component-classes': 'off',
2931
},
3032
overrides: [
3133
// ts files

‎showcase/app/components/shw/text/body.ts ‎showcase/app/components/shw/text/body.gts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
import templateOnlyComponent from '@ember/component/template-only';
6+
import Component from '@glimmer/component';
77

8+
import ShwText from './index';
89
import type { ShwTextSignature } from './index';
910

1011
export interface ShwBodySignature {
@@ -19,6 +20,14 @@ export interface ShwBodySignature {
1920
Element: ShwTextSignature['Element'];
2021
}
2122

22-
const BodyComponent = templateOnlyComponent<ShwTextSignature>();
23-
24-
export default BodyComponent;
23+
export default class ShwTextBody extends Component<ShwBodySignature> {
24+
<template>
25+
<ShwText
26+
@variant="body"
27+
@align={{@align}}
28+
@weight={{@weight}}
29+
@tag={{@tag}}
30+
...attributes
31+
>{{yield}}</ShwText>
32+
</template>
33+
}

‎showcase/app/components/shw/text/body.hbs

-6
This file was deleted.

‎showcase/app/components/shw/text/h1.ts ‎showcase/app/components/shw/text/h1.gts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
import templateOnlyComponent from '@ember/component/template-only';
6+
import Component from '@glimmer/component';
77

8+
import ShwText from './index';
89
import type { ShwTextSignature } from './index';
910

1011
export interface ShwTextH1Signature {
@@ -19,6 +20,14 @@ export interface ShwTextH1Signature {
1920
Element: ShwTextSignature['Element'];
2021
}
2122

22-
const H1Component = templateOnlyComponent<ShwTextH1Signature>();
23-
24-
export default H1Component;
23+
export default class ShwTextH1 extends Component<ShwTextH1Signature> {
24+
<template>
25+
<ShwText
26+
@variant="h1"
27+
@align={{@align}}
28+
@weight={{@weight}}
29+
@tag={{@tag}}
30+
...attributes
31+
>{{yield}}</ShwText>
32+
</template>
33+
}

‎showcase/app/components/shw/text/h1.hbs

-6
This file was deleted.

‎showcase/app/components/shw/text/h2.ts ‎showcase/app/components/shw/text/h2.gts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
import templateOnlyComponent from '@ember/component/template-only';
6+
import Component from '@glimmer/component';
77

8+
import ShwText from './index';
89
import type { ShwTextSignature } from './index';
910

1011
export interface ShwTextH2Signature {
@@ -19,6 +20,14 @@ export interface ShwTextH2Signature {
1920
Element: ShwTextSignature['Element'];
2021
}
2122

22-
const H2Component = templateOnlyComponent<ShwTextH2Signature>();
23-
24-
export default H2Component;
23+
export default class ShwTextH2 extends Component<ShwTextH2Signature> {
24+
<template>
25+
<ShwText
26+
@variant="h2"
27+
@align={{@align}}
28+
@weight={{@weight}}
29+
@tag={{@tag}}
30+
...attributes
31+
>{{yield}}</ShwText>
32+
</template>
33+
}

‎showcase/app/components/shw/text/h2.hbs

-6
This file was deleted.

‎showcase/app/components/shw/text/h3.ts ‎showcase/app/components/shw/text/h3.gts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
import templateOnlyComponent from '@ember/component/template-only';
6+
import Component from '@glimmer/component';
77

8+
import ShwText from './index';
89
import type { ShwTextSignature } from './index';
910

1011
export interface ShwTextH3Signature {
@@ -19,6 +20,14 @@ export interface ShwTextH3Signature {
1920
Element: ShwTextSignature['Element'];
2021
}
2122

22-
const H3Component = templateOnlyComponent<ShwTextH3Signature>();
23-
24-
export default H3Component;
23+
export default class ShwTextH3 extends Component<ShwTextH3Signature> {
24+
<template>
25+
<ShwText
26+
@variant="h3"
27+
@align={{@align}}
28+
@weight={{@weight}}
29+
@tag={{@tag}}
30+
...attributes
31+
>{{yield}}</ShwText>
32+
</template>
33+
}

‎showcase/app/components/shw/text/h3.hbs

-6
This file was deleted.

‎showcase/app/components/shw/text/h4.ts ‎showcase/app/components/shw/text/h4.gts

+13-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
* SPDX-License-Identifier: MPL-2.0
44
*/
55

6-
import templateOnlyComponent from '@ember/component/template-only';
6+
import Component from '@glimmer/component';
77

8+
import ShwText from './index';
89
import type { ShwTextSignature } from './index';
910

1011
export interface ShwTextH4Signature {
@@ -19,6 +20,14 @@ export interface ShwTextH4Signature {
1920
Element: ShwTextSignature['Element'];
2021
}
2122

22-
const H4Component = templateOnlyComponent<ShwTextH4Signature>();
23-
24-
export default H4Component;
23+
export default class ShwTextH4 extends Component<ShwTextH4Signature> {
24+
<template>
25+
<ShwText
26+
@variant="h4"
27+
@align={{@align}}
28+
@weight={{@weight}}
29+
@tag={{@tag}}
30+
...attributes
31+
>{{yield}}</ShwText>
32+
</template>
33+
}

‎showcase/app/components/shw/text/h4.hbs

-6
This file was deleted.

‎showcase/app/components/shw/text/index.ts ‎showcase/app/components/shw/text/index.gts

+46-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
*/
55

66
import Component from '@glimmer/component';
7-
import { action } from '@ember/object';
87
import { assert } from '@ember/debug';
8+
import { eq } from 'ember-truth-helpers';
9+
import didInsert from '@ember/render-modifiers/modifiers/did-insert';
910

1011
import { TextTagValues, TextAlignValues, TextWeightValues } from './types';
1112

@@ -145,8 +146,7 @@ export default class ShwTextComponent extends Component<ShwTextSignature> {
145146
return classes.join(' ');
146147
}
147148

148-
@action
149-
addHeadingLink(element: HTMLHeadingElement) {
149+
addHeadingLink = (element: HTMLHeadingElement) => {
150150
const innerText = element.innerText;
151151
const sanitizedId = innerText
152152
.trim()
@@ -172,5 +172,47 @@ export default class ShwTextComponent extends Component<ShwTextSignature> {
172172
anchor.className = 'shw-page-heading-link';
173173
anchor.setAttribute('aria-labelledby', uniqueId);
174174
element.prepend(anchor);
175-
}
175+
};
176+
177+
<template>
178+
{{#if (eq this.tag "h1")}}
179+
<h1 class={{this.classNames}} ...attributes>{{yield}}</h1>
180+
{{else if (eq this.tag "h2")}}
181+
<h2
182+
class={{this.classNames}}
183+
{{didInsert this.addHeadingLink}}
184+
...attributes
185+
>{{yield}}</h2>
186+
{{else if (eq this.tag "h3")}}
187+
<h3
188+
class={{this.classNames}}
189+
{{didInsert this.addHeadingLink}}
190+
...attributes
191+
>{{yield}}</h3>
192+
{{else if (eq this.tag "h4")}}
193+
<h4
194+
class={{this.classNames}}
195+
{{didInsert this.addHeadingLink}}
196+
...attributes
197+
>{{yield}}</h4>
198+
{{else if (eq this.tag "h5")}}
199+
<h5
200+
class={{this.classNames}}
201+
{{didInsert this.addHeadingLink}}
202+
...attributes
203+
>{{yield}}</h5>
204+
{{else if (eq this.tag "h6")}}
205+
<h6
206+
class={{this.classNames}}
207+
{{didInsert this.addHeadingLink}}
208+
...attributes
209+
>{{yield}}</h6>
210+
{{else if (eq this.tag "p")}}
211+
<p class={{this.classNames}} ...attributes>{{yield}}</p>
212+
{{else if (eq this.tag "span")}}
213+
<span class={{this.classNames}} ...attributes>{{yield}}</span>
214+
{{else}}
215+
<div class={{this.classNames}} ...attributes>{{yield}}</div>
216+
{{/if}}
217+
</template>
176218
}

‎showcase/app/components/shw/text/index.hbs

-24
This file was deleted.

‎showcase/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
"ember-template-imports": "^4.1.1",
8888
"ember-template-lint": "^6.0.0",
8989
"ember-template-lint-plugin-prettier": "^5.0.0",
90-
"ember-truth-helpers": "^3.1.1",
90+
"ember-truth-helpers": "^4.0.3",
9191
"ember-try": "^3.0.0",
9292
"ember-unique-id-helper-polyfill": "^1.2.2",
9393
"eslint": "^8.57.0",

‎website/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"ember-template-lint": "^6.0.0",
9393
"ember-template-lint-plugin-prettier": "^5.0.0",
9494
"ember-test-selectors": "^6.0.0",
95-
"ember-truth-helpers": "^3.1.1",
95+
"ember-truth-helpers": "^4.0.3",
9696
"eslint": "^8.57.0",
9797
"eslint-config-prettier": "^9.1.0",
9898
"eslint-plugin-ember": "^11.12.0",

‎yarn.lock

+3-3
Original file line numberDiff line numberDiff line change
@@ -13756,7 +13756,7 @@ __metadata:
1375613756
languageName: node
1375713757
linkType: hard
1375813758

13759-
"ember-truth-helpers@npm:^3.0.0, ember-truth-helpers@npm:^3.1.1":
13759+
"ember-truth-helpers@npm:^3.0.0":
1376013760
version: 3.1.1
1376113761
resolution: "ember-truth-helpers@npm:3.1.1"
1376213762
dependencies:
@@ -24842,7 +24842,7 @@ __metadata:
2484224842
ember-template-imports: "npm:^4.1.1"
2484324843
ember-template-lint: "npm:^6.0.0"
2484424844
ember-template-lint-plugin-prettier: "npm:^5.0.0"
24845-
ember-truth-helpers: "npm:^3.1.1"
24845+
ember-truth-helpers: "npm:^4.0.3"
2484624846
ember-try: "npm:^3.0.0"
2484724847
ember-unique-id-helper-polyfill: "npm:^1.2.2"
2484824848
eslint: "npm:^8.57.0"
@@ -28117,7 +28117,7 @@ __metadata:
2811728117
ember-template-lint: "npm:^6.0.0"
2811828118
ember-template-lint-plugin-prettier: "npm:^5.0.0"
2811928119
ember-test-selectors: "npm:^6.0.0"
28120-
ember-truth-helpers: "npm:^3.1.1"
28120+
ember-truth-helpers: "npm:^4.0.3"
2812128121
eslint: "npm:^8.57.0"
2812228122
eslint-config-prettier: "npm:^9.1.0"
2812328123
eslint-plugin-ember: "npm:^11.12.0"

0 commit comments

Comments
 (0)