From 0716e85a3f4ee6627298c9c150933f7d71d9fc37 Mon Sep 17 00:00:00 2001
From: Artur Fracala <arturfracala@MacBook-Pro-Artur.local>
Date: Mon, 9 Dec 2024 09:26:51 +0100
Subject: [PATCH] feat(Table): fixes after CR - part 3

---
 .../react-components/src/components/Table/Table.mdx  | 10 ++++++----
 .../src/components/Table/Table.spec.tsx              | 12 ------------
 .../react-components/src/components/Table/Table.tsx  |  2 ++
 .../src/components/Table/TableHeader.module.scss     |  2 +-
 .../src/components/Table/styles/pin.scss             |  8 ++++++++
 .../src/components/Table/styles/strips.scss          |  8 ++++++++
 .../react-components/src/components/Table/types.ts   |  4 ++++
 7 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/packages/react-components/src/components/Table/Table.mdx b/packages/react-components/src/components/Table/Table.mdx
index e6a9f54b7..890b7d43d 100644
--- a/packages/react-components/src/components/Table/Table.mdx
+++ b/packages/react-components/src/components/Table/Table.mdx
@@ -17,6 +17,9 @@ import * as Stories from './Table.stories';
 
 ```jsx
 
+import React from 'react';
+import { Button, Column, Table } from '@livechat/design-system-react-components';
+
 type Data = {
   id: number;
   name: string;
@@ -87,11 +90,10 @@ const data: Data[] = [
   },
 ];
 
- const getRowId = (row: Data) => row.id;
+const getRowId = (row: Data) => row.id;
 
-  return (
-    <Table size="medium" data={data} columns={columns} getRowId={getRowId} />
-  );
+<Table size="medium" data={data} columns={columns} getRowId={getRowId} />
+  
 ```
 
 ## Component API <a id="ComponentAPI" />
diff --git a/packages/react-components/src/components/Table/Table.spec.tsx b/packages/react-components/src/components/Table/Table.spec.tsx
index fd6b58ab0..7330c40fc 100644
--- a/packages/react-components/src/components/Table/Table.spec.tsx
+++ b/packages/react-components/src/components/Table/Table.spec.tsx
@@ -26,18 +26,6 @@ const data: Data[] = [
 describe('<Table> component', () => {
   const getRowId = (row: Data) => row.id;
 
-  it('should render a table with provided data and columns', () => {
-    const { getByRole, getAllByRole } = render(
-      <Table data={data} columns={columns} getRowId={getRowId} />
-    );
-
-    const table = getByRole('table');
-    expect(table).toBeInTheDocument();
-
-    const rows = getAllByRole('row');
-    expect(rows.length).toBe(data.length + 1);
-  });
-
   it('should allow row selection if selectable prop is enabled', () => {
     const onSelectionChange = vi.fn();
     const selectedRows = new Set<string>();
diff --git a/packages/react-components/src/components/Table/Table.tsx b/packages/react-components/src/components/Table/Table.tsx
index d480be7d0..57918f138 100644
--- a/packages/react-components/src/components/Table/Table.tsx
+++ b/packages/react-components/src/components/Table/Table.tsx
@@ -28,6 +28,7 @@ export const Table = <T,>({
   onSelectionChange,
   rowSelectionMessage,
   rowActions,
+  testId,
 }: ITableProps<T>) => {
   const columnRefs = React.useRef<(HTMLTableCellElement | null)[]>([]);
   const [hoveredColumnIndex, setHoveredColumnIndex] = React.useState<
@@ -183,6 +184,7 @@ export const Table = <T,>({
           styles[`${baseClass}--pinned_${pin}`],
           styles[`${baseClass}--stripped_${stripped}`]
         )}
+        data-testid={testId}
       >
         <TableHeader
           columns={columns}
diff --git a/packages/react-components/src/components/Table/TableHeader.module.scss b/packages/react-components/src/components/Table/TableHeader.module.scss
index 967ebec00..79eaa6c7b 100644
--- a/packages/react-components/src/components/Table/TableHeader.module.scss
+++ b/packages/react-components/src/components/Table/TableHeader.module.scss
@@ -43,7 +43,7 @@ $base-class: 'header';
     bottom: 0;
     background-color: var(--border-basic-secondary);
     cursor: col-resize;
-    width: 1px;
+    width: 2px;
     height: 100%;
 
     &:hover,
diff --git a/packages/react-components/src/components/Table/styles/pin.scss b/packages/react-components/src/components/Table/styles/pin.scss
index 4d148c2f6..54ab69510 100644
--- a/packages/react-components/src/components/Table/styles/pin.scss
+++ b/packages/react-components/src/components/Table/styles/pin.scss
@@ -17,6 +17,10 @@
       background-color: var(--background-01);
     }
 
+    tr:hover > td:first-child {
+      background-color: var(--surface-primary-hover);
+    }
+
     tr > td:first-child::after,
     th:first-child::after {
       position: absolute;
@@ -30,6 +34,10 @@
       content: '';
       clip-path: inset(0 -15px 0 0);
     }
+
+    tr:hover > td:first-child::after {
+      background-color: var(--surface-primary-hover);
+    }
   }
 
  @else {
diff --git a/packages/react-components/src/components/Table/styles/strips.scss b/packages/react-components/src/components/Table/styles/strips.scss
index bb25919bd..ab001f275 100644
--- a/packages/react-components/src/components/Table/styles/strips.scss
+++ b/packages/react-components/src/components/Table/styles/strips.scss
@@ -17,6 +17,14 @@
     tbody tr:hover td:nth-child(even) {
       background-color: var(--surface-primary-hover);
     }
+
+    thead tr th:nth-child(even) {
+      background-color: var(--surface-secondary-default);
+    }
+
+    thead tr:hover th:nth-child(even) {
+      background-color: var(--surface-primary-hover);
+    }
   }
 
  @else {
diff --git a/packages/react-components/src/components/Table/types.ts b/packages/react-components/src/components/Table/types.ts
index 0dbbdf6fa..b87cab3f5 100644
--- a/packages/react-components/src/components/Table/types.ts
+++ b/packages/react-components/src/components/Table/types.ts
@@ -78,6 +78,10 @@ export interface ITableProps<T> {
    * such as "Delete All" or "Export."
    */
   rowActions?: React.ReactNode;
+  /**
+   * Sets the `data-testid` attribute, allowing the table to be easily selected in automated tests.
+   */
+  testId?: string;
 }
 
 export interface SortConfig<T> {