feat: implement listview variant to the table

library/exampleComponents/Icons/coin.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Coin = props => {
+    const { className, style } = props;
+    return (
+        <svg
+            className={className}
+            style={style}
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            version="1.1"
+        >
+            <g fill="none">
+                <path
+                    fill="#FCD462"
+                    d="M7.893 14.881c-3.851 0-6.988-3.136-6.988-6.988C.905 4.042 4.042.905 7.893.905c3.852 0 6.988 3.137 6.988 6.988 0 3.852-3.136 6.988-6.988 6.988z"
+                />
+                <path
+                    fill="#F5BB41"
+                    d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zm0 1.48C4.4 1.48 1.48 4.4 1.48 8c0 3.6 2.92 6.52 6.52 6.52 3.6 0 6.52-2.92 6.52-6.52 0-3.6-2.92-6.52-6.52-6.52z"
+                />
+                <path
+                    fill="#F5BB41"
+                    d="M7.951 4.002c-.39.029-.698.355-.698.753v.54l-.047.014C6.036 5.657 5.2 6.742 5.2 8l.002.094c.04 1.218.864 2.257 2.004 2.597l.046.013v.541c0 .417.339.755.755.755l.057-.002c.39-.029.698-.355.698-.753v-.542l.047-.013c.392-.116.755-.318 1.063-.592.312-.277.34-.754.063-1.066-.263-.295-.707-.336-1.018-.101l-.048.04c-.238.21-.544.327-.862.327-.715 0-1.298-.583-1.298-1.298 0-.715.583-1.298 1.298-1.298.32 0 .622.115.86.326l.058.054c.294.295.772.295 1.067 0 .295-.294.295-.772 0-1.067l-.086-.082c-.32-.296-.7-.51-1.113-.63l-.031-.008v-.54c0-.417-.338-.755-.755-.755l-.056.002z"
+                />
+            </g>
+        </svg>
+    );
+};
+
+Coin.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+};
+
+Coin.defaultProps = {
+    className: undefined,
+    style: undefined,
+};
+
+export default Coin;

library/setup.js

@@ -71,6 +71,7 @@ import HomeFilledIcon from './exampleComponents/Icons/homeFilled';
 import ExportBorderIcon from './exampleComponents/Icons/exportBorder';
 import ExportFilledIcon from './exampleComponents/Icons/exportFilled';
 import ArrowDownIcon from './exampleComponents/Icons/arrowDown';
+import Coin from './exampleComponents/Icons/coin';
 
 global.GlobalHeader = GlobalHeader;
 global.CodeEditor = CodeEditor;
@@ -148,3 +149,4 @@ global.HomeFilledIcon = HomeFilledIcon;
 global.ExportBorderIcon = ExportBorderIcon;
 global.ExportFilledIcon = ExportFilledIcon;
 global.ArrowDownIcon = ArrowDownIcon;
+global.Coin = Coin;

src/components/Column/index.js

