Merge pull request #1990 from hashicorp/hds-2427/convert-alert-ts

Typescript - `Hds::Alert`

.changeset/stupid-windows-deny.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`Alert` - Converted components to TypeScript

packages/components/package.json

@@ -108,6 +108,7 @@
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert/index.js": "./dist/_app_/components/hds/alert/index.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",
+      "./components/hds/alert/types.js": "./dist/_app_/components/hds/alert/types.js",
       "./components/hds/app-footer/copyright.js": "./dist/_app_/components/hds/app-footer/copyright.js",
       "./components/hds/app-footer/index.js": "./dist/_app_/components/hds/app-footer/index.js",
       "./components/hds/app-footer/item.js": "./dist/_app_/components/hds/app-footer/item.js",
@@ -257,6 +258,7 @@
       "./components/hds/toast/index.js": "./dist/_app_/components/hds/toast/index.js",
       "./components/hds/tooltip-button/index.js": "./dist/_app_/components/hds/tooltip-button/index.js",
       "./components/hds/yield/index.js": "./dist/_app_/components/hds/yield/index.js",
+      "./components/hds/yield/types.js": "./dist/_app_/components/hds/yield/types.js",
       "./helpers/hds-link-to-models.js": "./dist/_app_/helpers/hds-link-to-models.js",
       "./helpers/hds-link-to-query.js": "./dist/_app_/helpers/hds-link-to-query.js",
       "./modifiers/hds-clipboard.js": "./dist/_app_/modifiers/hds-clipboard.js",

packages/components/src/components/hds/alert/description.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

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

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+import type { HdsAlertDescriptionSignature } from './types.ts';
+
+export default class HdsAlertDescriptionComponent extends Component<HdsAlertDescriptionSignature> {}

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

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

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

@@ -8,34 +8,33 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
 import { tracked } from '@glimmer/tracking';
+import { HdsAlertTypeValues, HdsAlertColorValues } from './types.ts';
+import type { HdsAlertSignature } from './types.ts';
+
+export const TYPES: string[] = Object.values(HdsAlertTypeValues);
+export const DEFAULT_COLOR = HdsAlertColorValues.Neutral;
+export const COLORS: string[] = Object.values(HdsAlertColorValues);
 
-export const TYPES = ['page', 'inline', 'compact'];
-export const DEFAULT_COLOR = 'neutral';
-export const COLORS = [
-  'neutral',
-  'highlight',
-  'success',
-  'warning',
-  'critical',
-];
 export const MAPPING_COLORS_TO_ICONS = {
-  neutral: 'info',
-  highlight: 'info',
-  success: 'check-circle',
-  warning: 'alert-triangle',
-  critical: 'alert-diamond',
-};
+  [HdsAlertColorValues.Neutral]: 'info',
+  [HdsAlertColorValues.Highlight]: 'info',
+  [HdsAlertColorValues.Success]: 'check-circle',
+  [HdsAlertColorValues.Warning]: 'alert-triangle',
+  [HdsAlertColorValues.Critical]: 'alert-diamond',
+} as const;
 
 const CONTENT_ELEMENT_SELECTOR = '.hds-alert__content';
 const TITLE_ELEMENT_SELECTOR = '.hds-alert__title';
 const DESCRIPTION_ELEMENT_SELECTOR = '.hds-alert__description';
 
