@navikt/ds-react 3.1.3 → 3.2.0

package/_docs.json

@@ -1256,6 +1256,275 @@
       }
     }
   },
+  {
+    "filePath": "src/copybutton/CopyButton.tsx",
+    "displayName": "CopyButton",
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "medium"
+        },
+        "description": "",
+        "name": "size",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
+      "variant": {
+        "defaultValue": {
+          "value": "neutral"
+        },
+        "description": "",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\""
+        }
+      },
+      "copyText": {
+        "defaultValue": null,
+        "description": "Text to copy to clipboard",
+        "name": "copyText",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "text": {
+        "defaultValue": null,
+        "description": "Optional text in button",
+        "name": "text",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "activeText": {
+        "defaultValue": {
+          "value": "Kopiert!"
+        },
+        "description": "Text shown when button is clicked\nOnly set if used with 'text'-prop",
+        "name": "activeText",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onActiveChange": {
+        "defaultValue": null,
+        "description": "Callback when 'copied'-state is active",
+        "name": "onActiveChange",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "((state: boolean) => void)"
+        }
+      },
+      "icon": {
+        "defaultValue": {
+          "value": "<FilesIcon />"
+        },
+        "description": "Icon shown when button is not clicked",
+        "name": "icon",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "activeIcon": {
+        "defaultValue": {
+          "value": "<CheckmarkIcon />"
+        },
+        "description": "Icon shown when active",
+        "name": "activeIcon",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "activeDuration": {
+        "defaultValue": {
+          "value": "2000"
+        },
+        "description": "Timeout duration in milliseconds",
+        "name": "activeDuration",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "number"
+        }
+      },
+      "title": {
+        "defaultValue": {
+          "value": "Kopier"
+        },
+        "description": "* accessible label for icon (ignored if text is set)",
+        "name": "title",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "activeTitle": {
+        "defaultValue": {
+          "value": "Kopiert"
+        },
+        "description": "accessible label for icon in active-state (ignored if text is set)",
+        "name": "activeTitle",
+        "parent": {
+          "fileName": "src/copybutton/CopyButton.tsx",
+          "name": "CopyButtonProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/copybutton/CopyButton.tsx",
+            "name": "CopyButtonProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/date/DateInput.tsx",
     "displayName": "DatePickerInput",

package/cjs/copybutton/CopyButton.js

@@ -0,0 +1,77 @@
+"use strict";
+"use client";
+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 });
+exports.CopyButton = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const copy_1 = __importDefault(require("../util/copy"));
+const Label_1 = __importDefault(require("../typography/Label"));
+exports.CopyButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle"]);
+    const [active, setActive] = (0, react_1.useState)(false);
+    const timeoutRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        return () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    const handleClick = (event) => {
+        var _a;
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+        (0, copy_1.default)(copyText);
+        setActive(true);
+        onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
+        (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, event);
+        timeoutRef.current = window.setTimeout(() => {
+            setActive(false);
+            onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+        }, activeDuration);
+    };
+    return (react_1.default.createElement("button", Object.assign({ ref: ref, type: "button" }, rest, { "aria-live": "polite", className: (0, clsx_1.default)("navds-copybutton", className, `navds-copybutton--${size}`, `navds-copybutton--${variant}`, {
+            "navds-copybutton--icon-only": !text,
+            "navds-copybutton--active": active,
+        }), onClick: handleClick }),
+        react_1.default.createElement("span", { className: "navds-copybutton__content" },
+            active ? (react_1.default.createElement("span", { className: "navds-copybutton__icon" }, activeIcon !== null && activeIcon !== void 0 ? activeIcon : (react_1.default.createElement(aksel_icons_1.CheckmarkIcon, { "aria-hidden": !!text, title: text ? undefined : activeTitle })))) : (react_1.default.createElement("span", { className: "navds-copybutton__icon" }, icon !== null && icon !== void 0 ? icon : (react_1.default.createElement(aksel_icons_1.FilesIcon, { "aria-hidden": !!text, title: text ? undefined : title })))),
+            text &&
+                (active ? (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (react_1.default.createElement(Label_1.default, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text))))));
+});
+exports.default = exports.CopyButton;

package/cjs/copybutton/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyButton = void 0;
+var CopyButton_1 = require("./CopyButton");
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return __importDefault(CopyButton_1).default; } });

