@navikt/ds-react 0.7.7 → 0.8.0

package/esm/typography/BodyShort.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 const BodyShort = forwardRef((_a, ref) => {
-    var { className, size = "m", spacing, component: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "component"]);
+    var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-body-short", {
-            "navds-body--s": size === "s",
+            "navds-body-short--small": size === "small",
             "navds-typo--spacing": !!spacing,
         }) })));
 });

package/esm/typography/BodyShort.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyShort.js","sourceRoot":"","sources":["../../src/typography/BodyShort.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAsB5B,MAAM,SAAS,GAAyC,UAAU,CAChE,CACE,EAAuE,EACvE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAArE,6CAAuE,CAAF;IAElE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE;YAC3C,eAAe,EAAE,IAAI,KAAK,GAAG;YAC7B,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BodyShort.js","sourceRoot":"","sources":["../../src/typography/BodyShort.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAoB5B,MAAM,SAAS,GAGX,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE;YAC3C,yBAAyB,EAAE,IAAI,KAAK,OAAO;YAC3C,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/typography/Detail.d.ts

@@ -1,22 +1,19 @@
 import React from "react";
-import { OverridableComponent } from "../util";
-export interface DetailProps {
-    props: {
-        /**
-         * M: 18px, S: 16px
-         * @default "m"
-         */
-        size?: "m" | "s";
-        /**
-         * Paragraph text
-         */
-        children: React.ReactNode;
-        /**
-         * Adds margins to typo
-         */
-        spacing?: boolean;
-    } & React.HTMLAttributes<HTMLParagraphElement>;
-    defaultComponent: "p";
+import { OverridableComponent } from "..";
+export interface DetailProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * medium: 14px bold, small: 14px
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Paragraph text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
 }
-declare const Detail: OverridableComponent<DetailProps>;
+declare const Detail: OverridableComponent<DetailProps, HTMLParagraphElement>;
 export default Detail;

package/esm/typography/Detail.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 const Detail = forwardRef((_a, ref) => {
-    var { className, size = "m", spacing, component: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "component"]);
+    var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-detail", {
-            "navds-detail--s": size === "s",
+            "navds-detail--small": size === "small",
             "navds-typo--spacing": !!spacing,
         }) })));
 });

package/esm/typography/Detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"Detail.js","sourceRoot":"","sources":["../../src/typography/Detail.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAsB5B,MAAM,MAAM,GAAsC,UAAU,CAC1D,CACE,EAAuE,EACvE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAArE,6CAAuE,CAAF;IAElE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE;YACvC,iBAAiB,EAAE,IAAI,KAAK,GAAG;YAC/B,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Detail.js","sourceRoot":"","sources":["../../src/typography/Detail.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAoB5B,MAAM,MAAM,GAGR,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE;YACvC,qBAAqB,EAAE,IAAI,KAAK,OAAO;YACvC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/typography/Heading.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Heading level
+     * @default "1"
+     */
+    level?: "1" | "2" | "3" | "4" | "5" | "6";
+    /**
+     * Sizes from largest "2xl" to smallest "s"
+     */
+    size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Heading text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margins to typo
+     * @default false
+     */
+    spacing?: boolean;
+}
+declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;
+export default Heading;

package/esm/typography/{Title.js → Heading.js}

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
-const Title = forwardRef((_a, ref) => {
-    var { level = 1, size = "2xl", spacing, className, children, component } = _a, rest = __rest(_a, ["level", "size", "spacing", "className", "children", "component"]);
-    let HeadingTag = component !== null && component !== void 0 ? component : `h${level}`;
-    return (React.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-title", `navds-title--${size}`, {
-            "navds-typo--spacing": !!spacing,
-        }) }), children));
+const Heading = forwardRef((_a, ref) => {
+    var { level = "1", size, spacing = false, className, as } = _a, rest = __rest(_a, ["level", "size", "spacing", "className", "as"]);
+    let HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;
+    return (React.createElement(HeadingTag, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-heading", `navds-heading--${size}`, {
+            "navds-typo--spacing": spacing,
+        }) })));
 });
-export default Title;
-//# sourceMappingURL=Title.js.map
+export default Heading;
+//# sourceMappingURL=Heading.js.map

package/esm/typography/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAwB5B,MAAM,OAAO,GAGT,UAAU,CACZ,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/esm/typography/Ingress.d.ts

@@ -1,17 +1,14 @@
 import React from "react";
-import { OverridableComponent } from "../util";
-export interface IngressProps {
-    props: {
-        /**
-         * Paragraph text
-         */
-        children: React.ReactNode;
-        /**
-         * Adds margins to typo
-         */
-        spacing?: boolean;
-    } & React.HTMLAttributes<HTMLParagraphElement>;
-    defaultComponent: "p";
+import { OverridableComponent } from "..";
+export interface IngressProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Ingress text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
 }
