From e033b34c3b85fb98dd11dd0300bb20075e1b06e8 Mon Sep 17 00:00:00 2001
From: marionhauffnav <124582506+MarionHauffNAV@users.noreply.github.com>
Date: Mon, 7 Aug 2023 13:42:07 +0200
Subject: [PATCH] Table component: adding click event on expandable table rows
 (#2127)

Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
---
 .changeset/heavy-pandas-marry.md              |  6 ++
 @navikt/core/css/table.css                    |  6 +-
 .../core/react/src/table/ExpandableRow.tsx    | 36 ++++++++---
 .../stories/table-expandable.stories.tsx      | 63 ++++++++++++++++++-
 4 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/heavy-pandas-marry.md

diff --git a/.changeset/heavy-pandas-marry.md b/.changeset/heavy-pandas-marry.md
new file mode 100644
index 0000000000..538e3a54dd
--- /dev/null
+++ b/.changeset/heavy-pandas-marry.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+---
+
+Table: ExpandableRow kan nå åpnes med 'expandOnRowClick'-prop 
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
index 70d37c717a..4c967f5810 100644
--- a/@navikt/core/css/table.css
+++ b/@navikt/core/css/table.css
@@ -16,7 +16,7 @@
   display: table-row;
 }
 
-.navds-table__body .navds-table__row--shade-on-hover:hover {
+.navds-table__body .navds-table__row--shade-on-hover:not(.navds-table__expandable-row--expansion-disabled):hover {
   background-color: var(--ac-table-row-hover, var(--a-bg-subtle));
 }
 
@@ -154,6 +154,10 @@
   transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
 }
 
+.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled):hover {
+  cursor: pointer;
+}
+
 .navds-table__expandable-row--open .navds-table__data-cell {
   border-bottom-color: transparent;
 }
diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx
index ecfb93cd8d..16856561b6 100644
--- a/@navikt/core/react/src/table/ExpandableRow.tsx
+++ b/@navikt/core/react/src/table/ExpandableRow.tsx
@@ -31,10 +31,15 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Disable expansio
+   * Disable expansion. shadeOnHover will not be visible.
    * @default false
    */
   expansionDisabled?: boolean;
+  /**
+   * Makes the whole row clickable
+   * @default false
+   */
+  expandOnRowClick?: boolean;
   /**
    * The width of the expanded row's internal cell
    * @default 999
@@ -58,6 +63,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       open,
       onOpenChange,
       expansionDisabled = false,
+      expandOnRowClick = false,
       colSpan = 999,
       ...rest
     },
@@ -65,9 +71,22 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const id = useId();
-
     const isOpen = open ?? internalOpen;
 
+    const expansionHandler = (e) => {
+      onOpenChange?.(!isOpen);
+      if (open === undefined) {
+        setInternalOpen((open) => !open);
+      }
+      e.stopPropagation();
+    };
+
+    const onRowClick = (e) => {
+      if (e.target.nodeName === "TD" || e.target.nodeName === "TH") {
+        expansionHandler(e);
+      }
+    };
+
     return (
       <>
         <Row
@@ -75,7 +94,13 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           ref={ref}
           className={cl("navds-table__expandable-row", className, {
             "navds-table__expandable-row--open": isOpen,
+            "navds-table__expandable-row--expansion-disabled":
+              expansionDisabled,
           })}
+          onClick={(e) => {
+            !expansionDisabled && expandOnRowClick && onRowClick(e);
+            rest?.onClick?.(e);
+          }}
         >
           {togglePlacement === "right" && children}
           <DataCell
@@ -89,12 +114,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                 className="navds-table__toggle-expand-button"
                 aria-controls={id}
                 aria-expanded={isOpen}
-                onClick={() => {
-                  onOpenChange?.(!isOpen);
-                  if (open === undefined) {
-                    setInternalOpen((open) => !open);
-                  }
-                }}
+                onClick={expansionHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"
diff --git a/@navikt/core/react/src/table/stories/table-expandable.stories.tsx b/@navikt/core/react/src/table/stories/table-expandable.stories.tsx
index bec377cd94..33392631d7 100644
--- a/@navikt/core/react/src/table/stories/table-expandable.stories.tsx
+++ b/@navikt/core/react/src/table/stories/table-expandable.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Table } from "..";
-import { Link } from "../..";
+import { Button, Checkbox, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
@@ -37,6 +37,7 @@ export const Expandable = () => {
 };
 
 export const ExpandableSmall = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [open, setOpen] = useState(false);
   return (
     <Table size="small">
@@ -227,3 +228,63 @@ export const ExpandableOpen = () => {
     </Table>
   );
 };
+
+export const ClickableRow = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen1, setIsRowOpen1] = useState(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isRowOpen2, setIsRowOpen2] = useState(false);
+
+    return (
+      <>
+        <Table zebraStripes>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Navn</Table.HeaderCell>
+              <Table.HeaderCell>Info</Table.HeaderCell>
+              <Table.HeaderCell aria-hidden />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.ExpandableRow
+              content={<div>placeholder row 1</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen1}
+              data-testid="row1"
+              open={isRowOpen1}
+              expandOnRowClick
+            >
+              <Table.DataCell>Ola</Table.DataCell>
+              <Table.DataCell>
+                <Button
+                  size="xsmall"
+                  onClick={(e) => {
+                    alert("Mer info");
+                  }}
+                >
+                  Mer info
+                </Button>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+            <Table.ExpandableRow
+              content={<div>placeholder row 2</div>}
+              togglePlacement="right"
+              onOpenChange={setIsRowOpen2}
+              data-testid="row2"
+              open={isRowOpen2}
+              expandOnRowClick
+            >
+              <Table.DataCell>Hans</Table.DataCell>
+              <Table.DataCell>
+                <Checkbox hideLabel size="small">
+                  Sett
+                </Checkbox>
+              </Table.DataCell>
+            </Table.ExpandableRow>
+          </Table.Body>
+        </Table>
+      </>
+    );
+  },
+};