Merge pull request #105 from kodiak-packages/table-changes

Change hover state condition
kodiak-packages · Aug 18, 2020 · 145b79d · 145b79d
2 parents 20b88d4 + f5ca8d4
commit 145b79d
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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/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
@@ -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,39 @@ 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);
+  });
 });
diff --git 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
@@ -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
@@ -1,17 +1,27 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 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={name && `row-${name}`}>
+      {children}
+    </tr>
+  );
 };
 
 export default TableRow;
diff --git 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}
       />
     );