From eb875e765d2e30cfc37956005787a9c92be60960 Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Tue, 18 Aug 2020 18:41:50 +0200
Subject: [PATCH 1/3] fix(Table): hover state

---
 src/components/Table/Table.mdx                | 64 +++++++++++++++++++
 src/components/Table/Table.test.tsx           | 40 +++++++++++-
 .../Table/TableCell/TableCell.module.css      |  2 +-
 .../Table/TableRow/TableRow.module.css        |  3 +-
 src/components/Table/TableRow/TableRow.tsx    | 18 ++++--
 .../Table/__snapshots__/Table.test.tsx.snap   |  7 ++
 6 files changed, 127 insertions(+), 7 deletions(-)

diff --git a/src/components/Table/Table.mdx b/src/components/Table/Table.mdx
index a3ae1438..e87c9c0f 100644
--- a/src/components/Table/Table.mdx
+++ b/src/components/Table/Table.mdx
@@ -107,6 +107,70 @@ Use the different building block to correctly structure your table:
     </Table>
 </Playground>
 
+### Table with click events
+
+<Playground>
+    <Table>
+      <Table.Header>
+        <Table.Cell>
+          Course
+        </Table.Cell>
+        <Table.Cell>
+          Length
+        </Table.Cell>
+        <Table.Cell>
+          Status
+        </Table.Cell>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row onClick={() => {alert('Row clicked');}}>
+          <Table.Cell>
+           Introduction To React
+          </Table.Cell>
+          <Table.Cell>
+            2h 27m
+          </Table.Cell>
+           <Table.Cell>
+            <CheckCircle /> Finished
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row onClick={() => {alert('Row clicked');}}>
+          <Table.Cell>
+           Introduction To Docker
+          </Table.Cell>
+          <Table.Cell>
+            33m
+          </Table.Cell>
+           <Table.Cell>
+           <Circle /> Not started
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row onClick={() => {alert('Row clicked');}}>
+          <Table.Cell>
+           Introduction To Python
+          </Table.Cell>
+          <Table.Cell>
+            1h 45m
+          </Table.Cell>
+           <Table.Cell>
+            <Circle /> Not started
+          </Table.Cell>
+        </Table.Row>
+        <Table.Row onClick={() => {alert('Row clicked');}}>
+          <Table.Cell>
+           Introduction To Ventura
+          </Table.Cell>
+          <Table.Cell>
+           15m
+          </Table.Cell>
+           <Table.Cell>
+            <PauseCircle /> In progress
+          </Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+</Playground>
+
 ## API
 
 ### Table
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index c6f9aece..5d5cedb0 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Table from './Table';
 
