@integrigo/integrigo-ui 1.6.17 → 1.6.18

package/src/components/organisms/Table/Table.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import {
+  Column,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import styled from 'styled-components';
+
+type Variant = 'primary' | 'secondary';
+type Alignment = 'left' | 'right' | 'center';
+
+const colorVariant = {
+  primary: {
+    backgroundColor: 'var(--color-orange)',
+    fontColor: 'var(--color-white)',
+  },
+  secondary: {
+    backgroundColor: 'var(--color-navy)',
+    fontColor: 'var(--color-white)',
+  },
+};
+
+export interface Props <T extends Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
+  data: T[];
+  columns: Column<T>[];
+  variant?: Variant;
+  textAlign?: Alignment
+}
+
+export const Table = <T extends Record<string, unknown>>({
+  data,
+  columns,
+  variant = 'primary',
+  textAlign = 'center',
+  ...props
+}: Props<T>) => {
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div>
+      <StyledTable cellSpacing={0} {...props}>
+        <StyledHead variant={variant} textAlign={textAlign}>
+          {table.getHeaderGroups().map(headerGroup => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map(header => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </StyledHead>
+        <StyledBody textAlign={textAlign}>
+          {table.getRowModel().rows.map(row => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map(cell => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </StyledBody>
+    </StyledTable>
+    </div>
+  );
+};
+
+const StyledTable = styled.table`
+
+`;
+
+StyledTable.displayName = 'StyledTable';
+
+const StyledHead = styled.thead<{ variant: Variant, textAlign: Alignment }>`
+  padding: 15px 10px;
+  height: 54px;
+
+  & tr th {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 15px 10px;
+    color: white;
+    text-align: ${props => props.textAlign};
+  }
+
+  ${(p) => `
+    background-color: ${colorVariant[p.variant].backgroundColor};
+    color: ${colorVariant[p.variant].fontColor};
+    
+    & th:first-child {
+      box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 5px 0px 0px 0px;
+    }
+  
+    & th:last-child {
+      box-shadow: 10px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 0px 5px 0px 0px;
+    }
+  `}
+`;
+
+StyledHead.displayName = 'StyledHead';
+
+const StyledBody = styled.tbody<{ textAlign: Alignment }>`
+  tr, td {
+    //height for td works like min-height. Table cells will grow when the content does not fit.
+    height: 52px;
+  }
+  
+  tr td {
+    padding: 10px;
+    text-align: ${props => props.textAlign};
+  }
+  
+  tr:nth-child(even) {
+    background-color: var(--shades-of-grey-0);
+  }
+  
+  tr:nth-child(odd) {
+    background-color: var(--shades-of-grey-20);
+  }
+  
+  tr:hover {
+    background-color: rgba(224, 154, 51, 0.2);
+    
+    td {
+      border-top: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+    }
+    
+    td:first-child {
+      border-left: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+      border-top: solid 2px var(--color-orange);
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+    }
+    
+    td:last-child {
+      border-right: solid 2px var(--color-orange);
+      border-bottom: solid 2px var(--color-orange);
+      border-top: solid 2px var(--color-orange);
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+    }
+  }  
+`;
+
+StyledBody.displayName = 'StyledBody';

package/src/components/organisms/Table/__snapshots__/Table.test.tsx.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Table /> enabled - should match snapshot 1`] = `
+<div>
+  <div>
+    <table
+      cellspacing="0"
+      class="sc-bcXHqe eCGCkv"
+    >
+      <thead
+        class="sc-gswNZR qcRyf"
+      >
+        <tr>
+          <th>
+            firstName
+          </th>
+          <th>
+            Last Name
+          </th>
+          <th>
+            Age
+          </th>
+          <th>
+            Visits
+          </th>
+          <th>
+            Status
+          </th>
+          <th>
+            Profile Progress
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="sc-dkrFOg jkyDVI"
+      >
+        <tr>
+          <td>
+            tanner
+          </td>
+          <td>
+            linsley
+          </td>
+          <td>
+            24
+          </td>
+          <td>
+            100
+          </td>
+          <td>
+            In Relationship
+          </td>
+          <td>
+            50
+          </td>
+        </tr>
+        <tr>
+          <td>
+            tandy
+          </td>
+          <td>
+            miller
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            40
+          </td>
+          <td>
+            Single
+          </td>
+          <td>
+            80
+          </td>
+        </tr>
+        <tr>
+          <td>
+            joe
+          </td>
+          <td>
+            dirte
+          </td>
+          <td>
+            45
+          </td>
+          <td>
+            20
+          </td>
+          <td>
+            Complicated
+          </td>
+          <td>
+            10
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;

package/src/components/organisms/Table/index.ts

@@ -0,0 +1 @@
+export { Table } from './Table';

package/src/components/organisms/index.ts

@@ -1,4 +1,5 @@
 export { Menu } from './Menu';
 export { Setting } from './Setting';
-export { Modal } from './Modal'
-export { Select } from './Select'
+export { Modal } from './Modal';
+export { Select } from './Select';
+export { Table } from './Table';

package/src/index.ts

@@ -3,6 +3,7 @@ export {
   Avatar,
   Card,
   Divider,
+  DateTime,
   Icon,
   Nav,
   Pill,
@@ -11,7 +12,7 @@ export {
   Chip,
   Dot,
   Gradient,
-} from "./components/atoms";
+} from './components/atoms';
 
 export {
   InfoCard,
@@ -23,8 +24,9 @@ export {
   Profile,
   Radio,
   Tile,
-} from "./components/molecules";
+  Switch,
+} from './components/molecules';
 
-export { Menu, Setting, Modal, Select } from "./components/organisms";
+export { Menu, Setting, Modal, Select, Table } from './components/organisms';
 
-export { GlobalStyles as IntegrigoUI, Color } from "./styles";
+export { GlobalStyles as IntegrigoUI, Color } from './styles';

package/src/styles/global.ts

@@ -50,12 +50,13 @@ export const GlobalStyles = createGlobalStyle`
     --font-medium: 600;
     --font-thin: 300;
 
-    --font-size-s: 10px;
+    --font-size-s: 12px;
     --font-size-m: 16px;
     --font-size-l: 20px;
     --font-size-xl: 32px;
     --font-size-xxl: 40px;
 
+    --header-size-xs: 12px;
     --header-size-s: 16px;
     --header-size-m: 24px;
     --header-size-l: 32px;
@@ -101,4 +102,9 @@ export const GlobalStyles = createGlobalStyle`
     font-size: var(--header-size-s);
     font-weight: var(--font-bold);
   }
+
+  h5 {
+    font-size: var(--header-size-xs);
+    font-weight: var(--font-bold);
+  }
 `;