Add new Table component

Add new Table V2 component
The oldest one, will be deprecated on next MAJOR version

Author: Kubit

src/constants/stylesName.ts

@@ -106,4 +106,13 @@ export const STYLES_NAME = {
   VIDEO: 'VIDEO_STYLES',
   DROPDOWN_SELECTED: 'DROPDOWN_SELECTED_STYLES',
   INPUT_SIGNATURE: 'INPUT_SIGNATURE_STYLES',
+  TABLE_CELL: 'TABLE_CELL_STYLES',
+  TABLE_ROW: 'TABLE_ROW_STYLES',
+  TABLE_BODY: 'TABLE_BODY_STYLES',
+  TABLE_HEAD: 'TABLE_HEAD_STYLES',
+  TABLE_FOOT: 'TABLE_FOOT_STYLES',
+  TABLE_CAPTION: 'TABLE_CAPTION_STYLES',
+  TABLE_DIVIDER: 'TABLE_DIVIDER_STYLES',
+  TABLE_V2: 'TABLE_V2_STYLES',
+  DATA_TABLE: 'DATA_TABLE_STYLES',
 };

src/designSystem/kubit/components/dataTable/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './variants';

src/designSystem/kubit/components/dataTable/styles.ts

@@ -0,0 +1,99 @@
+import { DataTableStylesType } from '@/components';
+
+import { Z_INDEX } from '../../foundations';
+import {
+  TableBodyVariantType,
+  TableCaptionVariantType,
+  TableCellVariantType,
+  TableHeadVariantType,
+  TableRowVariantTypeV2,
+  TableV2VariantType,
+} from '../variants';
+import { DataTableVariantType } from './variants';
+
+export const DATA_TABLE_STYLES: DataTableStylesType<DataTableVariantType> = {
+  [DataTableVariantType.DEFAULT]: {
+    wrapper: {
+      display: 'block',
+      width: '100%',
+      position: 'relative',
+    },
+    scrollableContainer: {
+      width: '100%',
+      overflow: 'auto',
+    },
+    table: {
+      variant: TableV2VariantType.DEFAULT,
+      z_index: Z_INDEX.INTERN_1,
+    },
+    tableCaption: {
+      variant: TableCaptionVariantType.DEFAULT,
+    },
+    tableHead: {
+      variant: TableHeadVariantType.DEFAULT,
+    },
+    tableHeadRow: {
+      variant: TableRowVariantTypeV2.HEADER_ROW_DEFAULT,
+    },
+    tableHeadCell: {
+      variant: TableCellVariantType.HEADER_CELL_DEFAULT,
+    },
+    tableBody: {
+      variant: TableBodyVariantType.DEFAULT,
+    },
+    tableBodyRow: {
+      variant: TableRowVariantTypeV2.BODY_ROW_DEFAULT,
+    },
+    tableBodyCell: {
+      variant: TableCellVariantType.BODY_CELL_DEFAULT,
+    },
+    rowGroup: {
+      table: {
+        variant: TableV2VariantType.DEFAULT,
+      },
+      tableCaption: {
+        variant: TableCaptionVariantType.DEFAULT,
+      },
+      tableHead: {
+        variant: TableHeadVariantType.DEFAULT,
+      },
+      tableHeadRow: {
+        variant: TableRowVariantTypeV2.HEADER_ROW_DEFAULT,
+      },
+      tableHeadCell: {
+        variant: TableCellVariantType.HEADER_CELL_DEFAULT,
+      },
+      tableBody: {
+        variant: TableBodyVariantType.DEFAULT,
+      },
+      tableBodyRow: {
+        variant: TableRowVariantTypeV2.BODY_ROW_DEFAULT,
+      },
+      tableBodyCell: {
+        variant: TableCellVariantType.BODY_CELL_DEFAULT,
+      },
+    },
+    leftBoxShadowContainer: {
+      position: 'absolute',
+      top: '0',
+      bottom: '0',
+      width: '5px',
+      pointer_events: 'none',
+      transition: 'box-shadow 200ms',
+      z_index: Z_INDEX.INTERN_2,
+    },
+    rightBoxShadowContainer: {
+      position: 'absolute',
+      top: '0',
+      bottom: '0',
+      width: '5px',
+      pointer_events: 'none',
+      transition: 'box-shadow 200ms',
+      z_index: Z_INDEX.INTERN_2,
+    },
+    // TODO When specified - update tokens
+    headBoxShadow: '0 2px 4px 0 #d62c2c',
+    leftBoxShadow: 'rgb(214, 44, 44) 8px 0px 5px -7px inset',
+    rightBoxShadow: 'rgb(214, 44, 44) -8px 0px 5px -7px inset',
+  },
+};

src/designSystem/kubit/components/dataTable/variants.ts

@@ -0,0 +1,3 @@
+export enum DataTableVariantType {
+  DEFAULT = 'DEFAULT',
+}

src/designSystem/kubit/components/tableBody/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './variants';

src/designSystem/kubit/components/tableBody/styles.ts

@@ -0,0 +1,11 @@
+import { TableCellStylesType } from '@/components';
+
+import { TableBodyVariantType } from './variants';
+
+export const TABLE_BODY_STYLES: TableCellStylesType<TableBodyVariantType> = {
+  [TableBodyVariantType.DEFAULT]: {
+    container: {
+      display: 'table-row-group',
+    },
+  },
+};

src/designSystem/kubit/components/tableBody/variants.ts

@@ -0,0 +1,3 @@
+export enum TableBodyVariantType {
+  DEFAULT = 'DEFAULT',
+}

src/designSystem/kubit/components/tableCaption/index.ts

@@ -0,0 +1,2 @@
+export * from './styles';
+export * from './variants';

src/designSystem/kubit/components/tableCaption/styles.ts

@@ -0,0 +1,11 @@
+import { TableCellStylesType } from '@/components';
+
+import { TableCaptionVariantType } from './variants';
+
+export const TABLE_CAPTION_STYLES: TableCellStylesType<TableCaptionVariantType> = {
+  [TableCaptionVariantType.DEFAULT]: {
+    container: {
+      display: 'table-caption',
+    },
+  },
+};

src/designSystem/kubit/components/tableCaption/variants.ts

@@ -0,0 +1,3 @@
+export enum TableCaptionVariantType {
+  DEFAULT = 'DEFAULT',
+}