@@ -44,4 +44,42 @@ describe('Table', () => {
     const { asFragment } = render(component);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('onClick property', () => {
+    const onClickFn = jest.fn();
+
+    const component = (
+      <Table>
+        <Table.Header>
+          <Table.Cell>Course</Table.Cell>
+          <Table.Cell>Length</Table.Cell>
+          <Table.Cell>Status</Table.Cell>
+        </Table.Header>
+        <Table.Body>
+          {courses.map((course, index) => {
+            return (
+              <Table.Row
+                key={course.name}
+                name={index === 0 ? 'click' : undefined}
+                onClick={onClickFn}
+              >
+                <Table.Cell>{course.name}</Table.Cell>
+                <Table.Cell>{course.length}</Table.Cell>
+                <Table.Cell>{course.status}</Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+    );
+
+    const { getByTestId } = render(component);
+    const button = getByTestId('row-click');
+
+    fireEvent.click(button);
+    expect(onClickFn).toHaveBeenCalledTimes(1);
+
+    // const { asFragment } = render(component);
+    // expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Table/TableCell/TableCell.module.css b/src/components/Table/TableCell/TableCell.module.css
index 2d54814d..ff7be9dd 100644
--- a/src/components/Table/TableCell/TableCell.module.css
+++ b/src/components/Table/TableCell/TableCell.module.css
@@ -28,7 +28,7 @@
 }
 
 .headerCell {
-  background-color: var(--color-primary-hover);
+  background-color: var(--color-primary);
   height: 36px;
   line-height: 36px;
   padding-left: 14px;
diff --git a/src/components/Table/TableRow/TableRow.module.css b/src/components/Table/TableRow/TableRow.module.css
index 8ffa2f29..6cbb4750 100644
--- a/src/components/Table/TableRow/TableRow.module.css
+++ b/src/components/Table/TableRow/TableRow.module.css
@@ -2,6 +2,7 @@
   background-color: var(--color-primary);
 }
 
-.row:hover td {
+.hoverable:hover td {
   background-color: var(--color-primary-hover);
+  cursor: pointer;
 }
diff --git a/src/components/Table/TableRow/TableRow.tsx b/src/components/Table/TableRow/TableRow.tsx
index 89ca6f92..566c3c4f 100644
--- a/src/components/Table/TableRow/TableRow.tsx
+++ b/src/components/Table/TableRow/TableRow.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import styles from './TableRow.module.css';
@@ -6,12 +6,22 @@ import styles from './TableRow.module.css';
 type Props = {
   className?: string;
   children?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLTableRowElement>;
+  name?: string;
 };
 
-const TableRow: React.FC<Props> = ({ className, children }: Props) => {
-  const tableClassNames = classNames(styles.row, className);
+const TableRow: React.FC<Props> = ({ className, children, onClick, name }: Props) => {
+  const tableClassNames = classNames(
+    styles.row,
+    { [styles.hoverable]: Boolean(onClick) },
+    className,
+  );
 
-  return <tr className={tableClassNames}>{children}</tr>;
+  return (
+    <tr onClick={onClick} className={tableClassNames} data-testid={`row-${name}`}>
+      {children}
+    </tr>
+  );
 };
 
 export default TableRow;
diff --git a/src/components/Table/__snapshots__/Table.test.tsx.snap b/src/components/Table/__snapshots__/Table.test.tsx.snap
index a8c776cf..77d08a65 100644
--- a/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`Table default snapshot 1`] = `
     <tbody>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -46,6 +47,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -65,6 +67,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -84,6 +87,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -103,6 +107,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -122,6 +127,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -141,6 +147,7 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
+        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"

From 13020cb8b4b9c0f3f9e9065b55081fb5bd0090bf Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Tue, 18 Aug 2020 18:55:24 +0200
Subject: [PATCH 2/3] remove forgotten comment

---
 src/components/Table/Table.test.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 5d5cedb0..6343a69c 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -78,8 +78,5 @@ describe('Table', () => {
 
     fireEvent.click(button);
     expect(onClickFn).toHaveBeenCalledTimes(1);
-
-    // const { asFragment } = render(component);
-    // expect(asFragment()).toMatchSnapshot();
   });
 });

From f5ca8d4c4f73b57f9be82fde803104423c64be22 Mon Sep 17 00:00:00 2001
From: Bram Vanhoutte <bram.vanhoutte.x@gmail.com>
Date: Tue, 18 Aug 2020 18:58:05 +0200
Subject: [PATCH 3/3] remove test-id when no name is given

---
 src/components/Button/Button.tsx                         | 2 +-
 src/components/Button/__snapshots__/Button.test.tsx.snap | 4 ----
 src/components/Input/Input.tsx                           | 2 +-
 src/components/Table/TableRow/TableRow.tsx               | 2 +-
 src/components/Table/__snapshots__/Table.test.tsx.snap   | 7 -------
 src/components/TextArea/TextArea.tsx                     | 2 +-
 6 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 008ef908..2c070025 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -58,7 +58,7 @@ const Button: React.FC<Props> = ({
       type={htmlType}
       onClick={isLoading || suffixIcon ? undefined : onClick}
       name={name}
-      data-testid={`button-${name}`}
+      data-testid={name && `button-${name}`}
     >
       {isLoading ? <Spinner className={styles.spinner} /> : prefixIcon}
       <span className={labelClassNames}>{children}</span>
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
index 04b22c49..4d9c3271 100644
--- a/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`Button default snapshot 1`] = `
 <DocumentFragment>
   <button
     class="ventura button typePrimary"
-    data-testid="button-undefined"
     type="button"
   >
     <span
@@ -68,7 +67,6 @@ exports[`Button prefix icon button 1`] = `
 <DocumentFragment>
   <button
     class="ventura button typePrimary"
-    data-testid="button-undefined"
     type="button"
   >
     <svg
@@ -99,7 +97,6 @@ exports[`Button secondary button 1`] = `
 <DocumentFragment>
   <button
     class="ventura button typeSecondary"
-    data-testid="button-undefined"
     type="button"
   >
     <span
@@ -115,7 +112,6 @@ exports[`Button suffix icon button 1`] = `
 <DocumentFragment>
   <button
     class="ventura button typePrimary"
-    data-testid="button-undefined"
     type="button"
   >
     <span
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index cc6a4b34..aee30f39 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -56,7 +56,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
         maxLength={maxLength}
         ref={ref}
         className={inputClassNames}
-        data-testid={`input-${name}`}
+        data-testid={name && `input-${name}`}
         onBlur={onBlur}
       />
     );
diff --git a/src/components/Table/TableRow/TableRow.tsx b/src/components/Table/TableRow/TableRow.tsx
index 566c3c4f..9f746716 100644
--- a/src/components/Table/TableRow/TableRow.tsx
+++ b/src/components/Table/TableRow/TableRow.tsx
@@ -18,7 +18,7 @@ const TableRow: React.FC<Props> = ({ className, children, onClick, name }: Props
   );
 
   return (
-    <tr onClick={onClick} className={tableClassNames} data-testid={`row-${name}`}>
+    <tr onClick={onClick} className={tableClassNames} data-testid={name && `row-${name}`}>
       {children}
     </tr>
   );
diff --git a/src/components/Table/__snapshots__/Table.test.tsx.snap b/src/components/Table/__snapshots__/Table.test.tsx.snap
index 77d08a65..a8c776cf 100644
--- a/src/components/Table/__snapshots__/Table.test.tsx.snap
+++ b/src/components/Table/__snapshots__/Table.test.tsx.snap
@@ -27,7 +27,6 @@ exports[`Table default snapshot 1`] = `
     <tbody>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -47,7 +46,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -67,7 +65,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -87,7 +84,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -107,7 +103,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -127,7 +122,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
@@ -147,7 +141,6 @@ exports[`Table default snapshot 1`] = `
       </tr>
       <tr
         class="row"
-        data-testid="row-undefined"
       >
         <td
           class="cellAlignLeft cell"
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index bb0fff67..ba11e1b6 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -53,7 +53,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(
         maxLength={maxLength}
         ref={ref}
         className={textareaClassNames}
-        data-testid={`textarea-${name}`}
+        data-testid={name && `textarea-${name}`}
         onBlur={onBlur}
       />
     );