@navikt/ds-react 0.17.14 → 0.17.17

package/esm/tooltip/Tooltip.js

@@ -0,0 +1,126 @@
+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 cl from "classnames";
+import React, { cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { composeEventHandlers, Detail, useEventListener } from "..";
+import { useFloating, arrow as flArrow, shift, autoUpdate, flip, hide, } from "@floating-ui/react-dom";
+import mergeRefs from "react-merge-refs";
+import Portal from "./portal";
+import { useId } from "../util";
+const Tooltip = forwardRef((_a, ref) => {
+    var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
+    const arrowRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const openTimerRef = useRef(0);
+    const leaveTimerRef = useRef(0);
+    const isMouseDownRef = useRef(false);
+    const ariaId = useId(id);
+    const { x, y, update, placement, refs, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, } = useFloating({
+        placement: _placement,
+        middleware: [
+            shift(),
+            flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            flArrow({ element: arrowRef, padding: 5 }),
+            hide(),
+        ],
+    });
+    /* https://floating-ui.com/docs/react-dom#updating */
+    useEffect(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        // Only call this when the floating element is rendered
+        return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+    const handleOpen = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        setIsOpen(true);
+    }, [setIsOpen]);
+    const handleDelayedOpen = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        window.clearTimeout(leaveTimerRef.current);
+        openTimerRef.current = window.setTimeout(() => {
+            setIsOpen(true);
+        }, delay);
+    }, [delay, setIsOpen]);
+    const handleClose = useCallback(() => {
+        window.clearTimeout(openTimerRef.current);
+        leaveTimerRef.current = window.setTimeout(() => {
+            setIsOpen(false);
+        }, 50);
+    }, [setIsOpen]);
+    const handleMouseUp = useCallback(() => (isMouseDownRef.current = false), []);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+    useEffect(() => {
+        return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+    useEventListener("keydown", useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]), document);
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
+        ref,
+        refs.floating,
+    ]);
+    if (!children ||
+        (children === null || children === void 0 ? void 0 : children.type) === React.Fragment ||
+        children === React.Fragment) {
+        console.error("<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>");
+        return null;
+    }
+    if ((content === null || content === void 0 ? void 0 : content.length) > maxChar) {
+        console.error(`Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`);
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        cloneElement(children, Object.assign(Object.assign({}, children.props), { "aria-describedby": open || isOpen
+                ? cl(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
+                : children === null || children === void 0 ? void 0 : children.props["aria-describedby"], ref: mergeRefs([children.ref, refs.reference]), onMouseEnter: composeEventHandlers(children.props.onMouseEnter, handleDelayedOpen), onMouseLeave: composeEventHandlers(children.props.onMouseLeave, handleClose), onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
+                isMouseDownRef.current = true;
+                document.addEventListener("mouseup", handleMouseUp, { once: true });
+            }), onFocus: composeEventHandlers(children.props.onFocus, () => !isMouseDownRef.current && handleOpen()), onBlur: composeEventHandlers(children.props.onBlur, handleClose) })),
+        (open !== null && open !== void 0 ? open : isOpen) && (React.createElement(Portal, null,
+            React.createElement("div", Object.assign({ ref: stableRef }, rest, { onMouseEnter: handleOpen, onMouseLeave: handleClose, role: "tooltip", id: ariaId, style: {
+                    position: "absolute",
+                    top: y !== null && y !== void 0 ? y : "",
+                    left: x !== null && x !== void 0 ? x : "",
+                    visibility: referenceHidden ? "hidden" : "visible",
+                }, "data-side": placement, className: cl("navds-tooltip", "navds-detail navds-detail--small", className) }),
+                React.createElement("div", { className: "navds-tooltip__inner", style: {
+                        [{
+                            top: "marginBottom",
+                            right: "marginLeft",
+                            bottom: "marginTop",
+                            left: "marginRight",
+                        }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                    } },
+                    content,
+                    keys && (React.createElement("span", { className: "navds-tooltip__keys" }, keys.map((key) => (React.createElement(Detail, { size: "small", as: "kbd", key: key, className: "navds-tooltip__key" }, key))))),
+                    _arrow && (React.createElement("div", { ref: (node) => {
+                            arrowRef.current = node;
+                        }, className: "navds-tooltip__arrow", style: {
+                            left: arrowX != null ? `${arrowX}px` : "",
+                            top: arrowY != null ? `${arrowY}px` : "",
+                            right: "",
+                            bottom: "",
+                            [{
+                                top: "bottom",
+                                right: "left",
+                                bottom: "top",
+                                left: "right",
+                            }[placement]]: "-3.5px",
+                        } }))))))));
+});
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/esm/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/esm/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";

package/esm/tooltip/index.js

@@ -0,0 +1,3 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";
+//# sourceMappingURL=index.js.map

package/esm/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC"}

package/esm/tooltip/portal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Portal: ({ children }: {
+    children: any;
+}) => import("react").ReactPortal | null;
+export default Portal;

package/esm/tooltip/portal.js

@@ -0,0 +1,13 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+import ReactDOM from "react-dom";
+const Portal = ({ children }) => {
+    var _a;
+    const hostElement = (_a = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _a === void 0 ? void 0 : _a.body;
+    if (hostElement) {
+        return ReactDOM.createPortal(children, hostElement);
+    }
+    // bail out of ssr
+    return null;
+};
+export default Portal;
+//# sourceMappingURL=portal.js.map

package/esm/tooltip/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../src/tooltip/portal.tsx"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAC9B,MAAM,WAAW,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,IAAI,CAAC;IAE/C,IAAI,WAAW,EAAE;QACf,OAAO,QAAQ,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;KACrD;IAED,kBAAkB;IAClB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/util/index.d.ts

@@ -6,3 +6,4 @@ export interface ListenerT {
     removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
 }
 export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: Window | T | null) => void;
+export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E) => void) | undefined, ourEventHandler?: ((event: E) => void) | undefined) => (event: E) => void;

package/esm/util/index.js

@@ -16,4 +16,13 @@ export const useEventListener = (name, handler, target = window) => {
         };
     }, [name, handler, target]);
 };
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+export const composeEventHandlers = (originalEventHandler, ourEventHandler) => {
+    return function handleEvent(event) {
+        originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);
+        if (!event.defaultPrevented) {
+            return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
+        }
+    };
+};
 //# sourceMappingURL=index.js.map

package/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,gGAAgG;AAChG,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,oBAAyC,EACzC,eAAoC,EACpC,EAAE;IACF,OAAO,SAAS,WAAW,CAAC,KAAQ;QAClC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAG,KAA2B,CAAC,gBAAgB,EAAE;YACnD,OAAO,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAC;SACjC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.14",
+  "version": "0.17.17",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,6 +34,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.6",
     "@popperjs/core": "^2.10.1",
@@ -68,5 +69,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "88e2c2b2fee9701bf1cb370538c22c84e448d62a"
+  "gitHead": "fcbd614a3444afa7fd07c0c133cc754206e5f106"
 }

package/src/index.ts

@@ -21,6 +21,7 @@ export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 

package/src/read-more/ReadMore.tsx

@@ -55,6 +55,7 @@ const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     return (
       <>
         <button
+          type="button"
           {...rest}
           className={cl(
             "navds-read-more",

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={isOpen ? "Vis mindre" : "Vis mer"}
+              />
+              <ExpandFilled
+                className="navds-table__expandable-icon navds-table__expandable-icon--filled"
+                title={isOpen ? "Vis mindre" : "Vis mer"}
+              />
+            </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>.
+      </>
+    ),
+  },
+];