From c03bca1a750f052ee1699a5e41cc371b92f42441 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 7 Mar 2024 18:13:34 +0100
Subject: [PATCH] Add Glint support to the `AuFieldset` component

---
 .../{au-fieldset.gjs => au-fieldset.gts}      | 46 +++++++++++++++++--
 addon/template-registry.ts                    |  2 +
 .../components/au-fieldset-test.gts           | 23 ++++++++++
 .../integration/components/loose-mode-test.ts |  6 +++
 4 files changed, 73 insertions(+), 4 deletions(-)
 rename addon/components/{au-fieldset.gjs => au-fieldset.gts} (71%)
 create mode 100644 tests/integration/components/au-fieldset-test.gts

diff --git a/addon/components/au-fieldset.gjs b/addon/components/au-fieldset.gts
similarity index 71%
rename from addon/components/au-fieldset.gjs
rename to addon/components/au-fieldset.gts
index 005a10ed1..f76235afe 100644
--- a/addon/components/au-fieldset.gjs
+++ b/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}}
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index 2020dab61..34e850a41 100644
--- a/addon/template-registry.ts
+++ b/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;
diff --git a/tests/integration/components/au-fieldset-test.gts b/tests/integration/components/au-fieldset-test.gts
new file mode 100644
index 000000000..dff16e28f
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index ccdf3392a..eeddc784c 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/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 />`);