@navikt/ds-react 0.17.3 → 0.17.6

package/cjs/help-text/HelpText.js

@@ -43,25 +43,17 @@ const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("..");
 const HelpText = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = (0, react_1.useState)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (react_1.default.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
-            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon" }),
-            react_1.default.createElement("span", { className: "navds-sr-only" }, title)),
-        react_1.default.createElement(__1.Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
-            react_1.default.createElement(__1.Popover.Content, null, children))));
+    return (react_1.default.createElement("div", { className: "navds-help-text" },
+        react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon", "aria-hidden": true })),
+        react_1.default.createElement(__1.Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            react_1.default.createElement(__1.Popover.Content, { className: "navds-body-short" }, children))));
 });
 exports.default = HelpText;

package/cjs/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./modal"), exports);
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
+__exportStar(require("./read-more"), exports);
 __exportStar(require("./speech-bubble"), exports);
 __exportStar(require("./step-indicator"), exports);
 __exportStar(require("./tag"), exports);

package/cjs/read-more/ReadMore.js

@@ -0,0 +1,67 @@
+"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 react_collapse_1 = require("react-collapse");
+const ds_icons_1 = require("@navikt/ds-icons");
+const typography_1 = require("../typography");
+const ReadMore = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick"]);
+    const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
+    const CollapseComponent = renderContentWhenClosed
+        ? react_collapse_1.Collapse
+        : react_collapse_1.UnmountClosed;
+    const isOpened = open !== null && open !== void 0 ? open : internalOpen;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
+                "navds-read-more--open": isOpened,
+            }), onClick: (e) => {
+                if (open === undefined) {
+                    setInternalOpen((isOpen) => !isOpen);
+                }
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, "aria-expanded": isOpened, ref: ref }),
+            react_1.default.createElement(ds_icons_1.Expand, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
+            react_1.default.createElement("span", null, header)),
+        react_1.default.createElement(CollapseComponent, { isOpened: isOpened },
+            react_1.default.createElement("div", { className: "navds-read-more__content" },
+                react_1.default.createElement(typography_1.BodyLong, { size: "small" }, children)))));
+});
+exports.default = ReadMore;

package/cjs/read-more/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadMore = void 0;
+var ReadMore_1 = require("./ReadMore");
+Object.defineProperty(exports, "ReadMore", { enumerable: true, get: function () { return __importDefault(ReadMore_1).default; } });
+__exportStar(require("./ReadMore"), exports);

package/cjs/read-more/package.json

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

package/esm/help-text/HelpText.js

@@ -11,30 +11,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover } from "..";
 const HelpText = forwardRef((_a, ref) => {
-    var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
+    var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
     const buttonRef = useRef(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState(null);
-    const wrapperRef = useRef(null);
     const [open, setOpen] = useState(false);
-    useEffect(() => {
-        var _a;
-        open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
-    }, [open, popoverRef]);
-    const handleClick = (e) => {
-        setOpen((x) => !x);
-        rest.onClick && rest.onClick(e);
-    };
-    return (React.createElement("div", { className: "navds-help-text", ref: wrapperRef },
-        React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
-            React.createElement(HelpTextIcon, { className: "navds-help-text__icon" }),
-            React.createElement("span", { className: "navds-sr-only" }, title)),
-        React.createElement(Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
-            React.createElement(Popover.Content, null, children))));
+    return (React.createElement("div", { className: "navds-help-text" },
+        React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
+                setOpen((x) => !x);
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, title: title }),
+            React.createElement(HelpTextIcon, { className: "navds-help-text__icon", "aria-hidden": true })),
+        React.createElement(Popover, { onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, anchorEl: buttonRef.current, placement: placement, strategy: strategy },
+            React.createElement(Popover.Content, { className: "navds-body-short" }, children))));
 });
 export default HelpText;
 //# sourceMappingURL=HelpText.js.map

package/esm/help-text/HelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cANT,2DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,0DAAI,CAAA,CAAC;IAChC,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,OAER,EADI,IAAI,cAPT,sEAQC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,EACnB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,wBAAc,CACtD;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";

