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

`TooltipButton`: Converted component to TypeScript
hashicorp · Aug 6, 2024 · 70aeec3 · 70aeec3
2 parents eeafbba + 9e98051
commit 70aeec3
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 26 deletions.
diff --git a/.changeset/strange-schools-flash.md b/.changeset/strange-schools-flash.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`TooltipButton`: Converted component to TypeScript
diff --git a/packages/components/src/components.ts b/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,
 };
diff --git a/...rc/components/hds/tooltip-button/index.js → ...rc/components/hds/tooltip-button/index.ts b/...rc/components/hds/tooltip-button/index.js → ...rc/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) {

diff --git a/packages/components/src/components/hds/tooltip-button/types.ts b/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}`;
diff --git a/packages/components/src/template-registry.ts b/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;