styled Table

src/components/Table/Table.css

@@ -1,14 +0,0 @@
-.Table-wrapper {
-  position: relative;
-  /* overflow: hidden; */
-  background: #fff;
-}
-
-.Table {
-  position: relative;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border-collapse: collapse;
-  /* table-layout: fixed; */
-}

src/components/Table/Table.js

@@ -1,19 +1,22 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
 
-import "./Table.css";
-import Cutout from "../Cutout/Cutout";
+import styled from "styled-components";
+import { StyledCutout } from "../common";
 
+const StyledTable = styled.table`
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+`;
 const Table = ({ className, children, style, ...otherProps }) => {
-  const baseClass = "Table";
-  const rootClass = cx(baseClass, className);
   return (
-    <Cutout className={`${baseClass}-wrapper`}>
-      <table className={rootClass} style={style} {...otherProps}>
+    <StyledCutout>
+      <StyledTable className={className} style={style} {...otherProps}>
         {children}
-      </table>
-    </Cutout>
+      </StyledTable>
+    </StyledCutout>
   );
 };
 

src/components/Table/Table.stories.js

@@ -20,7 +20,7 @@ class SimpleTable extends React.Component {
         <WindowContent>
           <Table>
             <TableHead>
-              <TableRow>
+              <TableRow head>
                 <TableHeaderCell>Name</TableHeaderCell>
                 <TableHeaderCell>Swag</TableHeaderCell>
                 <TableHeaderCell>Ready</TableHeaderCell>

src/components/Table/TableBody/TableBody.css

@@ -1,3 +0,0 @@
-.TableBody {
-  background: #fff;
-}

src/components/Table/TableBody/TableBody.js

@@ -1,16 +1,21 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
 
-import "./TableBody.css";
+import styled from "styled-components";
+import { colors } from "../../common/theme.variables";
+import { insetShadow } from "../../common";
+
+const StyledTableBody = styled.tbody`
+  background: ${colors.light};
+  display: table-row-group;
+  box-shadow: ${insetShadow};
+`;
 
 const TableBody = ({ className, children, style, ...otherProps }) => {
-  const baseClass = "TableBody";
-  const rootClass = cx(baseClass, className);
   return (
-    <tbody className={rootClass} style={style} {...otherProps}>
+    <StyledTableBody className={className} style={style} {...otherProps}>
       {children}
-    </tbody>
+    </StyledTableBody>
   );
 };
 

src/components/Table/TableDataCell/TableDataCell.css

@@ -1,3 +0,0 @@
-.TableDataCell {
-  padding: 0 0.5em;
-}

src/components/Table/TableDataCell/TableDataCell.js

@@ -1,16 +1,17 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
 
-import "./TableDataCell.css";
+import styled from "styled-components";
+import { padding } from "../../common/theme.variables";
 
+const StyledTd = styled.td`
+  padding: 0 ${padding.sm};
+`;
 const TableDataCell = ({ className, children, style, ...otherProps }) => {
-  const baseClass = "TableDataCell";
-  const rootClass = cx(baseClass, className);
   return (
-    <td className={rootClass} style={style} {...otherProps}>
+    <StyledTd className={className} style={style} {...otherProps}>
       {children}
-    </td>
+    </StyledTd>
   );
 };
 

src/components/Table/TableHead/TableHead.css

@@ -1,3 +0,0 @@
-.TableBody {
-  background: #fff;
-}

src/components/Table/TableHead/TableHead.js

@@ -1,16 +1,15 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
-
-import "./TableHead.css";
+import styled from "styled-components";
 
+const StyledTableHead = styled.thead`
+  display: table-header-group;
+`;
 const TableHead = ({ className, children, style, ...otherProps }) => {
-  const baseClass = "TableHead";
-  const rootClass = cx(baseClass, className);
   return (
-    <thead className={rootClass} style={style} {...otherProps}>
+    <StyledTableHead className={className} style={style} {...otherProps}>
       {children}
-    </thead>
+    </StyledTableHead>
   );
 };
 

src/components/Table/TableHeaderCell/TableHeaderCell.css

@@ -1,51 +0,0 @@
-.TableHeaderCell {
-  position: relative;
-  text-align: center;
-  background: #ced0cf;
-  /* border-top: 2px solid #fff;
-  border-left: 2px solid #fff; */
-  border-bottom: 2px solid #050608;
-  border-right: 2px solid #050608;
-  font-weight: normal;
-  font-size: 16px;
-  outline: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  padding: 0 0.5em;
-}
-.TableHeaderCell:before {
-  padding: 0;
-  content: "";
-  display: inline-block;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-
-  border-top: 2px solid #dfe0e3;
-  border-left: 2px solid #dfe0e3;
-  border-bottom: 2px solid #888c8f;
-  border-right: 2px solid #888c8f;
-}
-
-.TableHeaderCell:not(.TableHeaderCell--disabled):active,
-.TableHeaderCell--active {
-  border-bottom: 2px solid #fff;
-  /* border-right: 2px solid #fff; */
-  /* border-top: 2px solid #050608;
-  border-left: 2px solid #050608; */
-}
-.TableHeaderCell:not(.TableHeaderCell--disabled):active:before,
-.TableHeaderCell--active:before {
-  border-bottom: 2px solid #dfe0e3;
-  border-right: 2px solid #dfe0e3;
-  border-top: 2px solid #888c8f;
-  border-left: 2px solid #888c8f;
-}
-
-.TableHeaderCell:not(.TableHeaderCell--disabled):active
-  .TableHeaderCell__content,
-.TableHeaderCell--active .TableHeaderCell__content {
-  position: relative;
-  top: 2px;
-}

src/components/Table/TableHeaderCell/TableHeaderCell.js

@@ -1,22 +1,32 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
 
-import "./TableHeaderCell.css";
+import styled from "styled-components";
+import { createBorderStyles } from "../../common";
+import { padding } from "../../common/theme.variables";
 
-const TableHeaderCell = ({
-  className,
-  children,
-  style,
-  onClick,
-  ...otherProps
-}) => {
-  const baseClass = "TableHeaderCell";
-  const rootClass = cx(baseClass, className);
+// ⭕⭕⭕⭕ move text down on Click
+
+const StyledHeadCell = styled.th`
+  ${createBorderStyles()}
+  padding: 0 ${padding.sm};
+  display: table-cell;
+  vertical-align: inherit;
+  &:active {
+    ${createBorderStyles(true)}
+    border-left: none;
+    border-top: none;
+  }
+  border-left: none;
+  border-top: none;
+  cursor: default;
+`;
+
+const TableHeaderCell = ({ className, children, style, ...otherProps }) => {
   return (
-    <th className={rootClass} style={style} {...otherProps} onClick={onClick}>
-      <span className={`${rootClass}__content`}>{children}</span>
-    </th>
+    <StyledHeadCell className={className} style={style} {...otherProps}>
+      {children}
+    </StyledHeadCell>
   );
 };
 
@@ -27,8 +37,7 @@ TableHeaderCell.defaultProps = {
 TableHeaderCell.propTypes = {
   children: propTypes.node,
   className: propTypes.string,
-  style: propTypes.object,
-  onClick: propTypes.func
+  style: propTypes.object
 };
 
 export default TableHeaderCell;

src/components/Table/TableRow/TableRow.css

@@ -1,11 +0,0 @@
-.TableRow {
-  height: 34px;
-  line-height: 34px;
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
-}
-.TableBody .TableRow:hover {
-  background: #000080;
-  color: #fff;
-}

src/components/Table/TableRow/TableRow.js

@@ -1,25 +1,42 @@
 import React from "react";
 import propTypes from "prop-types";
-import cx from "classnames";
 
-import "./TableRow.css";
+import styled from "styled-components";
+import { blockSizes, colors } from "../../common/theme.variables";
 
-const TableRow = ({ className, children, style, ...otherProps }) => {
-  const baseClass = "TableRow";
-  const rootClass = cx(baseClass, className);
+const StyledTr = styled.tr`
+  color: inherit;
+  display: table-row;
+  height: calc(${blockSizes.md} - 2px);
+  line-height: calc(${blockSizes.md} - 2px);
+  vertical-align: middle;
+  outline: none;
+
+  ${props =>
+    !props.head &&
+    `&:hover {
+      background: ${colors.navy};
+      color: ${colors.light}
+    }`}
+`;
+
+const TableRow = ({ className, children, style, head, ...otherProps }) => {
   return (
-    <tr className={rootClass} style={style} {...otherProps}>
+    <StyledTr head={head} className={className} style={style} {...otherProps}>
       {children}
-    </tr>
+    </StyledTr>
   );
 };
 
-TableRow.defaultProps = {};
+TableRow.defaultProps = {
+  head: false
+};
 
 TableRow.propTypes = {
   children: propTypes.node,
   className: propTypes.string,
-  style: propTypes.object
+  style: propTypes.object,
+  head: propTypes.bool
 };
 
 export default TableRow;

src/components/common/index.js

@@ -4,6 +4,7 @@ import { colors, fontSizes, padding } from "./theme.variables";
 const { bg, light, dark, lightGray, darkGray } = colors;
 
 export const shadow = `4px 4px 10px 0 rgba(0, 0, 0, 0.35)`;
+export const insetShadow = `inset 3px 3px 10px rgba(0, 0, 0, 0.3);`;
 
 export const StyledMaterial = styled.div`
   box-sizing: border-box;
@@ -76,8 +77,7 @@ export const StyledCutout = styled.div`
     border-bottom-color: ${lightGray};
 
     pointer-events: none;
-    ${props =>
-      props.shadow && "box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.3);"}
+    ${props => props.shadow && insetShadow}
   }
 `;