feat: Create Tooltip component (#871)

* create tooltip using css usilities

* additional styles

* add useState hooks to tooltip component

* add correct styles according to position

* additional edits to positioning tooltip body, add element ID to locate tooltipbody in DOM

* move all positioning login into a useEffect, register TooltipBodyWidth within useEffent

* add tooltip ID and remove comments

* remove styles file

* add tests to tooltip component

* export tooltip component in index.ts

* replace reference to tooltipBodyRef.current with variable tooltipBodyWidth

* remove package lock file

* create a default tooltip trigger button and create tests for tooltip body visibility

* begin writing up custom component based off of Link component example

* put custom component render in a conditional statement

* utilize forward ref in customComponent

* abstract useEffect into a fn, useTooltip

* move html element role, move event listeners to custom component props

* move isElementInViewport to a utils file

* correct tests and add test id to tooltip trigger element

* add display name

* add story displayname

* corect var name CustomLinkProps

* update tests

* add data classes prop for css utility classes

* add keyboard events to tests

* change dataclasses to wrapperclasses and move to trigger element, move tooltipElementID to tooltip component level

* remove className for wrapperclasses from tooltipComponent

* apply classname to tooltipTrigger element

* reformat for storybook addon

Co-authored-by: Andrew Hobson <21983+ahobson@users.noreply.github.com>

src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,89 @@
+import React, { ReactNode } from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Tooltip } from './Tooltip'
+
+describe('Tooltip component', () => {
+  it('renders without errors', () => {
+    const { queryByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    expect(queryByTestId('tooltipWrapper')).toBeInTheDocument()
+    expect(queryByTestId('triggerElement')).toBeInTheDocument()
+    expect(queryByTestId('tooltipBody')).toBeInTheDocument()
+  })
+
+  it('hides tooltip by default', () => {
+    const { getByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    expect(getByTestId('tooltipBody')).not.toHaveClass('is-visible')
+  })
+
+  it('shows tooltip with mouse event', () => {
+    const { getByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    fireEvent.mouseEnter(getByTestId('triggerElement'))
+    expect(getByTestId('tooltipBody')).toHaveClass('is-visible')
+  })
+
+  it('hides tooltip with mouse event', () => {
+    const { getByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    fireEvent.mouseLeave(getByTestId('triggerElement'))
+    expect(getByTestId('tooltipBody')).not.toHaveClass('is-visible')
+  })
+
+  it('shows tooltip with keyboard event', () => {
+    const { getByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    fireEvent.focus(getByTestId('triggerElement'))
+    expect(getByTestId('tooltipBody')).toHaveClass('is-visible')
+  })
+
+  it('hides tooltip with keyboard event', () => {
+    const { getByTestId } = render(
+      <Tooltip label="Click me">My Tooltip</Tooltip>
+    )
+    fireEvent.blur(getByTestId('triggerElement'))
+    expect(getByTestId('tooltipBody')).not.toHaveClass('is-visible')
+  })
+
+  describe('with a position prop', () => {
+    it('applies the default tooltip position', () => {
+      const { getByTestId } = render(
+        <Tooltip label="Click me">My Tooltip</Tooltip>
+      )
+      expect(getByTestId('tooltipBody')).toHaveClass(
+        `usa-tooltip__body usa-tooltip__body--top`
+      )
+    })
+
+    it('applies the correct tooltip position when position prop is defined', () => {
+      const { getByTestId } = render(
+        <Tooltip position="bottom" label="Click me">
+          My Tooltip
+        </Tooltip>
+      )
+      expect(getByTestId('tooltipBody')).toHaveClass(
+        `usa-tooltip__body usa-tooltip__body--bottom`
+      )
+    })
+  })
+
+  describe('with a className prop', () => {
+    it('applies the className', () => {
+      const customClass = 'custom-class'
+      const { getByTestId } = render(
+        <Tooltip className={customClass} position="left" label="Click me">
+          My Tooltip
+        </Tooltip>
+      )
+      expect(getByTestId('triggerElement')).toHaveClass(`${customClass}`)
+    })
+  })
+})