feat - Add Table row click handler

package.json

@@ -11,7 +11,7 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^4.2.2",
-		"@storybook/addon-cssresources": "^6.0.26",
+		"@storybook/addon-cssresources": "^6.0.27",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.5.0",
 		"@testing-library/react-hooks": "^3.4.2",
@@ -76,14 +76,14 @@
 		"@rollup/plugin-commonjs": "^15.1.0",
 		"@rollup/plugin-image": "^2.0.5",
 		"@rollup/plugin-node-resolve": "^9.0.0",
-		"@storybook/addon-actions": "^6.0.26",
-		"@storybook/addon-essentials": "^6.0.26",
-		"@storybook/addon-links": "^6.0.26",
-		"@storybook/addon-storyshots": "^6.0.26",
-		"@storybook/addons": "^6.0.26",
+		"@storybook/addon-actions": "^6.0.27",
+		"@storybook/addon-essentials": "^6.0.27",
+		"@storybook/addon-links": "^6.0.27",
+		"@storybook/addon-storyshots": "^6.0.27",
+		"@storybook/addons": "^6.0.27",
 		"@storybook/preset-create-react-app": "^3.1.4",
-		"@storybook/react": "^6.0.26",
-		"@storybook/theming": "^6.0.26",
+		"@storybook/react": "^6.0.27",
+		"@storybook/theming": "^6.0.27",
 		"@svgr/rollup": "^5.4.0",
 		"@types/bytes": "^3.1.0",
 		"@types/classnames": "^2.2.10",

src/__snapshots__/storybook.test.ts.snap

