feat #93 - Tooltip component

Closes #93

src/__snapshots__/storybook.test.ts.snap

@@ -515,7 +515,6 @@ exports[`Storyshots Select Default 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -607,7 +606,6 @@ exports[`Storyshots Select Full Width 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -704,7 +702,6 @@ exports[`Storyshots Select Icon 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -810,7 +807,6 @@ exports[`Storyshots Select Search 1`] = `
   >
     <div
       className="ant-select-selector"
-      onClick={[Function]}
       onMouseDown={[Function]}
     >
       <span
@@ -1050,6 +1046,27 @@ exports[`Storyshots Toggle Small 1`] = `
 </button>
 `;
 
+exports[`Storyshots Tooltip Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": 75,
+    }
+  }
+>
+  <span
+    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,48 @@
+import Icon from '../Icon'
+import React from 'react'
+import { TooltipPlacement } from 'antd/lib/tooltip'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import Tooltip, { TooltipProps } from './index'
+
+const placementOptions: TooltipPlacement[] = [
+	'bottom',
+	'bottomLeft',
+	'bottomRight',
+	'left',
+	'leftBottom',
+	'leftTop',
+	'right',
+	'rightBottom',
+	'rightTop',
+	'top',
+	'topLeft',
+	'topRight'
+]
+
+export default {
+	argTypes: {
+		children: { control: { disable: true } },
+		placement: {
+			control: {
+				options: placementOptions,
+				type: 'select'
+			},
+			defaultValue: 'right'
+		}
+	},
+	component: Tooltip,
+	title: 'Tooltip'
+} as Meta
+
+const Template: Story<TooltipProps> = args => (
+	<div style={{ padding: 75 }}>
+		<Tooltip {...args}>
+			<Icon iconKey='dassana' />
+		</Tooltip>
+	</div>
+)
+
+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,41 @@
+import '../assets/styles/antdAnimations.css'
+import 'antd/lib/tooltip/style/index.css'
+// import 'antd/dist/antd.css'
+import { Tooltip as AntDTooltip } from 'antd'
+import { TooltipPlacement } from 'antd/es/tooltip'
+import React, { FC, ReactNode } from 'react'
+
+export type TooltipTitle = string | ReactNode
+
+export interface TooltipProps {
+	/**
+	 * Element tooltip should be anchored to
+	 */
+	children: ReactNode
+	/**
+	 * Position of tooltip relative to the target
+	 */
+	placement?: TooltipPlacement
+	/**
+	 * Text shown in the tooltip
+	 */
+	title: TooltipTitle
+}
+
+const Tooltip: FC<TooltipProps> = ({
+	children,
+	placement = 'right',
+	title
+}: TooltipProps) => {
+	return (
+		<AntDTooltip
+			overlayStyle={{ borderRadius: 4 }}
+			placement={placement}
+			title={title}
+		>
+			<span>{children}</span>
+		</AntDTooltip>
+	)
+}
+
+export default Tooltip