-export default class HdsAlertIndexComponent extends Component {
+// TODO: Do we need to update this icon type to be a type exported from the icon foundations in the future?
+
+export default class HdsAlertIndexComponent extends Component<HdsAlertSignature> {
   @tracked role = 'alert';
-  @tracked ariaLabelledBy;
+  @tracked ariaLabelledBy?: string;
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: unknown, args: HdsAlertSignature['Args']) {
+    super(owner, args);
 
     assert(
       `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
@@ -52,7 +51,7 @@ export default class HdsAlertIndexComponent extends Component {
    * @description Determines the color scheme for the alert.
    */
   get color() {
-    let { color = DEFAULT_COLOR } = this.args;
+    const { color = DEFAULT_COLOR } = this.args;
 
     assert(
       `@color for "Hds::Alert" must be one of the following: ${COLORS.join(
@@ -71,7 +70,7 @@ export default class HdsAlertIndexComponent extends Component {
    * @description The name of the icon to be used.
    */
   get icon() {
-    let { icon } = this.args;
+    const { icon } = this.args;
 
     // If `icon` isn't passed, use the pre-defined one from `color`
     if (icon === undefined) {
@@ -102,7 +101,7 @@ export default class HdsAlertIndexComponent extends Component {
    * @default () => {}
    */
   get onDismiss() {
-    let { onDismiss } = this.args;
+    const { onDismiss } = this.args;
 
     if (typeof onDismiss === 'function') {
       return onDismiss;
@@ -130,7 +129,7 @@ export default class HdsAlertIndexComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = ['hds-alert'];
+    const classes = ['hds-alert'];
 
     // Add a class based on the @type argument
     classes.push(`hds-alert--type-${this.args.type}`);
@@ -142,8 +141,8 @@ export default class HdsAlertIndexComponent extends Component {
   }
 
   @action
-  didInsert(element) {
-    let actions = element.querySelectorAll(
+  didInsert(element: HTMLDivElement) {
+    const actions = element.querySelectorAll(
       `${CONTENT_ELEMENT_SELECTOR} button, ${CONTENT_ELEMENT_SELECTOR} a`
     );
     if (actions.length) {
@@ -152,11 +151,11 @@ export default class HdsAlertIndexComponent extends Component {
 
     // `alertdialog` must have an accessible name so we use either the
     // title or the description as label for the alert
-    let label =
+    const label =
       element.querySelector(TITLE_ELEMENT_SELECTOR) ||
       element.querySelector(DESCRIPTION_ELEMENT_SELECTOR);
     if (label) {
-      let labelId = label.getAttribute('id') || guidFor(element);
+      const labelId = label.getAttribute('id') || guidFor(element);
       label.setAttribute('id', labelId);
       this.ariaLabelledBy = labelId;
     }

packages/components/src/components/hds/alert/title.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

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

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+import type { HdsAlertTitleSignature } from './types.ts';
+
+export default class HdsAlertTitleComponent extends Component<HdsAlertTitleSignature> {}

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

@@ -0,0 +1,58 @@
+import type { ComponentLike, WithBoundArgs } from '@glint/template';
+import type HdsButtonIndexComponent from '../button';
+import type HdsLinkStandaloneComponent from '../link/standalone';
+import type { HdsYieldSignature } from '../yield/types';
+
+export enum HdsAlertTypeValues {
+  Page = 'page',
+  Inlne = 'inline',
+  Compact = 'compact',
+}
+export type HdsAlertTypes = `${HdsAlertTypeValues}`;
+
+export enum HdsAlertColorValues {
+  Neutral = 'neutral',
+  Highlight = 'highlight',
+  Success = 'success',
+  Warning = 'warning',
+  Critical = 'critical',
+}
+export type HdsAlertColors = `${HdsAlertColorValues}`;
+
+export interface HdsAlertSignature {
+  Args: {
+    type: HdsAlertTypes;
+    color?: HdsAlertColors;
+    icon?: string | false;
+    onDismiss?: () => void;
+  };
+  Blocks: {
+    default: [
+      {
+        Title?: ComponentLike<HdsAlertTitleSignature>;
+        Description?: ComponentLike<HdsAlertDescriptionSignature>;
+        Generic?: ComponentLike<HdsYieldSignature>;
+        LinkStandalone?: WithBoundArgs<
+          typeof HdsLinkStandaloneComponent,
+          'size'
+        >;
+        Button?: WithBoundArgs<typeof HdsButtonIndexComponent, 'size'>;
+      }
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export interface HdsAlertDescriptionSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export interface HdsAlertTitleSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}

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

@@ -4,11 +4,6 @@
  */
 
 import Component from '@glimmer/component';
+import type { HdsYieldSignature } from './types';
 
-export interface YieldComponentSignature {
-  Blocks: {
-    default: [];
-  };
-}
-
-export default class HdsYieldComponent extends Component<YieldComponentSignature> {}
+export default class HdsYieldComponent extends Component<HdsYieldSignature> {}

packages/components/src/components/hds/yield/types.ts

@@ -0,0 +1,5 @@
+export interface HdsYieldSignature {
+  Blocks: {
+    default: [];
+  };
+}

packages/components/src/template-registry.ts

@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+import type HdsAlertIndexComponent from './components/hds/alert';
+import type HdsAlertDescriptionComponent from './components/hds/alert/description';
+import type HdsAlertTitleComponent from './components/hds/alert/title';
 import type HdsButtonIndexComponent from './components/hds/button';
 import type HdsDismissButtonIndexComponent from './components/hds/dismiss-button';
 import type HdsInteractiveIndexComponent from './components/hds/interactive';
@@ -18,6 +21,21 @@ import type HdsLinkToQueryHelper from './helpers/hds-link-to-query';
 import type HdsCardContainerComponent from './components/hds/card/container.ts';
 
 export default interface HdsComponentsRegistry {
+  // Alert
+  'Hds::Alert': typeof HdsAlertIndexComponent;
+  'hds/alert': typeof HdsAlertIndexComponent;
+  HdsAlert: typeof HdsAlertIndexComponent;
+
+  'Hds::Alert::Descripton': typeof HdsAlertDescriptionComponent;
+  'hds/alert/description': typeof HdsAlertDescriptionComponent;
+  HdsAlertDescripton: typeof HdsAlertDescriptionComponent;
+
+  'Hds::Alert::Title': typeof HdsAlertTitleComponent;
+  'hds/alert/title': typeof HdsAlertTitleComponent;
+  HdsAlertTitle: typeof HdsAlertTitleComponent;
+
+  HdsButtonComponent: typeof HdsButtonIndexComponent;
+  HdsDismissComponent: typeof HdsDismissButtonIndexComponent;
   HdsInteractiveComponent: typeof HdsInteractiveIndexComponent;
   // Button
   'Hds::Button': typeof HdsButtonIndexComponent;

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

@@ -7,6 +7,7 @@ declare module '@hashicorp/ember-flight-icons/components/flight-icon' {
       color?: string;
       name?: string;
       stretched?: boolean;
+      isInlineBlock?: boolean;
     };
     Element: SVGElement;
   }

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

@@ -2,6 +2,7 @@ import '@glint/environment-ember-loose';
 
 import { LinkTo } from '@ember/routing';
 
+import DidInsertModifier from '@ember/render-modifiers/modifiers/did-insert';
 import type EmberTruthRegistry from 'ember-truth-helpers/template-registry';
 import type EmberElementHelperRegistry from 'ember-element-helper/template-registry';
 import type EmberStyleModifier from 'ember-style-modifier';
@@ -18,6 +19,7 @@ declare module '@glint/environment-ember-loose/registry' {
       EmberElementHelperRegistry,
       EmberStyleModifierRegistry /*, other addon registries */ {
     // local entries
+    'did-insert': typeof DidInsertModifier;
     LinkToExternal: typeof LinkTo;
   }
 }