@navikt/ds-react 0.17.14 → 0.17.15

package/cjs/table/ExpandableRow.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Row_1 = __importDefault(require("./Row"));
+const DataCell_1 = __importDefault(require("./DataCell"));
+const react_collapse_1 = require("react-collapse");
+const ds_icons_1 = require("@navikt/ds-icons");
+const __1 = require("..");
+const ExpandableRow = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const id = `expandable-${(0, __1.useId)()}`;
+    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Row_1.default, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__expandable-row", className, {
+                "navds-table__expandable-row--open": isOpen,
+            }) }),
+            togglePlacement === "right" && children,
+            react_1.default.createElement(DataCell_1.default, { className: (0, classnames_1.default)("navds-table__toggle-expand-cell", {
+                    "navds-table__toggle-expand-cell--open": isOpen,
+                }) },
+                react_1.default.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
+                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+                        if (open === undefined) {
+                            setInternalOpen((open) => !open);
+                        }
+                    } },
+                    react_1.default.createElement(ds_icons_1.Expand, { className: "navds-table__expandable-icon", title: "Vis mer" }),
+                    react_1.default.createElement(ds_icons_1.ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: "Vis mindre" }))),
+            togglePlacement === "left" && children),
+        react_1.default.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+            react_1.default.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+                react_1.default.createElement(react_collapse_1.UnmountClosed, { isOpened: isOpen, theme: {
+                        collapse: "navds-table__expanded-row-collapse",
+                        content: "navds-table__expanded-row-content",
+                    } }, content)))));
+});
+exports.default = ExpandableRow;

package/cjs/table/Table.js

@@ -46,6 +46,7 @@ const Row_1 = __importDefault(require("./Row"));
 const ColumnHeader_1 = __importDefault(require("./ColumnHeader"));
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
+const ExpandableRow_1 = __importDefault(require("./ExpandableRow"));
 exports.TableContext = (0, react_1.createContext)(null);
 const Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
@@ -60,4 +61,5 @@ Table.Row = Row_1.default;
 Table.ColumnHeader = ColumnHeader_1.default;
 Table.HeaderCell = HeaderCell_1.default;
 Table.DataCell = DataCell_1.default;
+Table.ExpandableRow = ExpandableRow_1.default;
 exports.default = Table;

