From 0f1ed0cb9be8e40e8d83eba6e533852630d7871f Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 5 Aug 2024 12:06:09 -0400 Subject: [PATCH 1/5] feat: converted TooltipButton to TypeScript --- .changeset/strange-schools-flash.md | 5 ++ packages/components/src/components.ts | 2 + .../hds/tooltip-button/{index.js => index.ts} | 48 ++++++++++--------- .../components/hds/tooltip-button/types.ts | 16 +++++++ packages/components/src/template-registry.ts | 5 ++ 5 files changed, 54 insertions(+), 22 deletions(-) create mode 100644 .changeset/strange-schools-flash.md rename packages/components/src/components/hds/tooltip-button/{index.js => index.ts} (62%) create mode 100644 packages/components/src/components/hds/tooltip-button/types.ts diff --git a/.changeset/strange-schools-flash.md b/.changeset/strange-schools-flash.md new file mode 100644 index 0000000000..4e2234b767 --- /dev/null +++ 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 index 94917572e5..37291ed71d 100644 --- a/packages/components/src/components.ts +++ b/packages/components/src/components.ts @@ -99,6 +99,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, @@ -196,4 +197,5 @@ export { HdsTextCode, HdsTextDisplay, HdsToast, + HdsTooltipButton, }; diff --git a/packages/components/src/components/hds/tooltip-button/index.js b/packages/components/src/components/hds/tooltip-button/index.ts similarity index 62% rename from packages/components/src/components/hds/tooltip-button/index.js rename to packages/components/src/components/hds/tooltip-button/index.ts index 41d8212d09..abee89a841 100644 --- a/packages/components/src/components/hds/tooltip-button/index.js +++ b/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 HdsTooltipIndexSignature { + Args: { + extraTippyOptions?: TippyProps; + isInline?: boolean; + offset?: [number, number]; + placement: HdsTooltipPlacementValues; + text: string; + }; + Blocks: { + default: []; + }; + Element: HTMLButtonElement; +} + +export default class HdsTooltipIndexComponent extends Component { /** * @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', @@ -39,7 +43,7 @@ export default class HdsTooltipIndexComponent extends Component { } get options() { - let { placement } = this.args; + const { placement } = this.args; assert( '@placement for "Hds::TooltipButton" must have a valid value', @@ -61,8 +65,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 +75,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 new file mode 100644 index 0000000000..7b861bcc56 --- /dev/null +++ b/packages/components/src/components/hds/tooltip-button/types.ts @@ -0,0 +1,16 @@ +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 index d1f49b5d04..a41df5fd7c 100644 --- a/packages/components/src/template-registry.ts +++ b/packages/components/src/template-registry.ts @@ -146,6 +146,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'; @@ -683,6 +684,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; From 2e049bba2d8e2ef5c73a611042d7fd9f1ceac54e Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 5 Aug 2024 12:47:56 -0400 Subject: [PATCH 2/5] fix: options param type, offset default --- .../src/components/hds/tooltip-button/index.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/hds/tooltip-button/index.ts b/packages/components/src/components/hds/tooltip-button/index.ts index abee89a841..2a281110b2 100644 --- a/packages/components/src/components/hds/tooltip-button/index.ts +++ b/packages/components/src/components/hds/tooltip-button/index.ts @@ -13,7 +13,7 @@ export const PLACEMENTS: string[] = Object.values(HdsTooltipPlacementValues); export interface HdsTooltipIndexSignature { Args: { - extraTippyOptions?: TippyProps; + extraTippyOptions: Omit; isInline?: boolean; offset?: [number, number]; placement: HdsTooltipPlacementValues; @@ -42,7 +42,7 @@ export default class HdsTooltipIndexComponent extends Component Date: Mon, 5 Aug 2024 12:49:09 -0400 Subject: [PATCH 3/5] chore: remove debugging tool --- packages/components/src/components/hds/tooltip-button/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/components/hds/tooltip-button/index.ts b/packages/components/src/components/hds/tooltip-button/index.ts index 2a281110b2..6e0fd0d56a 100644 --- a/packages/components/src/components/hds/tooltip-button/index.ts +++ b/packages/components/src/components/hds/tooltip-button/index.ts @@ -53,7 +53,6 @@ export default class HdsTooltipIndexComponent extends Component Date: Mon, 5 Aug 2024 13:58:52 -0400 Subject: [PATCH 4/5] chore: rename signature, component --- .../components/src/components/hds/tooltip-button/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/hds/tooltip-button/index.ts b/packages/components/src/components/hds/tooltip-button/index.ts index 6e0fd0d56a..f334f120fc 100644 --- a/packages/components/src/components/hds/tooltip-button/index.ts +++ b/packages/components/src/components/hds/tooltip-button/index.ts @@ -11,7 +11,7 @@ import { HdsTooltipPlacementValues } from './types.ts'; export const PLACEMENTS: string[] = Object.values(HdsTooltipPlacementValues); -export interface HdsTooltipIndexSignature { +export interface HdsTooltipSignature { Args: { extraTippyOptions: Omit; isInline?: boolean; @@ -25,7 +25,7 @@ export interface HdsTooltipIndexSignature { Element: HTMLButtonElement; } -export default class HdsTooltipIndexComponent extends Component { +export default class HdsTooltipIndexComponent extends Component { /** * @param text * @type {string} From 9e98051ec422e672d7b70ce2083704c0ce8a4475 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 5 Aug 2024 14:06:10 -0400 Subject: [PATCH 5/5] fix: add copyright to top of types file --- .../components/src/components/hds/tooltip-button/types.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/components/hds/tooltip-button/types.ts b/packages/components/src/components/hds/tooltip-button/types.ts index 7b861bcc56..f0e17af9a2 100644 --- a/packages/components/src/components/hds/tooltip-button/types.ts +++ b/packages/components/src/components/hds/tooltip-button/types.ts @@ -1,3 +1,8 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + export enum HdsTooltipPlacementValues { Top = 'top', TopStart = 'top-start',