@navikt/ds-react 2.7.8 → 2.8.0

package/esm/expansion-card/ExpansionCard.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { ExpansionCardContentType } from "./ExpansionCardContent";
+import { ExpansionCardDescriptionType } from "./ExpansionCardDescription";
+import { ExpansionCardHeaderType } from "./ExpansionCardHeader";
+import { ExpansionCardTitleType } from "./ExpansionCardTitle";
+interface ExpansionCardComponent extends React.ForwardRefExoticComponent<ExpansionCardProps & React.RefAttributes<HTMLDivElement>> {
+    Header: ExpansionCardHeaderType;
+    Title: ExpansionCardTitleType;
+    Description: ExpansionCardDescriptionType;
+    Content: ExpansionCardContentType;
+}
+export interface ExpansionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Callback for when Card is toggled open/closed
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Controlled open-state
+     * Using this removes automatic control of open-state
+     */
+    open?: boolean;
+    /**
+     * Defaults to open if not controlled
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Since ExpansionCard is a section-element, accessible name is required.
+     */
+    ["aria-label"]: string;
+}
+export type ExpansionCardContextProps = {
+    open: boolean;
+    toggleOpen: () => void;
+};
+export declare const ExpansionCardContext: React.Context<ExpansionCardContextProps>;
+export declare const ExpansionCard: ExpansionCardComponent;
+export default ExpansionCard;

package/esm/expansion-card/ExpansionCard.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import ExpansionCardContent from "./ExpansionCardContent";
+import { ExpansionCardDescription, } from "./ExpansionCardDescription";
+import ExpansionCardHeader from "./ExpansionCardHeader";
+import { ExpansionCardTitle, } from "./ExpansionCardTitle";
+export const ExpansionCardContext = createContext({
+    open: false,
+    toggleOpen: () => { },
+});
+export const ExpansionCard = forwardRef((_a, ref) => {
+    var { className, onToggle, open, defaultOpen = false, size = "medium" } = _a, rest = __rest(_a, ["className", "onToggle", "open", "defaultOpen", "size"]);
+    const [_open, _setOpen] = useState(defaultOpen);
+    const shouldFade = useRef(!(Boolean(open) || defaultOpen));
+    const handleOpen = () => {
+        if (open === undefined) {
+            const newOpen = !_open;
+            _setOpen(newOpen);
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(newOpen);
+        }
+        else {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(!open);
+        }
+        shouldFade.current = true;
+    };
+    return (React.createElement(ExpansionCardContext.Provider, { value: { open: open !== null && open !== void 0 ? open : _open, toggleOpen: handleOpen } },
+        React.createElement("section", Object.assign({}, rest, { className: cl("navds-expansioncard", className, `navds-expansioncard--${size}`, {
+                "navds-expansioncard--open": open !== null && open !== void 0 ? open : _open,
+                "navds-expansioncard--no-fade": !shouldFade.current,
+            }), ref: ref }))));
+});
+ExpansionCard.Header = ExpansionCardHeader;
+ExpansionCard.Content = ExpansionCardContent;
+ExpansionCard.Title = ExpansionCardTitle;
+ExpansionCard.Description = ExpansionCardDescription;
+export default ExpansionCard;
+//# sourceMappingURL=ExpansionCard.js.map

package/esm/expansion-card/ExpansionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionCard.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,oBAEN,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,wBAAwB,GAEzB,MAAM,4BAA4B,CAAC;AACpC,OAAO,mBAEN,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AA4C9B,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAA4B;IAC3E,IAAI,EAAE,KAAK;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,WAAW,GAAG,KAAK,EACnB,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cANT,wDAOC,CADQ;IAIT,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC;IAEpE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC;YACvB,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAC;SACrB;aAAM;YACL,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,IAAI,CAAC,CAAC;SACnB;QACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAC5B,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE;QAEtD,iDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,SAAS,EACT,wBAAwB,IAAI,EAAE,EAC9B;gBACE,2BAA2B,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK;gBAC1C,8BAA8B,EAAE,CAAC,UAAU,CAAC,OAAO;aACpD,CACF,EACD,GAAG,EAAE,GAAG,IACR,CAC4B,CACjC,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,aAAa,CAAC,MAAM,GAAG,mBAAmB,CAAC;AAC3C,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC;AAC7C,aAAa,CAAC,KAAK,GAAG,kBAAkB,CAAC;AACzC,aAAa,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAErD,eAAe,aAAa,CAAC"}

