Merge pull request #2142 from hashicorp/feat/embe-flight-icons-bluprint-update

feat(ember-flight-icons): update blueprint

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;
   };

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

@@ -2,6 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export enum HdsAppFooterStatusValues {
   Operational = 'operational',
@@ -16,7 +17,7 @@ export const HdsAppFooterStatusLinkStatusValues: Record<
   HdsAppFooterStatusValues,
   {
     text: string;
-    iconName: string;
+    iconName: FlightIconSignature['Args']['name'];
   }
 > = {
   [HdsAppFooterStatusValues.Operational]: {

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/types.ts

@@ -2,6 +2,7 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
 export enum HdsStepperStatusesValues {
   Incomplete = 'incomplete',
@@ -14,7 +15,7 @@ export type HdsStepperStatuses = `${HdsStepperStatusesValues}`;
 
 export const HdsStepperStatusToIconsValues: Record<
   HdsStepperStatusesValues,
-  string
+  FlightIconSignature['Args']['name']
 > = {
   [HdsStepperStatusesValues.Incomplete]: 'circle',
   [HdsStepperStatusesValues.Progress]: 'circle-half',

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

@@ -4,7 +4,7 @@ import { LinkTo } from '@ember/routing';
 import { Portal, PortalTarget } from 'ember-stargate';
 
 import type HdsComponentsRegistry from '../src/template-registry';
-
+import type FlightIconsRegistry from '@hashicorp/ember-flight-icons/template-registry';
 import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';
 import type EmberStargateRegistry from 'ember-stargate/template-registry';
 import type EmberStyleModifierRegistry from 'ember-style-modifier/template-registry';
@@ -18,7 +18,8 @@ declare module '@glint/environment-ember-loose/registry' {
       EmberStargateRegistry,
       EmberStyleModifierRegistry,
       EmberTruthRegistry,
-      RenderModifiersRegistry /*, other addon registries */ {
+      RenderModifiersRegistry,
+      FlightIconsRegistry /*, other addon registries */ {
     // local entries
     LinkToExternal: typeof LinkTo;
     // we have to use `ember-stargate` version `0.4.3` because version `0.5.0` causes a break in the tests for `ember-lts-3.28`

packages/components/unpublished-development-types/global.d.ts

@@ -4,7 +4,6 @@
 # compiled output
 /declarations/
 /dist/
-/declarations/
 
 # misc
 /coverage/

packages/ember-flight-icons/.eslintignore

@@ -1,9 +1,36 @@
 {
-  "presets": [["@babel/preset-typescript"]],
   "plugins": [
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        "allExtensions": true,
+        "onlyRemoveTypeImports": true,
+        "allowDeclareFields": true
+      }
+    ],
     "@embroider/addon-dev/template-colocation-plugin",
-    ["@babel/plugin-transform-typescript", { "allowDeclareFields": true }],
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    "@babel/plugin-transform-class-properties"
+    [
+      "babel-plugin-ember-template-compilation",
+      {
+        "targetFormat": "hbs",
+        "transforms": []
+      }
+    ],
+    [
+      "module:decorator-transforms",
+      {
+        "runtime": {
+          "import": "decorator-transforms/runtime"
+        }
+      }
+    ],
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-transform-private-methods"
   ]
 }