diff --git a/src/Table/__stories__/Table.stories.js b/src/Table/__stories__/Table.stories.js index 200f4b8e..7e88de77 100644 --- a/src/Table/__stories__/Table.stories.js +++ b/src/Table/__stories__/Table.stories.js @@ -17,6 +17,7 @@ storiesOf('Table', module) }) .add('default', () => { const striped = boolean('Striped', false, 'State'); + const isHoverable = boolean('Hoverable', false, 'State'); const selectableRow = boolean('Selectable row', false, 'State'); const dishRowSortable = boolean('Dish row is sortable', true, 'State'); const priceRowSortable = boolean('Price row is sortable', true, 'State'); @@ -94,12 +95,14 @@ storiesOf('Table', module) colsDef={getColsDef(taxCountryCodeValue)} rowsDef={rowsDef} striped={striped} + isHoverable={isHoverable} /> ); }) .add('Scrollable table', () => { const striped = boolean('Striped', false, 'State'); + const isHoverable = boolean('Hoverable', false, 'State'); const selectableRow = boolean('Selectable row', false, 'State'); const dishRowSortable = boolean('Dish row is sortable', true, 'State'); const priceRowSortable = boolean('Price row is sortable', true, 'State'); @@ -287,6 +290,7 @@ storiesOf('Table', module) [ { title: 'DISH', + isRowHeader: true, value: d => d.code, isSortable: true, align: 'left', @@ -249,4 +250,20 @@ describe('
', () => { expect(tableContainer).toHaveStyleRule('overflow', 'scroll'); }); + + test('should table be hoverable', () => { + const { getByText, getAllByTestId } = render( +
, + ); + + const sortedBodyRows = getAllByTestId('body-row'); + + expect(sortedBodyRows[0]).toHaveTextContent(/tartare de boeuf/i); + + fireEvent.mouseOver(sortedBodyRows[0]); + + const tartareRow = getByText(/tartare de boeuf/i); + + expect(tartareRow).toHaveStyleRule(`background-color: ${Theme.palette.veryLightGrey}`); + }); }); diff --git a/src/Table/elements.js b/src/Table/elements.js index 45bd1d3f..49713d42 100644 --- a/src/Table/elements.js +++ b/src/Table/elements.js @@ -129,9 +129,6 @@ export const Body = styled.tbody` &:last-child { padding-right: 3rem; } - &:hover { - background-color: ${({ theme: { palette } }) => palette.veryLightGrey}; - } } `; @@ -163,6 +160,17 @@ export const BodyRow = styled(Row)` box-shadow: inset 3px 0px 0 0px ${({ theme: { palette } }) => palette.primary.default}; } `}; + + ${({ isHoverable }) => + isHoverable && + css` + &:hover { + & > th, + & > td { + background-color: ${({ theme: { palette } }) => palette.veryLightGrey}; + } + } + `} `; export const RowHeader = styled.th` @@ -198,10 +206,6 @@ export const Footer = styled.tfoot` td { font-feature-settings: 'tnum'; - - &:hover { - background-color: ${({ theme: { palette } }) => palette.veryLightGrey}; - } } th, @@ -220,6 +224,7 @@ export const Footer = styled.tfoot` top: 0; width: 100%; border-top: 1px solid ${({ theme: { palette } }) => palette.veryLightBlue}; + box-sizing: border-box; } height: 5.2rem; @@ -246,6 +251,17 @@ export const Footer = styled.tfoot` td:last-of-type { padding: 0 3rem 0 0.5rem; } + + ${({ isHoverable }) => + isHoverable && + css` + tr:hover { + & > th, + & > td { + background-color: ${({ theme: { palette } }) => palette.veryLightGrey}; + } + } + `} `; // Table Container diff --git a/src/Table/index.js b/src/Table/index.js index 027a8b48..c87b9690 100644 --- a/src/Table/index.js +++ b/src/Table/index.js @@ -134,6 +134,7 @@ class Table extends PureComponent { colsDef, data, isScrollable, + isHoverable, rowsDef: { selectable }, striped, } = this.props; @@ -184,6 +185,7 @@ class Table extends PureComponent { selected={selected === key} striped={striped} onClick={() => this.handleRowSelect(item, key)} + isHoverable={isHoverable} > {colsDef.map(({ isRowHeader, value, format, align }, columnIndex) => isRowHeader ? ( @@ -212,10 +214,10 @@ class Table extends PureComponent { * @return {jsx} */ renderFooter() { - const { colsDef, dataTotal, isScrollable } = this.props; + const { colsDef, dataTotal, isScrollable, isHoverable } = this.props; return ( - {colsDef.map(({ isRowHeader, total, format, align }, columnIndex) => isRowHeader ? ( @@ -303,6 +305,12 @@ Table.propTypes = { **/ isScrollable: bool, + /** + * Define if the table is isHoverable or not. + * When the table is isHoverable if a user hover a row it background change increasing contrast with others improving readability. + **/ + isHoverable: bool, + /** Rows definition */ rowsDef: shape({ onSelect: func, @@ -321,6 +329,7 @@ Table.defaultProps = { dataTotal: null, height: 'initial', isScrollable: false, + isHoverable: false, rowsDef: { onSelect: () => {}, selectable: false,