feat(Table): table size supported (#50)

src/components/Table/Table.scss

@@ -16,10 +16,20 @@ $block: '.#{variables.$ns}styled-table';
         @include mixins.text-subheader-1();
     }
 
+    &_size {
+        &_s {
+            --_--cell-padding: 7px var(--g-spacing-2) 6px;
+        }
+
+        &_m {
+            --_--cell-padding: 11px var(--g-spacing-2) 10px;
+        }
+    }
+
     &__cell,
     &__header-cell,
     &__footer-cell {
-        padding: 11px var(--g-spacing-2) 10px;
+        padding: var(--_--cell-padding);
         border-block-end: 1px solid var(--g-color-line-generic);
     }
 }

src/components/Table/Table.tsx

@@ -4,11 +4,15 @@ import {BaseTable} from '../BaseTable';
 import type {BaseTableProps} from '../BaseTable';
 
 import {b} from './Table.classname';
+import type {TableSize} from './types';
 
 import './Table.scss';
 
 export interface TableProps<TData, TScrollElement extends Element | Window = HTMLDivElement>
-    extends BaseTableProps<TData, TScrollElement> {}
+    extends BaseTableProps<TData, TScrollElement> {
+    /** Table size */
+    size?: TableSize;
+}
 
 export const Table = React.forwardRef(
     <TData, TScrollElement extends Element | Window = HTMLDivElement>(
@@ -18,6 +22,7 @@ export const Table = React.forwardRef(
             footerCellClassName: footerCellClassNameProp,
             headerCellClassName: headerCellClassNameProp,
             headerClassName,
+            size = 'm',
             ...props
         }: TableProps<TData, TScrollElement>,
         ref: React.Ref<HTMLTableElement>,
@@ -49,7 +54,7 @@ export const Table = React.forwardRef(
         return (
             <BaseTable
                 ref={ref}
-                className={b(null, className)}
+                className={b({size}, className)}
                 cellClassName={cellClassName}
                 footerCellClassName={footerCellClassName}
                 headerCellClassName={headerCellClassName}

src/components/Table/__stories__/Table.stories.tsx

@@ -5,6 +5,7 @@ import {Table} from '../index';
 import {DefaultStory} from './stories/DefaultStory';
 import {ReorderingStory} from './stories/ReorderingStory';
 import {ReorderingWithVirtualizationStory} from './stories/ReorderingWithVirtualizationStory';
+import {SizeSStory} from './stories/SizeSStory';
 import {StickyHeaderStory} from './stories/StickyHeaderStory';
 import {VirtualizationStory} from './stories/VirtualizationStory';
 import {WindowVirtualizationStory} from './stories/WindowVirtualizationStory';
@@ -21,6 +22,10 @@ export const Default: StoryObj<typeof DefaultStory> = {
     render: DefaultStory,
 };
 
+export const SizeS: StoryObj<typeof SizeSStory> = {
+    render: SizeSStory,
+};
+
 export const WithSelection: StoryObj<typeof WithSelectionStory> = {
     render: WithSelectionStory,
 };

src/components/Table/__stories__/stories/SizeSStory.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {useTable} from '../../../../hooks';
+import {columns} from '../../../BaseTable/__stories__/constants/columns';
+import {data} from '../../../BaseTable/__stories__/constants/data';
+import {Table} from '../../index';
+
+export const SizeSStory = () => {
+    const table = useTable({
+        columns,
+        data,
+    });
+
+    return <Table table={table} size="s" />;
+};

src/components/Table/index.ts

@@ -1 +1,2 @@
 export * from './Table';
+export * from './types';

src/components/Table/types.ts

@@ -0,0 +1 @@
+export type TableSize = 's' | 'm';