package/cjs/copybutton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/copybutton/index.js",
+  "types": "../../esm/copybutton/index.d.ts"
+}

package/cjs/index.js

@@ -19,9 +19,10 @@ __exportStar(require("./alert"), exports);
 __exportStar(require("./button"), exports);
 __exportStar(require("./chat"), exports);
 __exportStar(require("./chips"), exports);
+__exportStar(require("./copybutton"), exports);
 __exportStar(require("./date"), exports);
-__exportStar(require("./form"), exports);
 __exportStar(require("./expansion-card"), exports);
+__exportStar(require("./form"), exports);
 __exportStar(require("./grid"), exports);
 __exportStar(require("./guide-panel"), exports);
 __exportStar(require("./help-text"), exports);

package/cjs/util/copy.js

@@ -0,0 +1,73 @@
+"use strict";
+// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
+Object.defineProperty(exports, "__esModule", { value: true });
+const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
+function format(message) {
+    const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+    return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+function copy(text) {
+    let debug, message, range, selection, mark, success = false;
+    debug = process.env.NODE_ENV !== "production";
+    try {
+        range = document.createRange();
+        selection = document.getSelection();
+        mark = document.createElement("span");
+        mark.textContent = text;
+        // avoid screen readers from reading out loud the text
+        mark.ariaHidden = "true";
+        // reset user styles for span element
+        mark.style.all = "unset";
+        // prevents scrolling to the end of the page
+        mark.style.position = "fixed";
+        mark.style.top = 0;
+        mark.style.clip = "rect(0, 0, 0, 0)";
+        // used to preserve spaces and line breaks
+        mark.style.whiteSpace = "pre";
+        // do not inherit user-select (it may be `none`)
+        mark.style.webkitUserSelect = "text";
+        mark.style.MozUserSelect = "text";
+        mark.style.msUserSelect = "text";
+        mark.style.userSelect = "text";
+        mark.addEventListener("copy", function (e) {
+            e.stopPropagation();
+        });
+        document.body.appendChild(mark);
+        range.selectNodeContents(mark);
+        selection.addRange(range);
+        const successful = document.execCommand("copy");
+        if (!successful) {
+            throw new Error("copy command was unsuccessful");
+        }
+        success = true;
+    }
+    catch (err) {
+        debug && console.error("unable to copy using execCommand: ", err);
+        debug && console.warn("trying IE specific stuff");
+        try {
+            window.clipboardData.setData("text", text);
+            success = true;
+        }
+        catch (err) {
+            debug && console.error("unable to copy using clipboardData: ", err);
+            debug && console.error("falling back to prompt");
+            message = format(defaultMessage);
+            window.prompt(message, text);
+        }
+    }
+    finally {
+        if (selection) {
+            if (typeof selection.removeRange == "function") {
+                selection.removeRange(range);
+            }
+            else {
+                selection.removeAllRanges();
+            }
+        }
+        if (mark) {
+            document.body.removeChild(mark);
+        }
+    }
+    return success;
+}
+exports.default = copy;

package/esm/copybutton/CopyButton.d.ts

@@ -0,0 +1,55 @@
+import React, { ButtonHTMLAttributes } from "react";
+export interface CopyButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * @default "neutral"
+     */
+    variant?: "action" | "neutral";
+    /**
+     * Text to copy to clipboard
+     */
+    copyText: string;
+    /**
+     *  Optional text in button
+     */
+    text?: string;
+    /**
+     * Text shown when button is clicked
+     * Only set if used with 'text'-prop
+     */
+    activeText?: string;
+    /**
+     *  Callback when 'copied'-state is active
+     */
+    onActiveChange?: (state: boolean) => void;
+    /**
+     *  Icon shown when button is not clicked
+     * @default <FilesIcon />
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon shown when active
+     * @default <CheckmarkIcon />
+     */
+    activeIcon?: React.ReactNode;
+    /**
+     * Timeout duration in milliseconds
+     * @default 2000
+     */
+    activeDuration?: number;
+    /**
+     * * accessible label for icon (ignored if text is set)
+     * @default 'Kopier'
+     */
+    title?: string;
+    /**
+     * accessible label for icon in active-state (ignored if text is set)
+     * @default 'Kopiert'
+     */
+    activeTitle?: string;
+}
+export declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CopyButton;