@@ -38,7 +38,7 @@ Column.propTypes = {
      *
      * e.g  `width={100}` */
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /** Specifies the inital width of a column in pixels and allows the column to be resizable.
+    /** Specifies the initial width of a column in pixels and allows the column to be resizable.
      * It must be within the minColumnWidth and maxColumnWidth values passed to Table.
      *
      * e.g  `defaultWidth={100}`

src/components/Table/body/enumerableCell.js

@@ -5,7 +5,7 @@ import StyledEnumerable from './styled/enumerable';
 
 export default function EnumerableCell() {
     return (
-        <StyledCellContainer role="gridcell" tabIndex={-1}>
+        <StyledCellContainer role="gridcell" tabIndex={-1} hideBorderRight>
             <StyledCellContent>
                 <StyledEnumerable />
             </StyledCellContent>

src/components/Table/body/selectableCell.js

@@ -36,7 +36,7 @@ export default function SelectableCell(props) {
     };
 
     return (
-        <StyledCellContainer role="gridcell" tabIndex={-1}>
+        <StyledCellContainer role="gridcell" tabIndex={-1} hideBorderRight>
             <StyledCheckboxContainer role="presentation" onMouseDown={handleMouseDown}>
                 <Input
                     className="rainbow-table_cell-checkbox"

src/components/Table/body/styled/actionCell.js

@@ -1,12 +1,19 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 
-const StyledActionCell = styled.div`
+const StyledActionCell = attachThemeAttrs(styled.div)`
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     margin: auto;
     box-sizing: border-box;
+
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+            background-color: ${props.palette.background.main};
+        `};
 `;
 
 export default StyledActionCell;

src/components/Table/body/styled/cell.js

@@ -10,6 +10,44 @@ const StyledCell = attachThemeAttrs(styled.th)`
         padding-left: 18px;
     }
 
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        background-color: ${props.palette.background.main};
+        border: none;
+        text-align: center;
+        border-top: 1px solid ${props.palette.border.divider};
+        border-right: 1px solid ${props.palette.border.divider};
+
+        :first-child {
+            border-left: 1px solid ${props.palette.border.divider};
+            border-left-style: solid;
+            border-top-left-radius: 13px; 
+            border-bottom-left-radius: 13px;
+        }
+
+        :last-child {
+            border-right-style: solid;
+            border-bottom-right-radius: 13px; 
+            border-top-right-radius: 13px; 
+        }
+
+        :last-child > div {
+            border-bottom-right-radius: 12px; 
+            border-top-right-radius: 12px;
+            overflow: hidden;
+        }
+
+        :first-child > div {
+            padding-left: 0;
+            border-top-left-radius: 12px; 
+            border-bottom-left-radius: 12px;
+            overflow: hidden;
+        }
+    `}
+
+
+
     :focus {
         outline: none;
 

src/components/Table/body/styled/cellContainer.js

@@ -1,10 +1,51 @@
 import styled from 'styled-components';
+import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 
-const StyledCellContainer = styled.td`
+const StyledCellContainer = attachThemeAttrs(styled.td)`
     padding: 0;
     text-align: left;
     box-sizing: border-box;
 
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        background-color: ${props.palette.background.main};
+        border: none;
+        border-top: 1px solid ${props.palette.border.divider};
+
+        :first-child {
+            border-left: 1px solid ${props.palette.border.divider};
+            border-left-style: solid;
+            border-top-left-radius: 12px;
+            border-bottom-left-radius: 12px;
+        }
+
+        :first-child > div {
+            border-top-left-radius: 12px;
+            border-bottom-left-radius: 12px;
+            overflow: hidden;
+        }
+
+        :last-child {
+            border-right-style: solid;
+            border-bottom-right-radius: 12px;
+            border-top-right-radius: 12px;
+        }
+
+        :last-child > div {
+            border-bottom-right-radius: 12px;
+            border-top-right-radius: 12px;
+            overflow: hidden;
+        }
+    `}
+
+    ${props =>
+        props.varaint === 'listview' &&
+        !props.hideBorderRight &&
+        `
+        border-right: 1px solid ${props.palette.border.divider};
+    `}
+
     :focus {
         outline: none;
     }

src/components/Table/body/styled/cellContent.js

@@ -15,6 +15,12 @@ const StyledCellContent = attachThemeAttrs(styled.div)`
     white-space: nowrap;
     font-weight: 400;
     box-sizing: border-box;
+
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+            padding: 0;
+        `};
 `;
 
 export default StyledCellContent;

src/components/Table/body/styled/checkboxContainer.js

@@ -6,6 +6,11 @@ const StyledCheckboxContainer = styled.div`
     padding: 0 15px;
     border: 1px solid transparent;
     box-sizing: border-box;
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        padding: 0 10px;
+    `}
 `;
 
 export default StyledCheckboxContainer;

src/components/Table/body/styled/enumerable.js

@@ -6,6 +6,12 @@ const StyledEnumerable = attachThemeAttrs(styled.span)`
     text-align: center;
     color: ${props => props.palette.text.header};
 
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        color: ${props.palette.text.main};
+    `}
+
     &::after {
         content: counter(rowCounter);
     }

src/components/Table/body/styled/row.js

@@ -3,15 +3,35 @@ import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 import { replaceAlpha } from '../../../../styles/helpers/color';
 
 const StyledRow = attachThemeAttrs(styled.tr)`
-    box-shadow: ${props => props.shadows.shadow_8};
-    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    box-sizing: border-box;
     counter-increment: rowCounter;
+    box-sizing: border-box;
+    ${props =>
+        props.theme.variant === 'default' &&
+        `
+        box-shadow: ${props.shadows.shadow_8};
+        transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+        &:hover {
+            background-color: ${replaceAlpha(props.palette.action.hover, 0.4)};
+            box-shadow: ${props.shadows.shadow_9}, ${props.shadows.shadow_3};
+        }
+    `}
+
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        border-radius: 13px;
+        box-shadow: 0 1px 1px 0 ${props.palette.border.divider};
+
+        :last-child th, :last-child td{
+            border-bottom: 1px solid ${props.palette.border.divider};
+        }
+
 
-    &:hover {
-        background-color: ${props => replaceAlpha(props.palette.action.hover, 0.4)};
-        box-shadow: ${props => props.shadows.shadow_9}, ${props => props.shadows.shadow_3};
-    }
+        &:hover {
+            background-color: ${replaceAlpha(props.palette.action.hover, 0.4)};
+        }
+    `}
 
     ${props =>
         props.isSelected &&

src/components/Table/head/index.js

@@ -20,7 +20,7 @@ export default class Head extends PureComponent {
     }
 
     render() {
-        const { columns, ...rest } = this.props;
+        const { columns, variant, ...rest } = this.props;
 
         if (columns) {
             return columns.map((column, index) => {

src/components/Table/head/selectableHeader.js

@@ -37,7 +37,7 @@ export default function SelectableHeader(props) {
     }
 
     return (
-        <th style={style} scope="col" tabIndex={-1}>
+        <StyledWrapper as="th" style={style} scope="col" tabIndex={-1}>
             <StyledCheckboxWrapper style={style}>
                 <PrimitiveCheckbox
                     name={name}
@@ -51,7 +51,7 @@ export default function SelectableHeader(props) {
                 />
             </StyledCheckboxWrapper>
             <StyledScrollShadow hasScroll={hasScroll} />
-        </th>
+        </StyledWrapper>
     );
 }
 

src/components/Table/head/styled/checkboxWrapper.js

@@ -1,12 +1,15 @@
 import styled from 'styled-components';
-import StyledWrapper from './wrapper';
-import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 
-const StyledCheckboxWrapper = attachThemeAttrs(styled(StyledWrapper))`
+const StyledCheckboxWrapper = styled.div`
     align-items: center;
     display: flex;
-    padding: 0 15px;
+    padding: 10px 15px;
     border: 1px solid transparent;
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+        padding: 10px 10px;
+    `}
 `;
 
 export default StyledCheckboxWrapper;

src/components/Table/head/styled/headerContainer.js

@@ -7,6 +7,12 @@ const StyledHeaderContainer = styled.div`
     align-items: center;
     height: 44px;
     padding: 0 ${PADDING_X_SMALL};
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+            justify-content: center;
+            text-transform: capitalize;
+        `};
 `;
 
 export default StyledHeaderContainer;

src/components/Table/head/styled/th.js

@@ -85,6 +85,40 @@ const StyledTh = attachThemeAttrs(styled.th)`
                 }
             }
         `};
+
+        ${props =>
+            props.theme.variant === 'listview' &&
+            `
+            :hover {
+                > div, .rainbow-table_header-resize-bar {
+                    background-color: transparent;
+                }
+
+                .rainbow-table_header-container {
+                    border-color: transparent;
+                }
+            }
+
+            :focus {
+
+                .rainbow-table_header-container {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+
+                .rainbow-table_header-resize-bar,
+                &:hover .rainbow-table_header-resize-bar {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+
+                &:hover .rainbow-table_header-container {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+            }
+        `}
+
     ${props =>
         props.isSorted &&
         `

src/components/Table/head/styled/wrapper.js

@@ -8,6 +8,12 @@ const StyledWrapper = attachThemeAttrs(styled.div)`
     height: 44px;
     background-color: ${props => props.palette.background.highlight};
     box-sizing: border-box;
+
+    ${props =>
+        props.theme.variant === 'listview' &&
+        `
+            background-color: transparent;
+        `};
 `;
 
 export default StyledWrapper;