From fad913ce6b27580a2f7b54984955324d1af08196 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Tue, 21 Jan 2025 06:00:20 +0100
Subject: [PATCH] [Table] ExpandableRow `contentGutter`-prop (#3507)

* :sparkles: New prop contentGutter for ExpandableRow component

* :sparkles: Added new prop-support in darkside CSS

* :memo: changeset

* Update @navikt/core/react/src/table/ExpandableRow.tsx

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

---------

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---
 .changeset/swift-lions-promise.md             |  6 ++
 @navikt/core/css/darkside/table.darkside.css  | 22 ++++++-
 @navikt/core/css/table.css                    | 22 ++++++-
 .../core/react/src/table/ExpandableRow.tsx    | 10 ++-
 .../stories/table-2-expandable.stories.tsx    | 62 +++++++++++++++++++
 5 files changed, 117 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/swift-lions-promise.md

diff --git a/.changeset/swift-lions-promise.md b/.changeset/swift-lions-promise.md
new file mode 100644
index 0000000000..a427a6d1f0
--- /dev/null
+++ b/.changeset/swift-lions-promise.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Table: New prop `contentGutter` added to `ExpandableRow`-component. This allows user more control for content layout inside expandable element.
diff --git a/@navikt/core/css/darkside/table.darkside.css b/@navikt/core/css/darkside/table.darkside.css
index 9ee3f7e799..87cf460cb9 100644
--- a/@navikt/core/css/darkside/table.darkside.css
+++ b/@navikt/core/css/darkside/table.darkside.css
@@ -229,9 +229,27 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--ax-space-16) calc(var(--ax-space-8) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--ax-space-8) + 3rem);
+
+  padding-block: var(--ax-space-16);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--ax-space-8) calc(var(--ax-space-8) + 3rem);
+  padding-block: var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--ax-space-8);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--ax-space-8) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--ax-space-8);
 }
diff --git a/@navikt/core/css/table.css b/@navikt/core/css/table.css
index 5089904bb9..f439d145ef 100644
--- a/@navikt/core/css/table.css
+++ b/@navikt/core/css/table.css
@@ -249,11 +249,29 @@
 }
 
 .navds-table__expanded-row-content {
-  padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
+  --__ac-table-expanded-row-pi: calc(var(--a-spacing-2) + 3rem);
+
+  padding-block: var(--a-spacing-4);
 }
 
 .navds-table--small .navds-table__expanded-row-content {
-  padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
+  padding-block: var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-both {
+  padding-inline: var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-left {
+  padding-inline: var(--__ac-table-expanded-row-pi) var(--a-spacing-2);
+}
+
+.navds-table__expanded-row-content--gutter-right {
+  padding-inline: var(--a-spacing-2) var(--__ac-table-expanded-row-pi);
+}
+
+.navds-table__expanded-row-content--gutter-none {
+  padding-inline: var(--a-spacing-2);
 }
 
 @media (forced-colors: active) {
diff --git a/@navikt/core/react/src/table/ExpandableRow.tsx b/@navikt/core/react/src/table/ExpandableRow.tsx
index 3e83d6b6bf..f83862103a 100644
--- a/@navikt/core/react/src/table/ExpandableRow.tsx
+++ b/@navikt/core/react/src/table/ExpandableRow.tsx
@@ -48,6 +48,11 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
    * @default 999
    */
   colSpan?: number;
+  /**
+   * Optional left, right-gutter for content
+   * @default Same as `togglePlacement`
+   */
+  contentGutter?: "left" | "right" | "none";
 }
 
 export type ExpandableRowType = React.ForwardRefExoticComponent<
@@ -67,6 +72,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       expansionDisabled = false,
       expandOnRowClick = false,
       colSpan = 999,
+      contentGutter,
       onClick,
       ...rest
     },
@@ -139,7 +145,9 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
-              innerClassName="navds-table__expanded-row-content"
+              innerClassName={`navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${
+                contentGutter ?? togglePlacement
+              }`}
               height={_open ? "auto" : 0}
               duration={150}
               easing="cubic-bezier(0.39,0.57,0.56,1)"
diff --git a/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx b/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx
index 280e785ea2..d86a9908ae 100644
--- a/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx
+++ b/@navikt/core/react/src/table/stories/table-2-expandable.stories.tsx
@@ -120,6 +120,68 @@ export const ExpandableSmall = () => {
   );
 };
 
+export const ExpandableContentGutter = () => {
+  return (
+    <Table zebraStripes>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell></Table.HeaderCell>
+          <Table.HeaderCell>Cell</Table.HeaderCell>
+          <Table.HeaderCell>Cell</Table.HeaderCell>
+          <Table.HeaderCell></Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.ExpandableRow
+          defaultOpen
+          content="ContentContent ContentContent ContentContent"
+          togglePlacement="left"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          togglePlacement="right"
+          defaultOpen
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          defaultOpen
+          contentGutter="left"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent"
+          defaultOpen
+          contentGutter="right"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+        <Table.ExpandableRow
+          content="ContentContent ContentContent ContentContent Con.."
+          defaultOpen
+          contentGutter="none"
+        >
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+          <Table.DataCell>Cell</Table.DataCell>
+        </Table.ExpandableRow>
+      </Table.Body>
+    </Table>
+  );
+};
+
 const columns = [
   {
     name: "Navn",