package/esm/copybutton/CopyButton.js

@@ -0,0 +1,49 @@
+"use client";
+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 { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
+import cl from "clsx";
+import React, { forwardRef, useEffect, useRef, useState, } from "react";
+import copy from "../util/copy";
+import Label from "../typography/Label";
+export const CopyButton = forwardRef((_a, ref) => {
+    var { className, copyText, text, activeText = "Kopiert!", variant = "neutral", size = "medium", onActiveChange, icon, activeIcon, activeDuration = 2000, title = "Kopier", activeTitle = "Kopiert" } = _a, rest = __rest(_a, ["className", "copyText", "text", "activeText", "variant", "size", "onActiveChange", "icon", "activeIcon", "activeDuration", "title", "activeTitle"]);
+    const [active, setActive] = useState(false);
+    const timeoutRef = useRef();
+    useEffect(() => {
+        return () => {
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+        };
+    }, []);
+    const handleClick = (event) => {
+        var _a;
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+        copy(copyText);
+        setActive(true);
+        onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
+        (_a = rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, event);
+        timeoutRef.current = window.setTimeout(() => {
+            setActive(false);
+            onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+        }, activeDuration);
+    };
+    return (React.createElement("button", Object.assign({ ref: ref, type: "button" }, rest, { "aria-live": "polite", className: cl("navds-copybutton", className, `navds-copybutton--${size}`, `navds-copybutton--${variant}`, {
+            "navds-copybutton--icon-only": !text,
+            "navds-copybutton--active": active,
+        }), onClick: handleClick }),
+        React.createElement("span", { className: "navds-copybutton__content" },
+            active ? (React.createElement("span", { className: "navds-copybutton__icon" }, activeIcon !== null && activeIcon !== void 0 ? activeIcon : (React.createElement(CheckmarkIcon, { "aria-hidden": !!text, title: text ? undefined : activeTitle })))) : (React.createElement("span", { className: "navds-copybutton__icon" }, icon !== null && icon !== void 0 ? icon : (React.createElement(FilesIcon, { "aria-hidden": !!text, title: text ? undefined : title })))),
+            text &&
+                (active ? (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, activeText)) : (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, text))))));
+});
+export default CopyButton;
+//# sourceMappingURL=CopyButton.js.map

package/esm/copybutton/CopyButton.js.map

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

package/esm/copybutton/index.d.ts

@@ -0,0 +1 @@
+export { default as CopyButton, type CopyButtonProps } from "./CopyButton";

package/esm/copybutton/index.js

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

package/esm/copybutton/index.js.map

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

package/esm/index.d.ts

@@ -3,9 +3,10 @@ export * from "./alert";
 export * from "./button";
 export * from "./chat";
 export * from "./chips";
+export * from "./copybutton";
 export * from "./date";
-export * from "./form";
 export * from "./expansion-card";
+export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";

package/esm/index.js

@@ -3,9 +3,10 @@ export * from "./alert";
 export * from "./button";
 export * from "./chat";
 export * from "./chips";
+export * from "./copybutton";
 export * from "./date";
-export * from "./form";
 export * from "./expansion-card";
+export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/esm/util/copy.d.ts