package/esm/expansion-card/ExpansionCardContent.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ExpansionCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export type ExpansionCardContentType = React.ForwardRefExoticComponent<ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ExpansionCardContent: ExpansionCardContentType;
+export default ExpansionCardContent;

package/esm/expansion-card/ExpansionCardContent.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+const ExpansionCardContent = forwardRef((_a, ref) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    const panelContext = useContext(ExpansionCardContext);
+    if (panelContext === null) {
+        console.error("<ExpansionCard.Content> has to be used within an <ExpansionCard>");
+        return null;
+    }
+    return (React.createElement(BodyLong, Object.assign({}, rest, { ref: ref, as: "div", className: cl("navds-expansioncard__content", {
+            "navds-expansioncard__content--closed": !panelContext.open,
+        }), "aria-hidden": !panelContext.open }),
+        React.createElement("div", { className: "navds-expansioncard__content-inner" }, children)));
+});
+export default ExpansionCardContent;
+//# sourceMappingURL=ExpansionCardContent.js.map

package/esm/expansion-card/ExpansionCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionCardContent.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAWvD,MAAM,oBAAoB,GAA6B,UAAU,CAC/D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,kEAAkE,CACnE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;YAC5C,sCAAsC,EAAE,CAAC,YAAY,CAAC,IAAI;SAC3D,CAAC,iBACW,CAAC,YAAY,CAAC,IAAI;QAE/B,6BAAK,SAAS,EAAC,oCAAoC,IAAE,QAAQ,CAAO,CAC3D,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/esm/expansion-card/ExpansionCardDescription.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ExpansionCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+}
+export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const ExpansionCardDescription: ExpansionCardDescriptionType;
+export {};

package/esm/expansion-card/ExpansionCardDescription.js

@@ -0,0 +1,19 @@
+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 } from "react";
+import cl from "clsx";
+import { BodyLong } from "../typography/BodyLong";
+export const ExpansionCardDescription = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(BodyLong, Object.assign({}, rest, { as: "p", ref: ref, className: cl("navds-link-panel__description", className) })));
+});
+//# sourceMappingURL=ExpansionCardDescription.js.map

package/esm/expansion-card/ExpansionCardDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionCardDescription.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardDescription.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAWlD,MAAM,CAAC,MAAM,wBAAwB,GACnC,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC1C,oBAAC,QAAQ,oBACH,IAAI,IACR,EAAE,EAAC,GAAG,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,IACzD,CACH,CAAA;CAAA,CAAC,CAAC"}

package/esm/expansion-card/ExpansionCardHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ExpansionCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const ExpansionCardHeader: ExpansionCardHeaderType;
+export default ExpansionCardHeader;

package/esm/expansion-card/ExpansionCardHeader.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { ExpansionCardContext } from "./ExpansionCard";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+const ExpansionCardHeader = forwardRef((_a, ref) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    const panelContext = useContext(ExpansionCardContext);
+    if (panelContext === null) {
+        console.error("<ExpansionCard.Header> has to be used within an <ExpansionCard>");
+        return null;
+    }
+    return (React.createElement("div", Object.assign({ ref: ref }, rest, { className: cl("navds-expansioncard__header", className) }),
+        React.createElement("div", { className: "navds-expansioncard__header-content" }, children),
+        React.createElement("button", { className: "navds-expansioncard__header-button", onClick: () => panelContext.toggleOpen(), type: "button", "aria-expanded": panelContext.open },
+            React.createElement(ChevronDownIcon, { className: "navds-expansioncard__header-chevron", title: "Vis mer" }))));
+});
+export default ExpansionCardHeader;
+//# sourceMappingURL=ExpansionCardHeader.js.map

