ui v2: table (#815)

lyft · Dec 24, 2020 · 87ec2bd · 87ec2bd
1 parent 9c49b4c
commit 87ec2bd
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 46 deletions.
diff --git a/frontend/packages/core/src/Table/stories/table.stories.tsx b/frontend/packages/core/src/Table/stories/table.stories.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { Meta } from "@storybook/react";
+
+import type { TableProps } from "../table";
+import { Table, TableRow } from "../table";
+
+export default {
+  title: "Core/Table/Table",
+  component: Table,
+} as Meta;
+
+const Template = (props: TableProps) => (
+  <div style={{ maxHeight: "300px", display: "flex" }}>
+    <Table headings={["Column 1", "Column 2"]} {...props}>
+      {[...Array(10)].map((_, index: number) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <TableRow key={index}>
+          <div>Value 1</div>
+          <div>Value 2</div>
+        </TableRow>
+      ))}
+    </Table>
+  </div>
+);
+
+export const Primary = Template.bind({});
+
+export const StickHeader = Template.bind({});
+StickHeader.args = {
+  stickyHeader: true,
+};
diff --git a/frontend/packages/core/src/Table/table.tsx b/frontend/packages/core/src/Table/table.tsx
@@ -1,48 +1,50 @@
-import React from "react";
-import type { TableProps as MuiTableProps, TableRowProps } from "@material-ui/core";
+import * as React from "react";
+import styled from "@emotion/styled";
+import type { TableProps as MuiTableProps } from "@material-ui/core";
 import {
   Paper,
   Table as MuiTable,
   TableBody,
-  TableCell,
+  TableCell as MuiTableCell,
   TableContainer,
   TableHead,
-  TableRow,
+  TableRow as MuiTableRow,
 } from "@material-ui/core";
-import styled from "styled-components";
 
-const TablePaper = styled(Paper)`
-  max-height: 400px;
-`;
+const TablePaper = styled(Paper)({
+  border: "1px solid #E7E7EA",
+});
 
-interface TableProps extends MuiTableProps {
+export const TableCell = styled(MuiTableCell)({
+  fontSize: "14px",
+  padding: "12px 16px",
+  color: "#0D1030",
+});
+
+const HeaderTableCell = styled(TableCell)({
+  backgroundColor: "rgba(248, 248, 249, 1)",
+  fontWeight: 600,
+});
+
+export interface TableProps extends Pick<MuiTableProps, "stickyHeader"> {
   headings?: string[];
-  elevation?: number;
 }
 
-const Table: React.FC<TableProps> = ({ headings, children, elevation = 1, ...props }) => {
-  let localHeadings = [];
-  if (headings) {
-    localHeadings = [...headings];
-  }
+export const Table: React.FC<TableProps> = ({ headings, children, ...props }) => {
+  const localHeadings = headings ? [...headings] : [];
 
   return (
-    // n.b. material ui doesn't use the component prop to determine the prop types.
-    // @ts-ignore
-    <TableContainer component={TablePaper} elevation={elevation}>
+    <TableContainer component={TablePaper} elevation={0}>
       <MuiTable {...props}>
         {localHeadings.length !== 0 && (
           <TableHead>
-            <TableRow>
-              <TableCell align="left">
-                <strong>{localHeadings.shift()}</strong>
-              </TableCell>
+            <MuiTableRow>
               {localHeadings.map(heading => (
-                <TableCell key={heading} align="right">
-                  <strong>{heading}</strong>
-                </TableCell>
+                <HeaderTableCell key={heading} align="left">
+                  {heading}
+                </HeaderTableCell>
               ))}
-            </TableRow>
+            </MuiTableRow>
           </TableHead>
         )}
         <TableBody>{children}</TableBody>
@@ -51,25 +53,15 @@ const Table: React.FC<TableProps> = ({ headings, children, elevation = 1, ...pro
   );
 };
 
-interface RowProps extends TableRowProps {
-  data: any[];
+export interface TableRowProps {
+  children?: React.ReactNode;
 }
 
-const Row: React.FC<RowProps> = ({ data, ...props }) => {
-  const rowData = data ? [...data] : [];
-  const headerValue = rowData.shift();
-  return (
-    <TableRow {...props}>
-      <TableCell component="th" scope="row">
-        {headerValue}
-      </TableCell>
-      {rowData.map(value => (
-        <TableCell key={value} align="right">
-          {value}
-        </TableCell>
-      ))}
-    </TableRow>
-  );
-};
-
-export { Row, Table, TablePaper };
+export const TableRow = ({ children = [] }: TableRowProps) => (
+  <MuiTableRow>
+    {React.Children.map(children, (value, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <TableCell key={index}>{value}</TableCell>
+    ))}
+  </MuiTableRow>
+);