Add Glint support to the AuHr component

addon/components/au-hr.gjs → addon/components/au-hr.gts

@@ -1,6 +1,13 @@
 import Component from '@glimmer/component';
 
-export default class AuHr extends Component {
+export interface AuHrSignature {
+  Args: {
+    size?: 'large' | 'huge';
+  };
+  Element: HTMLHRElement;
+}
+
+export default class AuHr extends Component<AuHrSignature> {
   get size() {
     if (this.args.size == 'large') return 'au-c-hr--large';
     if (this.args.size == 'huge') return 'au-c-hr--huge';

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 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 AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
@@ -40,6 +41,7 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;
   AuLinkExternal: typeof AuLinkExternal;

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

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuHr from '@appuniversum/ember-appuniversum/components/au-hr';
+
+module('Integration | Component | au-hr', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it passes through extra attributes', async function (assert) {
+    await render(<template><AuHr data-test-hr /></template>);
+
+    assert.dom('[data-test-hr]').exists();
+  });
+});

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('`<AuHr>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuHr data-test-hr />`);
+
+    assert.dom('[data-test-hr]').exists();
+  });
+
   test('`<AuIcon>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuIcon data-test-icon @icon="test" />`);