package/esm/expansion-card/ExpansionCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionCardHeader.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD,MAAM,mBAAmB,GAA4B,UAAU,CAC7D,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,YAAY,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEtD,IAAI,YAAY,KAAK,IAAI,EAAE;QACzB,OAAO,CAAC,KAAK,CACX,iEAAiE,CAClE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC;QAEvD,6BAAK,SAAS,EAAC,qCAAqC,IAAE,QAAQ,CAAO;QAErE,gCACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EACxC,IAAI,EAAC,QAAQ,mBACE,YAAY,CAAC,IAAI;YAEhC,oBAAC,eAAe,IACd,SAAS,EAAC,qCAAqC,EAC/C,KAAK,EAAC,SAAS,GACf,CACK,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/esm/expansion-card/ExpansionCardTitle.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
+interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    /**
+     * Changes text-sizing
+     * @default small
+     */
+    size?: "large" | "medium" | "small";
+}
+export type ExpansionCardTitleType = OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>;
+export declare const ExpansionCardTitle: ExpansionCardTitleType;
+export {};

package/esm/expansion-card/ExpansionCardTitle.js

@@ -0,0 +1,18 @@
+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 } from "react";
+import cl from "clsx";
+export const ExpansionCardTitle = forwardRef((_a, ref) => {
+    var { className, as: Component = "h3", size = "small" } = _a, rest = __rest(_a, ["className", "as", "size"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-expansioncard__title", `navds-expansioncard__title--${size}`, "navds-heading", `navds-heading--${size}`, className) })));
+});
+//# sourceMappingURL=ExpansionCardTitle.js.map

package/esm/expansion-card/ExpansionCardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpansionCardTitle.js","sourceRoot":"","sources":["../../src/expansion-card/ExpansionCardTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAkBtB,MAAM,CAAC,MAAM,kBAAkB,GAA2B,UAAU,CAClE,CAAC,EAA4D,EAAE,GAAG,EAAE,EAAE;QAArE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,GAAG,OAAO,OAAW,EAAN,IAAI,cAA1D,2BAA4D,CAAF;IAAY,OAAA,CACrE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,+BAA+B,IAAI,EAAE,EACrC,eAAe,EACf,kBAAkB,IAAI,EAAE,EACxB,SAAS,CACV,IACD,CACH,CAAA;CAAA,CACF,CAAC"}

package/esm/expansion-card/index.d.ts

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

package/esm/expansion-card/index.js

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

package/esm/expansion-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/expansion-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,OAAO,IAAI,aAAa,GACzB,MAAM,iBAAiB,CAAC"}

package/esm/index.d.ts

@@ -5,6 +5,7 @@ export * from "./chat";
 export * from "./chips";
 export * from "./date";
 export * from "./form";
+export * from "./expansion-card";
 export * from "./grid";
 export * from "./guide-panel";
 export * from "./help-text";

package/esm/index.js

@@ -5,6 +5,7 @@ export * from "./chat";
 export * from "./chips";
 export * from "./date";
 export * from "./form";
+export * from "./expansion-card";
 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,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,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"}

package/package.json

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

package/src/expansion-card/ExpansionCard.tsx

@@ -0,0 +1,119 @@
+import cl from "clsx";
+import React, { createContext, forwardRef, useRef, useState } from "react";
+import ExpansionCardContent, {
+  ExpansionCardContentType,
+} from "./ExpansionCardContent";
+import {
+  ExpansionCardDescription,
+  ExpansionCardDescriptionType,
+} from "./ExpansionCardDescription";
+import ExpansionCardHeader, {
+  ExpansionCardHeaderType,
+} from "./ExpansionCardHeader";
+import {
+  ExpansionCardTitle,
+  ExpansionCardTitleType,
+} from "./ExpansionCardTitle";
+
+interface ExpansionCardComponent
+  extends React.ForwardRefExoticComponent<
+    ExpansionCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Header: ExpansionCardHeaderType;
+  Title: ExpansionCardTitleType;
+  Description: ExpansionCardDescriptionType;
+  Content: ExpansionCardContentType;
+}
+
+export interface ExpansionCardProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Callback for when Card is toggled open/closed
+   */
+  onToggle?: (open: boolean) => void;
+  /**
+   * Controlled open-state
+   * Using this removes automatic control of open-state
+   */
+  open?: boolean;
+  /**
+   * Defaults to open if not controlled
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+  /**
+   * Since ExpansionCard is a section-element, accessible name is required.
+   */
+  ["aria-label"]: string;
+}
+
+export type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+};
+
+export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+});
+
+export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
+  (
+    {
+      className,
+      onToggle,
+      open,
+      defaultOpen = false,
+      size = "medium",
+      ...rest
+    },
+    ref
+  ) => {
+    const [_open, _setOpen] = useState(defaultOpen);
+
+    const shouldFade = useRef<boolean>(!(Boolean(open) || defaultOpen));
+
+    const handleOpen = () => {
+      if (open === undefined) {
+        const newOpen = !_open;
+        _setOpen(newOpen);
+        onToggle?.(newOpen);
+      } else {
+        onToggle?.(!open);
+      }
+      shouldFade.current = true;
+    };
+
+    return (
+      <ExpansionCardContext.Provider
+        value={{ open: open ?? _open, toggleOpen: handleOpen }}
+      >
+        <section
+          {...rest}
+          className={cl(
+            "navds-expansioncard",
+            className,
+            `navds-expansioncard--${size}`,
+            {
+              "navds-expansioncard--open": open ?? _open,
+              "navds-expansioncard--no-fade": !shouldFade.current,
+            }
+          )}
+          ref={ref}
+        />
+      </ExpansionCardContext.Provider>
+    );
+  }
+) as ExpansionCardComponent;
+
+ExpansionCard.Header = ExpansionCardHeader;
+ExpansionCard.Content = ExpansionCardContent;
+ExpansionCard.Title = ExpansionCardTitle;
+ExpansionCard.Description = ExpansionCardDescription;
+
+export default ExpansionCard;

