From 03f6368711c94489c4bd449bee61b3e4bae36e84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:23:35 +0100 Subject: [PATCH 01/23] remove obsolete props from Table --- src/components/Table/Table.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js index 8229f174..15d5a826 100644 --- a/src/components/Table/Table.js +++ b/src/components/Table/Table.js @@ -17,24 +17,18 @@ const StyledCutout = styled(Cutout)` } `; -const Table = ({ className, children, style, ...otherProps }) => ( +const Table = ({ children, ...otherProps }) => ( - - {children} - + {children} ); Table.defaultProps = { - children: null, - className: '', - style: {} + children: null }; Table.propTypes = { - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]) + children: propTypes.node }; export default Table; From 2b38facd3956c5be58a91148f78efb62f32b9fe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:23:55 +0100 Subject: [PATCH 02/23] remove obsolete props from TableRow --- src/components/TableRow/TableRow.js | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/src/components/TableRow/TableRow.js b/src/components/TableRow/TableRow.js index ef5c5d6d..e9ccd93b 100644 --- a/src/components/TableRow/TableRow.js +++ b/src/components/TableRow/TableRow.js @@ -13,32 +13,18 @@ const StyledTr = styled.tr` outline: none; color: ${({ theme }) => theme.text}; - ${({ theme, head }) => - !head && - `&:hover { - background: ${theme.hoverBackground}; - color: ${theme.textInvert} - }`} `; -const TableRow = ({ className, children, style, head, ...otherProps }) => ( - - {children} - +const TableRow = ({ children, ...otherProps }) => ( + {children} ); TableRow.defaultProps = { - head: false, - children: null, - className: '', - style: {} + children: null }; TableRow.propTypes = { - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]), - head: propTypes.bool + children: propTypes.node }; export default TableRow; From 79f2e5a977d599e09ce3a4551d05c88fd19a2258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:49:15 +0100 Subject: [PATCH 03/23] fix TableRow hover highlight issue --- src/components/TableRow/TableRow.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/TableRow/TableRow.js b/src/components/TableRow/TableRow.js index e9ccd93b..387cbfad 100644 --- a/src/components/TableRow/TableRow.js +++ b/src/components/TableRow/TableRow.js @@ -13,6 +13,10 @@ const StyledTr = styled.tr` outline: none; color: ${({ theme }) => theme.text}; + &:hover { + background: ${({ theme }) => theme.hoverBackground}; + color: ${({ theme }) => theme.textInvert}; + } `; const TableRow = ({ children, ...otherProps }) => ( From 890d9f287fffb0105479e4cd1aafc9368218873d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:53:05 +0100 Subject: [PATCH 04/23] remove obsolete props, restyle TableHeadCell --- src/components/TableHeadCell/TableHeadCell.js | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/components/TableHeadCell/TableHeadCell.js b/src/components/TableHeadCell/TableHeadCell.js index f779fb9d..22eee146 100644 --- a/src/components/TableHeadCell/TableHeadCell.js +++ b/src/components/TableHeadCell/TableHeadCell.js @@ -5,54 +5,57 @@ import styled from 'styled-components'; import { createBorderStyles } from '../common'; import { padding } from '../common/system'; -// ⭕⭕⭕⭕ move text down on Click +// TODO move text down on Click const StyledHeadCell = styled.th` - ${createBorderStyles()} + position: relative; padding: 0 ${padding.sm}; display: table-cell; vertical-align: inherit; background: ${({ theme }) => theme.material}; - &:active { - ${createBorderStyles({ invert: true })} + &:before { + box-sizing: border-box; + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + ${createBorderStyles()} + border-left: none; border-top: none; } - border-left: none; - border-top: none; + &:active { + &:before { + ${createBorderStyles({ invert: true, windowBorders: true })} + border-left: none; + border-top: none; + padding-top: 2px; + } + } cursor: default; + &:hover { + color: ${({ theme }) => theme.text}; + } + color: ${({ theme }) => theme.text}; + user-select: none; `; -const TableHeadCell = ({ - className, - children, - style, - onClick, - ...otherProps -}) => ( - ''} - {...otherProps} - > +const TableHeadCell = ({ children, onClick, ...otherProps }) => ( + ''} {...otherProps}> {children} ); TableHeadCell.defaultProps = { onClick: () => {}, - children: null, - className: '', - style: {} + children: null }; TableHeadCell.propTypes = { onClick: propTypes.func, - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]) + children: propTypes.node }; export default TableHeadCell; From 0c8f37286f4e674ecaff1374ee5f54c48c85d735 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:54:50 +0100 Subject: [PATCH 05/23] remove obsolete props from TableHead --- src/components/TableHead/TableHead.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/TableHead/TableHead.js b/src/components/TableHead/TableHead.js index ef2e42ba..fe7d0d7c 100644 --- a/src/components/TableHead/TableHead.js +++ b/src/components/TableHead/TableHead.js @@ -5,22 +5,16 @@ import styled from 'styled-components'; const StyledTableHead = styled.thead` display: table-header-group; `; -const TableHead = ({ className, children, style, ...otherProps }) => ( - - {children} - +const TableHead = ({ children, ...otherProps }) => ( + {children} ); TableHead.defaultProps = { - children: null, - className: '', - style: {} + children: null }; TableHead.propTypes = { - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]) + children: propTypes.node }; export default TableHead; From 409f64ebd29fc0d07d7b9e659a64869ff3c76fb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:55:56 +0100 Subject: [PATCH 06/23] remove obsolete props from TableBody --- src/components/TableBody/TableBody.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/TableBody/TableBody.js b/src/components/TableBody/TableBody.js index 47dd41c0..12202552 100644 --- a/src/components/TableBody/TableBody.js +++ b/src/components/TableBody/TableBody.js @@ -10,22 +10,16 @@ const StyledTableBody = styled.tbody` box-shadow: ${insetShadow}; `; -const TableBody = ({ className, children, style, ...otherProps }) => ( - - {children} - +const TableBody = ({ children, ...otherProps }) => ( + {children} ); TableBody.defaultProps = { - children: null, - className: '', - style: {} + children: null }; TableBody.propTypes = { - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]) + children: propTypes.node }; export default TableBody; From faeab61bee151e8432d5ca7e674bc460d2879e2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Fri, 7 Feb 2020 23:57:35 +0100 Subject: [PATCH 07/23] removed obsolete props from TableDataCell --- src/components/TableDataCell/TableDataCell.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/TableDataCell/TableDataCell.js b/src/components/TableDataCell/TableDataCell.js index bc8319fe..fdbe01d8 100644 --- a/src/components/TableDataCell/TableDataCell.js +++ b/src/components/TableDataCell/TableDataCell.js @@ -7,22 +7,16 @@ import { padding } from '../common/system'; const StyledTd = styled.td` padding: 0 ${padding.sm}; `; -const TableDataCell = ({ className, children, style, ...otherProps }) => ( - - {children} - +const TableDataCell = ({ children, ...otherProps }) => ( + {children} ); TableDataCell.defaultProps = { - children: null, - className: '', - style: {} + children: null }; TableDataCell.propTypes = { - children: propTypes.node, - className: propTypes.string, - style: propTypes.shape([propTypes.string, propTypes.number]) + children: propTypes.node }; export default TableDataCell; From 04b0bbbb30b0b8553e50d9943d0b3fa39a6a1434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sat, 8 Feb 2020 00:06:38 +0100 Subject: [PATCH 08/23] add 'disabled' prop to TableHeadCell --- src/components/Table/Table.stories.js | 4 +- src/components/TableHeadCell/TableHeadCell.js | 60 ++++++++++++------- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js index bc8c03ba..d9b28d9f 100644 --- a/src/components/Table/Table.stories.js +++ b/src/components/Table/Table.stories.js @@ -13,7 +13,7 @@ import WindowHeader from '../WindowHeader/WindowHeader'; import WindowContent from '../WindowContent/WindowContent'; const SimpleTable = () => ( - + Pokedex.exe @@ -21,7 +21,7 @@ const SimpleTable = () => ( Type Name - Lvl. + Level diff --git a/src/components/TableHeadCell/TableHeadCell.js b/src/components/TableHeadCell/TableHeadCell.js index 22eee146..ba9f17b8 100644 --- a/src/components/TableHeadCell/TableHeadCell.js +++ b/src/components/TableHeadCell/TableHeadCell.js @@ -1,18 +1,20 @@ import React from 'react'; import propTypes from 'prop-types'; -import styled from 'styled-components'; -import { createBorderStyles } from '../common'; +import styled, { css } from 'styled-components'; +import { createBorderStyles, createDisabledTextStyles } from '../common'; import { padding } from '../common/system'; // TODO move text down on Click const StyledHeadCell = styled.th` - position: relative; - padding: 0 ${padding.sm}; - display: table-cell; - vertical-align: inherit; - background: ${({ theme }) => theme.material}; +position: relative; +padding: 0 ${padding.sm}; +display: table-cell; +vertical-align: inherit; +background: ${({ theme }) => theme.material}; +cursor: default; +user-select: none; &:before { box-sizing: border-box; content: ''; @@ -26,36 +28,50 @@ const StyledHeadCell = styled.th` border-left: none; border-top: none; } - &:active { - &:before { - ${createBorderStyles({ invert: true, windowBorders: true })} - border-left: none; - border-top: none; - padding-top: 2px; - } - } - cursor: default; + ${({ isDisabled }) => + !isDisabled && + css` + &:active { + &:before { + ${createBorderStyles({ invert: true, windowBorders: true })} + border-left: none; + border-top: none; + padding-top: 2px; + } + } + `} + + + color: ${({ theme }) => theme.text}; + ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} &:hover { color: ${({ theme }) => theme.text}; + ${({ isDisabled }) => isDisabled && createDisabledTextStyles()} } - color: ${({ theme }) => theme.text}; - user-select: none; + `; -const TableHeadCell = ({ children, onClick, ...otherProps }) => ( - ''} {...otherProps}> +const TableHeadCell = ({ disabled, children, onClick, ...otherProps }) => ( + ''} + {...otherProps} + > {children} ); TableHeadCell.defaultProps = { onClick: () => {}, - children: null + children: null, + disabled: false }; TableHeadCell.propTypes = { onClick: propTypes.func, - children: propTypes.node + children: propTypes.node, + disabled: propTypes.bool }; export default TableHeadCell; From 01453a999ef72c4c7a6d2b2a43bb722316f17e14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:33:00 +0100 Subject: [PATCH 09/23] forward ref in Table --- src/components/Table/Table.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js index 15d5a826..db3733f9 100644 --- a/src/components/Table/Table.js +++ b/src/components/Table/Table.js @@ -17,11 +17,17 @@ const StyledCutout = styled(Cutout)` } `; -const Table = ({ children, ...otherProps }) => ( - - {children} - -); +const Table = React.forwardRef(function Table(props, ref) { + const { children, ...otherProps } = props; + + return ( + + + {children} + + + ); +}); Table.defaultProps = { children: null From d4e3149421509da50baac11c21bad053a44fa6c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:33:14 +0100 Subject: [PATCH 10/23] add Table tests --- src/components/Table/Table.spec.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/Table/Table.spec.js diff --git a/src/components/Table/Table.spec.js b/src/components/Table/Table.spec.js new file mode 100644 index 00000000..32ca4e65 --- /dev/null +++ b/src/components/Table/Table.spec.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { renderWithTheme } from '../../../test/utils'; + +import Table from './Table'; + +describe('
', () => { + it('renders Table', () => { + const { container } = renderWithTheme(
); + const list = container.firstChild; + + expect(list).toBeInTheDocument(); + }); + it('renders table element', () => { + const { getByRole } = renderWithTheme(
); + + expect(getByRole('table')).toBeInTheDocument(); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( +
+ {textContent} +
+ ); + expect(getByText(textContent)).toBeInTheDocument(); + }); +}); From f718da32293f239dd0a2cced013981d5c2d6c361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:36:43 +0100 Subject: [PATCH 11/23] forward ref in TableBody --- src/components/TableBody/TableBody.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/TableBody/TableBody.js b/src/components/TableBody/TableBody.js index 12202552..7441ac59 100644 --- a/src/components/TableBody/TableBody.js +++ b/src/components/TableBody/TableBody.js @@ -10,9 +10,15 @@ const StyledTableBody = styled.tbody` box-shadow: ${insetShadow}; `; -const TableBody = ({ children, ...otherProps }) => ( - {children} -); +const TableBody = React.forwardRef(function TableBody(props, ref) { + const { children, ...otherProps } = props; + + return ( + + {children} + + ); +}); TableBody.defaultProps = { children: null From 53774e56a085fafe58f3c7cbcf99e99056d23fc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:36:57 +0100 Subject: [PATCH 12/23] add TableBody tests --- src/components/TableBody/TableBody.spec.js | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/TableBody/TableBody.spec.js diff --git a/src/components/TableBody/TableBody.spec.js b/src/components/TableBody/TableBody.spec.js new file mode 100644 index 00000000..91ebc803 --- /dev/null +++ b/src/components/TableBody/TableBody.spec.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { renderWithTheme } from '../../../test/utils'; + +import TableBody from './TableBody'; + +describe('', () => { + it('renders TableBody', () => { + const { container } = renderWithTheme(); + const list = container.firstChild; + + expect(list).toBeInTheDocument(); + }); + it('renders tbody element', () => { + const { container } = renderWithTheme(); + + expect(container.querySelector('tbody')).toBeInTheDocument(); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); +}); From 29f01a897d7c2bad7dfe3b2d8a992d1c15081aa7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:39:00 +0100 Subject: [PATCH 13/23] forward ref in TableDataCell --- src/components/TableDataCell/TableDataCell.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/TableDataCell/TableDataCell.js b/src/components/TableDataCell/TableDataCell.js index fdbe01d8..97a5e78f 100644 --- a/src/components/TableDataCell/TableDataCell.js +++ b/src/components/TableDataCell/TableDataCell.js @@ -7,9 +7,14 @@ import { padding } from '../common/system'; const StyledTd = styled.td` padding: 0 ${padding.sm}; `; -const TableDataCell = ({ children, ...otherProps }) => ( - {children} -); +const TableDataCell = React.forwardRef(function TableDataCell(props, ref) { + const { children, ...otherProps } = props; + return ( + + {children} + + ); +}); TableDataCell.defaultProps = { children: null From 496a459592505dce0204aba53ea8320a853b6a66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:39:16 +0100 Subject: [PATCH 14/23] add TableDataCell tests --- .../TableDataCell/TableDataCell.spec.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/TableDataCell/TableDataCell.spec.js diff --git a/src/components/TableDataCell/TableDataCell.spec.js b/src/components/TableDataCell/TableDataCell.spec.js new file mode 100644 index 00000000..8647b98f --- /dev/null +++ b/src/components/TableDataCell/TableDataCell.spec.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { renderWithTheme } from '../../../test/utils'; + +import TableDataCell from './TableDataCell'; + +describe('', () => { + it('renders TableDataCell', () => { + const { container } = renderWithTheme(); + const list = container.firstChild; + + expect(list).toBeInTheDocument(); + }); + it('renders td element', () => { + const { container } = renderWithTheme(); + + expect(container.querySelector('td')).toBeInTheDocument(); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); +}); From 5afc29d85a6e1d3b50ae169b05d830caca7e4e22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:40:57 +0100 Subject: [PATCH 15/23] forward ref in TableHead --- src/components/TableHead/TableHead.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/TableHead/TableHead.js b/src/components/TableHead/TableHead.js index fe7d0d7c..d1184ae2 100644 --- a/src/components/TableHead/TableHead.js +++ b/src/components/TableHead/TableHead.js @@ -5,9 +5,14 @@ import styled from 'styled-components'; const StyledTableHead = styled.thead` display: table-header-group; `; -const TableHead = ({ children, ...otherProps }) => ( - {children} -); +const TableHead = React.forwardRef(function TableHead(props, ref) { + const { children, ...otherProps } = props; + return ( + + {children} + + ); +}); TableHead.defaultProps = { children: null From 23e9f05c85349310325fbb554062d46a34e44602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 09:41:16 +0100 Subject: [PATCH 16/23] add TableHead tests --- src/components/TableHead/TableHead.spec.js | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/components/TableHead/TableHead.spec.js diff --git a/src/components/TableHead/TableHead.spec.js b/src/components/TableHead/TableHead.spec.js new file mode 100644 index 00000000..dca51a03 --- /dev/null +++ b/src/components/TableHead/TableHead.spec.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { renderWithTheme } from '../../../test/utils'; + +import TableHead from './TableHead'; + +describe('', () => { + it('renders TableHead', () => { + const { container } = renderWithTheme(); + const list = container.firstChild; + + expect(list).toBeInTheDocument(); + }); + it('renders thead element', () => { + const { container } = renderWithTheme(); + + expect(container.querySelector('thead')).toBeInTheDocument(); + }); + it('renders children', () => { + const textContent = 'Hi there!'; + const { getByText } = renderWithTheme( + + {textContent} + + ); + expect(getByText(textContent)).toBeInTheDocument(); + }); +}); From 6f5ebb4d5079aac65492ba85489fd2783d65aa23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Artur=20Bie=C5=84?= Date: Sun, 9 Feb 2020 10:06:20 +0100 Subject: [PATCH 17/23] added 'disabled' attribute to disabled button --- src/components/Button/Button.js | 1 + src/components/Button/Button.spec.js | 24 ++++++++++++++++-------- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 078b283b..248b0f17 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -120,6 +120,7 @@ const Button = ({ primary={primary} onClick={disabled ? undefined : onClick} style={style} + disabled={disabled} isDisabled={disabled} fullWidth={fullWidth} size={size} diff --git a/src/components/Button/Button.spec.js b/src/components/Button/Button.spec.js index 660196e4..f280cbe4 100644 --- a/src/components/Button/Button.spec.js +++ b/src/components/Button/Button.spec.js @@ -98,13 +98,21 @@ describe('