Convert Breadcrumb to TypeScript

.changeset/olive-eagles-add.md

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

packages/components/src/components.ts

@@ -11,6 +11,9 @@ import HdsAppFrame from './components/hds/app-frame/index.ts';
 import HdsApplicationState from './components/hds/application-state/index.ts';
 import HdsBadge from './components/hds/badge/index.ts';
 import HdsBadgeCount from './components/hds/badge-count/index.ts';
+import HdsBreadcrumb from './components/hds/breadcrumb/index.ts';
+import HdsBreadcrumbItem from './components/hds/breadcrumb/item.ts';
+import HdsBreadcrumbTruncation from './components/hds/breadcrumb/truncation.ts';
 import HdsButton from './components/hds/button/index.ts';
 import HdsButtonSet from './components/hds/button-set/index.ts';
 import HdsCard from './components/hds/card/container.ts';
@@ -101,6 +104,9 @@ export {
   HdsApplicationState,
   HdsBadge,
   HdsBadgeCount,
+  HdsBreadcrumb,
+  HdsBreadcrumbItem,
+  HdsBreadcrumbTruncation,
   HdsButton,
   HdsButtonSet,
   HdsCard,

packages/components/src/components/hds/breadcrumb/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/breadcrumb/index.js → packages/components/src/components/hds/breadcrumb/index.ts

@@ -5,16 +5,28 @@
 
 import Component from '@glimmer/component';
 
+export interface HdsBreadcrumbSignature {
+  Args: {
+    ariaLabel?: string;
+    itemsCanWrap?: boolean;
+    didInsert?: () => void;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLElement;
+}
+
 const NOOP = () => {};
 
-export default class HdsBreadcrumbComponent extends Component {
+export default class HdsBreadcrumbComponent extends Component<HdsBreadcrumbSignature> {
   /**
    * @param onDidInsert
    * @type {function}
    * @default () => {}
    */
-  get didInsert() {
-    let { didInsert } = this.args;
+  get didInsert(): () => void {
+    const { didInsert } = this.args;
 
     if (typeof didInsert === 'function') {
       return didInsert;
@@ -28,7 +40,7 @@ export default class HdsBreadcrumbComponent extends Component {
    * @type {boolean}
    * @default true
    */
-  get itemsCanWrap() {
+  get itemsCanWrap(): boolean {
     return this.args.itemsCanWrap ?? true;
   }
 
@@ -37,7 +49,7 @@ export default class HdsBreadcrumbComponent extends Component {
    * @type {string}
    * @default 'breadcrumbs'
    */
-  get ariaLabel() {
+  get ariaLabel(): string {
     return this.args.ariaLabel ?? 'breadcrumbs';
   }
 
@@ -46,8 +58,8 @@ export default class HdsBreadcrumbComponent extends Component {
    * @method Breadcrumb#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  get classNames() {
-    let classes = ['hds-breadcrumb'];
+  get classNames(): string {
+    const classes = ['hds-breadcrumb'];
 
     // add a class based on the @itemsCanWrap argument
     if (this.itemsCanWrap) {

packages/components/src/components/hds/breadcrumb/item.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/breadcrumb/item.js → packages/components/src/components/hds/breadcrumb/item.ts

@@ -6,16 +6,35 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { assert } from '@ember/debug';
+import type { SafeString } from '@ember/template/-private/handlebars';
+import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
 
-export default class HdsBreadcrumbItemComponent extends Component {
+export interface HdsBreadcrumbItemSignature {
+  Args: {
+    current?: boolean;
+    maxWidth?: string;
+    text: string;
+    isRouteExternal?: boolean;
+    icon?: FlightIconSignature['Args']['name'];
+    route?: string;
+    models?: Array<string | number>;
+    model?: string | number;
+    query?: Record<string, string>;
+    'current-when'?: string;
+    replace?: boolean;
+  };
+  Element: HTMLLIElement;
+}
+
+export default class HdsBreadcrumbItemComponent extends Component<HdsBreadcrumbItemSignature> {
   /**
    * @param maxWidth
    * @type {string}
    * @default undefined
    * @description A parameter that can be applied to an "item" to limit its max-width
    */
-  get maxWidth() {
-    let { maxWidth } = this.args;
+  get maxWidth(): string | undefined {
+    const { maxWidth } = this.args;
 
     if (maxWidth) {
       assert(
@@ -34,7 +53,7 @@ export default class HdsBreadcrumbItemComponent extends Component {
    * @method BreadcrumbItem#itemStyle
    * @return {string} The "style" attribute to apply to the item.
    */
-  get itemStyle() {
+  get itemStyle(): SafeString | undefined {
     if (this.maxWidth) {
       return htmlSafe(`max-width: ${this.maxWidth}`);
     } else {
@@ -47,8 +66,8 @@ export default class HdsBreadcrumbItemComponent extends Component {
    * @method BreadcrumbItem#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  get classNames() {
-    let classes = ['hds-breadcrumb__item'];
+  get classNames(): string {
+    const classes = ['hds-breadcrumb__item'];
 
     return classes.join(' ');
   }

packages/components/src/components/hds/breadcrumb/truncation.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/breadcrumb/truncation.js → packages/components/src/components/hds/breadcrumb/truncation.ts

@@ -5,13 +5,23 @@
 
 import Component from '@glimmer/component';
 
-export default class HdsBreadcrumbTruncationComponent extends Component {
+export interface HdsBreadcrumbTruncationSignature {
+  Args: {
+    ariaLabel?: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLIElement;
+}
+
+export default class HdsBreadcrumbTruncationComponent extends Component<HdsBreadcrumbTruncationSignature> {
   /**
    * @param ariaLabel
    * @type {string}
    * @default 'show more'
    */
-  get ariaLabel() {
+  get ariaLabel(): string {
     return this.args.ariaLabel ?? 'show more';
   }
 }

packages/components/src/components/hds/menu-primitive/index.ts

@@ -17,7 +17,7 @@ export interface MenuPrimitiveSignature {
     toggle?: [
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onClickToggle?: (event: MouseEvent, ...args: any[]) => void;
+        onClickToggle: (event: MouseEvent, ...args: any[]) => void;
         isOpen?: boolean;
       },
     ];

packages/components/src/template-registry.ts

@@ -21,6 +21,9 @@ import type HdsAppFooterLinkComponent from './components/hds/app-footer/link';
 import type HdsAppFooterStatusLinkComponent from './components/hds/app-footer/status-link';
 import type HdsBadgeComponent from './components/hds/badge';
 import type HdsBadgeCountComponent from './components/hds/badge-count';
+import type HdsBreadcrumbComponent from './components/hds/breadcrumb/index.ts';
+import type HdsBreadcrumbItemComponent from './components/hds/breadcrumb/item';
+import type HdsBreadcrumbTruncationComponent from './components/hds/breadcrumb/truncation.ts';
 import type HdsButtonComponent from './components/hds/button';
 import type HdsButtonSetComponent from './components/hds/button-set';
 import type HdsAppFrameComponent from './components/hds/app-frame';
@@ -248,6 +251,16 @@ export default interface HdsComponentsRegistry {
   'Hds::BadgeCount': typeof HdsBadgeCountComponent;
   'hds/badge-count': typeof HdsBadgeCountComponent;
 
+  // Breadcrumb
+  'Hds::Breadcrumb': typeof HdsBreadcrumbComponent;
+  'hds/breadcrumb': typeof HdsBreadcrumbComponent;
+
+  'Hds::Breadcrumb::Item': typeof HdsBreadcrumbItemComponent;
+  'hds/breadcrumb/item': typeof HdsBreadcrumbItemComponent;
+
+  'Hds::Breadcrumb::Truncation': typeof HdsBreadcrumbTruncationComponent;
+  'hds/breadcrumb/truncation': typeof HdsBreadcrumbTruncationComponent;
+
   // Button
   'Hds::Button': typeof HdsButtonComponent;
   'hds/button': typeof HdsButtonComponent;