-declare const Ingress: OverridableComponent<IngressProps>;
+declare const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement>;
 export default Ingress;

package/esm/typography/Ingress.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 const Ingress = forwardRef((_a, ref) => {
-    var { className, spacing, component: Component = "p" } = _a, rest = __rest(_a, ["className", "spacing", "component"]);
+    var { className, spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-ingress", {
             "navds-typo--spacing": !!spacing,
         }) })));

package/esm/typography/Ingress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAiB5B,MAAM,OAAO,GAAuC,UAAU,CAC5D,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;QAApE,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAzD,qCAA2D,CAAF;IAAY,OAAA,CACpE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAe5B,MAAM,OAAO,GAGT,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CAC5E,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/esm/typography/Label.d.ts

@@ -1,22 +1,19 @@
 import React from "react";
-import { OverridableComponent } from "../util";
-export interface LabelProps {
-    props: {
-        /**
-         * M: 18px, S: 16px
-         * @default "m"
-         */
-        size?: "m" | "s";
-        /**
-         * Paragraph text
-         */
-        children: React.ReactNode;
-        /**
-         * Adds margins to typo
-         */
-        spacing?: boolean;
-    } & React.HTMLAttributes<HTMLParagraphElement>;
-    defaultComponent: "p";
+import { OverridableComponent } from "..";
+export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * medium: 18px, small: 16px
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * Paragraph text
+     */
+    children: React.ReactNode;
+    /**
+     * Adds margins to typo
+     */
+    spacing?: boolean;
 }
-declare const Label: OverridableComponent<LabelProps>;
+declare const Label: OverridableComponent<LabelProps, HTMLParagraphElement>;
 export default Label;

package/esm/typography/Label.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 const Label = forwardRef((_a, ref) => {
-    var { className, size = "m", spacing, component: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "component"]);
+    var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-label", {
-            "navds-label--s": size === "s",
+            "navds-label--small": size === "small",
             "navds-typo--spacing": !!spacing,
         }) })));
 });

package/esm/typography/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAsB5B,MAAM,KAAK,GAAqC,UAAU,CACxD,CACE,EAAuE,EACvE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAArE,6CAAuE,CAAF;IAElE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,gBAAgB,EAAE,IAAI,KAAK,GAAG;YAC9B,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAmB5B,MAAM,KAAK,GAGP,UAAU,CACZ,CACE,EAAqE,EACrE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAnE,sCAAqE,CAAF;IAEhE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/esm/typography/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Title } from "./Title";
+export { default as Heading } from "./Heading";
 export { default as Ingress } from "./Ingress";
 export { default as BodyLong } from "./BodyLong";
 export { default as BodyShort } from "./BodyShort";

package/esm/typography/index.js

@@ -1,4 +1,4 @@
-export { default as Title } from "./Title";
+export { default as Heading } from "./Heading";
 export { default as Ingress } from "./Ingress";
 export { default as BodyLong } from "./BodyLong";
 export { default as BodyShort } from "./BodyShort";

package/esm/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/esm/util/OverridableComponent.d.ts

@@ -1,26 +1,7 @@
-import React from "react";
-/**
- * A component whose root component can be controlled via a `component` prop.
- */
-export interface OverridableComponent<M extends OverridableTypeMap> {
-    (props: DefaultComponentProps<M>): React.ReactElement | null;
-    <C extends React.ElementType>(props: {
-        component: C;
-    } & OverrideProps<M, C>): React.ReactElement | null;
-}
-/**
- * Props of the component if `component={Component}` is used.
- */
-export declare type OverrideProps<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>);
-/**
- * Props if `component={Component}` is NOT used.
- */
-export declare type DefaultComponentProps<M extends OverridableTypeMap> = (BaseProps<M> & Omit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>);
-/**
- * Props defined on the component.
- */
-export declare type BaseProps<M extends OverridableTypeMap> = M["props"];
-export interface OverridableTypeMap {
-    props: {};
-    defaultComponent: React.ElementType;
+/// <reference types="react" />
+export interface OverridableComponent<Component, Element extends HTMLElement> {
+    (props: Component & React.RefAttributes<Element>): ReturnType<React.FC>;
+    <As extends React.ElementType>(props: {
+        as: As;
+    } & Component & Omit<React.ComponentPropsWithRef<As>, keyof Component>): ReturnType<React.FC>;
 }

package/esm/util/OverridableComponent.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=OverridableComponent.js.map

package/esm/util/useId.d.ts

@@ -1 +1,3 @@
+import { useLayoutEffect } from "react";
+export declare const useClientLayoutEffect: typeof useLayoutEffect;
 export declare const useId: (id?: string) => string;

package/esm/util/useId.js

@@ -5,7 +5,7 @@ const canUseDOM = () => {
         typeof window.document !== "undefined" &&
         typeof window.document.createElement !== "undefined");
 };
