docs(Table): write initial docs

kodiak-packages · Jul 25, 2020 · 19de404 · 19de404
1 parent 4ce5a0a
commit 19de404
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 15 deletions.
diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
@@ -5,7 +5,7 @@ route: /table
 ---
 
 import { Playground, Props } from 'docz';
-import { Table } from '../..';
+import { Table, Button, CheckCircle, Circle, PauseCircle, Share2 } from '../..';
 
 # Table
 
@@ -30,27 +30,78 @@ Use the different building block to correctly structure your table:
     <Table>
       <Table.Header>
         <Table.HeaderCell>
-          First name
+          Course
         </Table.HeaderCell>
         <Table.HeaderCell>
-          Last name
+          Length
+        </Table.HeaderCell>
+        <Table.HeaderCell colSpan={2}>
+          Status
         </Table.HeaderCell>
       </Table.Header>
       <Table.Body>
         <Table.Row>
           <Table.Cell>
-            Bram
+           Introduction To React
           </Table.Cell>
           <Table.Cell>
-            Vanhoutte
+            2h 27m
+          </Table.Cell>
+           <Table.Cell>
+            <CheckCircle /> Finished
+          </Table.Cell>
+           <Table.Cell align="right">
+            <Button type="primary" size="small">Open</Button>
+            {' '}
+            <Button type="primary" size="small" prefixIcon={<Share2 />}>Share</Button>
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>
+           Introduction To Docker
+          </Table.Cell>
+          <Table.Cell>
+            33m
+          </Table.Cell>
+           <Table.Cell>
+           <Circle /> Not started
+          </Table.Cell>
+          <Table.Cell align="right">
+            <Button type="secondary" size="small">Open</Button>
+            {' '}
+            <Button type="secondary" size="small" prefixIcon={<Share2 />}>Share</Button>
           </Table.Cell>
         </Table.Row>
         <Table.Row>
           <Table.Cell>
-            Robin
+           Introduction To Python
           </Table.Cell>
           <Table.Cell>
-            Wijnant
+            1h 45m
+          </Table.Cell>
+           <Table.Cell>
+            <Circle /> Not started
+          </Table.Cell>
+          <Table.Cell align="right">
+            <Button type="primary" size="small">Open</Button>
+            {' '}
+            <Button type="primary" size="small" prefixIcon={<Share2 />}>Share</Button>
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>
+           Introduction To Ventura
+          </Table.Cell>
+          <Table.Cell>
+           15m
+          </Table.Cell>
+           <Table.Cell>
+            <PauseCircle /> In progress
+          </Table.Cell>
+          <Table.Cell align="right">
+            <Button type="secondary" size="small">Open</Button>
+            {' '}
+            <Button type="secondary" size="small" prefixIcon={<Share2 />}>Share</Button>
           </Table.Cell>
         </Table.Row>
       </Table.Body>

diff --git a/src/components/Table/TableCell/TableCell.module.css b/src/components/Table/TableCell/TableCell.module.css
@@ -2,7 +2,21 @@
   text-align: left;
   height: 32px;
   line-height: 32px;
-  padding: 0 14px;
+  padding-left: 14px;
+  padding-right: 6px;
+  vertical-align: middle;
+}
+
+.cellAlignLeft {
+  text-align: left;
+}
+
+.cellAlignRight {
+  text-align: right;
+}
+
+.cellAlignCenter {
+  text-align: center;
 }
 
 .cell:hover ~ .cell {

diff --git a/src/components/Table/TableCell/TableCell.tsx b/src/components/Table/TableCell/TableCell.tsx
@@ -7,13 +7,23 @@ type Props = {
   className?: string;
   children?: React.ReactNode;
   colSpan?: number;
+  align?: 'center' | 'left' | 'right';
 };
 
-const TableCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
-  const tableClassNames = classNames(styles.cell, styles.row, className);
+const TableCell: React.FC<Props> = ({ className, children, colSpan, align = 'left' }: Props) => {
+  const tableCellClassNames = classNames(
+    {
+      [styles.cellAlignLeft]: align === 'left',
+      [styles.cellAlignRight]: align === 'right',
+      [styles.cellAlignCenter]: align === 'center',
+    },
+    styles.cell,
+    styles.row,
+    className,
+  );
 
   return (
-    <td colSpan={colSpan} className={tableClassNames}>
+    <td colSpan={colSpan} className={tableCellClassNames}>
       {children}
     </td>
   );

diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.module.css b/src/components/Table/TableHeaderCell/TableHeaderCell.module.css
@@ -1,12 +1,25 @@
 .headerCell {
   background-color: var(--color-primary-hover);
-  text-align: left;
   height: 36px;
   line-height: 36px;
-  padding: 0 14px;
+  padding-left: 14px;
+  padding-right: 6px;
   color: var(--font-color-sub)
 }
 
+.cellAlignLeft {
+  text-align: left;
+}
+
+.cellAlignRight {
+  text-align: right;
+}
+
+.cellAlignCenter {
+  text-align: center;
+}
+
+
 .headerCell:first-child {
   border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
 }

diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -7,10 +7,24 @@ type Props = {
   className?: string;
   children?: React.ReactNode;
   colSpan?: number;
+  align?: 'center' | 'left' | 'right';
 };
 
-const TableHeaderCell: React.FC<Props> = ({ className, children, colSpan }: Props) => {
-  const tableHeaderCellClassNames = classNames(styles.headerCell, className);
+const TableHeaderCell: React.FC<Props> = ({
+  className,
+  children,
+  colSpan,
+  align = 'left',
+}: Props) => {
+  const tableHeaderCellClassNames = classNames(
+    {
+      [styles.cellAlignLeft]: align === 'left',
+      [styles.cellAlignRight]: align === 'right',
+      [styles.cellAlignCenter]: align === 'center',
+    },
+    styles.headerCell,
+    className,
+  );
 
   return (
     <th colSpan={colSpan} className={tableHeaderCellClassNames}>