@@ -0,0 +1 @@
+export default function copy(text: any): boolean;

package/esm/util/copy.js

@@ -0,0 +1,71 @@
+// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
+const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
+function format(message) {
+    const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+    return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+export default function copy(text) {
+    let debug, message, range, selection, mark, success = false;
+    debug = process.env.NODE_ENV !== "production";
+    try {
+        range = document.createRange();
+        selection = document.getSelection();
+        mark = document.createElement("span");
+        mark.textContent = text;
+        // avoid screen readers from reading out loud the text
+        mark.ariaHidden = "true";
+        // reset user styles for span element
+        mark.style.all = "unset";
+        // prevents scrolling to the end of the page
+        mark.style.position = "fixed";
+        mark.style.top = 0;
+        mark.style.clip = "rect(0, 0, 0, 0)";
+        // used to preserve spaces and line breaks
+        mark.style.whiteSpace = "pre";
+        // do not inherit user-select (it may be `none`)
+        mark.style.webkitUserSelect = "text";
+        mark.style.MozUserSelect = "text";
+        mark.style.msUserSelect = "text";
+        mark.style.userSelect = "text";
+        mark.addEventListener("copy", function (e) {
+            e.stopPropagation();
+        });
+        document.body.appendChild(mark);
+        range.selectNodeContents(mark);
+        selection.addRange(range);
+        const successful = document.execCommand("copy");
+        if (!successful) {
+            throw new Error("copy command was unsuccessful");
+        }
+        success = true;
+    }
+    catch (err) {
+        debug && console.error("unable to copy using execCommand: ", err);
+        debug && console.warn("trying IE specific stuff");
+        try {
+            window.clipboardData.setData("text", text);
+            success = true;
+        }
+        catch (err) {
+            debug && console.error("unable to copy using clipboardData: ", err);
+            debug && console.error("falling back to prompt");
+            message = format(defaultMessage);
+            window.prompt(message, text);
+        }
+    }
+    finally {
+        if (selection) {
+            if (typeof selection.removeRange == "function") {
+                selection.removeRange(range);
+            }
+            else {
+                selection.removeAllRanges();
+            }
+        }
+        if (mark) {
+            document.body.removeChild(mark);
+        }
+    }
+    return success;
+}
+//# sourceMappingURL=copy.js.map

package/esm/util/copy.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^3.1.3",
+    "@navikt/aksel-icons": "^3.2.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/copybutton/CopyButton.tsx

@@ -0,0 +1,174 @@
+"use client";
+import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
+import cl from "clsx";
+import React, {
+  ButtonHTMLAttributes,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import copy from "../util/copy";
+import Label from "../typography/Label";
+
+export interface CopyButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * @default "neutral"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Text to copy to clipboard
+   */
+  copyText: string;
+  /**
+   *  Optional text in button
+   */
+  text?: string;
+  /**
+   * Text shown when button is clicked
+   * Only set if used with 'text'-prop
+   */
+  activeText?: string;
+  /**
+   *  Callback when 'copied'-state is active
+   */
+  onActiveChange?: (state: boolean) => void;
+  /**
+   *  Icon shown when button is not clicked
+   * @default <FilesIcon />
+   */
+  icon?: React.ReactNode;
+  /**
+   * Icon shown when active
+   * @default <CheckmarkIcon />
+   */
+  activeIcon?: React.ReactNode;
+  /**
+   * Timeout duration in milliseconds
+   * @default 2000
+   */
+  activeDuration?: number;
+  /**
+   * * accessible label for icon (ignored if text is set)
+   * @default 'Kopier'
+   */
+  title?: string;
+  /**
+   * accessible label for icon in active-state (ignored if text is set)
+   * @default 'Kopiert'
+   */
+  activeTitle?: string;
+}
+
+export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      className,
+      copyText,
+      text,
+      activeText = "Kopiert!",
+      variant = "neutral",
+      size = "medium",
+      onActiveChange,
+      icon,
+      activeIcon,
+      activeDuration = 2000,
+      title = "Kopier",
+      activeTitle = "Kopiert",
+      ...rest
+    },
+    ref
+  ) => {
+    const [active, setActive] = useState(false);
+    const timeoutRef = useRef<number>();
+
+    useEffect(() => {
+      return () => {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+      };
+    }, []);
+
+    const handleClick = (
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      timeoutRef.current && clearTimeout(timeoutRef.current);
+      copy(copyText);
+      setActive(true);
+      onActiveChange?.(true);
+      rest.onClick?.(event);
+
+      timeoutRef.current = window.setTimeout(() => {
+        setActive(false);
+        onActiveChange?.(false);
+      }, activeDuration);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...rest}
+        aria-live="polite"
+        className={cl(
+          "navds-copybutton",
+          className,
+          `navds-copybutton--${size}`,
+          `navds-copybutton--${variant}`,
+          {
+            "navds-copybutton--icon-only": !text,
+            "navds-copybutton--active": active,
+          }
+        )}
+        onClick={handleClick}
+      >
+        <span className="navds-copybutton__content">
+          {active ? (
+            <span className="navds-copybutton__icon">
+              {activeIcon ?? (
+                <CheckmarkIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : activeTitle}
+                />
+              )}
+            </span>
+          ) : (
+            <span className="navds-copybutton__icon">
+              {icon ?? (
+                <FilesIcon
+                  aria-hidden={!!text}
+                  title={text ? undefined : title}
+                />
+              )}
+            </span>
+          )}
+
+          {text &&
+            (active ? (
+              <Label
+                as="span"
+                size={size === "medium" ? "medium" : "small"}
+                aria-live="polite"
+              >
+                {activeText}
+              </Label>
+            ) : (
+              <Label
+                as="span"
+                size={size === "medium" ? "medium" : "small"}
+                aria-live="polite"
+              >
+                {text}
+              </Label>
+            ))}
+        </span>
+      </button>
+    );
+  }
+);
+
+export default CopyButton;

