Add Glint support to the AuLabel component

appuniversum · Mar 11, 2024 · 5edb3cd · 5edb3cd
1 parent 865bae6
commit 5edb3cd
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 28 deletions.
diff --git a/addon/components/au-label.gjs → addon/components/au-label.gts b/addon/components/au-label.gjs → addon/components/au-label.gts
@@ -1,7 +1,22 @@
 import Component from '@glimmer/component';
-import { AuBadge, AuPill } from '@appuniversum/ember-appuniversum';
+import AuBadge from './au-badge';
+import AuPill from './au-pill';
 
-export default class AuLabel extends Component {
+export interface AuLabelSignature {
+  Args: {
+    error?: boolean;
+    inline?: boolean;
+    required?: boolean;
+    requiredLabel?: string;
+    warning?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLabelElement;
+}
+
+export default class AuLabel extends Component<AuLabelSignature> {
   get inline() {
     if (this.args.inline) return 'au-c-label--inline';
     else return '';

diff --git a/addon/template-registry.ts b/addon/template-registry.ts
@@ -21,6 +21,7 @@ import type AuHelpText from '@appuniversum/ember-appuniversum/components/au-help
 import type AuHr from '@appuniversum/ember-appuniversum/components/au-hr';
 import type AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import type AuInput from '@appuniversum/ember-appuniversum/components/au-input';
+import type AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
 import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
 import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
@@ -61,6 +62,7 @@ export default interface AppuniversumRegistry {
   AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;
+  AuLabel: typeof AuLabel;
   AuLinkExternal: typeof AuLinkExternal;
   AuLink: typeof AuLink;
   AuList: typeof AuList;

diff --git a/tests/integration/components/au-label-test.gts b/tests/integration/components/au-label-test.gts
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+
+module('Integration | Component | au-label', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it displays block contents and accepts extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuLabel data-test-label>
+          Some label
+        </AuLabel>
+      </template>,
+    );
+
+    assert.dom('[data-test-label]').hasText('Some label');
+  });
+});
diff --git a/tests/integration/components/au-label-test.js b/tests/integration/components/au-label-test.js
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
@@ -158,6 +158,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-input]').exists();
   });
 
+  test('`<AuLabel>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuLabel data-test-label>Some label</AuLabel>
+    `);
+    assert.dom('[data-test-label]').exists();
+  });
+
   test('`<AuLinkExternal>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuLinkExternal data-test-link-external>Foo</AuLinkExternal>