package/esm/index.js

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";

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,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,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,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/read-more/ReadMore.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Content inside read more
+     */
+    children: React.ReactNode;
+    /**
+     * Read more header content
+     */
+    header: React.ReactNode;
+    /**
+     * Opens component if 'true', closes if 'false'
+     * Using this props removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Defaults the accordion to opened state
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Removes content-element from dom when closed
+     * @default false
+     */
+    renderContentWhenClosed?: boolean;
+}
+declare const ReadMore: React.ForwardRefExoticComponent<ReadMoreProps & React.RefAttributes<HTMLButtonElement>>;
+export default ReadMore;

package/esm/read-more/ReadMore.js

@@ -0,0 +1,40 @@
+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 { Collapse, UnmountClosed } from "react-collapse";
+import { Expand } from "@navikt/ds-icons";
+import { BodyLong } from "../typography";
+const ReadMore = forwardRef((_a, ref) => {
+    var { className, header, renderContentWhenClosed = false, children, open, defaultOpen = false, onClick } = _a, rest = __rest(_a, ["className", "header", "renderContentWhenClosed", "children", "open", "defaultOpen", "onClick"]);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const CollapseComponent = renderContentWhenClosed
+        ? Collapse
+        : UnmountClosed;
+    const isOpened = open !== null && open !== void 0 ? open : internalOpen;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", Object.assign({}, rest, { className: cl("navds-read-more", "navds-body-short", "navds-body-short--small", className, {
+                "navds-read-more--open": isOpened,
+            }), onClick: (e) => {
+                if (open === undefined) {
+                    setInternalOpen((isOpen) => !isOpen);
+                }
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            }, "aria-expanded": isOpened, ref: ref }),
+            React.createElement(Expand, { className: "navds-read-more__expand-icon", "aria-hidden": true }),
+            React.createElement("span", null, header)),
+        React.createElement(CollapseComponent, { isOpened: isOpened },
+            React.createElement("div", { className: "navds-read-more__content" },
+                React.createElement(BodyLong, { size: "small" }, children)))));
+});
+export default ReadMore;
+//# sourceMappingURL=ReadMore.js.map

package/esm/read-more/ReadMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadMore.js","sourceRoot":"","sources":["../../src/read-more/ReadMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA6BzC,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,MAAM,EACN,uBAAuB,GAAG,KAAK,EAC/B,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cART,gGASC,CADQ;IAIT,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,WAAW,CAAC,CAAC;IACvE,MAAM,iBAAiB,GAAG,uBAAuB;QAC/C,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,MAAM,QAAQ,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,YAAY,CAAC;IAEtC,OAAO,CACL;QACE,gDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,kBAAkB,EAClB,yBAAyB,EACzB,SAAS,EACT;gBACE,uBAAuB,EAAE,QAAQ;aAClC,CACF,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,IAAI,IAAI,KAAK,SAAS,EAAE;oBACtB,eAAe,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;iBACtC;gBACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,mBACc,QAAQ,EACvB,GAAG,EAAE,GAAG;YAER,oBAAC,MAAM,IAAC,SAAS,EAAC,8BAA8B,wBAAe;YAC/D,kCAAO,MAAM,CAAQ,CACd;QACT,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ;YACnC,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,oBAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,IAAE,QAAQ,CAAY,CACxC,CACY,CACnB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/read-more/index.d.ts

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

package/esm/read-more/index.js

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

package/esm/read-more/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/read-more/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.3",
+  "version": "0.17.6",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.4",
+    "@navikt/ds-icons": "^0.8.5",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-toggle-group": "0.1.5",
     "classnames": "^2.2.6",
@@ -51,6 +51,7 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.1",
+    "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
@@ -66,5 +67,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "4baebb43408f7f77334c3c31a23140e04eef9a52"
+  "gitHead": "f6042d01aad8740107376679bdd2917fa56dd3a0"
 }

package/src/form/search/search.stories.tsx