package/src/copybutton/copy-button.stories.tsx

@@ -0,0 +1,168 @@
+import { LinkIcon, ThumbUpIcon } from "@navikt/aksel-icons";
+import { userEvent, within } from "@storybook/testing-library";
+import React from "react";
+import { CopyButton } from ".";
+import { Tooltip } from "../tooltip";
+
+export default {
+  title: "ds-react/CopyButton",
+  component: CopyButton,
+  argTypes: {
+    size: {
+      defaultValue: "medium",
+      control: { type: "radio" },
+      options: ["small", "medium"],
+    },
+    variant: {
+      defaultValue: undefined,
+      control: { type: "radio" },
+      options: ["neutral", "action"],
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => <CopyButton {...args} />,
+  args: {
+    size: "medium",
+    duration: 2000,
+    copyText: "3.14",
+    text: "",
+    activeText: "",
+  },
+};
+
+export const Interaction = {
+  render: () => (
+    <CopyButton
+      copyText="3.14"
+      variant="action"
+      text="Kopier"
+      data-testid="copy-button"
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const button = canvas.getByTestId("copy-button");
+
+    userEvent.click(button);
+  },
+};
+
+export const Variants = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" variant="action" text="Kopier" />
+
+      <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
+    </div>
+  ),
+};
+
+export const Sizes = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        <CopyButton copyText="3.14" variant="action" />
+        <CopyButton copyText="3.14" variant="neutral" />
+        <CopyButton copyText="3.14" variant="action" text="Kopier" />
+        <CopyButton copyText="3.14" variant="neutral" text="Kopier" />
+      </div>
+      <div className="rowgap">
+        <CopyButton size="small" copyText="3.14" variant="action" />
+        <CopyButton size="small" copyText="3.14" variant="neutral" />
+        <CopyButton
+          size="small"
+          copyText="3.14"
+          variant="action"
+          text="Kopier"
+        />
+        <CopyButton
+          size="small"
+          copyText="3.14"
+          variant="neutral"
+          text="Kopier"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const Texts = {
+  render: () => (
+    <div className="colgap">
+      <div>
+        <CopyButton
+          copyText="3.14"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="small"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const Icons = {
+  render: () => (
+    <div className="rowgap">
+      <div>
+        <CopyButton
+          copyText="3.14"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="small"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const InlineDemo = {
+  render: () => (
+    <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+      <CopyButton size="small" copyText="3.14" /> Kopier dette feltet
+    </div>
+  ),
+};
+
+export const WithTooltip = {
+  render: () => {
+    return (
+      <div>
+        <Tooltip content="Kopier fødselsnummer">
+          <CopyButton copyText="3.14" />
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Duration = {
+  render: () => <CopyButton copyText="3.14" activeDuration={300} />,
+};
+
+export const Disabled = {
+  render: () => (
+    <div className="colgap">
+      <CopyButton copyText="3.14" disabled />
+      <CopyButton copyText="3.14" size="small" disabled />
+      <CopyButton copyText="3.14" disabled variant="action" />
+    </div>
+  ),
+};

package/src/copybutton/index.ts

@@ -0,0 +1 @@
+export { default as CopyButton, type CopyButtonProps } from "./CopyButton";

package/src/index.ts

@@ -3,9 +3,10 @@ export * from "./alert";
 export * from "./button";
 export * from "./chat";
 export * from "./chips";
+export * from "./copybutton";
 export * from "./date";
-export * from "./form";
 export * from "./expansion-card";
+export * from "./form";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";

package/src/util/copy.ts

@@ -0,0 +1,81 @@
+// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
+
+const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
+
+function format(message) {
+  const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
+  return message.replace(/#{\s*key\s*}/g, copyKey);
+}
+
+export default function copy(text) {
+  let debug,
+    message,
+    range,
+    selection,
+    mark,
+    success = false;
+  debug = process.env.NODE_ENV !== "production";
+  try {
+    range = document.createRange();
+    selection = document.getSelection();
+
+    mark = document.createElement("span");
+    mark.textContent = text;
+    // avoid screen readers from reading out loud the text
+    mark.ariaHidden = "true";
+    // reset user styles for span element
+    mark.style.all = "unset";
+    // prevents scrolling to the end of the page
+    mark.style.position = "fixed";
+    mark.style.top = 0;
+    mark.style.clip = "rect(0, 0, 0, 0)";
+    // used to preserve spaces and line breaks
+    mark.style.whiteSpace = "pre";
+    // do not inherit user-select (it may be `none`)
+    mark.style.webkitUserSelect = "text";
+    mark.style.MozUserSelect = "text";
+    mark.style.msUserSelect = "text";
+    mark.style.userSelect = "text";
+    mark.addEventListener("copy", function (e) {
+      e.stopPropagation();
+    });
+
+    document.body.appendChild(mark);
+
+    range.selectNodeContents(mark);
+    selection.addRange(range);
+
+    const successful = document.execCommand("copy");
+    if (!successful) {
+      throw new Error("copy command was unsuccessful");
+    }
+    success = true;
+  } catch (err) {
+    debug && console.error("unable to copy using execCommand: ", err);
+    debug && console.warn("trying IE specific stuff");
+    try {
+      (window as any).clipboardData.setData("text", text);
+
+      success = true;
+    } catch (err) {
+      debug && console.error("unable to copy using clipboardData: ", err);
+      debug && console.error("falling back to prompt");
+      message = format(defaultMessage);
+      window.prompt(message, text);
+    }
+  } finally {
+    if (selection) {
+      if (typeof selection.removeRange == "function") {
+        selection.removeRange(range);
+      } else {
+        selection.removeAllRanges();
+      }
+    }
+
+    if (mark) {
+      document.body.removeChild(mark);
+    }
+  }
+
+  return success;
+}