package/src/expansion-card/ExpansionCardContent.tsx

@@ -0,0 +1,42 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyLong } from "../typography/BodyLong";
+import { ExpansionCardContext } from "./ExpansionCard";
+
+export interface ExpansionCardContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardContentType = React.ForwardRefExoticComponent<
+  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardContent: ExpansionCardContentType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <BodyLong
+        {...rest}
+        ref={ref}
+        as="div"
+        className={cl("navds-expansioncard__content", {
+          "navds-expansioncard__content--closed": !panelContext.open,
+        })}
+        aria-hidden={!panelContext.open}
+      >
+        <div className="navds-expansioncard__content-inner">{children}</div>
+      </BodyLong>
+    );
+  }
+);
+
+export default ExpansionCardContent;

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { BodyLong } from "../typography/BodyLong";
+
+interface ExpansionCardDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
+  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+>;
+
+export const ExpansionCardDescription: ExpansionCardDescriptionType =
+  forwardRef(({ className, ...rest }, ref) => (
+    <BodyLong
+      {...rest}
+      as="p"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+    />
+  ));

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -0,0 +1,50 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { ExpansionCardContext } from "./ExpansionCard";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+
+export interface ExpansionCardHeaderProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
+  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
+  ({ children, className, ...rest }, ref) => {
+    const panelContext = useContext(ExpansionCardContext);
+
+    if (panelContext === null) {
+      console.error(
+        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+      );
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        {...rest}
+        className={cl("navds-expansioncard__header", className)}
+      >
+        <div className="navds-expansioncard__header-content">{children}</div>
+
+        <button
+          className="navds-expansioncard__header-button"
+          onClick={() => panelContext.toggleOpen()}
+          type="button"
+          aria-expanded={panelContext.open}
+        >
+          <ChevronDownIcon
+            className="navds-expansioncard__header-chevron"
+            title="Vis mer"
+          />
+        </button>
+      </div>
+    );
+  }
+);
+
+export default ExpansionCardHeader;

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../util/OverridableComponent";
+
+interface ExpansionCardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes text-sizing
+   * @default small
+   */
+  size?: "large" | "medium" | "small";
+}
+
+export type ExpansionCardTitleType = OverridableComponent<
+  ExpansionCardTitleProps,
+  HTMLHeadingElement
+>;
+
+export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+  ({ className, as: Component = "h3", size = "small", ...rest }, ref) => (
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-expansioncard__title",
+        `navds-expansioncard__title--${size}`,
+        "navds-heading",
+        `navds-heading--${size}`,
+        className
+      )}
+    />
+  )
+);