[FRNT-176] Implement Table component (#93)

src/ui/atoms/index.ts

@@ -11,6 +11,7 @@ export { List } from './list';
 export { Notification } from './notification';
 export { Separator } from './separator';
 export { Surface } from './surface';
+export { Table, Thead, Tbody, Tr, Td, Th } from './table';
 export { Text } from './text';
 export { TextArea } from './text-area';
 export { Tooltip } from './tooltip';

src/ui/atoms/table/index.tsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import { Variant } from 'lib/types';
+
+const map = (properties: { columns: number } & Variant) => ({
+  'data-variant': properties.variant || 'default',
+  style: { '--local-columns': properties.columns },
+});
+
+export const Table = styled.table.attrs(map)`
+  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
+  --local-horizontal: calc(
+    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
+  );
+  --local-cell-max-width: 240px;
+  --local-gap: calc(var(--woly-const-m) / 2);
+
+  display: grid;
+  gap: var(--local-gap);
+  grid-template-columns: repeat(var(--local-columns), auto);
+`;
+
+export const Thead = styled.thead`
+  display: contents;
+`;
+
+export const Tbody = styled.tbody`
+  display: contents;
+`;
+
+export const Th = styled.th`
+  padding: var(--local-vertical) var(--local-horizontal);
+  max-width: var(--local-cell-max-width);
+  box-sizing: border-box;
+  background: var(--woly-shape-text-default);
+  color: var(--woly-canvas-text-disabled);
+`;
+
+export const Td = styled.td`
+  padding: var(--local-vertical) var(--local-horizontal);
+  max-width: var(--local-cell-max-width);
+  box-sizing: border-box;
+  background: var(--woly-shape-text-default);
+  color: var(--woly-canvas-text-default);
+`;
+
+export const Tr = styled.tr`
+  display: contents;
+`;

src/ui/atoms/table/usage.mdx

@@ -0,0 +1,119 @@
+---
+name: table
+category: atoms
+package: 'woly'
+---
+
+import { Playground } from 'box-styles'
+import { Table, Thead, Th, Tr, Td, Tbody } from 'ui'
+
+export const tableHead = [
+  { id: 'id', name: 'Id' },
+  { id: 'firstName', name: 'First name' },
+  { id: 'lastName', name: 'Last name' },
+  { id: 'email', name: 'Email' },
+  { id: 'country', name: 'Country' },
+  { id: 'street', name: 'Street' },
+  { id: 'date', name: 'Date' },
+  { id: 'role', name: 'Role' },
+  { id: 'content', name: 'Content' },
+  { id: 'phone', name: 'Phone' },
+];
+
+export const tableRows = [
+  {
+    id: 1,
+    firstName: 'Michael',
+    lastName: 'Smith',
+    email: 'msmith2343@gmail.com',
+    country: 'Portugal',
+    street: '9 Eliot Parkway',
+    date: '19.03.2015',
+    role: 'Admin',
+    content: 'Information about user',
+    phone: '+35118456395',
+  },
+  {
+    id: 2,
+    firstName: 'Jonathan',
+    lastName: 'Kearney',
+    email: 'msmith2343@gmail.com',
+    country: 'Portugal',
+    street: '4 Sloan Park',
+    date: '19.03.2015',
+    role: 'Admin',
+    content: 'Information about user',
+    phone: '+35118456395',
+  },
+  {
+    id: 3,
+    firstName: 'Donald',
+    lastName: 'Morrison',
+    email: 'msmith2343@gmail.com',
+    country: 'Portugal',
+    street: 'Sherman',
+    date: '19.03.2015',
+    role: 'Admin',
+    content: 'Information about user',
+    phone: '+35118456395',
+  },
+  {
+    id: 4,
+    firstName: 'Tara',
+    lastName: 'Richardson',
+    email: 'msmith2343@gmail.com',
+    country: 'Portugal',
+    street: 'Judy Court',
+    date: '19.03.2015',
+    role: 'Admin',
+    content: 'Information about user',
+    phone: '+35118456395',
+  },
+];
+
+To create a table use Table, Thead, Tbody, Th, Tr, Td components.
+To set number of columns pass `columns` prop to the Table component.
+
+### Example
+
+<Playground>
+  <block.L style={{ background: '#f5f5f5', padding: '20px' }}>
+    <Table columns={tableHead.length} variant="primary">
+      <Thead>
+        <Tr>
+          {tableHead.map(({ id, name }) => (
+            <Th key={id}>{name}</Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {tableRows.map((row) => (
+          <Tr>
+            {tableHead.map(({ id }) => (
+              <Td key={id}>{row[id]}</Td>
+            ))}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  </block.L>
+</Playground>
+
+### Kinds
+
+| Name    | Description        |
+| ------- | ------------------ |
+| `Table` | Table component    |
+| `Thead` | Head of table      |
+| `Tbody` | Body of table      |
+| `Th`    | Head cell of table |
+| `Tr`    | Row of table       |
+| `Td`    | Cell of table      |
+
+### Table Props
+
+| Name       | Type              | Default     | Description                                                     |
+| ---------- | ----------------- | ----------- | --------------------------------------------------------------- |
+| `variant`  | `string`          | `'default'` | Variant prop to style Table component                           |
+| `columns`  | `number`          |             | Number of columns in table                                      |
+| `children` | `React.ReactNode` |             | Pass any content as a children property within Table component. |