@navikt/ds-react 0.17.5 → 0.17.8

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/cjs/table/ColumnHeader.js

@@ -56,7 +56,6 @@ const ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {
             ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
             : undefined },
         children,
-        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
-            ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (react_1.default.createElement(ds_icons_1.Down, { "aria-label": "sorter synkende" })) : (react_1.default.createElement(ds_icons_1.Up, { "aria-label": "sorter stigende" })))) : (children)));
+        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey ? (((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (react_1.default.createElement(ds_icons_1.Down, { "aria-hidden": true })) : (react_1.default.createElement(ds_icons_1.Up, { "aria-hidden": true }))) : (react_1.default.createElement(ds_icons_1.UpDown, { "aria-hidden": true })))) : (children)));
 });
 exports.default = ColumnHeader;

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/esm/table/ColumnHeader.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useContext } from "react";
-import { Down, Up } from "@navikt/ds-icons";
+import { Down, Up, UpDown } from "@navikt/ds-icons";
 import { TableContext } from "..";
 import HeaderCell from "./HeaderCell";
 const ColumnHeader = forwardRef((_a, ref) => {
@@ -28,8 +28,7 @@ const ColumnHeader = forwardRef((_a, ref) => {
             ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
             : undefined },
         children,
-        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
-            ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (React.createElement(Down, { "aria-label": "sorter synkende" })) : (React.createElement(Up, { "aria-label": "sorter stigende" })))) : (children)));
+        ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey ? (((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (React.createElement(Down, { "aria-hidden": true })) : (React.createElement(Up, { "aria-hidden": true }))) : (React.createElement(UpDown, { "aria-hidden": true })))) : (children)));
 });
 export default ColumnHeader;
 //# sourceMappingURL=ColumnHeader.js.map

package/esm/table/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,UAA+B,MAAM,cAAc,CAAC;AAmB3D,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,wDAAG,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;YACnC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,kBAAY,iBAAiB,GAAG,CACtC,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,kBAAY,iBAAiB,GAAG,CACpC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,UAA+B,MAAM,cAAc,CAAC;AAmB3D,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,wDAAG,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO,CAAC,CAAC,CAAC,CACpC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,0BAAe,CACrB,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,0BAAe,CACnB,CACF,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,0BAAe,CACvB,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.5",
+  "version": "0.17.8",
   "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.5",
+    "@navikt/ds-icons": "^0.8.6",
     "@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": "b2a71fd227ccbe3709094c0c85d1174694dda450"
+  "gitHead": "a3b28bb9ad1ca3a3a188d643ee26918d36805bf2"
 }

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/table/ColumnHeader.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useContext } from "react";
-import { Down, Up } from "@navikt/ds-icons";
+import { Down, Up, UpDown } from "@navikt/ds-icons";
 import { TableContext } from "..";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 
@@ -52,11 +52,14 @@ const ColumnHeader: ColumnHeaderType = forwardRef(
             }
           >
             {children}
-            {context?.sort?.orderBy === sortKey &&
-            context?.sort?.direction === "descending" ? (
-              <Down aria-label="sorter synkende" />
+            {context?.sort?.orderBy === sortKey ? (
+              context?.sort?.direction === "descending" ? (
+                <Down aria-hidden />
+              ) : (
+                <Up aria-hidden />
+              )
             ) : (
-              <Up aria-label="sorter stigende" />
+              <UpDown aria-hidden />
             )}
           </button>
         ) : (