@@ -10,20 +10,23 @@ export default {
 export const All = () => {
   const [value, setValue] = useState("");
   return (
-    <div style={{ maxWidth: 300 }}>
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "column",
+        maxWidth: 400,
+      }}
+    >
       <h1>Search</h1>
-      <div>
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-        ></Search>
-        <br />
-        <Search
-          label="Søk alle sider om X og Y"
-          onSearch={console.log}
-          variant="primary"
-        ></Search>
-      </div>
+
+      <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
+      <h2>Primary search</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="primary"
+      ></Search>
 
       <h2>Search small</h2>
       <Search

package/src/help-text/HelpText.tsx

@@ -1,6 +1,6 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
 import { Popover, PopoverProps } from "..";
 
@@ -21,53 +21,42 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       placement = "top",
       strategy = "absolute",
       title = "hjelp",
+      onClick,
       ...rest
     },
     ref
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
     const mergedRef = mergeRefs([buttonRef, ref]);
-    const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-
     const [open, setOpen] = useState(false);
 
-    useEffect(() => {
-      open && popoverRef?.focus?.();
-    }, [open, popoverRef]);
-
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>
-    ) => {
-      setOpen((x) => !x);
-      rest.onClick && rest.onClick(e);
-    };
     return (
-      <div className="navds-help-text" ref={wrapperRef}>
+      <div className="navds-help-text">
         <button
           {...rest}
           ref={mergedRef}
-          onClick={(e) => handleClick(e)}
+          onClick={(e) => {
+            setOpen((x) => !x);
+            onClick?.(e);
+          }}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          aria-haspopup="dialog"
           title={title}
         >
-          <HelpTextIcon className="navds-help-text__icon" />
-          <span className="navds-sr-only">{title}</span>
+          <HelpTextIcon className="navds-help-text__icon" aria-hidden/>
         </button>
         <Popover
-          ref={setPopoverRef}
           onClose={() => setOpen(false)}
           className="navds-help-text__popover"
           open={open}
-          role="tooltip"
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
         >
-          <Popover.Content>{children}</Popover.Content>
+          <Popover.Content className="navds-body-short">
+            {children}
+          </Popover.Content>
         </Popover>
       </div>
     );

package/src/help-text/help-text.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { TextField, HelpText } from "..";
+
+export default {
+  title: "ds-react/help-text",
+  component: HelpText,
+};
+
+export const All = () => {
+  return (
+    <>
+      <h1>HelpText</h1>
+      <HelpText title="show tooltip">
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+      <TextField
+        label={
+          <div style={{ display: "flex", gap: 8 }}>
+            Text field label
+            <HelpText title="show tooltip">
+              Id ullamco excepteur elit fugiat labore.
+            </HelpText>
+          </div>
+        }
+      ></TextField>
+    </>
+  );
+};

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
 export * from "./tag";

package/src/read-more/ReadMore.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, useState } from "react";
+import cl from "classnames";
+import { Collapse, UnmountClosed } from "react-collapse";
+import { Expand } from "@navikt/ds-icons";
+import { BodyLong } from "../typography";
+
+export interface ReadMoreProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Content inside read more
+   */
+  children: React.ReactNode;
+  /**
+   * Read more header content
+   */
+  header: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults the accordion to opened state
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
+  renderContentWhenClosed?: boolean;
+}
+
+const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
+  (
+    {
+      className,
+      header,
+      renderContentWhenClosed = false,
+      children,
+      open,
+      defaultOpen = false,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const CollapseComponent = renderContentWhenClosed
+      ? Collapse
+      : UnmountClosed;
+
+    const isOpened = open ?? internalOpen;
+
+    return (
+      <>
+        <button
+          {...rest}
+          className={cl(
+            "navds-read-more",
+            "navds-body-short",
+            "navds-body-short--small",
+            className,
+            {
+              "navds-read-more--open": isOpened,
+            }
+          )}
+          onClick={(e) => {
+            if (open === undefined) {
+              setInternalOpen((isOpen) => !isOpen);
+            }
+            onClick?.(e);
+          }}
+          aria-expanded={isOpened}
+          ref={ref}
+        >
+          <Expand className="navds-read-more__expand-icon" aria-hidden />
+          <span>{header}</span>
+        </button>
+        <CollapseComponent isOpened={isOpened}>
+          <div className="navds-read-more__content">
+            <BodyLong size="small">{children}</BodyLong>
+          </div>
+        </CollapseComponent>
+      </>
+    );
+  }
+);
+
+export default ReadMore;

