From 7060e9c49bdfd86000191db744bb03adb3b90251 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 1 Dec 2020 13:07:14 -0800
Subject: [PATCH 1/8] feat #159 - Add IngestionStatusDot comp & add to Table

---
 src/__mocks__/table_mock_data.ts              | 20 ++++-
 src/components/IngestionStatusDot/index.tsx   | 73 +++++++++++++++++++
 src/components/Table/__tests__/Table.test.tsx |  2 +
 src/components/Table/types.ts                 |  6 ++
 src/components/Table/utils.tsx                | 24 +++++-
 src/components/index.ts                       |  1 +
 6 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 src/components/IngestionStatusDot/index.tsx

diff --git a/src/__mocks__/table_mock_data.ts b/src/__mocks__/table_mock_data.ts
index 01b477d3..d30dc660 100644
--- a/src/__mocks__/table_mock_data.ts
+++ b/src/__mocks__/table_mock_data.ts
@@ -1,3 +1,4 @@
+import { Status } from 'components'
 import {
 	ColumnFormats,
 	ColumnType,
@@ -6,7 +7,16 @@ import {
 } from '../components/Table'
 
 const { component, number, string } = ColumnTypes
-const { none, byte, date, icon, link, toggle, tag } = ColumnFormats
+const {
+	none,
+	byte,
+	date,
+	icon,
+	ingestionStatusDot,
+	link,
+	toggle,
+	tag
+} = ColumnFormats
 
 export interface Data {
 	byte: number
@@ -14,6 +24,7 @@ export interface Data {
 	icon: string
 	icon_key: string
 	id: number
+	ingestion_status: Status
 	link: string
 	number: number
 	string: string
@@ -92,6 +103,12 @@ const columns: ColumnType[] = [
 		},
 		title: 'Component - Icon',
 		type: component
+	},
+	{
+		dataIndex: 'ingestion_status',
+		format: ingestionStatusDot,
+		title: 'Ingestion Status',
+		type: component
 	}
 ]
 
@@ -102,6 +119,7 @@ const data: Data[] = [
 		icon: 'test',
 		icon_key: 'dassana',
 		id: 0,
+		ingestion_status: Status.OK,
 		link: 'test',
 		number: 0,
 		string: 'Dassana',
diff --git a/src/components/IngestionStatusDot/index.tsx b/src/components/IngestionStatusDot/index.tsx
new file mode 100644
index 00000000..05b615db
--- /dev/null
+++ b/src/components/IngestionStatusDot/index.tsx
@@ -0,0 +1,73 @@
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import React, { FC } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const {
+	colors: { blacks, oranges }
+} = styleguide
+
+const { light, dark } = ThemeType
+
+/* TODO: Use types generated from codegen */
+export enum Status {
+	DISABLED = 'DISABLED',
+	HASISSUES = 'HAS_ISSUES',
+	NEEDSCONFIG = 'NEEDS_CONFIG',
+	OK = 'OK'
+}
+
+const colorPalette = {
+	[dark]: {
+		[Status.NEEDSCONFIG]: blacks['lighten-40']
+	},
+	[light]: {
+		[Status.NEEDSCONFIG]: blacks['lighten-70']
+	}
+}
+
+const useStyles = createUseStyles({
+	hasIssues: {
+		background: oranges.base
+	},
+	needsConfig: {
+		background: colorPalette[light][Status.NEEDSCONFIG]
+	},
+	statusDot: {
+		borderRadius: '50%',
+		display: 'block',
+		height: 10,
+		width: 10
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $needsConfig': {
+				background: colorPalette[dark][Status.NEEDSCONFIG]
+			}
+		}
+	}
+})
+
+export interface Props {
+	classes?: string[]
+	status?: Status
+}
+
+export const IngestionStatusDot: FC<Props> = ({
+	classes = [],
+	status = Status.OK
+}: Props) => {
+	const componentClasses = useStyles()
+
+	const ingestionStatusDotClasses = cn(
+		{
+			[componentClasses.statusDot]: true,
+			[componentClasses.hasIssues]: status === Status.HASISSUES,
+			[componentClasses.needsConfig]: status === Status.NEEDSCONFIG
+		},
+		classes
+	)
+
+	return <span className={ingestionStatusDotClasses}></span>
+}
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
index 996a33b4..2ccaf245 100644
--- a/src/components/Table/__tests__/Table.test.tsx
+++ b/src/components/Table/__tests__/Table.test.tsx
@@ -1,6 +1,7 @@
 import { act } from 'react-dom/test-utils'
 import moment from 'moment'
 import React from 'react'
+import { Status } from 'components/IngestionStatusDot'
 import { Input as AntDInput, Table as AntDTable } from 'antd'
 import mockData, { Data, dateFormat } from '__mocks__/table_mock_data'
 import mockData0, { Person } from '../fixtures/0_sample_data'