@@ -211,68 +211,56 @@ exports[`Storyshots Input Default 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d0-0-2-8"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d0-0-2-8"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
 exports[`Storyshots Input Error 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d5-0-2-14"
-  >
-    <input
-      className="ant-input error-0-2-6"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d5-0-2-14 error-0-2-6"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
 exports[`Storyshots Input Full Width 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d4-0-2-13"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d4-0-2-13"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -300,22 +288,18 @@ exports[`Storyshots Input Placeholder 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d1-0-2-9"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="Search..."
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d1-0-2-9"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder="Search..."
+    type="text"
+    value=""
+  />
 </div>
 `;
 

src/components/Input/index.tsx

@@ -90,15 +90,13 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 	return loading ? (
 		<InputSkeleton {...props} />
 	) : (
-		<div className={componentClasses.container}>
-			<AntDInput
-				className={inputClasses}
-				disabled={disabled}
-				placeholder={placeholder}
-				type={type}
-				{...controlledCmpProps}
-				{...getDataTestAttributeProp('input', dataTag)}
-			/>
-		</div>
+		<AntDInput
+			className={cn(componentClasses.container, inputClasses)}
+			disabled={disabled}
+			placeholder={placeholder}
+			type={type}
+			{...controlledCmpProps}
+			{...getDataTestAttributeProp('input', dataTag)}
+		/>
 	)
 }

src/components/Table/Table.stories.tsx

@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 import { Story } from '@storybook/react/types-6-0'
 import { Table, TableProps } from '.'
@@ -6,14 +7,35 @@ import tableData1, { File } from './fixtures/1_sample_data'
 import tableData2, { Client } from './fixtures/2_sample_data'
 import tableData3, { Client1 } from './fixtures/3_sample_data'
 
+const commonArgTypes = {
+	onRowClick: {
+		control: { disable: true },
+		defaultValue: action('onRowClick'),
+		description: 'Optional callback that runs when a table row is clicked.',
+		table: {
+			type: {
+				detail: `
+        interface OnRowClick {
+  (data: Record<string, any>, rowIndex: number): void
+}`
+			}
+		}
+	},
+	searchProps: {
+		control: { disable: true }
+	}
+}
+
 const SimpleTemplate: Story<TableProps<Person>> = args => (
 	<Table<Person> {...args} />
 )
 export const Simple = SimpleTemplate.bind({})
 Simple.args = {
-	...tableData0
+	...tableData0,
+	searchProps: { placeholder: 'Search...', placement: 'right' }
 }
 Simple.argTypes = {
+	...commonArgTypes,
 	columns: {
 		description:
 			'Array of column objects. Click to view a simplified partial ColumnType interface used for this simple table.',
@@ -52,6 +74,7 @@ Number.args = {
 	...tableData1
 }
 Number.argTypes = {
+	...commonArgTypes,
 	columns: {
 		description:
 			/* eslint-disable quotes */
@@ -114,6 +137,7 @@ Mixed.args = {
 	...tableData2
 }
 Mixed.argTypes = {
+	...commonArgTypes,
 	columns: {
 		control: { disable: true },
 		description: `Array of column objects. [Click to view a partial ColumnType interface.](/?path=/docs/table--simple#representing-columntype-with-typescript-1)`
@@ -146,6 +170,7 @@ MissingCells.args = {
 	...tableData3
 }
 MissingCells.argTypes = {
+	...commonArgTypes,
 	columns: {
 		control: { disable: true },
 		description: `Array of column objects. [Click to view a partial ColumnType interface.](/?path=/docs/table--simple#representing-columntype-with-typescript-1)`

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 { Input as AntDInput, Table as AntDTable } from 'antd'
 import mockData, { DataType, dateFormat } from '__mocks__/table_mock_data'
 import mockData0, { Person } from '../fixtures/0_sample_data'
 import { mount, ReactWrapper } from 'enzyme'
@@ -108,7 +109,7 @@ describe('Table props', () => {
 	})
 })
 
-describe('Table search', () => {
+describe('Table search and searchProps', () => {
 	it('renders by default', () => {
 		const table = wrapper.find(Table)
 		const searchBar = table.find('input')
@@ -137,4 +138,61 @@ describe('Table search', () => {
 
 		expect(renderedData(wrapper)).toHaveLength(2)
 	})
+
+	it('it renders the search bar to the left by default', async () => {
+		const table = wrapper.find(Table)
+		const searchBar = table.find('input')
+
+		const style = window.getComputedStyle(searchBar.getDOMNode())
+
+		expect(style.alignSelf).toBe('flex-start')
+	})
+
+	it('it renders the search bar to the right if searchProps.placement is passed as right', async () => {
+		wrapper = mount(
+			createTable<DataType>({
+				...mockData,
+				searchProps: { placement: 'right' }
+			})
+		)
+
+		const table = wrapper.find(Table)
+		const searchBar = table.find('input')
+
+		const style = window.getComputedStyle(searchBar.getDOMNode())
+
+		expect(style.alignSelf).toBe('flex-end')
+	})
+
+	it('correctly passes the placeholder prop to the searchbar input', () => {
+		wrapper = mount(
+			createTable<DataType>({
+				...mockData,
+				searchProps: { placeholder: 'Mock placeholder' }
+			})
+		)
+
+		expect(wrapper.find(AntDInput).props().placeholder).toEqual(
+			'Mock placeholder'
+		)
+	})
+})
+
+describe('Table onRowClick', () => {
+	it('calls onRowClick handler when a table row is clicked', () => {
+		const mockOnRowClick = jest.fn()
+
+		wrapper = mount(
+			createTable<Person>({ ...mockData0, onRowClick: mockOnRowClick })
+		)
+
+		const tableRow = wrapper.find('tbody').find('tr').at(1)
+
+		tableRow.simulate('click')
+		expect(mockOnRowClick).toHaveBeenCalledTimes(1)
+	})
+
+	it('does not pass an onRow prop if onRowClick prop does not exist', () => {
+		expect(wrapper.find(AntDTable).props().onRow).toBeFalsy()
+	})
 })

src/components/Table/__tests__/utils.test.tsx

@@ -40,6 +40,7 @@ describe('processData', () => {
 			{
 				_FORMATTED_DATA: [
 					'1MB',
+					'2 months ago',
 					formatDate(1598400668681, dateFormat0),
 					null
 				],
@@ -51,6 +52,7 @@ describe('processData', () => {
 			{
 				_FORMATTED_DATA: [
 					'1.91MB',
+					'a day ago',
 					formatDate(1582330066861, dateFormat0),
 					null
 				],
@@ -62,6 +64,7 @@ describe('processData', () => {
 			{
 				_FORMATTED_DATA: [
 					'1KB',
+					null,
 					formatDate(1553223066861, dateFormat0),
 					formatDate(1582330063211, dateFormat1)
 				],
@@ -74,6 +77,7 @@ describe('processData', () => {
 			{
 				_FORMATTED_DATA: [
 					'4MB',
+					null,
 					formatDate(1511022066861, dateFormat0),
 					null
 				],
@@ -85,6 +89,7 @@ describe('processData', () => {
 			{
 				_FORMATTED_DATA: [
 					'2KB',
+					null,
 					formatDate(1515021066861, dateFormat0),
 					formatDate(1515121066861, dateFormat1)
 				],