Add Glint support to the AuFieldset component

Author: Windvis

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

@@ -1,8 +1,25 @@
-import { AuBadge, AuPill } from '@appuniversum/ember-appuniversum';
+import type { TOC } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 import Component from '@glimmer/component';
+import AuBadge from './au-badge';
+import AuPill from './au-pill';
 
-export default class AuFieldset extends Component {
+export interface AuFieldsetSignature {
+  Args: {
+    alignment?: 'inline';
+  };
+  Blocks: {
+    default: [
+      {
+        legend?: typeof Legend;
+        content?: typeof Content;
+      },
+    ];
+  };
+  Element: HTMLFieldSetElement;
+}
+
+export default class AuFieldset extends Component<AuFieldsetSignature> {
   get alignment() {
     if (this.args.alignment == 'inline') return 'au-c-fieldset--inline';
     else return '';
@@ -16,7 +33,22 @@ export default class AuFieldset extends Component {
   </template>
 }
 
-class Legend extends Component {
+interface LegendSignature {
+  Args: {
+    error?: boolean;
+    inline?: boolean;
+    required?: boolean;
+    requiredLabel?: string;
+    skin?: '1' | '2' | '3' | '4' | '5' | '6' | 'functional';
+    warning?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+class Legend extends Component<LegendSignature> {
   get skin() {
     if (this.args.skin == '1') return 'au-u-h1';
     if (this.args.skin == '2') return 'au-u-h2';
@@ -86,7 +118,13 @@ class Legend extends Component {
   </template>
 }
 
-const Content = <template>
+interface ContentSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+const Content: TOC<ContentSignature> = <template>
   {{#if (has-block)}}
     <div class="au-c-fieldset__content" ...attributes>
       {{yield}}

addon/template-registry.ts

@@ -13,6 +13,7 @@ import type AuCheckboxGroup from '@appuniversum/ember-appuniversum/components/au
 import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au-content-header';
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
 import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
+import type AuFieldset from '@appuniversum/ember-appuniversum/components/au-fieldset';
 import type AuFileCard from '@appuniversum/ember-appuniversum/components/au-file-card';
 import type AuFileUpload from '@appuniversum/ember-appuniversum/components/au-file-upload';
 import type AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
@@ -54,6 +55,7 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuFieldset: typeof AuFieldset;
   AuFileCard: typeof AuFileCard;
   AuFileUpload: typeof AuFileUpload;
   AuFormRow: typeof AuFormRow;

tests/integration/components/au-fieldset-test.gts

@@ -0,0 +1,23 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuFieldset from '@appuniversum/ember-appuniversum/components/au-fieldset';
+
+module('Integration | Component | au-fieldset', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it yields a legend and content component', async function (assert) {
+    await render(
+      <template>
+        <AuFieldset data-test-fieldset as |f|>
+          <f.legend data-test-legend>Legend</f.legend>
+          <f.content data-test-content>Content</f.content>
+        </AuFieldset>
+      </template>,
+    );
+
+    assert.dom('[data-test-fieldset]').exists();
+    assert.dom('[data-test-legend]').hasText('Legend');
+    assert.dom('[data-test-content]').hasText('Content');
+  });
+});

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

@@ -107,6 +107,12 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-date-input]').exists();
   });
 
+  test('`<AuFieldset>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuFieldset data-test-fieldset />`);
+
+    assert.dom('[data-test-fieldset]').exists();
+  });
+
   test('`<AuFileCard>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuFileCard @filename="test.txt" data-test-file-card />`);