feat #171 - Table skeleton loader, fix #173 - Overwrite antd Table styles

src/components/Popover/Popover.stories.tsx

@@ -3,21 +3,25 @@ import { Button } from '../Button'
 import { Icon } from '../Icon'
 import { placementOptions } from '../utils'
 import { SbTheme } from '../../../.storybook/preview'
+import { styleguide } from 'components/assets/styles'
 import { useTheme } from 'react-jss'
 import { Meta, Story } from '@storybook/react/types-6-0'
 import { Popover, PopoverProps } from './index'
 import React, { FC } from 'react'
 
+const { spacing } = styleguide
+
 export default {
 	argTypes: {
 		children: { control: { disable: true } },
+		classes: { control: { disable: true } },
 		content: {
 			control: { disable: true },
 			defaultValue: (
-				<>
+				<div style={{ padding: `${spacing.s}px ${spacing.m}px` }}>
 					<div style={{ paddingBottom: 10 }}>View account info</div>
 					<Button onClick={() => action('onClick')}>Click Me</Button>
-				</>
+				</div>
 			)
 		},
 		placement: {

src/components/Popover/utils.ts

@@ -40,7 +40,8 @@ export const generatePopoverStyles = (themeType: ThemeType) => {
 				'& > .ant-popover-inner': {
 					'& > .ant-popover-inner-content': {
 						color: base.color,
-						fontWeight: 300
+						fontWeight: 300,
+						padding: 0
 					},
 					'& > .ant-popover-title': {
 						borderBottomColor: base.borderColor,

src/components/Skeleton/index.tsx

@@ -70,7 +70,7 @@ interface DefaultSkeletonProps {
 	/**
 	 * Skeleton width. If undefined, skeleton will span the width of parent container. **Note**: width is a required prop for a circle skeleton.
 	 */
-	width?: number
+	width?: number | string
 }
 
 interface CircleSkeletonProps

src/components/Table/Table.stories.mdx

@@ -8,7 +8,7 @@ The `Table` component creates a table from a provided data source. It allows for
 
 The following examples start from a basic table and don't show all possible types of data that the table can render. If you'd like to view all possible column types and formats in one place, [click here.](?path=/docs/table--mixed#columntype--all-column-types-and-formats)
 
-<Meta title='Table' component={Table} />
+<Meta decorators={[stories.Decorator]} title='Table' component={Table} />
 
 ## Simple Usage
 

src/components/Table/Table.stories.tsx

@@ -1,14 +1,20 @@
 import { action } from '@storybook/addon-actions'
+import { createUseStyles } from 'react-jss'
 import { Story } from '@storybook/react/types-6-0'
 import tableData4 from './fixtures/4_sample_data'
 import { DataId, Table, TableProps } from '.'
 import React, { Key, useState } from 'react'
+import { styleguide, themes, ThemeType } from 'components/assets/styles'
 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 tableData5, { Dot } from './fixtures/5_sample_data'
 
+const { spacing } = styleguide
+
+const { dark, light } = ThemeType
+
 const commonArgTypes = {
 	activeRowKey: {
 		control: { disable: true }
@@ -47,6 +53,33 @@ const commonArgTypes = {
 	}
 }
 
+const useStyles = createUseStyles({
+	decorator: {
+		background: themes[light].background.secondary,
+		height: `calc(100vh - ${spacing.m * 2}px)`,
+		padding: spacing.l,
+		width: `calc(100vw - ${spacing.m * 2}px)`
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $decorator': {
+				background: themes[dark].background.secondary
+			}
+		}
+	}
+})
+
+export const Decorator = (TableStory: Story) => {
+	const classes = useStyles()
+
+	return (
+		<div className={classes.decorator}>
+			<TableStory />
+		</div>
+	)
+}
+
 const DecoratedTableStory = <Data extends DataId>(props: TableProps<Data>) => {
 	const [activeRowKey, setActiveRowKey] = useState<Key>('')
 
@@ -239,3 +272,4 @@ const ColoredDotTemplate: Story<TableProps<Dot>> = args => (
 )
 export const ColoredDot = ColoredDotTemplate.bind({})
 ColoredDot.args = tableData5
+ColoredDot.argTypes = commonArgTypes

src/components/Table/TableSkeleton.tsx

@@ -0,0 +1,158 @@
+import { createUseStyles } from 'react-jss'
+import random from 'lodash/random'
+import { Skeleton } from '../Skeleton'
+import { tablePalette } from './styles'
+import times from 'lodash/times'
+import { ColumnFormats, ColumnType, ColumnTypes } from './types'
+import React, { FC } from 'react'
+import { styleguide, ThemeType } from 'components/assets/styles'
+
+const { spacing } = styleguide
+
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+	skeleton: {
+		maxWidth: 300
+	},
+	table: {
+		borderCollapse: 'separate',
+		borderSpacing: 0,
+		tableLayout: 'fixed',
+		textAlign: 'left',
+		width: '100%'
+	},
+	td: {
+		'&:first-of-type': {
+			paddingLeft: spacing.l
+		},
+		'&:last-of-type': {
+			paddingRight: spacing.l
+		},
+		background: tablePalette[light].td.base.background,
+		borderBottom: `1px solid ${tablePalette[light].td.base.border}`,
+		height: 54,
+		padding: `0 ${spacing.m}px`
+	},
+	th: {
+		'&:first-of-type': {
+			paddingLeft: spacing.l
+		},
+		'&:last-of-type': {
+			paddingRight: spacing.l
+		},
+		background: tablePalette[light].th.base.background,
+		height: 55,
+		padding: `0 ${spacing.m}px`
+	},
+	// eslint-disable-next-line sort-keys
+	'@global': {
+		[`.${dark}`]: {
+			'& $table': {},
+			'& $td': {
+				background: tablePalette[dark].td.base.background,
+				borderBottom: `1px solid ${tablePalette[dark].td.base.border}`
+			},
+			'& $th': {
+				background: tablePalette[dark].th.base.background
+			}
+		}
+	}
+})
+
+// ------------------------------------
+
+const THeaderCellSkeleton = () => {
+	const classes = useStyles()
+
+	return (
+		<th className={classes.th}>
+			<Skeleton
+				classes={[classes.skeleton]}
+				height={15}
+				width={`${random(20, 80)}%`}
+			/>
+		</th>
+	)
+}
+
+// ------------------------------------
+
+const mappedSkeletonProps: Record<string, any> = {
+	[ColumnFormats.coloredDot]: { circle: true, width: 15 },
+	[ColumnFormats.icon]: { width: 50 },
+	[ColumnFormats.toggle]: { width: 50 },
+	[ColumnTypes.number]: { width: 100 }
+}
+
+interface TDataCellSkeletonProps extends Pick<TableSkeletonProps, 'columns'> {
+	index: number
+}
+
+const TDataCellSkeleton: FC<TDataCellSkeletonProps> = ({
+	columns,
+	index
+}: TDataCellSkeletonProps) => {
+	const classes = useStyles()
+
+	const format = columns[index].format
+	const type = columns[index].type
+
+	let props = {}
+
+	if (mappedSkeletonProps[type]) {
+		props = mappedSkeletonProps[type]
+	} else {
+		props =
+			format && mappedSkeletonProps[format]
+				? mappedSkeletonProps[format]
+				: { width: `${random(10, 100)}%` }
+	}
+
+	return (
+		<td className={classes.td}>
+			<Skeleton classes={[classes.skeleton]} height={15} {...props} />
+		</td>
+	)
+}
+
+// ------------------------------------
+
+interface TableSkeletonProps {
+	columns: ColumnType[]
+	rowCount: number
+}
+
+export const TableSkeleton: FC<TableSkeletonProps> = ({
+	columns,
+	rowCount
+}: TableSkeletonProps) => {
+	const classes = useStyles()
+
+	return (
+		<table className={classes.table}>
+			<thead>
+				<tr>
+					{times(columns.length, (j: number) => {
+						return <THeaderCellSkeleton key={j} />
+					})}
+				</tr>
+			</thead>
+			<tbody>
+				{times(rowCount, (i: number) => {
+					return (
+						<tr key={i}>
+							{times(columns.length, (j: number) => (
+								<TDataCellSkeleton
+									columns={columns}
+									index={j}
+									key={j}
+								/>
+							))}
+						</tr>
+					)
+				})}
+			</tbody>
+		</table>
+	)
+}

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

@@ -1,11 +1,12 @@
 import { act } from 'react-dom/test-utils'
 import moment from 'moment'
 import React from 'react'
+import { TableSkeleton } from '../TableSkeleton'
 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'
 import mockData1, { File } from '../fixtures/4_sample_data'
-import { mount, ReactWrapper } from 'enzyme'
+import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme'
 import { Table, TableProps } from '..'
 
 /* Helper functions */
@@ -129,6 +130,19 @@ describe('Table props', () => {
 			expect.arrayContaining(mockData0.columns)
 		)
 	})
+
+	it('throws an error if passed skeletonRowCount prop is less than 1', () => {
+		expect(() =>
+			shallow(
+				<Table<Person>
+					columns={mockData0.columns}
+					data={[]}
+					loading
+					skeletonRowCount={0}
+				/>
+			)
+		).toThrow()
+	})
 })
 
 describe('Table search and searchProps', () => {
@@ -163,9 +177,9 @@ describe('Table search and searchProps', () => {
 
 	it('it renders the search bar to the left by default', async () => {
 		const table = wrapper.find(Table)
-		const searchBar = table.find('input')
+		const searchBarWrapper = table.find('[className*="searchBarWrapper"]')
 
-		const style = window.getComputedStyle(searchBar.getDOMNode())
+		const style = window.getComputedStyle(searchBarWrapper.getDOMNode())
 
 		expect(style.alignSelf).toBe('flex-start')
 	})
@@ -179,9 +193,9 @@ describe('Table search and searchProps', () => {
 		)
 
 		const table = wrapper.find(Table)
-		const searchBar = table.find('input')
+		const searchBarWrapper = table.find('[className*="searchBarWrapper"]')
 
-		const style = window.getComputedStyle(searchBar.getDOMNode())
+		const style = window.getComputedStyle(searchBarWrapper.getDOMNode())
 
 		expect(style.alignSelf).toBe('flex-end')
 	})
@@ -233,12 +247,6 @@ describe('Table onRowClick, activeRowKey', () => {
 
 describe('Table pagination', () => {
 	it('does not show pagination if there are less than 10 rows', () => {
-		wrapper = mount(
-			createTable<Person>({
-				...mockData0
-			})
-		)
-
 		expect(wrapper.find(AntDTable).props().pagination).toBe(false)
 
 		expect(wrapper.find('.ant-pagination').exists()).toBeFalsy()
@@ -258,3 +266,13 @@ describe('Table pagination', () => {
 		expect(wrapper.find('.ant-pagination').exists()).toBeTruthy()
 	})
 })
+
+describe('Table loading', () => {
+	it('renders a TableSkeleton if loading prop is passed as true', () => {
+		const wrapper: ShallowWrapper = shallow(
+			<Table<Person> columns={mockData0.columns} data={[]} loading />
+		)
+
+		expect(wrapper.find(TableSkeleton)).toHaveLength(1)
+	})
+})

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

@@ -0,0 +1,22 @@
+import mockData from '__mocks__/table_mock_data'
+import React from 'react'
+import { TableSkeleton } from '../TableSkeleton'
+import { mount, ReactWrapper } from 'enzyme'
+
+let wrapper: ReactWrapper
+
+beforeEach(() => {
+	wrapper = mount(<TableSkeleton columns={mockData.columns} rowCount={5} />)
+})
+
+describe('TreeSkeleton', () => {
+	it('renders', () => {
+		expect(wrapper.find(TableSkeleton)).toHaveLength(1)
+	})
+
+	it('renders correct number of skeleton Table rows', () => {
+		const tBody = wrapper.find(TableSkeleton).find('tbody')
+
+		expect(tBody.find('tr')).toHaveLength(5)
+	})
+})