feat(ember-flight-icons): add types

Author: aklkv

.changeset/long-rats-share.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/ember-flight-icons": minor
+---
+
+`FlightIcon` - converted component to TypeScript and published types

packages/components/src/components/hds/alert/index.ts

@@ -18,6 +18,7 @@ import type { HdsYieldSignature } from '../yield';
 import type { HdsAlertColors, HdsAlertTypes } from './types.ts';
 import type { HdsAlertTitleSignature } from './title.ts';
 import type { HdsAlertDescriptionSignature } from './description.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const TYPES: string[] = Object.values(HdsAlertTypeValues);
 export const DEFAULT_COLOR = HdsAlertColorValues.Neutral;
@@ -39,7 +40,7 @@ export interface HdsAlertSignature {
   Args: {
     type: HdsAlertTypes;
     color?: HdsAlertColors;
-    icon?: string | false;
+    icon?: FlightIconSignature['Args']['name'] | false;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     onDismiss?: (event: MouseEvent, ...args: any[]) => void;
   };
@@ -100,7 +101,7 @@ export default class HdsAlertComponent extends Component<HdsAlertSignature> {
    * @default null
    * @description The name of the icon to be used.
    */
-  get icon() {
+  get icon(): FlightIconSignature['Args']['name'] | false {
     const { icon } = this.args;
 
     // If `icon` isn't passed, use the pre-defined one from `color`

packages/components/src/components/hds/app-footer/link.ts

@@ -8,11 +8,12 @@ import Component from '@glimmer/component';
 import type { HdsInteractiveSignature } from '../interactive/';
 import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts';
 import type { HdsLinkInlineSignature } from '../link/inline.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export interface HdsAppFooterLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
     color?: HdsLinkColors;
-    icon?: string;
+    icon?: FlightIconSignature['Args']['name'];
     iconPosition?: HdsLinkIconPositions;
   };
   Blocks: {

packages/components/src/components/hds/app-footer/status-link.ts

@@ -12,14 +12,15 @@ import type { HdsInteractiveSignature } from '../interactive/';
 import { HdsAppFooterStatusLinkStatusValues } from './types.ts';
 import type { HdsAppFooterStatusTypes } from './types.ts';
 import type { HdsAppFooterLinkSignature } from './link.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const STATUSES = HdsAppFooterStatusLinkStatusValues;
 
 export interface HdsAppFooterStatusLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
     itemStyle?: SafeString;
     status?: HdsAppFooterStatusTypes;
-    statusIcon?: string;
+    statusIcon?: FlightIconSignature['Args']['name'];
     statusIconColor?: string;
     text?: string;
   };
@@ -64,7 +65,8 @@ export default class HdsAppFooterStatusLinkComponent extends Component<HdsAppFoo
    */
   get statusIcon() {
     if (this.status && !this.args.statusIcon) {
-      return STATUSES[this.status]?.iconName;
+      return STATUSES[this.status]
+        ?.iconName as FlightIconSignature['Args']['name'];
     }
     return this.args.statusIcon;
   }

packages/components/src/components/hds/application-state/header.ts

@@ -5,11 +5,13 @@
 
 import TemplateOnlyComponent from '@ember/component/template-only';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
+
 export interface HdsApplicationStateHeaderSignature {
   Args: {
     title?: string;
     errorCode?: string;
-    icon?: string;
+    icon?: FlightIconSignature['Args']['name'];
   };
   Element: HTMLDivElement;
 }

packages/components/src/components/hds/badge/index.ts

@@ -13,6 +13,7 @@ import {
 } from './types.ts';
 
 import type { HdsBadgeColors, HdsBadgeSizes, HdsBadgeTypes } from './types.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const SIZES: string[] = Object.values(HdsBadgeSizeValues);
 export const TYPES: string[] = Object.values(HdsBadgeTypeValues);
@@ -27,7 +28,7 @@ export interface HdsBadgeSignature {
     type?: HdsBadgeTypes;
     color?: HdsBadgeColors;
     text: string;
-    icon?: string | null;
+    icon?: FlightIconSignature['Args']['name'];
     isIconOnly?: boolean;
   };
   Element: HTMLDivElement;

packages/components/src/components/hds/button/index.ts

@@ -6,6 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import type { HdsInteractiveSignature } from '../interactive/';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
@@ -23,7 +24,7 @@ export interface HdsButtonSignature {
     size?: HdsButtonSize;
     color?: HdsButtonColor;
     text: string;
-    icon?: string;
+    icon?: FlightIconSignature['Args']['name'];
     iconPosition?: HdsButtonIconPosition;
     isIconOnly?: boolean;
     isFullWidth?: boolean;

packages/components/src/components/hds/copy/button/index.ts

@@ -11,6 +11,7 @@ import { HdsCopyButtonSizeValues } from './types.ts';
 import type { HdsCopyButtonSizes } from './types.ts';
 import type { HdsButtonSignature } from '../../button/';
 import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const DEFAULT_SIZE = HdsCopyButtonSizeValues.Medium;
 export const SIZES: string[] = Object.values(HdsCopyButtonSizeValues);
@@ -40,7 +41,7 @@ export default class HdsCopyButtonComponent extends Component<HdsCopyButtonSigna
    * @description The icon to be displayed for each status; automatically calculated based on the tracked property `status`.
    */
   get icon() {
-    let icon = DEFAULT_ICON;
+    let icon: FlightIconSignature['Args']['name'] = DEFAULT_ICON;
     if (this.status === 'success') {
       icon = SUCCESS_ICON;
     } else if (this.status === 'error') {

packages/components/src/components/hds/copy/snippet/index.ts

@@ -10,6 +10,7 @@ import { action } from '@ember/object';
 import { HdsCopySnippetColorValues } from './types.ts';
 import type { HdsCopySnippetColors } from './types.ts';
 import type { HdsClipboardModifierSignature } from '../../../../modifiers/hds-clipboard.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const DEFAULT_COLOR = HdsCopySnippetColorValues.Primary;
 export const COLORS: string[] = Object.values(HdsCopySnippetColorValues);
@@ -56,7 +57,7 @@ export default class HdsCopySnippetComponent extends Component<HdsCopySnippetSig
    * @description Determines the icon to be used, based on the success state. Note that this is auto-tracked because it depends on a tracked property (status).
    */
   get icon() {
-    let icon = DEFAULT_ICON;
+    let icon: FlightIconSignature['Args']['name'] = DEFAULT_ICON;
     if (this.status === 'success') {
       icon = SUCCESS_ICON;
     } else if (this.status === 'error') {

packages/components/src/components/hds/icon-tile/index.ts

@@ -18,6 +18,8 @@ import type {
   HdsIconTileSizes,
 } from './types.ts';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
+
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'neutral';
 export const SIZES: string[] = Object.values(HdsIconTileSizeValues);
@@ -32,8 +34,8 @@ export interface HdsIconTileSignature {
     size?: HdsIconTileSizes;
     color?: HdsIconTileColors;
     logo?: HdsIconTileProducts;
-    icon?: string | null;
-    iconSecondary?: string;
+    icon?: FlightIconSignature['Args']['name'];
+    iconSecondary?: FlightIconSignature['Args']['name'];
   };
   Element: HTMLDivElement;
 }
@@ -94,7 +96,7 @@ export default class HdsIconTileComponent extends Component<HdsIconTileSignature
    * @type {string|null}
    * @default null
    */
-  get icon() {
+  get icon(): FlightIconSignature['Args']['name'] | undefined {
     if (this.args.logo) {
       // for the logo version we use the colored versions directly
       return `${this.args.logo}-color`;

packages/components/src/components/hds/link/inline.ts

@@ -9,6 +9,7 @@ import { HdsLinkColorValues, HdsLinkIconPositionValues } from './types.ts';
 
 import type { HdsInteractiveSignature } from '../interactive/';
 import type { HdsLinkColors, HdsLinkIconPositions } from './types.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const DEFAULT_ICONPOSITION = HdsLinkIconPositionValues.Trailing;
 export const DEFAULT_COLOR = HdsLinkColorValues.Primary;
@@ -18,7 +19,7 @@ export const COLORS: string[] = Object.values(HdsLinkColorValues);
 export interface HdsLinkInlineSignature {
   Args: HdsInteractiveSignature['Args'] & {
     color?: HdsLinkColors;
-    icon?: string;
+    icon?: FlightIconSignature['Args']['name'];
     iconPosition?: HdsLinkIconPositions;
   };
   Blocks: {

packages/components/src/components/hds/link/standalone.ts

@@ -17,13 +17,14 @@ import type {
   HdsLinkIconPositions,
   HdsLinkStandaloneSizes,
 } from './types.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export interface HdsLinkStandaloneSignature {
   Args: HdsInteractiveSignature['Args'] & {
     size?: HdsLinkStandaloneSizes;
     color?: HdsLinkColors;
     text: string;
-    icon: string;
+    icon: FlightIconSignature['Args']['name'];
     iconPosition?: HdsLinkIconPositions;
   };
   Element: HdsInteractiveSignature['Element'];

packages/components/src/components/hds/side-nav/header/home-link.ts

@@ -6,11 +6,12 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 import type { HdsInteractiveSignature } from '../../interactive/';
 
 interface HdsSideNavHeaderHomeLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
-    icon: string;
+    icon: FlightIconSignature['Args']['name'];
     color?: string;
     ariaLabel: string;
   };

packages/components/src/components/hds/side-nav/header/icon-button.ts

@@ -6,11 +6,12 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 import type { HdsInteractiveSignature } from '../../interactive/';
 
 interface HdsSideNavHeaderIconButtonSignature {
   Args: HdsInteractiveSignature['Args'] & {
-    icon: string;
+    icon: FlightIconSignature['Args']['name'];
     ariaLabel: string;
   };
   Element: HdsInteractiveSignature['Element'];

packages/components/src/components/hds/side-nav/list/link.ts

@@ -5,11 +5,12 @@
 
 import TemplateOnlyComponent from '@ember/component/template-only';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 import type { HdsInteractiveSignature } from '../../interactive';
 
 export interface HdsSideNavListLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
-    icon?: string;
+    icon?: FlightIconSignature['Args']['name'];
     text?: string;
     badge?: string;
     count?: string;

packages/components/src/components/hds/side-nav/toggle-button.ts

@@ -5,9 +5,11 @@
 
 import TemplateOnlyComponent from '@ember/component/template-only';
 
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
+
 interface HdsSideNavToggleButtonSignature {
   Args: {
-    icon: string;
+    icon: FlightIconSignature['Args']['name'];
   };
   Element: HTMLButtonElement;
 }

packages/components/src/components/hds/stepper/task/indicator.ts

@@ -11,6 +11,7 @@ import {
   HdsStepperStatusToIconsValues,
 } from '../types.ts';
 import type { HdsStepperStatuses } from '../types.ts';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export const DEFAULT_STATUS = HdsStepperStatusesValues.Incomplete;
 export const STATUSES: string[] = Object.values(HdsStepperStatusesValues);
@@ -61,7 +62,9 @@ export default class HdsStepperTaskIndicatorComponent extends Component<HdsStepp
    */
 
   get iconName() {
-    return MAPPING_STATUS_TO_ICONS[this.status];
+    return MAPPING_STATUS_TO_ICONS[
+      this.status
+    ] as FlightIconSignature['Args']['name'];
   }
 
   /**

packages/components/unpublished-development-types/@hashicorp/ember-flight-icons/flight-icon.d.ts

@@ -83,8 +83,7 @@
     "main": "addon-main.cjs",
     "app-js": {
       "./components/flight-icon.js": "./dist/_app_/components/flight-icon.js",
-      "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
-      "./template-registry.js": "./dist/_app_/template-registry.js"
+      "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js"
     }
   },
   "exports": {

packages/ember-flight-icons/package.json

@@ -0,0 +1,3 @@
+import FlightIcon from './components/flight-icon.ts';
+
+export { FlightIcon };

packages/ember-flight-icons/src/components.ts

@@ -6,17 +6,31 @@
 import Component from '@glimmer/component';
 import { guidFor } from '@ember/object/internals';
 import { assert } from '@ember/debug';
-
 import { iconNames } from '@hashicorp/flight-icons/svg';
 
-export default class FlightIconComponent extends Component {
-  constructor() {
-    super(...arguments);
+import type { IconName } from '@hashicorp/flight-icons/svg';
+
+export interface FlightIconSignature {
+  Args: {
+    name?: IconName;
+    color?: string;
+    size?: '16' | '24';
+    stretched?: boolean;
+    isInlineBlock?: boolean;
+    title?: string;
+  };
+  Element: SVGElement;
+}
+
+export default class FlightIcon extends Component<FlightIconSignature> {
+  constructor(owner: unknown, args: FlightIconSignature['Args']) {
+    super(owner, args);
+
     if (!this.args.name) {
       assert('Please provide to <FlightIcon> a value for @name');
     } else if (!iconNames.includes(this.args.name)) {
       assert(
-        `The icon @name "${this.args.name}" provided to <FlightIcon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`,
+        `The icon @name "${this.args.name}" provided to <FlightIcon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`
       );
     }
   }
@@ -125,7 +139,7 @@ export default class FlightIconComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['flight-icon'];
+    const classes = ['flight-icon'];
 
     // add a class based on the @name argument
     classes.push(`flight-icon-${this.name}`);