-const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => { };
+export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => { };
 export const useId = (id) => {
     var _a;
     const [newId, setNewId] = useState(undefined);

package/esm/util/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,SAAS,GAAG,GAAY,EAAE;IAC9B,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,KAAK,WAAW,CACrD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AAEvE,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,EAAE,EAAE,EAAE;;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,aAAO,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,mCAAI,EAAE,CAAC;AAC3B,CAAC,CAAC"}
+{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,SAAS,GAAG,GAAY,EAAE;IAC9B,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,KAAK,WAAW,CACrD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,EAAE,EAAE,EAAE;;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAA,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,mCAAI,EAAE,CAAC;AAC3B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.7.7",
+  "version": "0.8.0",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -45,12 +45,15 @@
     "short-uuid": "^4.2.0"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.1.8",
+    "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
     "react-router-dom": "^5.2.0",
-    "rimraf": "3.0.2"
+    "rimraf": "3.0.2",
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7335fb6c8d5bfc2f5e23a982544b5ae827cba9f8"
+  "gitHead": "c485e1bfc7de8e30386b9b3c094a3032783db26f"
 }

package/src/accordion/Accordion.tsx

@@ -1,108 +1,33 @@
-import React, { forwardRef, useEffect, useState } from "react";
 import cl from "classnames";
-import { UnmountClosed, Collapse } from "react-collapse";
-import { Expand, ExpandFilled } from "@navikt/ds-icons";
-import { useId } from "..";
+import React, { forwardRef } from "react";
+import AccordionItem, { AccordionItemType } from "./AccordionItem";
+import AccordionContent, { AccordionContentType } from "./AccordionContent";
+import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
 
-export interface AccordionProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+interface AccordionComponent
+  extends React.ForwardRefExoticComponent<
+    AccordionProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: AccordionItemType;
+  Header: AccordionHeaderType;
+  Content: AccordionContentType;
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Component content
+   * Content inside accordion
    */
   children: React.ReactNode;
-  /**
-   * Content on interactive surface of component
-   */
-  heading: React.ReactNode;
-  /**
-   * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
-   * @default false
-   */
-  open?: boolean;
-  /**
-   * Callback for when user interacts with component
-   */
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  /**
-   * Removes content-element from dom when closed
-   * @default false
-   */
-  renderContentWhenClosed?: boolean;
 }
 
-const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
-  (
-    {
-      children,
-      heading,
-      open = false,
-      className,
-      renderContentWhenClosed = false,
-      onClick,
-      id,
-      ...rest
-    },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(open);
-
-    const buttonId = useId(id);
-    const contentId = useId();
-
-    useEffect(() => {
-      setInternalOpen(open);
-    }, [open]);
-
-    const CollapseComponent = renderContentWhenClosed
-      ? Collapse
-      : UnmountClosed;
+const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  ({ className, ...rest }, ref) => (
+    <div {...rest} className={cl("navds-accordion", className)} ref={ref} />
+  )
+) as AccordionComponent;
 
-    return (
-      <div
-        className={cl("navds-accordion", className, {
-          "navds-accordion--open": internalOpen,
-          "navds-accordion--closed": !internalOpen,
-        })}
-      >
-        <button
-          ref={ref}
-          id={buttonId}
-          className="navds-accordion__button"
-          aria-expanded={open}
-          aria-controls={contentId}
-          onClick={onClick ? onClick : () => setInternalOpen((open) => !open)}
-          {...rest}
-        >
-          <span className="navds-accordion__heading navds-title navds-title--s">
-            {heading}
-          </span>
-          <Expand
-            focusable="false"
-            role="img"
-            className={cl(
-              "navds-accordion__chevron",
-              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
-            )}
-          />
-          <ExpandFilled
-            focusable="false"
-            role="img"
-            className={cl(
-              "navds-accordion__chevron",
-              "navds-accordion__chevron--filled",
-              `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
-            )}
-          />
-        </button>
-        <div id={contentId} role="region" aria-labelledby={buttonId}>
-          <CollapseComponent isOpened={internalOpen}>
-            <div className="navds-accordion__content">{children}</div>
-          </CollapseComponent>
-        </div>
-      </div>
-    );
-  }
-);
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+Accordion.Item = AccordionItem;
 
 export default Accordion;