package/esm/table/ExpandableRow.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { RowProps } from "./Row";
+interface ExpandableRowProps extends RowProps {
+    /**
+     * Content of the expanded row
+     */
+    content: React.ReactNode;
+    /**
+     * Placement of toggle button
+     * @default "left"
+     */
+    togglePlacement?: "left" | "right";
+    /**
+     * Opens component if 'true', closes if 'false'
+     * Using this props removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Opened state default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Change handler for open
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+export interface ExpandableRowType extends React.ForwardRefExoticComponent<ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>> {
+}
+declare const ExpandableRow: ExpandableRowType;
+export default ExpandableRow;

package/esm/table/ExpandableRow.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useState } from "react";
+import cl from "classnames";
+import Row from "./Row";
+import DataCell from "./DataCell";
+import { UnmountClosed } from "react-collapse";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import { useId } from "..";
+const ExpandableRow = forwardRef((_a, ref) => {
+    var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange"]);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const id = `expandable-${useId()}`;
+    const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Row, Object.assign({}, rest, { ref: ref, className: cl("navds-table__expandable-row", className, {
+                "navds-table__expandable-row--open": isOpen,
+            }) }),
+            togglePlacement === "right" && children,
+            React.createElement(DataCell, { className: cl("navds-table__toggle-expand-cell", {
+                    "navds-table__toggle-expand-cell--open": isOpen,
+                }) },
+                React.createElement("button", { className: "navds-table__toggle-expand-button", "aria-controls": id, "aria-expanded": isOpen, onClick: () => {
+                        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(!isOpen);
+                        if (open === undefined) {
+                            setInternalOpen((open) => !open);
+                        }
+                    } },
+                    React.createElement(Expand, { className: "navds-table__expandable-icon", title: "Vis mer" }),
+                    React.createElement(ExpandFilled, { className: "navds-table__expandable-icon navds-table__expandable-icon--filled", title: "Vis mindre" }))),
+            togglePlacement === "left" && children),
+        React.createElement("tr", { className: "navds-table__expanded-row", "aria-hidden": !isOpen, id: id },
+            React.createElement("td", { colSpan: 999, className: "navds-table__expanded-row-cell" },
+                React.createElement(UnmountClosed, { isOpened: isOpen, theme: {
+                        collapse: "navds-table__expanded-row-collapse",
+                        content: "navds-table__expanded-row-content",
+                    } }, content)))));
+});
+export default ExpandableRow;
+//# sourceMappingURL=ExpandableRow.js.map

package/esm/table/ExpandableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableRow.js","sourceRoot":"","sources":["../../src/table/ExpandableRow.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,GAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAiC3B,MAAM,aAAa,GAAsB,UAAU,CACjD,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,GAAG,MAAM,EACxB,WAAW,GAAG,KAAK,EACnB,IAAI,EACJ,YAAY,OAEb,EADI,IAAI,cART,8FASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,EAAE,GAAG,cAAc,KAAK,EAAE,EAAE,CAAC;IAEnC,MAAM,MAAM,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEpC,OAAO,CACL;QACE,oBAAC,GAAG,oBACE,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,EAAE;gBACtD,mCAAmC,EAAE,MAAM;aAC5C,CAAC;YAED,eAAe,KAAK,OAAO,IAAI,QAAQ;YACxC,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE;oBAC/C,uCAAuC,EAAE,MAAM;iBAChD,CAAC;gBAEF,gCACE,SAAS,EAAC,mCAAmC,mBAC9B,EAAE,mBACF,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE;wBACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,MAAM,CAAC,CAAC;wBACxB,IAAI,IAAI,KAAK,SAAS,EAAE;4BACtB,eAAe,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;yBAClC;oBACH,CAAC;oBAED,oBAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAC,SAAS,GACf;oBACF,oBAAC,YAAY,IACX,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAC,YAAY,GAClB,CACK,CACA;YACV,eAAe,KAAK,MAAM,IAAI,QAAQ,CACnC;QACN,4BAAI,SAAS,EAAC,2BAA2B,iBAAc,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;YACpE,4BAAI,OAAO,EAAE,GAAG,EAAE,SAAS,EAAC,gCAAgC;gBAC1D,oBAAC,aAAa,IACZ,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;wBACL,QAAQ,EAAE,oCAAoC;wBAC9C,OAAO,EAAE,mCAAmC;qBAC7C,IAEA,OAAO,CACM,CACb,CACF,CACJ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/esm/table/Row.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * Row is selected
      * @default false

package/esm/table/Table.d.ts

@@ -5,6 +5,7 @@ import { RowType } from "./Row";
 import { ColumnHeaderType } from "./ColumnHeader";
 import { HeaderCellType } from "./HeaderCell";
 import { DataCellType } from "./DataCell";
+import { ExpandableRowType } from "./ExpandableRow";
 export interface SortState {
     orderBy: string;
     direction: "ascending" | "descending";
@@ -36,6 +37,7 @@ export interface TableType extends React.ForwardRefExoticComponent<TableProps &
     DataCell: DataCellType;
     HeaderCell: HeaderCellType;
     ColumnHeader: ColumnHeaderType;
+    ExpandableRow: ExpandableRowType;
 }
 export interface TableContextProps {
     size: "medium" | "small";

package/esm/table/Table.js

@@ -17,6 +17,7 @@ import Row from "./Row";
 import ColumnHeader from "./ColumnHeader";
 import HeaderCell from "./HeaderCell";
 import DataCell from "./DataCell";
+import ExpandableRow from "./ExpandableRow";
 export const TableContext = createContext(null);
 const Table = forwardRef((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
@@ -31,5 +32,6 @@ Table.Row = Row;
 Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;
+Table.ExpandableRow = ExpandableRow;
 export default Table;
 //# sourceMappingURL=Table.js.map

package/esm/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+CpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,QAAQ,EACf,YAAY,EACZ,IAAI,OAEL,EADI,IAAI,cANT,6DAOC,CADQ;IAGN,OAAA,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;QACxD,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AACpD,OAAO,aAAoC,MAAM,iBAAiB,CAAC;AAgDnE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,QAAQ,EACf,YAAY,EACZ,IAAI,OAEL,EADI,IAAI,cANT,6DAOC,CADQ;IAGN,OAAA,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;QACxD,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAC1B,KAAK,CAAC,aAAa,GAAG,aAAa,CAAC;AAEpC,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.14",
+  "version": "0.17.15",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -68,5 +68,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "88e2c2b2fee9701bf1cb370538c22c84e448d62a"
+  "gitHead": "c80cb199a138566285d516e8c2f5aa3993afb20f"
 }

package/src/table/ExpandableRow.tsx

@@ -0,0 +1,115 @@
+import React, { forwardRef, useState } from "react";
+import cl from "classnames";
+import Row, { RowProps } from "./Row";
+import DataCell from "./DataCell";
+import { UnmountClosed } from "react-collapse";
+import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import { useId } from "..";
+
+interface ExpandableRowProps extends RowProps {
+  /**
+   * Content of the expanded row
+   */
+  content: React.ReactNode;
+  /**
+   * Placement of toggle button
+   * @default "left"
+   */
+  togglePlacement?: "left" | "right";
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Opened state default
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Change handler for open
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface ExpandableRowType
+  extends React.ForwardRefExoticComponent<
+    ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>
+  > {}
+
+const ExpandableRow: ExpandableRowType = forwardRef(
+  (
+    {
+      className,
+      children,
+      content,
+      togglePlacement = "left",
+      defaultOpen = false,
+      open,
+      onOpenChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const id = `expandable-${useId()}`;
+
+    const isOpen = open ?? internalOpen;
+
+    return (
+      <>
+        <Row
+          {...rest}
+          ref={ref}
+          className={cl("navds-table__expandable-row", className, {
+            "navds-table__expandable-row--open": isOpen,
+          })}
+        >
+          {togglePlacement === "right" && children}
+          <DataCell
+            className={cl("navds-table__toggle-expand-cell", {
+              "navds-table__toggle-expand-cell--open": isOpen,
+            })}
+          >
+            <button
+              className="navds-table__toggle-expand-button"
+              aria-controls={id}
+              aria-expanded={isOpen}
+              onClick={() => {
+                onOpenChange?.(!isOpen);
+                if (open === undefined) {
+                  setInternalOpen((open) => !open);
+                }
+              }}
+            >
+              <Expand
+                className="navds-table__expandable-icon"
+                title="Vis mer"
+              />
+              <ExpandFilled
+                className="navds-table__expandable-icon navds-table__expandable-icon--filled"
+                title="Vis mindre"
+              />
+            </button>
+          </DataCell>
+          {togglePlacement === "left" && children}
+        </Row>
+        <tr className="navds-table__expanded-row" aria-hidden={!isOpen} id={id}>
+          <td colSpan={999} className="navds-table__expanded-row-cell">
+            <UnmountClosed
+              isOpened={isOpen}
+              theme={{
+                collapse: "navds-table__expanded-row-collapse",
+                content: "navds-table__expanded-row-content",
+              }}
+            >
+              {content}
+            </UnmountClosed>
+          </td>
+        </tr>
+      </>
+    );
+  }
+);
+
+export default ExpandableRow;

package/src/table/Row.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
    * Row is selected
    * @default false

package/src/table/Table.tsx

@@ -6,6 +6,7 @@ import Row, { RowType } from "./Row";
 import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
+import ExpandableRow, { ExpandableRowType } from "./ExpandableRow";
 
 export interface SortState {
   orderBy: string;
@@ -44,6 +45,7 @@ export interface TableType
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
   ColumnHeader: ColumnHeaderType;
+  ExpandableRow: ExpandableRowType;
 }
 
 export interface TableContextProps {
@@ -84,5 +86,6 @@ Table.Row = Row;
 Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;
+Table.ExpandableRow = ExpandableRow;
 
 export default Table;

package/src/table/stories/table-expandable.stories.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from "react";
+import { Table } from "..";
+import { Link } from "../..";
+
+export default {
+  title: "ds-react/table",
+  component: Table,
+};
+
+export const Expandable = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            {columns.map(({ key, name }) => (
+              <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
+            ))}
+            <Table.HeaderCell />
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {data.map((data) => (
+            <Table.ExpandableRow
+              content={data.content}
+              key={data.name}
+              togglePlacement="right"
+            >
+              {columns.map(({ key }) => (
+                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              ))}
+            </Table.ExpandableRow>
+          ))}
+        </Table.Body>
+      </Table>
+      <h2>defaultOpen/controlled + small</h2>
+      <Table size="small">
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell />
+            {columns.map(({ key, name }) => (
+              <Table.HeaderCell key={key}>{name}</Table.HeaderCell>
+            ))}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {data.slice(0, 1).map((data) => (
+            <Table.ExpandableRow
+              content={data.content}
+              key={data.name}
+              defaultOpen
+            >
+              {columns.map(({ key }) => (
+                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              ))}
+            </Table.ExpandableRow>
+          ))}
+          {data.slice(1, 2).map((data) => (
+            <Table.ExpandableRow
+              content={data.content}
+              key={data.name}
+              open={open}
+              onOpenChange={(open) => setOpen(open)}
+            >
+              {columns.map(({ key }) => (
+                <Table.DataCell key={key}>{data[key]}</Table.DataCell>
+              ))}
+            </Table.ExpandableRow>
+          ))}
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+const columns = [
+  {
+    name: "Navn",
+    key: "name",
+  },
+  {
+    name: "Favoritt dyr",
+    key: "animal",
+  },
+  {
+    name: "Favoritt farge",
+    key: "color",
+  },
+  {
+    name: "Minst favoritt dyr",
+    key: "leastAnimal",
+  },
+  {
+    name: "Minst favoritt farge",
+    key: "leastColor",
+  },
+  {
+    name: "Status",
+    key: "status",
+  },
+];
+
+const data = [
+  {
+    name: "Ola Conny Brakkestad",
+    animal: "Ku",
+    color: "Brun",
+    leastAnimal: "Sel",
+    leastColor: "Lyseblå",
+    status: "Inaktiv",
+    content: (
+      <>
+        Ola Conny Brakkestad sier "hei". Her er litt innhold med en{" "}
+        <Link href="#">link.</Link>
+      </>
+    ),
+  },
+
+  {
+    name: "Henriette Kristensen",
+    animal: "Bjørn",
+    color: "Hvit",
+    leastAnimal: "Grevling",
+    leastColor: "Transparent",
+    status: <Link href="http://example.com">Hissig</Link>,
+    content: (
+      <>
+        Henriette Kristensen sier "hei". Her er litt innhold med en{" "}
+        <Link href="http://example.com">lenke</Link>. I forhold til en betydelig
+        avveining synliggjøres potensialet med sikte på satsingsområdet. Gitt en
+        manglende avveining synliggjøres instrumentet på bakgrunn av forholdene.
+        Under hensyntagen til en inkluderende avveining stimuleres resultatene
+        med henblikk på løsningen. På grunn av en integrert organisasjon
+        initieres kunnskapene eller sagt på en annen måte: evalueringen. Grunnet
+        en gjeldende målsetting dokumenteres relasjonene hva angår egenarten.
+      </>
+    ),
+  },
+
+  {
+    name: "Suki Clydesdale",
+    animal: "Sel",
+    color: "Grønn",
+    leastAnimal: "Serval",
+    leastColor: "Rosa",
+    status: "Deaktivert",
+    content: (
+      <>
+        Suki Clydesdale sier "hei". Her er litt innhold med en{" "}
+        <Link href="http://example.com">link</Link>.
+      </>
+    ),
+  },
+
+  {
+    name: "Hans-Hermann Hoppe",
+    animal: "Mudkip",
+    color: "Oransje",
+    leastAnimal: "Skare",
+    leastColor: "Hvit",
+    status: <Link href="#">Starter</Link>,
+    content: (
+      <>
+        Hans-Hermann Hoppe sier "hei". Her er litt innhold med en{" "}
+        <Link href="http://example.com">link</Link>.
+      </>
+    ),
+  },
+
+  {
+    name: "Max Kraft",
+    animal: "Løve",
+    color: "Blå",
+    leastAnimal: "Hund",
+    leastColor: "Cyan",
+    status: <Link href="#">Eksplodert</Link>,
+    content: (
+      <>
+        Max Kraft sier "hei". Her er litt innhold med en{" "}
+        <Link href="http://example.com">link</Link>.
+      </>
+    ),
+  },
+
+  {
+    name: "Pat Ole",
+    animal: "Bjørnedyr",
+    color: "Gul",
+    leastAnimal: "Meitemark",
+    leastColor: "Svart",
+    status: <Link href="#">Gunstig</Link>,
+    content: (
+      <>
+        Pat Ole sier "hei". Her er litt innhold med en{" "}
+        <Link href="http://example.com">lenke</Link>.
+      </>
+    ),
+  },
+];