Merge pull request #2317 from hashicorp/hds-2718/ts-tooltip

`TooltipButton`: Converted component to TypeScript

Author: shleewhite

.changeset/strange-schools-flash.md

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

packages/components/src/components.ts

@@ -103,6 +103,7 @@ import HdsTextBody from './components/hds/text/body.ts';
 import HdsTextCode from './components/hds/text/code.ts';
 import HdsTextDisplay from './components/hds/text/display.ts';
 import HdsToast from './components/hds/toast/index.ts';
+import HdsTooltipButton from './components/hds/tooltip-button/index.ts';
 
 export {
   HdsAccordion,
@@ -204,4 +205,5 @@ export {
   HdsTextCode,
   HdsTextDisplay,
   HdsToast,
+  HdsTooltipButton,
 };

packages/components/src/components/hds/tooltip-button/index.js renamed to packages/components/src/components/hds/tooltip-button/index.ts

@@ -6,29 +6,33 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
-export const PLACEMENTS = [
-  'top',
-  'top-start',
-  'top-end',
-  'right',
-  'right-start',
-  'right-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'left',
-  'left-start',
-  'left-end',
-];
+import type { Props as TippyProps } from 'tippy.js';
+import { HdsTooltipPlacementValues } from './types.ts';
 
-export default class HdsTooltipIndexComponent extends Component {
+export const PLACEMENTS: string[] = Object.values(HdsTooltipPlacementValues);
+
+export interface HdsTooltipSignature {
+  Args: {
+    extraTippyOptions: Omit<TippyProps, 'placement' | 'offset'>;
+    isInline?: boolean;
+    offset?: [number, number];
+    placement: HdsTooltipPlacementValues;
+    text: string;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLButtonElement;
+}
+
+export default class HdsTooltipIndexComponent extends Component<HdsTooltipSignature> {
   /**
    * @param text
    * @type {string}
    * @description text content for tooltip
    */
-  get text() {
-    let { text } = this.args;
+  get text(): string {
+    const { text } = this.args;
 
     assert(
       '@text for "Hds::TooltipButton" must have a valid value',
@@ -38,8 +42,8 @@ export default class HdsTooltipIndexComponent extends Component {
     return text;
   }
 
-  get options() {
-    let { placement } = this.args;
+  get options(): TippyProps {
+    const { placement } = this.args;
 
     assert(
       '@placement for "Hds::TooltipButton" must have a valid value',
@@ -48,10 +52,9 @@ export default class HdsTooltipIndexComponent extends Component {
 
     return {
       ...this.args.extraTippyOptions,
-      // takes string
       placement: placement,
-      // takes array of 2 numbers (skidding, distance): array(0, 0)
-      offset: this.args.offset,
+      // takes array of 2 numbers (skidding, distance): array(0, 10)
+      offset: this.args.offset ? this.args.offset : [0, 10],
     };
   }
 
@@ -61,8 +64,8 @@ export default class HdsTooltipIndexComponent extends Component {
    * @default true
    * @description sets display for the button
    */
-  get isInline() {
-    let { isInline = true } = this.args;
+  get isInline(): boolean {
+    const { isInline = true } = this.args;
     return isInline;
   }
 
@@ -71,8 +74,8 @@ export default class HdsTooltipIndexComponent extends Component {
    * @method classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  get classNames() {
-    let classes = ['hds-tooltip-button'];
+  get classNames(): string {
+    const classes = ['hds-tooltip-button'];
 
     // add a class based on the @isInline argument
     if (this.isInline) {

packages/components/src/components/hds/tooltip-button/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export enum HdsTooltipPlacementValues {
+  Top = 'top',
+  TopStart = 'top-start',
+  TopEnd = 'top-end',
+  Right = 'right',
+  RightStart = 'right-start',
+  RightEnd = 'right-end',
+  Bottom = 'bottom',
+  BottomStart = 'bottom-start',
+  BottomEnd = 'bottom-end',
+  Left = 'left',
+  LeftStart = 'left-start',
+  LeftEnd = 'left-end',
+}
+
+export type HdsTooltipPlacements = `${HdsTooltipPlacementValues}`;

packages/components/src/template-registry.ts

@@ -150,6 +150,7 @@ import type HdsTextComponent from './components/hds/text';
 import type HdsTextBodyComponent from './components/hds/text/body';
 import type HdsTextDisplayComponent from './components/hds/text/display';
 import type HdsTagComponent from './components/hds/tag';
+import type HdsTooltipButtonComponent from './components/hds/tooltip-button';
 import type HdsToastComponent from './components/hds/toast';
 import type HdsTextCodeComponent from './components/hds/text/code';
 import type HdsYieldComponent from './components/hds/yield';
@@ -700,6 +701,10 @@ export default interface HdsComponentsRegistry {
   'Hds::Tag': typeof HdsTagComponent;
   'hds/tag': typeof HdsTagComponent;
 
+  // TooltipButton
+  'Hds::TooltipButton': typeof HdsTooltipButtonComponent;
+  'hds/tooltip-button': typeof HdsTooltipButtonComponent;
+
   // Toast
   'Hds::Toast': typeof HdsToastComponent;
   'hds/toast': typeof HdsToastComponent;