package/src/read-more/index.ts

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

package/src/read-more/read-more.stories.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { ReadMore } from ".";
+import { Link } from "..";
+
+export default {
+  title: "ds-react/read-more",
+  component: ReadMore,
+};
+
+export const All = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <h1>Read more</h1>
+      <h2>Controlled</h2>
+      <ReadMore
+        open={open}
+        onClick={() => setOpen(!open)}
+        header="ReadMore header text"
+      >
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
+        ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
+        eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
+        qui velit id eu.{" "}
+        <Link href="example.com">Deserunt magna sunt velit in</Link>. Est
+        exercitation id cillum qui do. Minim adipisicing nostrud commodo
+        proident occaecat aliquip nulla anim proident reprehenderit. Magna ipsum
+        officia veniam cupidatat duis veniam dolore reprehenderit mollit
+        velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+        laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+        reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo
+        cillum eiusmod eiusmod. Do laborum qui proident commodo adipisicing
+        eiusmod id.
+      </ReadMore>
+      <h2>Un-controlled</h2>
+      <ReadMore header="ReadMore header text">
+        Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
+        officia laboris voluptate officia pariatur.Lorem est ex anim velit
+        occaecat nisi qui nostrud sit consectetur consectetur officia nostrud
+        ullamco. Est ex duis proident nostrud elit qui laborum anim minim eu
+        eiusmod. Veniam in nostrud sunt tempor velit incididunt sint ex dolor
+        qui velit id eu. Deserunt magna sunt velit in. Est exercitation id
+        cillum qui do. Minim adipisicing nostrud commodo proident occaecat
+        aliquip nulla anim proident reprehenderit. Magna ipsum officia veniam
+        cupidatat duis veniam dolore reprehenderit mollit velit.Ut consequat
+        commodo minim occaecat id pariatur. Nisi enim tempor laborum commodo.
+        Tempor sit quis nostrud eu cupidatat sunt commodo reprehenderit irure
+        deserunt eiusmod ipsum. Exercitation quis commodo cillum eiusmod
+        eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+      </ReadMore>
+      <h2>Default open</h2>
+      <ReadMore header="ReadMore header text" defaultOpen>
+        Body
+      </ReadMore>
+    </>
+  );
+};

package/src/help-text/stories/help-text.stories.mdx

@@ -1,35 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { HelpText } from "../../index";
-import { Success } from "@navikt/ds-react";
-
-<Meta title="ds-react/help-text/intro" />
-
-# Hvordan ta i bruk HelpText
-
-```jsx
-<HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText>Exercitation esse minim esse mollit ex magna.</HelpText>
-  </div>
-</Canvas>
-
-# Egen title
-
-Husk å endre på "title" slik at skjermlesere får tydeligere informasjon
-
-```jsx
-<HelpText title="vis hjelpetekst angående søknad">
-  Exercitation esse minim esse mollit ex magna.
-</HelpText>
-```
-
-<Canvas>
-  <div style={{ padding: "5rem" }}>
-    <HelpText title="vis hjelpetekst angående søknad">
-      Exercitation esse minim esse mollit ex magna.
-    </HelpText>
-  </div>
-</Canvas>

package/src/help-text/stories/help-text.stories.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { BodyLong } from "../../typography";
-import { HelpText } from "../index";
-
-export default {
-  title: "ds-react/help-text",
-  component: HelpText,
-};
-
-export const All = () => {
-  return (
-    <>
-      <h1>HelpText</h1>
-      <BodyLong style={{ display: "flex" }}>
-        Quis tempor incididunt sint sit veniam ad dolore cillum ut.
-        <HelpText title="show tooltip">
-          Id ullamco excepteur elit fugiat labore.
-        </HelpText>
-      </BodyLong>
-
-      <BodyLong>
-        Incididunt pariatur laborum dolor sint qui eiusmod exercitation non
-        cupidatat amet.
-      </BodyLong>
-
-      <h2>HelpText defaultOpen</h2>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    </>
-  );
-};