Add Glint support to the AuTabs component

Author: Windvis

addon/components/au-tabs.gjs

@@ -0,0 +1,34 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface AuTabsSignature {
+  Args: {
+    reversed?: boolean;
+  };
+  Blocks: {
+    default: [typeof Tab];
+  };
+  Element: HTMLElement;
+}
+
+const AuTabs: TOC<AuTabsSignature> = <template>
+  <nav class="au-c-tabs {{if @reversed 'au-c-tabs--reversed'}}" ...attributes>
+    <ul class="au-c-tabs-list">
+      {{yield Tab}}
+    </ul>
+  </nav>
+</template>;
+
+export default AuTabs;
+
+interface TabSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLIElement;
+}
+
+const Tab: TOC<TabSignature> = <template>
+  <li class="au-c-tabs-list__item" ...attributes>
+    {{yield}}
+  </li>
+</template>;

addon/components/au-tabs.gts

@@ -38,6 +38,7 @@ import type AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
 import type AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
 import type AuRadio from '@appuniversum/ember-appuniversum/components/au-radio';
 import type AuTable from '@appuniversum/ember-appuniversum/components/au-table';
+import type AuTabs from '@appuniversum/ember-appuniversum/components/au-tabs';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -84,6 +85,7 @@ export default interface AppuniversumRegistry {
   AuRadioGroup: typeof AuRadioGroup;
   AuRadio: typeof AuRadio;
   AuTable: typeof AuTable;
+  AuTabs: typeof AuTabs;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers

addon/template-registry.ts

@@ -1,18 +1,20 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
+import AuTabs from '@appuniversum/ember-appuniversum/components/au-tabs';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 module('Integration | Component | au-tabs', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it yields a `Tab` component', async function (assert) {
-    await render(hbs`
-      <AuTabs data-test-tabs as |Tab|>
-        <Tab data-test-tab="foo">Foo</Tab>
-        <Tab data-test-tab="bar">Bar</Tab>
-      </AuTabs>
-    `);
+    await render(
+      <template>
+        <AuTabs data-test-tabs as |Tab|>
+          <Tab data-test-tab="foo">Foo</Tab>
+          <Tab data-test-tab="bar">Bar</Tab>
+        </AuTabs>
+      </template>,
+    );
 
     assert.dom('[data-test-tabs] [data-test-tab]').exists({ count: 2 });
     assert.dom('[data-test-tab="foo"]').hasText('Foo');

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

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