@@ -97,6 +98,7 @@ describe('Table', () => {
 			icon: 'test',
 			icon_key: 'dassana',
 			id: 0,
+			ingestion_status: Status.OK,
 			key: 0,
 			link: 'test',
 			number: 0,
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
index c5dfa417..432454c4 100644
--- a/src/components/Table/types.ts
+++ b/src/components/Table/types.ts
@@ -13,6 +13,7 @@ export enum ColumnFormats {
 	date = 'date',
 	byte = 'byte',
 	icon = 'icon',
+	ingestionStatusDot = 'ingestionStatusDot',
 	link = 'link',
 	tag = 'tag',
 	toggle = 'toggle'
@@ -69,6 +70,10 @@ interface ComponentIconType extends PartialComponentType {
 	renderProps: RenderPropsIcon | RenderPropsIconKey
 }
 
+interface ComponentIngestionStatusDotType extends PartialComponentType {
+	format: ColumnFormats.ingestionStatusDot
+}
+
 interface RenderPropsLink extends Pick<SharedLinkProps, 'target'> {
 	buildHref: (record?: string) => string
 }
@@ -88,6 +93,7 @@ interface ComponentToggleType extends PartialComponentType {
 
 type ComponentType =
 	| ComponentIconType
+	| ComponentIngestionStatusDotType
 	| ComponentLinkType
 	| ComponentTagType
 	| ComponentToggleType
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index acabcfce..cf9ba00a 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -15,6 +15,7 @@ import { Icon, IconName, IconProps } from '../Icon'
 import { Link, LinkProps } from '../Link'
 import { Tag, TagProps } from '../Tag'
 import { Toggle, ToggleProps } from '../Toggle'
+import { IngestionStatusDot, Status } from 'components/IngestionStatusDot'
 
 /* ------- Exported Functions ------- */
 
@@ -81,7 +82,7 @@ More info --> https://fusejs.io/examples.html#nested-search
  */
 export function mapFilterKeys(columns: ColumnType[]) {
 	const { component, number, string } = ColumnTypes
-	const { icon, link, tag } = ColumnFormats
+	const { icon, ingestionStatusDot, link, tag } = ColumnFormats
 
 	const keysArr: (string | string[])[] = ['_FORMATTED_DATA']
 
@@ -92,6 +93,7 @@ export function mapFilterKeys(columns: ColumnType[]) {
 			case component:
 				switch (column.format) {
 					case icon:
+					case ingestionStatusDot:
 					case link:
 						keysArr.push(dataIndex)
 						break
@@ -171,12 +173,13 @@ function applySort<TableData extends DataId>(
 	antDColumn: AntDColumnType<TableData>
 ) {
 	const { component, number, string } = ColumnTypes
-	const { icon, link, tag, toggle } = ColumnFormats
+	const { icon, ingestionStatusDot, link, tag, toggle } = ColumnFormats
 
 	switch (column.type) {
 		case component:
 			switch (column.format) {
 				case icon:
+				case ingestionStatusDot:
 				case link:
 					antDColumn.sorter = compareStrings(column)
 					break
@@ -212,7 +215,15 @@ function applyRender<TableData extends DataId>(
 	antDColumn: AntDColumnType<TableData>
 ) {
 	const { component, number } = ColumnTypes
-	const { byte, date, icon, link, tag, toggle } = ColumnFormats
+	const {
+		byte,
+		date,
+		icon,
+		ingestionStatusDot,
+		link,
+		tag,
+		toggle
+	} = ColumnFormats
 
 	switch (column.type) {
 		case component:
@@ -244,6 +255,13 @@ function applyRender<TableData extends DataId>(
 					break
 				}
 
+				case ingestionStatusDot: {
+					antDColumn.render = (record: Status) => (
+						<IngestionStatusDot status={record} />
+					)
+					break
+				}
+
 				case link: {
 					antDColumn.render = (record: string) => {
 						if (record === undefined) return ''
diff --git a/src/components/index.ts b/src/components/index.ts
index 23b108ed..86376b2b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './Button'
 export * from './Form'
 export * from './Input'
 export * from './Icon'
+export * from './IngestionStatusDot'
 export * from './Link'
 export * from './Notification'
 export * from './NotificationV2'

From a7be0479726186ffbc4cc8191d7e1fd48ea22270 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 1 Dec 2020 13:59:08 -0800
Subject: [PATCH 2/8] feat #159 - Add stories

---
 .../IngestionStatusDot.stories.tsx            | 64 +++++++++++++++++++
 src/components/IngestionStatusDot/index.tsx   |  6 +-
 src/components/Table/Table.stories.mdx        |  4 ++
 src/components/Table/Table.stories.tsx        | 10 +++
 .../Table/fixtures/4_sample_data.ts           | 53 +++++++++++++++
 src/components/Table/utils.tsx                |  2 +-
 6 files changed, 135 insertions(+), 4 deletions(-)
 create mode 100644 src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
 create mode 100644 src/components/Table/fixtures/4_sample_data.ts

diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
new file mode 100644
index 00000000..132db9c9
--- /dev/null
+++ b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
@@ -0,0 +1,64 @@
+import { createUseStyles } from 'react-jss'
+import { Meta } from '@storybook/react/types-6-0'
+import { IngestionStatusDot, Status } from '.'
+import React, { FC } from 'react'
+import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
+
+export default {
+	component: IngestionStatusDot,
+	title: 'IngestionStatusDot'
+} as Meta
+
+const { flexAlignCenter, font, spacing } = styleguide
+
+const { light, dark } = ThemeType
+
+const useStyles = createUseStyles({
+	statusDot: {
+		marginRight: spacing.m
+	},
+	wrapper: {
+		...flexAlignCenter,
+		...font.body,
+		color: themedStyles[light].base.color,
+		paddingBottom: spacing.m
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $wrapper': {
+				color: themedStyles[dark].base.color
+			}
+		}
+	}
+})
+
+interface Props {
+	status: Status
+}
+
+const DecoratedDot: FC<Props> = ({ status }: Props) => {
+	const classes = useStyles()
+
+	return (
+		<div className={classes.wrapper}>
+			<IngestionStatusDot classes={[classes.statusDot]} status={status} />
+			{status}
+		</div>
+	)
+}
+
+const statuses = [
+	Status.HASISSUES,
+	Status.NEEDSCONFIG,
+	Status.OK,
+	Status.DISABLED
+]
+
+export const All = () => (
+	<>
+		{statuses.map((status: Status) => (
+			<DecoratedDot key={status} status={status} />
+		))}
+	</>
+)
diff --git a/src/components/IngestionStatusDot/index.tsx b/src/components/IngestionStatusDot/index.tsx
index 05b615db..b212c991 100644
--- a/src/components/IngestionStatusDot/index.tsx
+++ b/src/components/IngestionStatusDot/index.tsx
@@ -49,15 +49,15 @@ const useStyles = createUseStyles({
 	}
 })
 
-export interface Props {
+export interface IngestionStatusDotProps {
 	classes?: string[]
 	status?: Status
 }
 
-export const IngestionStatusDot: FC<Props> = ({
+export const IngestionStatusDot: FC<IngestionStatusDotProps> = ({
 	classes = [],
 	status = Status.OK
-}: Props) => {
+}: IngestionStatusDotProps) => {
 	const componentClasses = useStyles()
 
 	const ingestionStatusDotClasses = cn(
diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx
index 0deb8032..4df599ca 100644
--- a/src/components/Table/Table.stories.mdx
+++ b/src/components/Table/Table.stories.mdx
@@ -718,3 +718,7 @@ export type type ColumnType = StringType | NumberType | ComponentType
 <Canvas>
 	<Story story={stories.Paginated} name='Paginated' />
 </Canvas>
+
+<Canvas>
+	<Story story={stories.IngestionStatus} name='Ingestion Status' />
+</Canvas>
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 9e7425f8..dd3aa11b 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -7,6 +7,7 @@ import tableData0, { Person } from './fixtures/0_sample_data'
 import tableData1, { File } from './fixtures/1_sample_data'
 import tableData2, { Client } from './fixtures/2_sample_data'
 import tableData3, { Client1 } from './fixtures/3_sample_data'
+import tableData4, { IngestionStatusType } from './fixtures/4_sample_data'
 
 const commonArgTypes = {
 	activeRowKey: {
@@ -250,3 +251,12 @@ Paginated.args = {
 	})
 }
 Paginated.argTypes = commonArgTypes
+
+const IngestionStatusTemplate: Story<TableProps<
+	IngestionStatusType
+>> = args => <Table<IngestionStatusType> {...args} />
+
+export const IngestionStatus = IngestionStatusTemplate.bind({})
+IngestionStatus.args = {
+	...tableData4
+}
diff --git a/src/components/Table/fixtures/4_sample_data.ts b/src/components/Table/fixtures/4_sample_data.ts
new file mode 100644
index 00000000..dd0f6244
--- /dev/null
+++ b/src/components/Table/fixtures/4_sample_data.ts
@@ -0,0 +1,53 @@
+import { ColumnFormats } from '../types'
+import { Status } from 'components/IngestionStatusDot'
+import { ColumnType, ColumnTypes, TableProps } from '../.'
+
+export interface IngestionStatusType {
+	status_label: string
+	id: number | string
+	ingestion_status: Status
+}
+
+const { ingestionStatusDot } = ColumnFormats
+const { component, string } = ColumnTypes
+
+const columns: ColumnType[] = [
+	{
+		dataIndex: 'status_label',
+		title: 'Status Label',
+		type: string
+	},
+	{
+		dataIndex: 'ingestion_status',
+		format: ingestionStatusDot,
+		title: 'Ingestion Status Dot',
+		type: component
+	}
+]
+
+const data: IngestionStatusType[] = [
+	{
+		id: 0,
+		ingestion_status: Status.OK,
+		status_label: 'ok'
+	},
+	{
+		id: 1,
+		ingestion_status: Status.NEEDSCONFIG,
+		status_label: 'needs config'
+	},
+	{
+		id: 2,
+		ingestion_status: Status.DISABLED,
+		status_label: 'paused'
+	},
+	{
+		id: 3,
+		ingestion_status: Status.HASISSUES,
+		status_label: 'issues'
+	}
+]
+
+const tableData4: TableProps<IngestionStatusType> = { columns, data }
+
+export default tableData4
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index cf9ba00a..c3c3d8e5 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -12,10 +12,10 @@ import {
 	NumberDateType
 } from './types'
 import { Icon, IconName, IconProps } from '../Icon'
+import { IngestionStatusDot, Status } from 'components/IngestionStatusDot'
 import { Link, LinkProps } from '../Link'
 import { Tag, TagProps } from '../Tag'
 import { Toggle, ToggleProps } from '../Toggle'
-import { IngestionStatusDot, Status } from 'components/IngestionStatusDot'
 
 /* ------- Exported Functions ------- */
 

From 485bcc9829e779154f6684ddf719de3fd4eeb9be Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 1 Dec 2020 14:37:32 -0800
Subject: [PATCH 3/8] feat #159 - Add Tooltip

---
 src/__snapshots__/storybook.test.ts.snap      | 107 ++++++++++++------
 .../IngestionStatusDot.stories.tsx            |   2 +-
 .../IngestionStatusDot.test.tsx               |  15 +++
 src/components/IngestionStatusDot/index.tsx   |  16 ++-
 4 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 src/components/IngestionStatusDot/IngestionStatusDot.test.tsx

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 952fd8cc..d5d3e187 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -210,12 +210,55 @@ exports[`Storyshots Icon Predefined 1`] = `
 </div>
 `;
 
+exports[`Storyshots IngestionStatusDot All 1`] = `
+<div
+  className="light storyWrapper-0-2-2"
+>
+  <div
+    className="wrapper-0-2-6"
+  >
+    <span
+      className="statusDot-0-2-9 hasIssues-0-2-7 statusDot-0-2-5"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    />
+    HAS_ISSUES
+  </div>
+  <div
+    className="wrapper-0-2-6"
+  >
+    <span
+      className="statusDot-0-2-9 needsConfig-0-2-8 statusDot-0-2-5"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    />
+    NEEDS_CONFIG
+  </div>
+  <div
+    className="wrapper-0-2-6"
+  >
+    <span
+      className="statusDot-0-2-9 statusDot-0-2-5"
+    />
+    OK
+  </div>
+  <div
+    className="wrapper-0-2-6"
+  >
+    <span
+      className="statusDot-0-2-9 statusDot-0-2-5"
+    />
+    DISABLED
+  </div>
+</div>
+`;
+
 exports[`Storyshots Input Default 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-5 container-d0-0-2-8"
+    className="ant-input container-0-2-10 container-d0-0-2-13"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -234,7 +277,7 @@ exports[`Storyshots Input Error 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-5 container-d5-0-2-14 error-0-2-6"
+    className="ant-input container-0-2-10 container-d5-0-2-19 error-0-2-11"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -253,7 +296,7 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-5 container-d4-0-2-13"
+    className="ant-input container-0-2-10 container-d4-0-2-18"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -272,13 +315,13 @@ exports[`Storyshots Input Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-5 container-d3-0-2-11"
+    className="container-0-2-10 container-d3-0-2-16"
   >
     <div
-      className="inputSkeleton-0-2-7"
+      className="inputSkeleton-0-2-12"
     >
       <span
-        className="container-0-2-3 container-d1-0-2-12"
+        className="container-0-2-3 container-d1-0-2-17"
       >
          
       </span>
@@ -292,7 +335,7 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-5 container-d1-0-2-9"
+    className="ant-input container-0-2-10 container-d1-0-2-14"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -592,31 +635,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-16"
+    className="container-0-2-21"
   >
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-23"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-19 skeleton-0-2-17"
+        className="container-0-2-3 container-d2-0-2-24 skeleton-0-2-22"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-23"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-20 skeleton-0-2-17"
+        className="container-0-2-3 container-d3-0-2-25 skeleton-0-2-22"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-18"
+      className="skeletonButton-0-2-23"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-21 skeleton-0-2-17"
+        className="container-0-2-3 container-d4-0-2-26 skeleton-0-2-22"
       >
          
       </span>
@@ -719,10 +762,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d0-0-2-27"
+    className="container-0-2-28 container-d0-0-2-32"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -815,10 +858,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d2-0-2-29"
+    className="container-0-2-28 container-d2-0-2-34"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -865,7 +908,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-31"
           >
             <span>
               Lorem
@@ -916,10 +959,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d1-0-2-28"
+    className="container-0-2-28 container-d1-0-2-33"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -966,10 +1009,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-26"
+            className="option-0-2-31"
           >
             <span
-              className="icon-0-2-25"
+              className="icon-0-2-30"
             >
               <svg
                 className=""
@@ -1029,10 +1072,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-23 container-d3-0-2-30"
+    className="container-0-2-28 container-d3-0-2-35"
   >
     <div
-      className="ant-select dropdown-0-2-24 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1125,7 +1168,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-32"
+    className="container-0-2-3 container-d6-0-2-37"
   >
      
   </span>
@@ -1137,27 +1180,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-38"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-38"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-38"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-38"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-33"
+    className="container-0-2-3 container-d7-0-2-38"
   >
      
   </span>
@@ -1169,7 +1212,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-31"
+    className="container-0-2-3 container-d5-0-2-36"
   >
      
   </span>
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
index 132db9c9..8d3a5d19 100644
--- a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
+++ b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
@@ -21,7 +21,7 @@ const useStyles = createUseStyles({
 		...flexAlignCenter,
 		...font.body,
 		color: themedStyles[light].base.color,
-		paddingBottom: spacing.m
+		padding: `${spacing.s}px ${spacing.xl}px`
 	},
 	// eslint-disable-next-line sort-keys
 	'@global': {
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
new file mode 100644
index 00000000..581d7259
--- /dev/null
+++ b/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { IngestionStatusDot, Status } from '.'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper
+
+describe('IngestionStatusDot', () => {
+	beforeEach(() => {
+		wrapper = mount(<IngestionStatusDot status={Status.OK} />)
+	})
+
+	it('renders', () => {
+		expect(wrapper).toHaveLength(1)
+	})
+})
diff --git a/src/components/IngestionStatusDot/index.tsx b/src/components/IngestionStatusDot/index.tsx
index b212c991..be74f315 100644
--- a/src/components/IngestionStatusDot/index.tsx
+++ b/src/components/IngestionStatusDot/index.tsx
@@ -1,5 +1,8 @@
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
+import lowerCase from 'lodash/lowerCase'
+import { Tooltip } from 'antd'
+import upperFirst from 'lodash/upperFirst'
 import React, { FC } from 'react'
 import { styleguide, ThemeType } from 'components/assets/styles'
 
@@ -69,5 +72,16 @@ export const IngestionStatusDot: FC<IngestionStatusDotProps> = ({
 		classes
 	)
 
-	return <span className={ingestionStatusDotClasses}></span>
+	const showTooltip =
+		status === Status.HASISSUES || status === Status.NEEDSCONFIG
+
+	const tooltipText = upperFirst(lowerCase(status))
+
+	return showTooltip ? (
+		<Tooltip title={tooltipText}>
+			<span className={ingestionStatusDotClasses}></span>
+		</Tooltip>
+	) : (
+		<span className={ingestionStatusDotClasses}></span>
+	)
 }

From c300183ccc2e7b5b412d3b49d3d4e866b044a07b Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 1 Dec 2020 18:26:06 -0800
Subject: [PATCH 4/8] feat #159 - Add tests

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 .../IngestionStatusDot.stories.tsx            | 36 +++++++++++--------
 .../IngestionStatusDot.test.tsx               | 10 +++++-
 src/components/IngestionStatusDot/index.tsx   |  4 +--
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c8af1166..443148ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.7.3",
+	"version": "0.7.5",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/package.json b/package.json
index 68204686..b7c5cab2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.7.4",
+	"version": "0.7.5",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
index 8d3a5d19..8bd4fb02 100644
--- a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
+++ b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
@@ -14,19 +14,22 @@ const { flexAlignCenter, font, spacing } = styleguide
 const { light, dark } = ThemeType
 
 const useStyles = createUseStyles({
-	statusDot: {
-		marginRight: spacing.m
-	},
-	wrapper: {
+	container: {
 		...flexAlignCenter,
+		padding: `${spacing.s}px ${spacing.l}px`
+	},
+	mainContainer: {
 		...font.body,
 		color: themedStyles[light].base.color,
-		padding: `${spacing.s}px ${spacing.xl}px`
+		paddingLeft: spacing.l
+	},
+	statusDot: {
+		marginRight: spacing.m
 	},
 	// eslint-disable-next-line sort-keys
 	'@global': {
 		[`.${dark}`]: {
-			'& $wrapper': {
+			'& $mainContainer': {
 				color: themedStyles[dark].base.color
 			}
 		}
@@ -41,7 +44,7 @@ const DecoratedDot: FC<Props> = ({ status }: Props) => {
 	const classes = useStyles()
 
 	return (
-		<div className={classes.wrapper}>
+		<div className={classes.container}>
 			<IngestionStatusDot classes={[classes.statusDot]} status={status} />
 			{status}
 		</div>
@@ -55,10 +58,15 @@ const statuses = [
 	Status.DISABLED
 ]
 
-export const All = () => (
-	<>
-		{statuses.map((status: Status) => (
-			<DecoratedDot key={status} status={status} />
-		))}
-	</>
-)
+export const All = () => {
+	const classes = useStyles()
+
+	return (
+		<div className={classes.mainContainer}>
+			<p>Hover over colored dot to show tooltip.</p>
+			{statuses.map((status: Status) => (
+				<DecoratedDot key={status} status={status} />
+			))}
+		</div>
+	)
+}
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
index 581d7259..ac083e28 100644
--- a/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
+++ b/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
@@ -6,10 +6,18 @@ let wrapper: ReactWrapper
 
 describe('IngestionStatusDot', () => {
 	beforeEach(() => {
-		wrapper = mount(<IngestionStatusDot status={Status.OK} />)
+		wrapper = mount(<IngestionStatusDot status={Status.HASISSUES} />)
 	})
 
 	it('renders', () => {
 		expect(wrapper).toHaveLength(1)
 	})
+
+	it('has correct conditional classnames', () => {
+		expect(wrapper.find('span').hasClass(/hasIssues-*/)).toBeTruthy()
+
+		wrapper = mount(<IngestionStatusDot status={Status.NEEDSCONFIG} />)
+
+		expect(wrapper.find('span').hasClass(/needsConfig-*/)).toBeTruthy()
+	})
 })
diff --git a/src/components/IngestionStatusDot/index.tsx b/src/components/IngestionStatusDot/index.tsx
index be74f315..92829967 100644
--- a/src/components/IngestionStatusDot/index.tsx
+++ b/src/components/IngestionStatusDot/index.tsx
@@ -54,12 +54,12 @@ const useStyles = createUseStyles({
 
 export interface IngestionStatusDotProps {
 	classes?: string[]
-	status?: Status
+	status: Status
 }
 
 export const IngestionStatusDot: FC<IngestionStatusDotProps> = ({
 	classes = [],
-	status = Status.OK
+	status
 }: IngestionStatusDotProps) => {
 	const componentClasses = useStyles()
 

From 409b8dd48dba38423edf81c08f7c9e9768f02d4d Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 1 Dec 2020 18:27:48 -0800
Subject: [PATCH 5/8] feat #159 - Fix failing snapshots

---
 src/__snapshots__/storybook.test.ts.snap | 137 ++++++++++++-----------
 1 file changed, 72 insertions(+), 65 deletions(-)

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index d5d3e187..4bf59b25 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -215,40 +215,47 @@ exports[`Storyshots IngestionStatusDot All 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="wrapper-0-2-6"
+    className="mainContainer-0-2-6"
   >
-    <span
-      className="statusDot-0-2-9 hasIssues-0-2-7 statusDot-0-2-5"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    />
-    HAS_ISSUES
-  </div>
-  <div
-    className="wrapper-0-2-6"
-  >
-    <span
-      className="statusDot-0-2-9 needsConfig-0-2-8 statusDot-0-2-5"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    />
-    NEEDS_CONFIG
-  </div>
-  <div
-    className="wrapper-0-2-6"
-  >
-    <span
-      className="statusDot-0-2-9 statusDot-0-2-5"
-    />
-    OK
-  </div>
-  <div
-    className="wrapper-0-2-6"
-  >
-    <span
-      className="statusDot-0-2-9 statusDot-0-2-5"
-    />
-    DISABLED
+    <p>
+      Hover over colored dot to show tooltip.
+    </p>
+    <div
+      className="container-0-2-5"
+    >
+      <span
+        className="statusDot-0-2-10 hasIssues-0-2-8 statusDot-0-2-7"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      />
+      HAS_ISSUES
+    </div>
+    <div
+      className="container-0-2-5"
+    >
+      <span
+        className="statusDot-0-2-10 needsConfig-0-2-9 statusDot-0-2-7"
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      />
+      NEEDS_CONFIG
+    </div>
+    <div
+      className="container-0-2-5"
+    >
+      <span
+        className="statusDot-0-2-10 statusDot-0-2-7"
+      />
+      OK
+    </div>
+    <div
+      className="container-0-2-5"
+    >
+      <span
+        className="statusDot-0-2-10 statusDot-0-2-7"
+      />
+      DISABLED
+    </div>
   </div>
 </div>
 `;
@@ -258,7 +265,7 @@ exports[`Storyshots Input Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-10 container-d0-0-2-13"
+    className="ant-input container-0-2-11 container-d0-0-2-14"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -277,7 +284,7 @@ exports[`Storyshots Input Error 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-10 container-d5-0-2-19 error-0-2-11"
+    className="ant-input container-0-2-11 container-d5-0-2-20 error-0-2-12"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -296,7 +303,7 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-10 container-d4-0-2-18"
+    className="ant-input container-0-2-11 container-d4-0-2-19"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -315,13 +322,13 @@ exports[`Storyshots Input Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-10 container-d3-0-2-16"
+    className="container-0-2-11 container-d3-0-2-17"
   >
     <div
-      className="inputSkeleton-0-2-12"
+      className="inputSkeleton-0-2-13"
     >
       <span
-        className="container-0-2-3 container-d1-0-2-17"
+        className="container-0-2-3 container-d1-0-2-18"
       >
          
       </span>
@@ -335,7 +342,7 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <input
-    className="ant-input container-0-2-10 container-d1-0-2-14"
+    className="ant-input container-0-2-11 container-d1-0-2-15"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -635,31 +642,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-21"
+    className="container-0-2-22"
   >
     <div
-      className="skeletonButton-0-2-23"
+      className="skeletonButton-0-2-24"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-24 skeleton-0-2-22"
+        className="container-0-2-3 container-d2-0-2-25 skeleton-0-2-23"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-23"
+      className="skeletonButton-0-2-24"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-25 skeleton-0-2-22"
+        className="container-0-2-3 container-d3-0-2-26 skeleton-0-2-23"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-23"
+      className="skeletonButton-0-2-24"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-26 skeleton-0-2-22"
+        className="container-0-2-3 container-d4-0-2-27 skeleton-0-2-23"
       >
          
       </span>
@@ -762,10 +769,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-28 container-d0-0-2-32"
+    className="container-0-2-29 container-d0-0-2-33"
   >
     <div
-      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -858,10 +865,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-28 container-d2-0-2-34"
+    className="container-0-2-29 container-d2-0-2-35"
   >
     <div
-      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -908,7 +915,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-31"
+            className="option-0-2-32"
           >
             <span>
               Lorem
@@ -959,10 +966,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-28 container-d1-0-2-33"
+    className="container-0-2-29 container-d1-0-2-34"
   >
     <div
-      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1009,10 +1016,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-31"
+            className="option-0-2-32"
           >
             <span
-              className="icon-0-2-30"
+              className="icon-0-2-31"
             >
               <svg
                 className=""
@@ -1072,10 +1079,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <div
-    className="container-0-2-28 container-d3-0-2-35"
+    className="container-0-2-29 container-d3-0-2-36"
   >
     <div
-      className="ant-select dropdown-0-2-29 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1168,7 +1175,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-37"
+    className="container-0-2-3 container-d6-0-2-38"
   >
      
   </span>
@@ -1180,27 +1187,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-38"
+    className="container-0-2-3 container-d7-0-2-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-38"
+    className="container-0-2-3 container-d7-0-2-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-38"
+    className="container-0-2-3 container-d7-0-2-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-38"
+    className="container-0-2-3 container-d7-0-2-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-38"
+    className="container-0-2-3 container-d7-0-2-39"
   >
      
   </span>
@@ -1212,7 +1219,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light storyWrapper-0-2-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-36"
+    className="container-0-2-3 container-d5-0-2-37"
   >
      
   </span>

From 44feb41ca9175f574cf534d0043448894e6cab86 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Wed, 2 Dec 2020 17:56:04 -0800
Subject: [PATCH 6/8] feat #159 - Refactor IngestionStatusDot --> ColoredDot

---
 package-lock.json                             | 211 +++++++++++++++--
 src/__mocks__/table_mock_data.ts              |  40 ++--
 src/__snapshots__/storybook.test.ts.snap      | 221 ++++++++----------
 .../ColoredDot/ColoredDot.stories.tsx         |  56 +++++
 src/components/ColoredDot/ColoredDot.test.tsx |  21 ++
 src/components/ColoredDot/index.tsx           |  58 +++++
 .../IngestionStatusDot.stories.tsx            |  72 ------
 .../IngestionStatusDot.test.tsx               |  23 --
 src/components/IngestionStatusDot/index.tsx   |  87 -------
 src/components/Table/Table.stories.mdx        |   2 +-
 src/components/Table/Table.stories.tsx        |  12 +-
 src/components/Table/__tests__/Table.test.tsx |   5 +-
 .../Table/fixtures/4_sample_data.ts           |  63 +++--
 src/components/Table/types.ts                 |  13 +-
 src/components/Table/utils.tsx                |  33 ++-
 src/components/index.ts                       |   2 +-
 16 files changed, 524 insertions(+), 395 deletions(-)
 create mode 100644 src/components/ColoredDot/ColoredDot.stories.tsx
 create mode 100644 src/components/ColoredDot/ColoredDot.test.tsx
 create mode 100644 src/components/ColoredDot/index.tsx
 delete mode 100644 src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
 delete mode 100644 src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
 delete mode 100644 src/components/IngestionStatusDot/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 443148ae..866693e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12486,6 +12486,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"jss-preset-default": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"css-loader": {
@@ -17912,24 +17925,6 @@
 				"verror": "1.10.0"
 			}
 		},
-		"jss": {
-			"version": "10.4.0",
-			"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
-			"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
-			"requires": {
-				"@babel/runtime": "^7.3.1",
-				"csstype": "^3.0.2",
-				"is-in-browser": "^1.1.3",
-				"tiny-warning": "^1.0.2"
-			},
-			"dependencies": {
-				"csstype": {
-					"version": "3.0.2",
-					"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz",
-					"integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw=="
-				}
-			}
-		},
 		"jss-plugin-camel-case": {
 			"version": "10.4.0",
 			"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz",
@@ -17938,6 +17933,19 @@
 				"@babel/runtime": "^7.3.1",
 				"hyphenate-style-name": "^1.0.3",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-compose": {
@@ -17948,6 +17956,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"tiny-warning": "^1.0.2"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-default-unit": {
@@ -17957,6 +17978,19 @@
 			"requires": {
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-expand": {
@@ -17966,6 +18000,19 @@
 			"requires": {
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-extend": {
@@ -17976,6 +18023,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"tiny-warning": "^1.0.2"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-global": {
@@ -17985,6 +18045,19 @@
 			"requires": {
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-nested": {
@@ -17995,6 +18068,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"tiny-warning": "^1.0.2"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-props-sort": {
@@ -18004,6 +18090,19 @@
 			"requires": {
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-rule-value-function": {
@@ -18014,6 +18113,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"tiny-warning": "^1.0.2"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-rule-value-observable": {
@@ -18024,6 +18136,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"symbol-observable": "^1.2.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-template": {
@@ -18034,6 +18159,19 @@
 				"@babel/runtime": "^7.3.1",
 				"jss": "10.4.0",
 				"tiny-warning": "^1.0.2"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-plugin-vendor-prefixer": {
@@ -18044,6 +18182,19 @@
 				"@babel/runtime": "^7.3.1",
 				"css-vendor": "^2.0.8",
 				"jss": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jss-preset-default": {
@@ -18065,6 +18216,19 @@
 				"jss-plugin-rule-value-observable": "10.4.0",
 				"jss-plugin-template": "10.4.0",
 				"jss-plugin-vendor-prefixer": "10.4.0"
+			},
+			"dependencies": {
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
+				}
 			}
 		},
 		"jsx-ast-utils": {
@@ -25723,6 +25887,17 @@
 					"version": "0.7.1",
 					"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
 					"integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+				},
+				"jss": {
+					"version": "10.4.0",
+					"resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+					"integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+					"requires": {
+						"@babel/runtime": "^7.3.1",
+						"csstype": "^3.0.2",
+						"is-in-browser": "^1.1.3",
+						"tiny-warning": "^1.0.2"
+					}
 				}
 			}
 		},
diff --git a/src/__mocks__/table_mock_data.ts b/src/__mocks__/table_mock_data.ts
index d30dc660..5128eac0 100644
--- a/src/__mocks__/table_mock_data.ts
+++ b/src/__mocks__/table_mock_data.ts
@@ -1,4 +1,4 @@
-import { Status } from 'components'
+import { ThemeType } from 'components'
 import {
 	ColumnFormats,
 	ColumnType,
@@ -7,24 +7,15 @@ import {
 } from '../components/Table'
 
 const { component, number, string } = ColumnTypes
-const {
-	none,
-	byte,
-	date,
-	icon,
-	ingestionStatusDot,
-	link,
-	toggle,
-	tag
-} = ColumnFormats
+const { none, byte, date, icon, coloredDot, link, toggle, tag } = ColumnFormats
 
 export interface Data {
 	byte: number
 	date: number
+	dot: string
 	icon: string
-	icon_key: string
+	iconKey: string
 	id: number
-	ingestion_status: Status
 	link: string
 	number: number
 	string: string
@@ -84,7 +75,7 @@ const columns: ColumnType[] = [
 		type: component
 	},
 	{
-		dataIndex: 'icon_key',
+		dataIndex: 'iconKey',
 		format: icon,
 		renderProps: {
 			type: 'iconKey'
@@ -105,9 +96,20 @@ const columns: ColumnType[] = [
 		type: component
 	},
 	{
-		dataIndex: 'ingestion_status',
-		format: ingestionStatusDot,
-		title: 'Ingestion Status',
+		dataIndex: 'dot',
+		format: coloredDot,
+		renderProps: {
+			colorMap: {
+				test: {
+					colors: {
+						[ThemeType.light]: 'red',
+						[ThemeType.dark]: 'red'
+					},
+					tooltipText: 'Hi I am colored'
+				}
+			}
+		},
+		title: 'Colored Dot',
 		type: component
 	}
 ]
@@ -116,10 +118,10 @@ const data: Data[] = [
 	{
 		byte: 1024,
 		date: 1599193037581,
+		dot: 'test',
 		icon: 'test',
-		icon_key: 'dassana',
+		iconKey: 'dassana',
 		id: 0,
-		ingestion_status: Status.OK,
 		link: 'test',
 		number: 0,
 		string: 'Dassana',
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 4bf59b25..d4234fba 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Avatar Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
     className="ant-avatar ant-avatar-circle"
@@ -24,7 +24,7 @@ exports[`Storyshots Avatar Default 1`] = `
 
 exports[`Storyshots Avatar Icon 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
     className="ant-avatar ant-avatar-circle ant-avatar-icon"
@@ -44,7 +44,7 @@ exports[`Storyshots Avatar Icon 1`] = `
 
 exports[`Storyshots Button Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -62,7 +62,7 @@ exports[`Storyshots Button Default 1`] = `
 
 exports[`Storyshots Button Disabled 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -80,10 +80,10 @@ exports[`Storyshots Button Disabled 1`] = `
 
 exports[`Storyshots Button Loading 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-2-3 container-d0-0-2-4"
+    className="container-0-1-3 container-d0-0-1-4"
   >
      
   </span>
@@ -92,7 +92,7 @@ exports[`Storyshots Button Loading 1`] = `
 
 exports[`Storyshots Button Pending 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -148,7 +148,7 @@ exports[`Storyshots Button Pending 1`] = `
 
 exports[`Storyshots Button Primary 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-primary"
@@ -166,7 +166,7 @@ exports[`Storyshots Button Primary 1`] = `
 
 exports[`Storyshots Button Primary Disabled 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-primary"
@@ -182,9 +182,32 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 </div>
 `;
 
+exports[`Storyshots ColoredDot All 1`] = `
+<div
+  className="light storyWrapper-0-1-2"
+>
+  <div
+    className="mainContainer-0-1-7"
+  >
+    <p>
+      Hover over colored dot to show tooltip.
+    </p>
+    <span
+      className="coloredDot-0-1-8 dot-0-1-6"
+    />
+    <span
+      className="coloredDot-0-1-9 dot-0-1-6"
+    />
+    <span
+      className="coloredDot-0-1-10 dot-0-1-6"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Icon Custom 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <img
     alt="https://dummyimage.com/600x400/000/fff&text=Dassana"
@@ -197,7 +220,7 @@ exports[`Storyshots Icon Custom 1`] = `
 
 exports[`Storyshots Icon Predefined 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <svg
     className=""
@@ -210,62 +233,12 @@ exports[`Storyshots Icon Predefined 1`] = `
 </div>
 `;
 
-exports[`Storyshots IngestionStatusDot All 1`] = `
-<div
-  className="light storyWrapper-0-2-2"
->
-  <div
-    className="mainContainer-0-2-6"
-  >
-    <p>
-      Hover over colored dot to show tooltip.
-    </p>
-    <div
-      className="container-0-2-5"
-    >
-      <span
-        className="statusDot-0-2-10 hasIssues-0-2-8 statusDot-0-2-7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      />
-      HAS_ISSUES
-    </div>
-    <div
-      className="container-0-2-5"
-    >
-      <span
-        className="statusDot-0-2-10 needsConfig-0-2-9 statusDot-0-2-7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      />
-      NEEDS_CONFIG
-    </div>
-    <div
-      className="container-0-2-5"
-    >
-      <span
-        className="statusDot-0-2-10 statusDot-0-2-7"
-      />
-      OK
-    </div>
-    <div
-      className="container-0-2-5"
-    >
-      <span
-        className="statusDot-0-2-10 statusDot-0-2-7"
-      />
-      DISABLED
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Input Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-2-11 container-d0-0-2-14"
+    className="ant-input container-0-1-11 container-d0-0-1-14"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -281,10 +254,10 @@ exports[`Storyshots Input Default 1`] = `
 
 exports[`Storyshots Input Error 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-2-11 container-d5-0-2-20 error-0-2-12"
+    className="ant-input container-0-1-11 container-d5-0-1-20 error-0-1-12"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -300,10 +273,10 @@ exports[`Storyshots Input Error 1`] = `
 
 exports[`Storyshots Input Full Width 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-2-11 container-d4-0-2-19"
+    className="ant-input container-0-1-11 container-d4-0-1-19"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -319,16 +292,16 @@ exports[`Storyshots Input Full Width 1`] = `
 
 exports[`Storyshots Input Loading 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-11 container-d3-0-2-17"
+    className="container-0-1-11 container-d3-0-1-17"
   >
     <div
-      className="inputSkeleton-0-2-13"
+      className="inputSkeleton-0-1-13"
     >
       <span
-        className="container-0-2-3 container-d1-0-2-18"
+        className="container-0-1-3 container-d1-0-1-18"
       >
          
       </span>
@@ -339,10 +312,10 @@ exports[`Storyshots Input Loading 1`] = `
 
 exports[`Storyshots Input Placeholder 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-2-11 container-d1-0-2-15"
+    className="ant-input container-0-1-11 container-d1-0-1-15"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -358,7 +331,7 @@ exports[`Storyshots Input Placeholder 1`] = `
 
 exports[`Storyshots Link Click 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <a
     className="ant-typography"
@@ -380,7 +353,7 @@ exports[`Storyshots Link Click 1`] = `
 
 exports[`Storyshots Link Href 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <a
     className="ant-typography"
@@ -402,7 +375,7 @@ exports[`Storyshots Link Href 1`] = `
 
 exports[`Storyshots Notification Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -420,7 +393,7 @@ exports[`Storyshots Notification Default 1`] = `
 
 exports[`Storyshots Notifications Error 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -438,7 +411,7 @@ exports[`Storyshots Notifications Error 1`] = `
 
 exports[`Storyshots Notifications Info 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -456,7 +429,7 @@ exports[`Storyshots Notifications Info 1`] = `
 
 exports[`Storyshots Notifications Success 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -474,7 +447,7 @@ exports[`Storyshots Notifications Success 1`] = `
 
 exports[`Storyshots Notifications Warning 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     className="ant-btn ant-btn-default"
@@ -492,7 +465,7 @@ exports[`Storyshots Notifications Warning 1`] = `
 
 exports[`Storyshots Popover Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
     style={
@@ -521,7 +494,7 @@ exports[`Storyshots Popover Default 1`] = `
 
 exports[`Storyshots Popover Title 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
     style={
@@ -550,7 +523,7 @@ exports[`Storyshots Popover Title 1`] = `
 
 exports[`Storyshots Radio Group Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
     className="ant-radio-group ant-radio-group-solid"
@@ -639,34 +612,34 @@ exports[`Storyshots Radio Group Default 1`] = `
 
 exports[`Storyshots Radio Group Loading 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-22"
+    className="container-0-1-22"
   >
     <div
-      className="skeletonButton-0-2-24"
+      className="skeletonButton-0-1-24"
     >
       <span
-        className="container-0-2-3 container-d2-0-2-25 skeleton-0-2-23"
+        className="container-0-1-3 container-d2-0-1-25 skeleton-0-1-23"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-24"
+      className="skeletonButton-0-1-24"
     >
       <span
-        className="container-0-2-3 container-d3-0-2-26 skeleton-0-2-23"
+        className="container-0-1-3 container-d3-0-1-26 skeleton-0-1-23"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-2-24"
+      className="skeletonButton-0-1-24"
     >
       <span
-        className="container-0-2-3 container-d4-0-2-27 skeleton-0-2-23"
+        className="container-0-1-3 container-d4-0-1-27 skeleton-0-1-23"
       >
          
       </span>
@@ -677,7 +650,7 @@ exports[`Storyshots Radio Group Loading 1`] = `
 
 exports[`Storyshots Radio Group Partially Disabled 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
     className="ant-radio-group ant-radio-group-solid"
@@ -766,13 +739,13 @@ exports[`Storyshots Radio Group Partially Disabled 1`] = `
 
 exports[`Storyshots Select Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-29 container-d0-0-2-33"
+    className="container-0-1-29 container-d0-0-1-33"
   >
     <div
-      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -862,13 +835,13 @@ exports[`Storyshots Select Default 1`] = `
 
 exports[`Storyshots Select Full Width 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-29 container-d2-0-2-35"
+    className="container-0-1-29 container-d2-0-1-35"
   >
     <div
-      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -915,7 +888,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-32"
+            className="option-0-1-32"
           >
             <span>
               Lorem
@@ -963,13 +936,13 @@ exports[`Storyshots Select Full Width 1`] = `
 
 exports[`Storyshots Select Icon 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-29 container-d1-0-2-34"
+    className="container-0-1-29 container-d1-0-1-34"
   >
     <div
-      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1016,10 +989,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-2-32"
+            className="option-0-1-32"
           >
             <span
-              className="icon-0-2-31"
+              className="icon-0-1-31"
             >
               <svg
                 className=""
@@ -1076,13 +1049,13 @@ exports[`Storyshots Select Icon 1`] = `
 
 exports[`Storyshots Select Search 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-2-29 container-d3-0-2-36"
+    className="container-0-1-29 container-d3-0-1-36"
   >
     <div
-      className="ant-select dropdown-0-2-30 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1172,10 +1145,10 @@ exports[`Storyshots Select Search 1`] = `
 
 exports[`Storyshots Skeleton Circle 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-2-3 container-d6-0-2-38"
+    className="container-0-1-3 container-d6-0-1-38"
   >
      
   </span>
@@ -1184,30 +1157,30 @@ exports[`Storyshots Skeleton Circle 1`] = `
 
 exports[`Storyshots Skeleton Count 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-2-3 container-d7-0-2-39"
+    className="container-0-1-3 container-d7-0-1-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-39"
+    className="container-0-1-3 container-d7-0-1-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-39"
+    className="container-0-1-3 container-d7-0-1-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-39"
+    className="container-0-1-3 container-d7-0-1-39"
   >
      
   </span>
   <span
-    className="container-0-2-3 container-d7-0-2-39"
+    className="container-0-1-3 container-d7-0-1-39"
   >
      
   </span>
@@ -1216,10 +1189,10 @@ exports[`Storyshots Skeleton Count 1`] = `
 
 exports[`Storyshots Skeleton Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-2-3 container-d5-0-2-37"
+    className="container-0-1-3 container-d5-0-1-37"
   >
      
   </span>
@@ -1228,7 +1201,7 @@ exports[`Storyshots Skeleton Default 1`] = `
 
 exports[`Storyshots Tag Colored 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
     className="ant-tag ant-tag-has-color"
@@ -1245,7 +1218,7 @@ exports[`Storyshots Tag Colored 1`] = `
 
 exports[`Storyshots Tag Colored Preset 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
     className="ant-tag ant-tag-blue"
@@ -1262,7 +1235,7 @@ exports[`Storyshots Tag Colored Preset 1`] = `
 
 exports[`Storyshots Tag Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <span
     className="ant-tag"
@@ -1279,7 +1252,7 @@ exports[`Storyshots Tag Default 1`] = `
 
 exports[`Storyshots Toggle Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     aria-checked={false}
@@ -1302,7 +1275,7 @@ exports[`Storyshots Toggle Default 1`] = `
 
 exports[`Storyshots Toggle Disabled 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     aria-checked={false}
@@ -1326,7 +1299,7 @@ exports[`Storyshots Toggle Disabled 1`] = `
 
 exports[`Storyshots Toggle Small 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <button
     aria-checked={false}
@@ -1349,7 +1322,7 @@ exports[`Storyshots Toggle Small 1`] = `
 
 exports[`Storyshots Tooltip Default 1`] = `
 <div
-  className="light storyWrapper-0-2-2"
+  className="light storyWrapper-0-1-2"
 >
   <div
     style={
diff --git a/src/components/ColoredDot/ColoredDot.stories.tsx b/src/components/ColoredDot/ColoredDot.stories.tsx
new file mode 100644
index 00000000..2130cadf
--- /dev/null
+++ b/src/components/ColoredDot/ColoredDot.stories.tsx
@@ -0,0 +1,56 @@
+import { createUseStyles } from 'react-jss'
+import { ColoredDot, ColoredDotProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React, { FC } from 'react'
+import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
+
+export default {
+	component: ColoredDot,
+	title: 'ColoredDot'
+} as Meta
+
+const {
+	colors: { oranges, greens },
+	font,
+	spacing
+} = styleguide
+
+const { light, dark } = ThemeType
+
+const useStyles = createUseStyles({
+	container: {
+		...font.body,
+		color: themedStyles[light].base.color,
+		paddingLeft: spacing.l
+	},
+	dot: {
+		margin: spacing.m
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $container': {
+				color: themedStyles[dark].base.color
+			}
+		}
+	}
+})
+
+const Template: Story<ColoredDotProps> = args => <DecoratedStory {...args} />
+
+export const Colored = Template.bind({})
+Colored.args = {
+	colors: { [dark]: oranges.base, [light]: greens.base },
+	tooltipText: 'Colored Dot'
+}
+
+const DecoratedStory: FC<ColoredDotProps> = (props: ColoredDotProps) => {
+	const classes = useStyles()
+
+	return (
+		<div className={classes.container}>
+			<p>Hover over colored dot to show tooltip.</p>
+			<ColoredDot {...props} classes={[classes.dot]} />
+		</div>
+	)
+}
diff --git a/src/components/ColoredDot/ColoredDot.test.tsx b/src/components/ColoredDot/ColoredDot.test.tsx
new file mode 100644
index 00000000..28c51192
--- /dev/null
+++ b/src/components/ColoredDot/ColoredDot.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { ColoredDot } from '.'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper
+
+describe('ColoredDot', () => {
+	beforeEach(() => {
+		// wrapper = mount(<ColoredDot />)
+	})
+
+	it('renders', () => {
+		// expect(wrapper).toHaveLength(1)
+	})
+
+	it('has correct conditional classnames', () => {
+		// expect(wrapper.find('span').hasClass(/hasIssues-*/)).toBeTruthy()
+		// wrapper = mount(<ColoredDot />)
+		// expect(wrapper.find('span').hasClass(/needsConfig-*/)).toBeTruthy()
+	})
+})
diff --git a/src/components/ColoredDot/index.tsx b/src/components/ColoredDot/index.tsx
new file mode 100644
index 00000000..0a4b72fb
--- /dev/null
+++ b/src/components/ColoredDot/index.tsx
@@ -0,0 +1,58 @@
+import cn from 'classnames'
+import { createUseStyles as createJssUseStyles } from 'react-jss'
+import { ThemeType } from 'components/assets/styles'
+import { Tooltip } from 'antd'
+import React, { FC } from 'react'
+
+const { light, dark } = ThemeType
+
+const createUseStyles = ({ colors }: Pick<ColoredDotProps, 'colors'>) =>
+	createJssUseStyles({
+		coloredDot: {
+			background: colors && colors[light] ? colors[light] : 'transparent',
+			borderRadius: '50%',
+			display: 'block',
+			height: 10,
+			width: 10
+		},
+		// eslint-disable-next-line sort-keys
+		'@global': {
+			[`.${dark}`]: {
+				'& $coloredDot': {
+					background:
+						colors && colors[dark] ? colors[dark] : 'transparent'
+				}
+			}
+		}
+	})
+
+export interface ColoredDotProps {
+	classes?: string[]
+	colors?: {
+		[ThemeType.light]: string
+		[ThemeType.dark]: string
+	}
+	tooltipText?: string
+}
+
+export const ColoredDot: FC<ColoredDotProps> = ({
+	classes = [],
+	colors,
+	tooltipText = ''
+}: ColoredDotProps) => {
+	const componentClasses = createUseStyles({
+		colors
+	})()
+
+	const dotClasss = cn(componentClasses.coloredDot, classes)
+
+	const showTooltip = colors && tooltipText
+
+	return showTooltip ? (
+		<Tooltip title={tooltipText}>
+			<span className={dotClasss}></span>
+		</Tooltip>
+	) : (
+		<span className={dotClasss}></span>
+	)
+}
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
deleted file mode 100644
index 8bd4fb02..00000000
--- a/src/components/IngestionStatusDot/IngestionStatusDot.stories.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { createUseStyles } from 'react-jss'
-import { Meta } from '@storybook/react/types-6-0'
-import { IngestionStatusDot, Status } from '.'
-import React, { FC } from 'react'
-import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
-
-export default {
-	component: IngestionStatusDot,
-	title: 'IngestionStatusDot'
-} as Meta
-
-const { flexAlignCenter, font, spacing } = styleguide
-
-const { light, dark } = ThemeType
-
-const useStyles = createUseStyles({
-	container: {
-		...flexAlignCenter,
-		padding: `${spacing.s}px ${spacing.l}px`
-	},
-	mainContainer: {
-		...font.body,
-		color: themedStyles[light].base.color,
-		paddingLeft: spacing.l
-	},
-	statusDot: {
-		marginRight: spacing.m
-	},
-	// eslint-disable-next-line sort-keys
-	'@global': {
-		[`.${dark}`]: {
-			'& $mainContainer': {
-				color: themedStyles[dark].base.color
-			}
-		}
-	}
-})
-
-interface Props {
-	status: Status
-}
-
-const DecoratedDot: FC<Props> = ({ status }: Props) => {
-	const classes = useStyles()
-
-	return (
-		<div className={classes.container}>
-			<IngestionStatusDot classes={[classes.statusDot]} status={status} />
-			{status}
-		</div>
-	)
-}
-
-const statuses = [
-	Status.HASISSUES,
-	Status.NEEDSCONFIG,
-	Status.OK,
-	Status.DISABLED
-]
-
-export const All = () => {
-	const classes = useStyles()
-
-	return (
-		<div className={classes.mainContainer}>
-			<p>Hover over colored dot to show tooltip.</p>
-			{statuses.map((status: Status) => (
-				<DecoratedDot key={status} status={status} />
-			))}
-		</div>
-	)
-}
diff --git a/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx b/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
deleted file mode 100644
index ac083e28..00000000
--- a/src/components/IngestionStatusDot/IngestionStatusDot.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import { IngestionStatusDot, Status } from '.'
-import { mount, ReactWrapper } from 'enzyme'
-
-let wrapper: ReactWrapper
-
-describe('IngestionStatusDot', () => {
-	beforeEach(() => {
-		wrapper = mount(<IngestionStatusDot status={Status.HASISSUES} />)
-	})
-
-	it('renders', () => {
-		expect(wrapper).toHaveLength(1)
-	})
-
-	it('has correct conditional classnames', () => {
-		expect(wrapper.find('span').hasClass(/hasIssues-*/)).toBeTruthy()
-
-		wrapper = mount(<IngestionStatusDot status={Status.NEEDSCONFIG} />)
-
-		expect(wrapper.find('span').hasClass(/needsConfig-*/)).toBeTruthy()
-	})
-})
diff --git a/src/components/IngestionStatusDot/index.tsx b/src/components/IngestionStatusDot/index.tsx
deleted file mode 100644
index 92829967..00000000
--- a/src/components/IngestionStatusDot/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import cn from 'classnames'
-import { createUseStyles } from 'react-jss'
-import lowerCase from 'lodash/lowerCase'
-import { Tooltip } from 'antd'
-import upperFirst from 'lodash/upperFirst'
-import React, { FC } from 'react'
-import { styleguide, ThemeType } from 'components/assets/styles'
-
-const {
-	colors: { blacks, oranges }
-} = styleguide
-
-const { light, dark } = ThemeType
-
-/* TODO: Use types generated from codegen */
-export enum Status {
-	DISABLED = 'DISABLED',
-	HASISSUES = 'HAS_ISSUES',
-	NEEDSCONFIG = 'NEEDS_CONFIG',
-	OK = 'OK'
-}
-
-const colorPalette = {
-	[dark]: {
-		[Status.NEEDSCONFIG]: blacks['lighten-40']
-	},
-	[light]: {
-		[Status.NEEDSCONFIG]: blacks['lighten-70']
-	}
-}
-
-const useStyles = createUseStyles({
-	hasIssues: {
-		background: oranges.base
-	},
-	needsConfig: {
-		background: colorPalette[light][Status.NEEDSCONFIG]
-	},
-	statusDot: {
-		borderRadius: '50%',
-		display: 'block',
-		height: 10,
-		width: 10
-	},
-	// eslint-disable-next-line sort-keys
-	'@global': {
-		[`.${dark}`]: {
-			'& $needsConfig': {
-				background: colorPalette[dark][Status.NEEDSCONFIG]
-			}
-		}
-	}
-})
-
-export interface IngestionStatusDotProps {
-	classes?: string[]
-	status: Status
-}
-
-export const IngestionStatusDot: FC<IngestionStatusDotProps> = ({
-	classes = [],
-	status
-}: IngestionStatusDotProps) => {
-	const componentClasses = useStyles()
-
-	const ingestionStatusDotClasses = cn(
-		{
-			[componentClasses.statusDot]: true,
-			[componentClasses.hasIssues]: status === Status.HASISSUES,
-			[componentClasses.needsConfig]: status === Status.NEEDSCONFIG
-		},
-		classes
-	)
-
-	const showTooltip =
-		status === Status.HASISSUES || status === Status.NEEDSCONFIG
-
-	const tooltipText = upperFirst(lowerCase(status))
-
-	return showTooltip ? (
-		<Tooltip title={tooltipText}>
-			<span className={ingestionStatusDotClasses}></span>
-		</Tooltip>
-	) : (
-		<span className={ingestionStatusDotClasses}></span>
-	)
-}
diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx
index 4df599ca..9442e27b 100644
--- a/src/components/Table/Table.stories.mdx
+++ b/src/components/Table/Table.stories.mdx
@@ -720,5 +720,5 @@ export type type ColumnType = StringType | NumberType | ComponentType
 </Canvas>
 
 <Canvas>
-	<Story story={stories.IngestionStatus} name='Ingestion Status' />
+	<Story story={stories.ColoredDot} name='Colored Dot' />
 </Canvas>
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index dd3aa11b..fdffea67 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -7,7 +7,7 @@ import tableData0, { Person } from './fixtures/0_sample_data'
 import tableData1, { File } from './fixtures/1_sample_data'
 import tableData2, { Client } from './fixtures/2_sample_data'
 import tableData3, { Client1 } from './fixtures/3_sample_data'
-import tableData4, { IngestionStatusType } from './fixtures/4_sample_data'
+import tableData4, { Dot } from './fixtures/4_sample_data'
 
 const commonArgTypes = {
 	activeRowKey: {
@@ -252,11 +252,11 @@ Paginated.args = {
 }
 Paginated.argTypes = commonArgTypes
 
-const IngestionStatusTemplate: Story<TableProps<
-	IngestionStatusType
->> = args => <Table<IngestionStatusType> {...args} />
+const ColoredDotTemplate: Story<TableProps<Dot>> = args => (
+	<Table<Dot> {...args} />
+)
 
-export const IngestionStatus = IngestionStatusTemplate.bind({})
-IngestionStatus.args = {
+export const ColoredDot = ColoredDotTemplate.bind({})
+ColoredDot.args = {
 	...tableData4
 }
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
index 2ccaf245..10d22f8f 100644
--- a/src/components/Table/__tests__/Table.test.tsx
+++ b/src/components/Table/__tests__/Table.test.tsx
@@ -1,7 +1,6 @@
 import { act } from 'react-dom/test-utils'
 import moment from 'moment'
 import React from 'react'
-import { Status } from 'components/IngestionStatusDot'
 import { Input as AntDInput, Table as AntDTable } from 'antd'
 import mockData, { Data, dateFormat } from '__mocks__/table_mock_data'
 import mockData0, { Person } from '../fixtures/0_sample_data'
@@ -96,9 +95,9 @@ describe('Table', () => {
 			byte: 1024,
 			date: 1599193037581,
 			icon: 'test',
-			icon_key: 'dassana',
+			iconKey: 'dassana',
 			id: 0,
-			ingestion_status: Status.OK,
+			ingestionStatus: 'test',
 			key: 0,
 			link: 'test',
 			number: 0,
diff --git a/src/components/Table/fixtures/4_sample_data.ts b/src/components/Table/fixtures/4_sample_data.ts
index dd0f6244..bbb058c7 100644
--- a/src/components/Table/fixtures/4_sample_data.ts
+++ b/src/components/Table/fixtures/4_sample_data.ts
@@ -1,53 +1,78 @@
 import { ColumnFormats } from '../types'
-import { Status } from 'components/IngestionStatusDot'
+import { styleguide } from 'components/assets/styles'
+import { ThemeType } from 'components'
 import { ColumnType, ColumnTypes, TableProps } from '../.'
 
-export interface IngestionStatusType {
-	status_label: string
+const {
+	colors: { blacks, oranges }
+} = styleguide
+
+export interface Dot {
+	statusLabel: string
 	id: number | string
-	ingestion_status: Status
+	ingestionStatus: string
 }
 
-const { ingestionStatusDot } = ColumnFormats
+const { coloredDot } = ColumnFormats
 const { component, string } = ColumnTypes
 
 const columns: ColumnType[] = [
 	{
-		dataIndex: 'status_label',
+		dataIndex: 'statusLabel',
 		title: 'Status Label',
 		type: string
 	},
 	{
-		dataIndex: 'ingestion_status',
-		format: ingestionStatusDot,
-		title: 'Ingestion Status Dot',
+		dataIndex: 'ingestionStatus',
+		format: coloredDot,
+		renderProps: {
+			colorMap: {
+				disabled: null,
+				hasIssues: {
+					colors: {
+						[ThemeType.light]: oranges.base,
+						[ThemeType.dark]: oranges.base
+					},
+					tooltipText: 'Test'
+				},
+				needsConfig: {
+					colors: {
+						[ThemeType.light]: blacks['lighten-40'],
+						[ThemeType.dark]: blacks['lighten-70']
+					},
+					tooltipText: 'Needs Config'
+				},
+				ok: null
+			}
+		},
+		title: 'Ingestion Status',
 		type: component
 	}
 ]
 
-const data: IngestionStatusType[] = [
+const data: Dot[] = [
 	{
 		id: 0,
-		ingestion_status: Status.OK,
-		status_label: 'ok'
+		ingestionStatus: 'ok',
+		statusLabel: 'ok'
 	},
 	{
 		id: 1,
-		ingestion_status: Status.NEEDSCONFIG,
-		status_label: 'needs config'
+		ingestionStatus: 'needsConfig',
+		statusLabel: 'needs config'
 	},
 	{
 		id: 2,
-		ingestion_status: Status.DISABLED,
-		status_label: 'paused'
+		ingestionStatus: 'disabled',
+		statusLabel: 'paused'
 	},
 	{
 		id: 3,
-		ingestion_status: Status.HASISSUES,
-		status_label: 'issues'
+		ingestionStatus: 'hasIssues',
+		statusLabel: 'issues'
 	}
 ]
 
-const tableData4: TableProps<IngestionStatusType> = { columns, data }
+const tableData4: TableProps<Dot> = { columns, data }
 
 export default tableData4
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
index 432454c4..1cf2f5ac 100644
--- a/src/components/Table/types.ts
+++ b/src/components/Table/types.ts
@@ -1,3 +1,5 @@
+import { ThemeType } from 'components/assets/styles'
+import { ColoredDotProps } from 'components/ColoredDot'
 import { Key } from 'react'
 import { SharedIconProps } from '../Icon'
 import { SharedLinkProps } from '../Link'
@@ -13,7 +15,7 @@ export enum ColumnFormats {
 	date = 'date',
 	byte = 'byte',
 	icon = 'icon',
-	ingestionStatusDot = 'ingestionStatusDot',
+	coloredDot = 'coloredDot',
 	link = 'link',
 	tag = 'tag',
 	toggle = 'toggle'
@@ -70,8 +72,11 @@ interface ComponentIconType extends PartialComponentType {
 	renderProps: RenderPropsIcon | RenderPropsIconKey
 }
 
-interface ComponentIngestionStatusDotType extends PartialComponentType {
-	format: ColumnFormats.ingestionStatusDot
+interface ComponentColoredDotType extends PartialComponentType {
+	format: ColumnFormats.coloredDot
+	renderProps: {
+		colorMap: Record<string, ColoredDotProps | null>
+	}
 }
 
 interface RenderPropsLink extends Pick<SharedLinkProps, 'target'> {
@@ -93,7 +98,7 @@ interface ComponentToggleType extends PartialComponentType {
 
 type ComponentType =
 	| ComponentIconType
-	| ComponentIngestionStatusDotType
+	| ComponentColoredDotType
 	| ComponentLinkType
 	| ComponentTagType
 	| ComponentToggleType
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index c3c3d8e5..a8d73c35 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -1,8 +1,10 @@
 import { ColumnType as AntDColumnType } from 'antd/es/table'
 import bytes from 'bytes'
+import { ColoredDot } from 'components/ColoredDot'
 import isUndefined from 'lodash/isUndefined'
 import moment from 'moment'
 import React from 'react'
+import { ThemeType } from 'components/assets/styles'
 import {
 	ColumnFormats,
 	ColumnType,
@@ -12,7 +14,6 @@ import {
 	NumberDateType
 } from './types'
 import { Icon, IconName, IconProps } from '../Icon'
-import { IngestionStatusDot, Status } from 'components/IngestionStatusDot'
 import { Link, LinkProps } from '../Link'
 import { Tag, TagProps } from '../Tag'
 import { Toggle, ToggleProps } from '../Toggle'
@@ -82,7 +83,7 @@ More info --> https://fusejs.io/examples.html#nested-search
  */
 export function mapFilterKeys(columns: ColumnType[]) {
 	const { component, number, string } = ColumnTypes
-	const { icon, ingestionStatusDot, link, tag } = ColumnFormats
+	const { icon, coloredDot, link, tag } = ColumnFormats
 
 	const keysArr: (string | string[])[] = ['_FORMATTED_DATA']
 
@@ -93,7 +94,7 @@ export function mapFilterKeys(columns: ColumnType[]) {
 			case component:
 				switch (column.format) {
 					case icon:
-					case ingestionStatusDot:
+					case coloredDot:
 					case link:
 						keysArr.push(dataIndex)
 						break
@@ -173,13 +174,13 @@ function applySort<TableData extends DataId>(
 	antDColumn: AntDColumnType<TableData>
 ) {
 	const { component, number, string } = ColumnTypes
-	const { icon, ingestionStatusDot, link, tag, toggle } = ColumnFormats
+	const { icon, coloredDot, link, tag, toggle } = ColumnFormats
 
 	switch (column.type) {
 		case component:
 			switch (column.format) {
 				case icon:
-				case ingestionStatusDot:
+				case coloredDot:
 				case link:
 					antDColumn.sorter = compareStrings(column)
 					break
@@ -215,15 +216,7 @@ function applyRender<TableData extends DataId>(
 	antDColumn: AntDColumnType<TableData>
 ) {
 	const { component, number } = ColumnTypes
-	const {
-		byte,
-		date,
-		icon,
-		ingestionStatusDot,
-		link,
-		tag,
-		toggle
-	} = ColumnFormats
+	const { byte, date, icon, coloredDot, link, tag, toggle } = ColumnFormats
 
 	switch (column.type) {
 		case component:
@@ -255,10 +248,14 @@ function applyRender<TableData extends DataId>(
 					break
 				}
 
-				case ingestionStatusDot: {
-					antDColumn.render = (record: Status) => (
-						<IngestionStatusDot status={record} />
-					)
+				case coloredDot: {
+					antDColumn.render = (record: string) => {
+						const { colorMap } = column.renderProps
+
+						if (!colorMap[record]) return ''
+
+						return <ColoredDot {...colorMap[record]} />
+					}
 					break
 				}
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 86376b2b..3d61d953 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,7 +4,7 @@ export * from './Button'
 export * from './Form'
 export * from './Input'
 export * from './Icon'
-export * from './IngestionStatusDot'
+export * from './ColoredDot'
 export * from './Link'
 export * from './Notification'
 export * from './NotificationV2'

From df082f0213283eb0da494c2971618480a8e4d631 Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Wed, 2 Dec 2020 18:30:20 -0800
Subject: [PATCH 7/8] feat #159 - Add tests

---
 src/__snapshots__/storybook.test.ts.snap      | 78 +++++++++----------
 .../ColoredDot/ColoredDot.stories.tsx         |  7 +-
 src/components/ColoredDot/ColoredDot.test.tsx | 55 +++++++++++--
 src/components/ColoredDot/index.tsx           |  2 +-
 src/components/Table/__tests__/Table.test.tsx |  2 +-
 src/components/Table/types.ts                 |  1 -
 src/components/Table/utils.tsx                |  1 -
 src/components/index.ts                       |  2 +-
 8 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index d4234fba..0367d0b6 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -182,24 +182,20 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 </div>
 `;
 
-exports[`Storyshots ColoredDot All 1`] = `
+exports[`Storyshots ColoredDot Colored 1`] = `
 <div
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="mainContainer-0-1-7"
+    className="container-0-1-5"
   >
     <p>
       Hover over colored dot to show tooltip.
     </p>
     <span
-      className="coloredDot-0-1-8 dot-0-1-6"
-    />
-    <span
-      className="coloredDot-0-1-9 dot-0-1-6"
-    />
-    <span
-      className="coloredDot-0-1-10 dot-0-1-6"
+      className="coloredDot-0-1-7 dot-0-1-6"
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
     />
   </div>
 </div>
@@ -238,7 +234,7 @@ exports[`Storyshots Input Default 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-1-11 container-d0-0-1-14"
+    className="ant-input container-0-1-8 container-d0-0-1-11"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -257,7 +253,7 @@ exports[`Storyshots Input Error 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-1-11 container-d5-0-1-20 error-0-1-12"
+    className="ant-input container-0-1-8 container-d5-0-1-17 error-0-1-9"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -276,7 +272,7 @@ exports[`Storyshots Input Full Width 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-1-11 container-d4-0-1-19"
+    className="ant-input container-0-1-8 container-d4-0-1-16"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -295,13 +291,13 @@ exports[`Storyshots Input Loading 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-11 container-d3-0-1-17"
+    className="container-0-1-8 container-d3-0-1-14"
   >
     <div
-      className="inputSkeleton-0-1-13"
+      className="inputSkeleton-0-1-10"
     >
       <span
-        className="container-0-1-3 container-d1-0-1-18"
+        className="container-0-1-3 container-d1-0-1-15"
       >
          
       </span>
@@ -315,7 +311,7 @@ exports[`Storyshots Input Placeholder 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <input
-    className="ant-input container-0-1-11 container-d1-0-1-15"
+    className="ant-input container-0-1-8 container-d1-0-1-12"
     data-test="input"
     disabled={false}
     onBlur={[Function]}
@@ -615,31 +611,31 @@ exports[`Storyshots Radio Group Loading 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-22"
+    className="container-0-1-19"
   >
     <div
-      className="skeletonButton-0-1-24"
+      className="skeletonButton-0-1-21"
     >
       <span
-        className="container-0-1-3 container-d2-0-1-25 skeleton-0-1-23"
+        className="container-0-1-3 container-d2-0-1-22 skeleton-0-1-20"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-1-24"
+      className="skeletonButton-0-1-21"
     >
       <span
-        className="container-0-1-3 container-d3-0-1-26 skeleton-0-1-23"
+        className="container-0-1-3 container-d3-0-1-23 skeleton-0-1-20"
       >
          
       </span>
     </div>
     <div
-      className="skeletonButton-0-1-24"
+      className="skeletonButton-0-1-21"
     >
       <span
-        className="container-0-1-3 container-d4-0-1-27 skeleton-0-1-23"
+        className="container-0-1-3 container-d4-0-1-24 skeleton-0-1-20"
       >
          
       </span>
@@ -742,10 +738,10 @@ exports[`Storyshots Select Default 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-29 container-d0-0-1-33"
+    className="container-0-1-26 container-d0-0-1-30"
   >
     <div
-      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-27 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -838,10 +834,10 @@ exports[`Storyshots Select Full Width 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-29 container-d2-0-1-35"
+    className="container-0-1-26 container-d2-0-1-32"
   >
     <div
-      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-27 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -888,7 +884,7 @@ exports[`Storyshots Select Full Width 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-1-32"
+            className="option-0-1-29"
           >
             <span>
               Lorem
@@ -939,10 +935,10 @@ exports[`Storyshots Select Icon 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-29 container-d1-0-1-34"
+    className="container-0-1-26 container-d1-0-1-31"
   >
     <div
-      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow"
+      className="ant-select dropdown-0-1-27 ant-select-single ant-select-show-arrow"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -989,10 +985,10 @@ exports[`Storyshots Select Icon 1`] = `
           className="ant-select-selection-item"
         >
           <div
-            className="option-0-1-32"
+            className="option-0-1-29"
           >
             <span
-              className="icon-0-1-31"
+              className="icon-0-1-28"
             >
               <svg
                 className=""
@@ -1052,10 +1048,10 @@ exports[`Storyshots Select Search 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <div
-    className="container-0-1-29 container-d3-0-1-36"
+    className="container-0-1-26 container-d3-0-1-33"
   >
     <div
-      className="ant-select dropdown-0-1-30 ant-select-single ant-select-show-arrow ant-select-show-search"
+      className="ant-select dropdown-0-1-27 ant-select-single ant-select-show-arrow ant-select-show-search"
       data-test="select"
       onBlur={[Function]}
       onFocus={[Function]}
@@ -1148,7 +1144,7 @@ exports[`Storyshots Skeleton Circle 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-1-3 container-d6-0-1-38"
+    className="container-0-1-3 container-d6-0-1-35"
   >
      
   </span>
@@ -1160,27 +1156,27 @@ exports[`Storyshots Skeleton Count 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-1-3 container-d7-0-1-39"
+    className="container-0-1-3 container-d7-0-1-36"
   >
      
   </span>
   <span
-    className="container-0-1-3 container-d7-0-1-39"
+    className="container-0-1-3 container-d7-0-1-36"
   >
      
   </span>
   <span
-    className="container-0-1-3 container-d7-0-1-39"
+    className="container-0-1-3 container-d7-0-1-36"
   >
      
   </span>
   <span
-    className="container-0-1-3 container-d7-0-1-39"
+    className="container-0-1-3 container-d7-0-1-36"
   >
      
   </span>
   <span
-    className="container-0-1-3 container-d7-0-1-39"
+    className="container-0-1-3 container-d7-0-1-36"
   >
      
   </span>
@@ -1192,7 +1188,7 @@ exports[`Storyshots Skeleton Default 1`] = `
   className="light storyWrapper-0-1-2"
 >
   <span
-    className="container-0-1-3 container-d5-0-1-37"
+    className="container-0-1-3 container-d5-0-1-34"
   >
      
   </span>
diff --git a/src/components/ColoredDot/ColoredDot.stories.tsx b/src/components/ColoredDot/ColoredDot.stories.tsx
index 2130cadf..bb8f104b 100644
--- a/src/components/ColoredDot/ColoredDot.stories.tsx
+++ b/src/components/ColoredDot/ColoredDot.stories.tsx
@@ -4,7 +4,12 @@ import { Meta, Story } from '@storybook/react/types-6-0'
 import React, { FC } from 'react'
 import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
 
+const { light, dark } = ThemeType
+
 export default {
+	argTypes: {
+		classes: { control: { disable: true } }
+	},
 	component: ColoredDot,
 	title: 'ColoredDot'
 } as Meta
@@ -15,8 +20,6 @@ const {
 	spacing
 } = styleguide
 
-const { light, dark } = ThemeType
-
 const useStyles = createUseStyles({
 	container: {
 		...font.body,
diff --git a/src/components/ColoredDot/ColoredDot.test.tsx b/src/components/ColoredDot/ColoredDot.test.tsx
index 28c51192..d9056847 100644
--- a/src/components/ColoredDot/ColoredDot.test.tsx
+++ b/src/components/ColoredDot/ColoredDot.test.tsx
@@ -1,21 +1,62 @@
 import React from 'react'
-import { ColoredDot } from '.'
+import { ThemeType } from 'components/assets/styles'
+import { Tooltip } from 'antd'
+import { ColoredDot, ColoredDotProps } from '.'
 import { mount, ReactWrapper } from 'enzyme'
 
+const { light, dark } = ThemeType
+
+const MOCK_COLORS = { [dark]: 'red', [light]: 'red' }
+const MOCK_TOOLTIP_TEXT = 'Hi I am color'
+
 let wrapper: ReactWrapper
 
+const mountWrapper = (props: ColoredDotProps) =>
+	(wrapper = mount(
+		<div>
+			<ColoredDot {...props} />
+		</div>
+	))
+
 describe('ColoredDot', () => {
 	beforeEach(() => {
-		// wrapper = mount(<ColoredDot />)
+		mountWrapper({})
 	})
 
 	it('renders', () => {
-		// expect(wrapper).toHaveLength(1)
+		expect(wrapper).toHaveLength(1)
+	})
+
+	it('renders without a tooltip if both tooltip text and colors are not provided', () => {
+		expect(wrapper.find(Tooltip)).toHaveLength(0)
+	})
+
+	it('renders with a tooltip if both tooltip text and colors provided', () => {
+		mountWrapper({
+			colors: MOCK_COLORS,
+			tooltipText: MOCK_TOOLTIP_TEXT
+		})
+
+		expect(wrapper.find(Tooltip)).toHaveLength(1)
 	})
 
-	it('has correct conditional classnames', () => {
-		// expect(wrapper.find('span').hasClass(/hasIssues-*/)).toBeTruthy()
-		// wrapper = mount(<ColoredDot />)
-		// expect(wrapper.find('span').hasClass(/needsConfig-*/)).toBeTruthy()
+	it('renders a dot with background color transparent if no colors are provided', () => {
+		const dot = wrapper.find(ColoredDot)
+
+		const style = window.getComputedStyle(dot.getDOMNode())
+
+		expect(style.background).toBe('transparent')
+	})
+
+	it('renders a dot with correct background color if colors are provided', () => {
+		mountWrapper({
+			colors: MOCK_COLORS
+		})
+
+		const dot = wrapper.find(ColoredDot)
+
+		const style = window.getComputedStyle(dot.getDOMNode())
+
+		expect(style.background).toBe('red')
 	})
 })
diff --git a/src/components/ColoredDot/index.tsx b/src/components/ColoredDot/index.tsx
index 0a4b72fb..b3690600 100644
--- a/src/components/ColoredDot/index.tsx
+++ b/src/components/ColoredDot/index.tsx
@@ -38,7 +38,7 @@ export interface ColoredDotProps {
 export const ColoredDot: FC<ColoredDotProps> = ({
 	classes = [],
 	colors,
-	tooltipText = ''
+	tooltipText
 }: ColoredDotProps) => {
 	const componentClasses = createUseStyles({
 		colors
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
index 10d22f8f..e957f8e1 100644
--- a/src/components/Table/__tests__/Table.test.tsx
+++ b/src/components/Table/__tests__/Table.test.tsx
@@ -94,10 +94,10 @@ describe('Table', () => {
 			],
 			byte: 1024,
 			date: 1599193037581,
+			dot: 'test',
 			icon: 'test',
 			iconKey: 'dassana',
 			id: 0,
-			ingestionStatus: 'test',
 			key: 0,
 			link: 'test',
 			number: 0,
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
index 1cf2f5ac..0b071d14 100644
--- a/src/components/Table/types.ts
+++ b/src/components/Table/types.ts
@@ -1,4 +1,3 @@
-import { ThemeType } from 'components/assets/styles'
 import { ColoredDotProps } from 'components/ColoredDot'
 import { Key } from 'react'
 import { SharedIconProps } from '../Icon'
diff --git a/src/components/Table/utils.tsx b/src/components/Table/utils.tsx
index a8d73c35..73dee61f 100644
--- a/src/components/Table/utils.tsx
+++ b/src/components/Table/utils.tsx
@@ -4,7 +4,6 @@ import { ColoredDot } from 'components/ColoredDot'
 import isUndefined from 'lodash/isUndefined'
 import moment from 'moment'
 import React from 'react'
-import { ThemeType } from 'components/assets/styles'
 import {
 	ColumnFormats,
 	ColumnType,
diff --git a/src/components/index.ts b/src/components/index.ts
index 3d61d953..a2d323fc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,10 +1,10 @@
 export * from './Avatar'
 export * from './assets/styles'
 export * from './Button'
+export * from './ColoredDot'
 export * from './Form'
 export * from './Input'
 export * from './Icon'
-export * from './ColoredDot'
 export * from './Link'
 export * from './Notification'
 export * from './NotificationV2'

From 6200e8385b58bfd679106a022177ddb80e14287d Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Wed, 2 Dec 2020 20:07:45 -0800
Subject: [PATCH 8/8] feat #159 - Add Table pagination prop

---
 src/components/Table/Table.stories.mdx        | 15 ++++++------
 src/components/Table/Table.stories.tsx        |  9 ++++++-
 src/components/Table/__tests__/Table.test.tsx | 24 +++++++++++++++++++
 src/components/Table/index.tsx                | 22 ++++++++++++-----
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx
index 9442e27b..34b84062 100644
--- a/src/components/Table/Table.stories.mdx
+++ b/src/components/Table/Table.stories.mdx
@@ -42,6 +42,8 @@ import {
 	TableProps
 } from '@dassana-io/web-components'
 
+const { number, string } = ColumnTypes
+
 // You specify the data object interface.
 export interface Person {
 	name: string
@@ -49,8 +51,6 @@ export interface Person {
 	age: number
 }
 
-const { number, string } = ColumnTypes
-
 const columns: ColumnType[] = [
 	{
 		dataIndex: 'name',
@@ -261,6 +261,9 @@ import {
 	TableProps
 } from '@dassana-io/web-components'
 
+const { number, string } = ColumnTypes
+const { byte, date } = ColumnFormats
+
 export interface File {
 	created_at: number
 	data_size: number
@@ -270,9 +273,6 @@ export interface File {
 	updated_at?: number // Pass an optional type if there will be missing data
 }
 
-const { number, string } = ColumnTypes
-const { byte, date } = ColumnFormats
-
 const columns: ColumnType[] = [
 	{
 		dataIndex: 'file_name',
@@ -455,6 +455,9 @@ import {
 	TableProps
 } from '@dassana-io/web-components'
 
+const { component, number, string } = ColumnTypes
+const { date, icon, link, toggle, tag } = ColumnFormats
+
 export interface Client {
 	admin_access: boolean
 	company: IconName
@@ -465,8 +468,6 @@ export interface Client {
 	start_date: number
 }
 
-const { component, number, string } = ColumnTypes
-const { date, icon, link, toggle, tag } = ColumnFormats
 
 const columns: ColumnType[] = [
 	{
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index fdffea67..137d6770 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -28,6 +28,10 @@ const commonArgTypes = {
 			}
 		}
 	},
+	pagination: {
+		description:
+			'Optional prop to show or hide pagination. Pagination is present on the bottom right by default.'
+	},
 	searchProps: {
 		control: 'object',
 		defaultValue: { placeholder: '', placement: 'left' }, // This isn't the default, it's a placeholder for storybook
@@ -240,6 +244,8 @@ const paginatedData = [
 	...cloneDeep(tableData1.data.slice(1, 4)),
 	...cloneDeep(tableData1.data),
 	...cloneDeep(tableData1.data.slice(0, 2)),
+	...cloneDeep(tableData1.data.slice(0, 2)),
+	...cloneDeep(tableData1.data.slice(0, 2)),
 	...cloneDeep(tableData1.data)
 ]
 
@@ -258,5 +264,6 @@ const ColoredDotTemplate: Story<TableProps<Dot>> = args => (
 
 export const ColoredDot = ColoredDotTemplate.bind({})
 ColoredDot.args = {
-	...tableData4
+	...tableData4,
+	pagination: false
 }
diff --git a/src/components/Table/__tests__/Table.test.tsx b/src/components/Table/__tests__/Table.test.tsx
index e957f8e1..bf16ef4b 100644
--- a/src/components/Table/__tests__/Table.test.tsx
+++ b/src/components/Table/__tests__/Table.test.tsx
@@ -230,3 +230,27 @@ describe('Table onRowClick, activeRowKey', () => {
 		expect(tableRow.getDOMNode().classList.toString()).toContain('active')
 	})
 })
+
+describe('Table pagination', () => {
+	it('does not pass pagination prop to AntD Table if it is true', () => {
+		wrapper = mount(
+			createTable<Person>({
+				...mockData0,
+				pagination: true
+			})
+		)
+
+		expect(wrapper.find(AntDTable).props().pagination).toBeUndefined()
+	})
+
+	it('passes pagination prop to AntD Table as if it is false', () => {
+		wrapper = mount(
+			createTable<Person>({
+				...mockData0,
+				pagination: false
+			})
+		)
+
+		expect(wrapper.find(AntDTable).props().pagination).toBe(false)
+	})
+})
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 02cb562c..a4bc31ef 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -54,6 +54,10 @@ export interface TableProps<Data> extends CommonComponentProps {
 	 * Optional callback that runs when a table row is clicked
 	 */
 	onRowClick?: OnRowClick<TableData<Data>>
+	/**
+	 * Optional prop to show or hide pagination. Pagination is present on the bottom right by default.
+	 */
+	pagination?: boolean
 	/**
 	 * Optional prop to enable/disable table search
 	 */
@@ -72,6 +76,7 @@ export const Table = <Data,>({
 	data,
 	dataTag,
 	onRowClick,
+	pagination,
 	search = true,
 	searchProps = {} as SearchProps
 }: TableProps<Data>) => {
@@ -138,14 +143,19 @@ export const Table = <Data,>({
 		setFilteredData(filteredData)
 	}
 
-	let optionalProps = {}
+	const optionalProps: Record<string, any> = {}
 
 	if (onRowClick) {
-		optionalProps = {
-			onRow: (record: Record<string, any>, rowIndex: number) => ({
-				onClick: () => onRowClick(mappedData[record.id], rowIndex)
-			})
-		}
+		optionalProps.onRow = (
+			record: Record<string, any>,
+			rowIndex: number
+		) => ({
+			onClick: () => onRowClick(mappedData[record.id], rowIndex)
+		})
+	}
+
+	if (!pagination) {
+		optionalProps.pagination = pagination
 	}
 
 	return (