feat #93 - Tooltip component (#95)

* feat #93 - Tooltip component

Closes #93

* feat #93 - Fix tooltip placement

* feat #93 - Extract out placement options to utils and allow tooltip style customization

* feat #93 - Add dataTag to tooltip trigger

* feat #93 - Use storybook decorator for tooltip story

* Update package.json

Co-authored-by: github-actions <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -18,7 +18,7 @@
 		"@types/node": "^12.12.53",
 		"@types/react": "^16.9.44",
 		"@types/react-dom": "^16.9.8",
-		"antd": "^4.6.4",
+		"antd": "^4.6.5",
 		"bytes": "^3.1.0",
 		"classnames": "^2.2.6",
 		"fuse.js": "^6.4.1",

src/__snapshots__/storybook.test.ts.snap

@@ -831,15 +831,15 @@ exports[`Storyshots Select Search 1`] = `
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onPaste={[Function]}
-          readOnly={true}
+          readOnly={false}
           role="combobox"
           style={
             Object {
-              "opacity": 0,
+              "opacity": null,
             }
           }
           type="search"
-          unselectable="on"
+          unselectable={null}
           value=""
         />
       </span>
@@ -1050,6 +1050,28 @@ exports[`Storyshots Toggle Small 1`] = `
 </button>
 `;
 
+exports[`Storyshots Tooltip Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": 75,
+    }
+  }
+>
+  <span
+    data-test="tooltip-trigger"
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+  >
+    <img
+      alt="dassana"
+      height={32}
+      src="dassana-blue.png"
+    />
+  </span>
+</div>
+`;
+
 exports[`Storyshots Tree Default 1`] = `
 <ForwardRef
   blockNode={true}

src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,38 @@
+import Icon from '../Icon'
+import { placementOptions } from '../utils'
+import React from 'react'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Tooltip, { TooltipProps } from './index'
+
+export default {
+	argTypes: {
+		children: { control: { disable: true } },
+		placement: {
+			control: {
+				options: placementOptions,
+				type: 'select'
+			}
+		},
+		title: { control: { type: 'text' } }
+	},
+	component: Tooltip,
+	decorators: [
+		(PopoverStory: Story) => (
+			<div style={{ padding: 75 }}>
+				<PopoverStory />
+			</div>
+		)
+	],
+	title: 'Tooltip'
+} as Meta
+
+const Template: Story<TooltipProps> = args => (
+	<Tooltip {...args}>
+		<Icon iconKey='dassana' />
+	</Tooltip>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+	title: 'Dassana'
+}

src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,40 @@
+import { Tooltip as AntDTooltip } from 'antd'
+import React from 'react'
+import { shallow, ShallowWrapper } from 'enzyme'
+import Tooltip, { TooltipProps } from './index'
+
+let wrapper: ShallowWrapper
+
+const mockTitle = 'foo'
+
+const getWrapper = (
+	additionalProps?: Omit<TooltipProps, 'children' | 'title'>
+): ShallowWrapper =>
+	shallow(
+		<Tooltip title={mockTitle} {...additionalProps}>
+			<div>Hello World</div>
+		</Tooltip>
+	)
+
+beforeEach(() => {
+	wrapper = getWrapper()
+})
+
+describe('Tooltip', () => {
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('correctly passes the title prop', () => {
+		expect(wrapper.find(AntDTooltip).props().title).toEqual(mockTitle)
+	})
+
+	it('correctly passes the placement prop if one is provided', () => {
+		wrapper = getWrapper({ placement: 'top' })
+		expect(wrapper.find(AntDTooltip).props().placement).toEqual('top')
+	})
+
+	it('has a default placement of right', () => {
+		expect(wrapper.find(AntDTooltip).props().placement).toBe('right')
+	})
+})

src/components/Tooltip/index.tsx

@@ -0,0 +1,51 @@
+import '../assets/styles/antdAnimations.css'
+import 'antd/lib/tooltip/style/index.css'
+import { Tooltip as AntDTooltip } from 'antd'
+import cn from 'classnames'
+import { CommonComponentProps } from '../types'
+import { getDataTestAttributeProp } from '../utils'
+import { TooltipPlacement } from 'antd/es/tooltip'
+import React, { FC, ReactNode } from 'react'
+
+export type TooltipTitle = string | ReactNode
+
+export interface TooltipProps extends CommonComponentProps {
+	/**
+	 * Element tooltip should be anchored to
+	 */
+	children: ReactNode
+	/**
+	 * Array of classes to pass to element
+	 * @default []
+	 */
+	classes?: string[]
+	/**
+	 * Position of tooltip relative to the target
+	 */
+	placement?: TooltipPlacement
+	/**
+	 * Text shown in the tooltip
+	 */
+	title: TooltipTitle
+}
+
+const Tooltip: FC<TooltipProps> = ({
+	children,
+	classes = [],
+	dataTag,
+	placement = 'right',
+	title
+}: TooltipProps) => (
+	<AntDTooltip
+		overlayClassName={cn(classes)}
+		overlayStyle={{ borderRadius: 4 }}
+		placement={placement}
+		title={title}
+	>
+		<span {...getDataTestAttributeProp('tooltip-trigger', dataTag)}>
+			{children}
+		</span>
+	</AntDTooltip>
+)
+
+export default Tooltip