Add Glint support to the AuToolbar component

Author: Windvis

addon/components/au-toolbar.gjs addon/components/au-toolbar.gts

@@ -1,6 +1,21 @@
+import type { TOC } from '@ember/component/template-only';
 import Component from '@glimmer/component';
 
-export default class AuToolbar extends Component {
+export interface AuToolbarSignature {
+  Args: {
+    reverse?: boolean;
+    border?: 'top' | 'bottom';
+    skin?: 'tint';
+    size?: 'small' | 'medium' | 'large';
+    nowrap?: boolean;
+  };
+  Blocks: {
+    default: [typeof Group];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuToolbar extends Component<AuToolbarSignature> {
   get reverse() {
     if (this.args.reverse) return 'au-c-toolbar--reverse';
     else return '';
@@ -44,7 +59,14 @@ export default class AuToolbar extends Component {
   </template>
 }
 
-const Group = <template>
+interface GroupSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const Group: TOC<GroupSignature> = <template>
   <div class="au-c-toolbar__group" ...attributes>
     {{yield}}
   </div>

addon/template-registry.ts

@@ -18,6 +18,7 @@ import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-
 import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
 import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
@@ -43,6 +44,7 @@ export default interface AppuniversumRegistry {
   AuLink: typeof AuLink;
   AuList: typeof AuList;
   AuLoader: typeof AuLoader;
+  AuToolbar: typeof AuToolbar;
 
   // Modifiers
   'au-date-input': typeof AuDateInputModifier;

tests/integration/components/au-toolbar-test.js tests/integration/components/au-toolbar-test.gts

@@ -1,27 +1,27 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 module('Integration | Component | au-toolbar', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it yields a group component', async function (assert) {
-    await render(hbs`
-      <AuToolbar as |Group|>
-        <Group data-test-foo>Foo</Group>
-        <Group data-test-bar>Bar</Group>
-      </AuToolbar>
-    `);
+    await render(
+      <template>
+        <AuToolbar as |Group|>
+          <Group data-test-foo>Foo</Group>
+          <Group data-test-bar>Bar</Group>
+        </AuToolbar>
+      </template>,
+    );
 
     assert.dom('[data-test-foo]').hasText('Foo');
     assert.dom('[data-test-bar]').hasText('Bar');
   });
 
   test('it passes through extra html attributes', async function (assert) {
-    await render(hbs`
-      <AuToolbar data-test-foo="bar"></AuToolbar>
-    `);
+    await render(<template><AuToolbar data-test-foo="bar" /></template>);
 
     assert.dom('[data-test-foo]').exists();
   });

tests/integration/components/loose-mode-test.ts

@@ -139,6 +139,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     `);
     assert.dom('[data-test-loader]').exists();
   });
+
+  test('`<AuToolbar>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuToolbar data-test-toolbar></AuToolbar>
+    `);
+    assert.dom('[data-test-toolbar]').exists();
+  });
 });
 
 module('Integration | Modifier | Loose mode', function (hooks) {