feat #93 - Extract out placement options to utils and allow tooltip s…

…tyle customization

src/components/Tooltip/Tooltip.stories.tsx

@@ -1,34 +1,19 @@
 import Icon from '../Icon'
+import { placementOptions } from '../utils'
 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'
-		}
+			}
+		},
+		title: { control: { type: 'text' } }
 	},
 	component: Tooltip,
 	title: 'Tooltip'

src/components/Tooltip/index.tsx

@@ -1,6 +1,7 @@
 import '../assets/styles/antdAnimations.css'
 import 'antd/lib/tooltip/style/index.css'
 import { Tooltip as AntDTooltip } from 'antd'
+import cn from 'classnames'
 import { TooltipPlacement } from 'antd/es/tooltip'
 import React, { FC, ReactNode } from 'react'
 
@@ -11,6 +12,11 @@ export interface TooltipProps {
 	 * 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
 	 */
@@ -23,11 +29,13 @@ export interface TooltipProps {
 
 const Tooltip: FC<TooltipProps> = ({
 	children,
+	classes = [],
 	placement = 'right',
 	title
 }: TooltipProps) => {
 	return (
 		<AntDTooltip
+			overlayClassName={cn(classes)}
 			overlayStyle={{ borderRadius: 4 }}
 			placement={placement}
 			title={title}

src/components/utils.ts

@@ -1,3 +1,5 @@
+import { TooltipPlacement } from 'antd/es/tooltip'
+
 export const TAG = 'data-test'
 
 export const getDataTestAttributeProp = (
@@ -6,3 +8,18 @@ export const getDataTestAttributeProp = (
 ): { [TAG]: string } => ({
 	[TAG]: dataTag ? `${cmpName}-${dataTag}` : cmpName
 })
+
+export const placementOptions: TooltipPlacement[] = [
+	'bottom',
+	'bottomLeft',
+	'bottomRight',
+	'left',
+	'leftBottom',
+	'leftTop',
+	'right',
+	'rightBottom',
+	'rightTop',
+	'top',
+	'topLeft',
+	'topRight'
+]