From 75e54ed8f66be53d3c1eb96874bb9bf45e7cfbf9 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 15 Feb 2024 15:10:55 +0100
Subject: [PATCH 1/3] Add Glint support to the `AuToolbar` component

---
 .../{au-toolbar.gjs => au-toolbar.gts}        | 26 +++++++++++++++++--
 addon/template-registry.ts                    |  2 ++
 ...au-toolbar-test.js => au-toolbar-test.gts} | 20 +++++++-------
 .../integration/components/loose-mode-test.ts |  7 +++++
 4 files changed, 43 insertions(+), 12 deletions(-)
 rename addon/components/{au-toolbar.gjs => au-toolbar.gts} (67%)
 rename tests/integration/components/{au-toolbar-test.js => au-toolbar-test.gts} (60%)

diff --git a/addon/components/au-toolbar.gjs b/addon/components/au-toolbar.gts
similarity index 67%
rename from addon/components/au-toolbar.gjs
rename to addon/components/au-toolbar.gts
index cb6bd588e..5e4e2b976 100644
--- a/addon/components/au-toolbar.gjs
+++ b/addon/components/au-toolbar.gts
@@ -1,6 +1,21 @@
+import type { TOC } from '@ember/component/template-only';
 import Component from '@glimmer/component';
 
-export default class AuToolbar extends Component {
+export interface AuToolbarSignature {
+  Args: {
+    reverse?: boolean;
+    border?: 'top' | 'bottom';
+    skin?: 'tint';
+    size?: 'small' | 'medium' | 'large';
+    nowrap?: boolean;
+  };
+  Blocks: {
+    default: [typeof Group];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuToolbar extends Component<AuToolbarSignature> {
   get reverse() {
     if (this.args.reverse) return 'au-c-toolbar--reverse';
     else return '';
@@ -44,7 +59,14 @@ export default class AuToolbar extends Component {
   </template>
 }
 
-const Group = <template>
+interface GroupSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const Group: TOC<GroupSignature> = <template>
   <div class="au-c-toolbar__group" ...attributes>
     {{yield}}
   </div>
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index c44f24cc8..ee25d8237 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -18,6 +18,7 @@ import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-
 import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
 import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
@@ -43,6 +44,7 @@ export default interface AppuniversumRegistry {
   AuLink: typeof AuLink;
   AuList: typeof AuList;
   AuLoader: typeof AuLoader;
+  AuToolbar: typeof AuToolbar;
 
   // Modifiers
   'au-date-input': typeof AuDateInputModifier;
diff --git a/tests/integration/components/au-toolbar-test.js b/tests/integration/components/au-toolbar-test.gts
similarity index 60%
rename from tests/integration/components/au-toolbar-test.js
rename to tests/integration/components/au-toolbar-test.gts
index 56b87039d..0cfce7411 100644
--- a/tests/integration/components/au-toolbar-test.js
+++ b/tests/integration/components/au-toolbar-test.gts
@@ -1,27 +1,27 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 module('Integration | Component | au-toolbar', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it yields a group component', async function (assert) {
-    await render(hbs`
-      <AuToolbar as |Group|>
-        <Group data-test-foo>Foo</Group>
-        <Group data-test-bar>Bar</Group>
-      </AuToolbar>
-    `);
+    await render(
+      <template>
+        <AuToolbar as |Group|>
+          <Group data-test-foo>Foo</Group>
+          <Group data-test-bar>Bar</Group>
+        </AuToolbar>
+      </template>,
+    );
 
     assert.dom('[data-test-foo]').hasText('Foo');
     assert.dom('[data-test-bar]').hasText('Bar');
   });
 
   test('it passes through extra html attributes', async function (assert) {
-    await render(hbs`
-      <AuToolbar data-test-foo="bar"></AuToolbar>
-    `);
+    await render(<template><AuToolbar data-test-foo="bar" /></template>);
 
     assert.dom('[data-test-foo]').exists();
   });
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index 550b8293e..f568a2564 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -139,6 +139,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     `);
     assert.dom('[data-test-loader]').exists();
   });
+
+  test('`<AuToolbar>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuToolbar data-test-toolbar></AuToolbar>
+    `);
+    assert.dom('[data-test-toolbar]').exists();
+  });
 });
 
 module('Integration | Modifier | Loose mode', function (hooks) {

From 42d72f831b73661bdf16b14bfc595a3d45d5ea98 Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 15 Feb 2024 15:54:41 +0100
Subject: [PATCH 2/3] Add Glint support to the `AuAccordion` component

---
 .../{au-accordion.gjs => au-accordion.gts}    |  32 +++--
 addon/template-registry.ts                    |   2 +
 ...ccordion-test.js => au-accordion-test.gts} | 117 +++++++++++-------
 .../integration/components/loose-mode-test.ts |   8 ++
 4 files changed, 107 insertions(+), 52 deletions(-)
 rename addon/components/{au-accordion.gjs => au-accordion.gts} (80%)
 rename tests/integration/components/{au-accordion-test.js => au-accordion-test.gts} (61%)

diff --git a/addon/components/au-accordion.gjs b/addon/components/au-accordion.gts
similarity index 80%
rename from addon/components/au-accordion.gjs
rename to addon/components/au-accordion.gts
index b740d03e9..340301480 100644
--- a/addon/components/au-accordion.gjs
+++ b/addon/components/au-accordion.gts
@@ -1,21 +1,35 @@
-import {
-  AuButton,
-  AuContent,
-  AuIcon,
-  AuLoader,
-  AuToolbar,
-} from '@appuniversum/ember-appuniversum';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
+import AuButton from './au-button';
+import AuContent from './au-content';
+import AuIcon from './au-icon';
+import AuLoader from './au-loader';
+import AuToolbar from './au-toolbar';
 
-const autofocus = modifier(function autofocus(element) {
+const autofocus = modifier(function autofocus(element: HTMLElement) {
   element.focus();
 });
 
-export default class AuAccordion extends Component {
+export interface AuAccordionSignature {
+  Args: {
+    buttonLabel?: string;
+    iconClosed?: string;
+    iconOpen?: string;
+    loading?: boolean;
+    reverse?: boolean;
+    skin?: 'border';
+    subtitle?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuAccordion extends Component<AuAccordionSignature> {
   @tracked isOpen = false;
 
   get loading() {
diff --git a/addon/template-registry.ts b/addon/template-registry.ts
index ee25d8237..788ee07d1 100644
--- a/addon/template-registry.ts
+++ b/addon/template-registry.ts
@@ -1,4 +1,5 @@
 // Components
+import type AuAccordion from '@appuniversum/ember-appuniversum/components/au-accordion';
 import type AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
 import type AuApp from '@appuniversum/ember-appuniversum/components/au-app';
 import type AuBadge from '@appuniversum/ember-appuniversum/components/au-badge';
@@ -25,6 +26,7 @@ import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers
 
 export default interface AppuniversumRegistry {
   // Components
+  AuAccordion: typeof AuAccordion;
   AuAlert: typeof AuAlert;
   AuApp: typeof AuApp;
   AuBadge: typeof AuBadge;
diff --git a/tests/integration/components/au-accordion-test.js b/tests/integration/components/au-accordion-test.gts
similarity index 61%
rename from tests/integration/components/au-accordion-test.js
rename to tests/integration/components/au-accordion-test.gts
index a4bc360a1..e2f77b02b 100644
--- a/tests/integration/components/au-accordion-test.js
+++ b/tests/integration/components/au-accordion-test.gts
@@ -1,7 +1,8 @@
-import { module, test } from 'qunit';
+import AuAccordion from '@appuniversum/ember-appuniversum/components/au-accordion';
+import { click, settled, render } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
 import { setupRenderingTest } from 'ember-qunit';
-import { click, render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { module, test } from 'qunit';
 
 const ACCORDION = {
   TOGGLE: '[data-test-accordion-toggle]',
@@ -13,25 +14,35 @@ const ACCORDION = {
   LOADER: '[data-test-accordion-loader]',
 };
 
+class TestState {
+  @tracked iconClosed?: string;
+  @tracked iconOpen?: string;
+  @tracked isLoading?: boolean;
+}
+
 module('Integration | Component | au-accordion', function (hooks) {
   setupRenderingTest(hooks);
 
   test("it doesn't render any content when initially rendered", async function (assert) {
-    await render(hbs`
-      <AuAccordion>
-        Content
-      </AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion>
+          Content
+        </AuAccordion>
+      </template>,
+    );
 
     assert.dom(ACCORDION.CONTENT).doesNotExist();
   });
 
   test('it toggles its content rendering when clicking it', async function (assert) {
-    await render(hbs`
-      <AuAccordion>
-        Some content
-      </AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion>
+          Some content
+        </AuAccordion>
+      </template>,
+    );
 
     await toggleAccordion();
     assert.dom(ACCORDION.CONTENT).exists().hasText('Some content');
@@ -41,31 +52,37 @@ module('Integration | Component | au-accordion', function (hooks) {
   });
 
   test('it can display a subtitle', async function (assert) {
-    await render(hbs`
-      <AuAccordion @subtitle="Foo">
-        Some content
-      </AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion @subtitle="Foo">
+          Some content
+        </AuAccordion>
+      </template>,
+    );
 
     assert.dom(ACCORDION.SUBTITLE).exists().hasText('Foo');
   });
 
   test('it supports changing the label of the toggle button', async function (assert) {
-    await render(hbs`
-      <AuAccordion @buttonLabel="Foo button">
-        Some content
-      </AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion @buttonLabel="Foo button">
+          Some content
+        </AuAccordion>
+      </template>,
+    );
 
     assert.dom(ACCORDION.BUTTON).exists().hasText('Foo button');
   });
 
   test('it shows a different icon depending on the open state', async function (assert) {
-    await render(hbs`
-      <AuAccordion>
-        Some content
-      </AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion>
+          Some content
+        </AuAccordion>
+      </template>,
+    );
 
     assert.dom(ACCORDION.ICON_OPEN).doesNotExist();
     assert.dom(ACCORDION.ICON_CLOSED).exists();
@@ -76,17 +93,24 @@ module('Integration | Component | au-accordion', function (hooks) {
   });
 
   test('it supports choosing different icons', async function (assert) {
-    await render(hbs`
-      <AuAccordion @iconOpen={{this.iconOpen}} @iconClosed={{this.iconClosed}}>
-        Some content
-      </AuAccordion>
-    `);
+    const state = new TestState();
+    await render(
+      <template>
+        <AuAccordion
+          @iconOpen={{state.iconOpen}}
+          @iconClosed={{state.iconClosed}}
+        >
+          Some content
+        </AuAccordion>
+      </template>,
+    );
 
     assert
       .dom(ACCORDION.ICON_CLOSED)
       .hasAttribute('data-test-accordion-icon-closed', 'nav-right');
 
-    this.set('iconClosed', 'other-closed-icon');
+    state.iconClosed = 'other-closed-icon';
+    await settled();
 
     assert
       .dom(ACCORDION.ICON_CLOSED)
@@ -97,7 +121,8 @@ module('Integration | Component | au-accordion', function (hooks) {
       .dom(ACCORDION.ICON_OPEN)
       .hasAttribute('data-test-accordion-icon-open', 'nav-down');
 
-    this.set('iconOpen', 'other-open-icon');
+    state.iconOpen = 'other-open-icon';
+    await settled();
 
     assert
       .dom(ACCORDION.ICON_OPEN)
@@ -105,11 +130,14 @@ module('Integration | Component | au-accordion', function (hooks) {
   });
 
   test('it can show a loading indicator instead of content', async function (assert) {
-    this.isLoading = true;
+    const state = new TestState();
+    state.isLoading = true;
 
-    await render(hbs`
-      <AuAccordion @loading={{this.isLoading}}>Some content</AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion @loading={{state.isLoading}}>Some content</AuAccordion>
+      </template>,
+    );
 
     assert.dom(ACCORDION.LOADER).doesNotExist();
 
@@ -117,15 +145,18 @@ module('Integration | Component | au-accordion', function (hooks) {
     assert.dom(ACCORDION.LOADER).exists();
     assert.dom(ACCORDION.CONTENT).doesNotContainText('Some content');
 
-    this.set('isLoading', false);
+    state.isLoading = false;
+    await settled();
     assert.dom(ACCORDION.LOADER).doesNotExist();
     assert.dom(ACCORDION.CONTENT).containsText('Some content');
   });
 
   test("it's possible to add extra html attributes", async function (assert) {
-    await render(hbs`
-      <AuAccordion class="test" data-test-accordion-external></AuAccordion>
-    `);
+    await render(
+      <template>
+        <AuAccordion class="test" data-test-accordion-external />
+      </template>,
+    );
 
     assert.dom('[data-test-accordion-external]').exists().hasClass('test');
   });
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
index f568a2564..977bb5a2f 100644
--- a/tests/integration/components/loose-mode-test.ts
+++ b/tests/integration/components/loose-mode-test.ts
@@ -8,6 +8,14 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | Loose mode', function (hooks) {
   setupRenderingTest(hooks);
 
+  test('`<AuAccordion>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuAccordion data-test-accordion-external></AuAccordion>
+    `);
+
+    assert.dom('[data-test-accordion-external]').exists();
+  });
+
   test('`<AuAlert>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuAlert data-test-alert />`);
 

From 7b6bdb02a9929d1609da39367ad68222ab21e54a Mon Sep 17 00:00:00 2001
From: Sam Van Campenhout <sam.van.campenhout@gmail.com>
Date: Thu, 15 Feb 2024 16:06:41 +0100
Subject: [PATCH 3/3] Add an `isOpenInitially` argument to the `AuAccordion`
 component

---
 addon/components/au-accordion.gts                   |  9 ++++++++-
 stories/5-components/Content/AuAccordion.stories.js |  7 +++++++
 tests/integration/components/au-accordion-test.gts  | 12 ++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/addon/components/au-accordion.gts b/addon/components/au-accordion.gts
index 340301480..1f32c4bb6 100644
--- a/addon/components/au-accordion.gts
+++ b/addon/components/au-accordion.gts
@@ -18,6 +18,7 @@ export interface AuAccordionSignature {
     buttonLabel?: string;
     iconClosed?: string;
     iconOpen?: string;
+    isOpenInitially?: boolean;
     loading?: boolean;
     reverse?: boolean;
     skin?: 'border';
@@ -30,7 +31,13 @@ export interface AuAccordionSignature {
 }
 
 export default class AuAccordion extends Component<AuAccordionSignature> {
-  @tracked isOpen = false;
+  @tracked isOpen;
+
+  constructor(owner: unknown, args: AuAccordionSignature['Args']) {
+    super(owner, args);
+
+    this.isOpen = Boolean(this.args.isOpenInitially);
+  }
 
   get loading() {
     if (this.args.loading) return 'is-loading';
diff --git a/stories/5-components/Content/AuAccordion.stories.js b/stories/5-components/Content/AuAccordion.stories.js
index d02e5ff94..7e4f124ef 100644
--- a/stories/5-components/Content/AuAccordion.stories.js
+++ b/stories/5-components/Content/AuAccordion.stories.js
@@ -34,6 +34,11 @@ export default {
       control: 'boolean',
       description: 'Adds a loading state to the button',
     },
+    isOpenInitially: {
+      control: 'boolean',
+      description:
+        'When set to `true`, this will render the accordion in the "open" state from the start.',
+    },
   },
   parameters: {
     layout: 'padded',
@@ -50,6 +55,7 @@ const Template = (args) => ({
       @iconClosed={{this.iconClosed}}
       @buttonLabel={{this.buttonLabel}}
       @loading={{this.loading}}
+      @isOpenInitially={{this.isOpenInitially}}
     >
       <p>I am information. I can even contain a <AuLink>A Link</AuLink>!</p>
     </AuAccordion>`,
@@ -65,4 +71,5 @@ Component.args = {
   iconClosed: 'nav-right',
   buttonLabel: 'Accordion with arrows',
   loading: false,
+  isOpenInitially: false,
 };
diff --git a/tests/integration/components/au-accordion-test.gts b/tests/integration/components/au-accordion-test.gts
index e2f77b02b..5f5ea089d 100644
--- a/tests/integration/components/au-accordion-test.gts
+++ b/tests/integration/components/au-accordion-test.gts
@@ -35,6 +35,18 @@ module('Integration | Component | au-accordion', function (hooks) {
     assert.dom(ACCORDION.CONTENT).doesNotExist();
   });
 
+  test('it renders the content by default if `isOpenInitially` is set to `true`', async function (assert) {
+    await render(
+      <template>
+        <AuAccordion @isOpenInitially={{true}}>
+          Content
+        </AuAccordion>
+      </template>,
+    );
+
+    assert.dom(ACCORDION.CONTENT).exists().hasText('Content');
+  });
+
   test('it toggles its content rendering when clicking it', async function (assert) {
     await render(
       <template>