Fix types of icon component passed to au-icon

Author: piemonkey

addon/components/au-accordion.gts

@@ -5,19 +5,22 @@ 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 AuIcon, { type AuIconSignature } from './au-icon';
 import AuLoader from './au-loader';
 import AuToolbar from './au-toolbar';
 
 const autofocus = modifier(function autofocus(element: HTMLElement) {
   element.focus();
 });
 
+const iconTestName = (icon: AuIconSignature['Args']['icon']): string =>
+  typeof icon === 'string' ? icon : icon.toString();
+
 export interface AuAccordionSignature {
   Args: {
     buttonLabel?: string;
-    iconClosed?: string;
-    iconOpen?: string;
+    iconClosed?: AuIconSignature['Args']['icon'];
+    iconOpen?: AuIconSignature['Args']['icon'];
     isOpenInitially?: boolean;
     loading?: boolean;
     reverse?: boolean;
@@ -107,15 +110,15 @@ export default class AuAccordion extends Component<AuAccordionSignature> {
               @alignment="left"
               @size="large"
               @ariaHidden={{true}}
-              data-test-accordion-icon-open={{this.iconOpen}}
+              data-test-accordion-icon-open={{iconTestName this.iconOpen}}
             />
           {{else}}
             <AuIcon
               @icon={{this.iconClosed}}
               @alignment="left"
               @size="large"
               @ariaHidden={{true}}
-              data-test-accordion-icon-closed={{this.iconClosed}}
+              data-test-accordion-icon-closed={{iconTestName this.iconClosed}}
             />
           {{/if}}
         </Group>

addon/components/au-icon.gts

@@ -7,10 +7,10 @@ export interface AuIconSignature {
     alignment?: 'left' | 'right';
     // TODO: We should deprecate the non-boolean versions since there is no reason to support them
     ariaHidden?: boolean | 'true' | 'false';
-    icon: string | ComponentLike<Record<string, never>>;
+    icon: string | ComponentLike<{ Element: Element }>;
     size?: 'large';
   };
-  Element: SVGSVGElement;
+  Element: Element;
 }
 
 export default class AuIcon extends Component<AuIconSignature> {
@@ -47,10 +47,10 @@ export default class AuIcon extends Component<AuIconSignature> {
   <template>
     {{#if this.iconComponent}}
       {{#let this.iconComponent as |Icon|}}
-        {{! @glint-expect-error: glint doesn't like us setting attributes on the passed component }}
         <Icon
           class="au-c-icon {{this.alignment}} {{this.size}}"
           aria-hidden={{this.ariaHidden}}
+          ...attributes
         />
       {{/let}}
     {{else}}

addon/components/au-link-external.gts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 const SKIN_CLASSES = {
   primary: 'au-c-link',
@@ -12,7 +12,7 @@ const SKIN_CLASSES = {
 export interface AuLinkExternalSignature {
   Args: {
     hideText?: boolean;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
     skin?:
       | 'primary'