feat(uikit): Td & Th components (#227)

pancakeswap · Aug 6, 2021 · c7f4283 · c7f4283
1 parent 70a8afb
commit c7f4283
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/packages/pancake-uikit/src/components/Table/Cell.tsx b/packages/pancake-uikit/src/components/Table/Cell.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { typography, TypographyProps } from "styled-system";
+
+export const Td = styled.td<TypographyProps>`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
+  color: ${({ theme }) => theme.colors.text};
+  padding: 16px;
+
+  ${typography}
+`;
+
+export const Th = styled(Td).attrs({ as: "th" })`
+  color: ${({ theme }) => theme.colors.secondary};
+  font-size: 12px;
+  text-transform: uppercase;
+`;
diff --git a/packages/pancake-uikit/src/components/Table/Table.tsx b/packages/pancake-uikit/src/components/Table/Table.tsx
@@ -1,25 +1,13 @@
 import styled from "styled-components";
 import { space } from "styled-system";
+import { Td } from "./Cell";
 
 const Table = styled.table`
   max-width: 100%;
   width: 100%;
 
-  th,
-  td {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.cardBorder};
-    color: ${({ theme }) => theme.colors.text};
-    padding: 16px;
-  }
-
-  th {
-    color: ${({ theme }) => theme.colors.secondary};
-    font-size: 12px;
-    text-transform: uppercase;
-  }
-
   tr:last-child {
-    td {
+    ${Td} {
       border-bottom: 0;
     }
   }

diff --git a/packages/pancake-uikit/src/components/Table/index.stories.tsx b/packages/pancake-uikit/src/components/Table/index.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Card from "../Card/Card";
 import Table from "./Table";
+import { Th, Td } from "./Cell";
 
 export default {
   title: "Components/Table",
@@ -15,21 +16,21 @@ export const Default: React.FC = () => {
         <Table>
           <thead>
             <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
+              <Th textAlign="left">Column 1</Th>
+              <Th>Column 2</Th>
+              <Th>Column 3</Th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>Cell 1-1</td>
-              <td>Cell 1-2</td>
-              <td>Cell 1-3</td>
+              <Td>Cell 1-1</Td>
+              <Td>Cell 1-2</Td>
+              <Td>Cell 1-3</Td>
             </tr>
             <tr>
-              <td>Cell 2-1</td>
-              <td>Cell 2-2</td>
-              <td>Cell 2-3</td>
+              <Td>Cell 2-1</Td>
+              <Td>Cell 2-2</Td>
+              <Td>Cell 2-3</Td>
             </tr>
           </tbody>
         </Table>

diff --git a/packages/pancake-uikit/src/components/Table/index.tsx b/packages/pancake-uikit/src/components/Table/index.tsx
@@ -1,4 +1,5 @@
 export { default as Table } from "./Table";
+export * from "./Cell";
 export * from "./hooks";
 export * from "./types";
 export * from "./utils";