Update class field description component to glimmer

app/components/class-field-description.hbs

@@ -0,0 +1,80 @@
+<section class='{{@type}}'>
+  {{!-- TODO: Fix this link for a11y --}}
+  <h3 class='class-field-description--link' data-anchor='{{@field.name}}' role='link' {{on 'click' (fn this.updateAnchor @field.name)}}>
+    <a class='anchor' {{!-- template-lint-disable link-href-attributes --}}>
+      {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}}
+    </a>
+    <span class='{{@type}}-name'>{{@field.name}}</span>
+    {{#if @field.params}}
+      <span class='args'>
+        ({{join ', ' (map-by 'name' @field.params)}})
+      </span>
+    {{/if}}
+    {{#if @field.return}}
+      <span class='return-type'>{{@field.return.type}}</span>
+    {{/if}}
+    {{#if @field.access}}
+      <span class='access'>{{@field.access}}</span>
+    {{/if}}
+    {{#if @field.deprecated}}
+      <span class='access'>deprecated</span>
+    {{/if}}
+  </h3>
+  {{#if @model.module}}
+    <div class='attributes'>
+      <div class='attribute'>
+        <span class='attribute-label'>Module:</span>
+        <span class='attribute-value'><LinkTo @route='project-version.modules.module' @models={{array @model.projectVersion.compactVersion @model.module}}>{{@model.module}}</LinkTo></span>
+      </div>
+    </div>
+  {{/if}}
+  <p class='github-link' data-test-file={{@field.file}}>
+    {{#if @field.inherited}}
+      Inherited from
+      <a href='{{github-link @model.project.id @model.projectVersion.version @field.file @field.line}}' target='_blank' rel='noopener noreferrer'>
+        {{@field.inheritedFrom}} {{@field.file}}:{{@field.line}}
+      </a>
+    {{else}}
+      Defined in
+      <a href='{{github-link @model.project.id @model.projectVersion.version @field.file @field.line}}' target='_blank' rel='noopener noreferrer'>
+        {{@field.file}}:{{@field.line}}
+      </a>
+    {{/if}}
+  </p>
+  {{#if @field.since}}
+    <p class='field-since'>
+      Available since v{{@field.since}}
+    </p>
+  {{/if}}
+  {{#if (and (eq @field.static 1) (eq @field.itemtype 'method') this.hasImportExample)}}
+    <ImportExample @item={{concat '{ ' @field.name ' }'}} @package={{@field.class}}/>
+  {{/if}}
+  <dl class='parameters'>
+    {{#each @field.params as |param|}}
+      <div class='parameter'>
+        <dt>{{param.name}}</dt>
+        <dd class='parameter-type'>{{param.type}}</dd>
+        <dd>{{param.description}}</dd>
+        {{#if param.props}}
+          <dl class='parameters'>
+            {{#each param.props as |prop|}}
+              <div class='prop'>
+                <dt>{{prop.name}}</dt>
+                <dd class='parameter-type'>{{prop.type}}</dd>
+                <dd>{{prop.description}}</dd>
+              </div>
+            {{/each}}
+          </dl>
+        {{/if}}
+      </div>
+    {{/each}}
+    {{#if @field.return}}
+      <div class='return'>
+        <dt>returns</dt>
+        <dd class='return-type'>{{@field.return.type}}</dd>
+        <dd>{{@field.return.description}}</dd>
+      </div>
+    {{/if}}
+  </dl>
+  {{html-safe @field.description}}
+</section>

app/components/class-field-description.js

@@ -1,14 +1,15 @@
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class ClassFieldDescription extends Component {
   @service
   legacyModuleMappings;
 
   get hasImportExample() {
     return this.legacyModuleMappings.hasFunctionMapping(
-      this.field.name,
-      this.field.class
+      this.args.field.name,
+      this.args.field.class
     );
   }
 
@@ -18,5 +19,8 @@ export default class ClassFieldDescription extends Component {
    * @method updateAnchor
    * @method fieldName String The name representing the field that was clicked.
    */
-  updateAnchor() {}
+  @action
+  updateAnchor(fieldName) {
+    this.args.updateAnchor?.(fieldName);
+  }
 }

tests/integration/components/class-field-description-test.js

@@ -26,7 +26,9 @@ module('Integration | Component | class field description', function (hooks) {
       })
     );
 
-    await render(hbs`{{class-field-description type=type field=field}}`);
+    await render(
+      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+    );
 
     assert.dom('.method-name').hasText('concat');
     assert.dom(findAll('.access')[0]).hasText('public');
@@ -47,7 +49,9 @@ module('Integration | Component | class field description', function (hooks) {
       })
     );
 
-    await render(hbs`{{class-field-description type=type field=field}}`);
+    await render(
+      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+    );
 
     await triggerEvent('.class-field-description--link', 'mouseenter');
     assert
@@ -73,7 +77,7 @@ module('Integration | Component | class field description', function (hooks) {
     );
 
     await render(
-      hbs`{{class-field-description field=field updateAnchor=updateAnchor}}`
+      hbs`<ClassFieldDescription @field={{this.field}} @updateAnchor={{this.updateAnchor}}/>`
     );
 
     await click('.class-field-description--link');
@@ -98,7 +102,9 @@ module('Integration | Component | class field description', function (hooks) {
       })
     );
 
-    await render(hbs`{{class-field-description type=type field=field}}`);
+    await render(
+      hbs`<ClassFieldDescription @type={{this.type}} @field={{this.field}}/>`
+    );
 
     assert.dom(find('.prop:nth-child(1) dt')).hasText('prop1');
     assert.dom(find('.prop:nth-child(2) dt')).hasText('prop2');