Lerna versionbump [ci skip]

- @navikt/ds-icons@0.5.8
 - @navikt/ds-react@0.11.8
 - @navikt/ds-react-internal@0.6.9

.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
   ],
   addons: [
     "@storybook/addon-docs",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/stories/introduction.stories.mdx

@@ -20,3 +20,16 @@ import "@navikt/ds-css"
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
 Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.

.storybook/stories/migration.stories.mdx

@@ -2,7 +2,33 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Migration" />
 
-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
 
 Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
 For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.

@navikt/core/css/index.css

@@ -7,7 +7,6 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/core/icons/.svgrrc.js

@@ -0,0 +1,17 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: true,
+  titleProp: true,
+  svgProps: {
+    focusable: false,
+    role: "img",
+    tabIndex: -1,
+  },
+  replaceAttrValues: {
+    "#262626": "currentColor",
+  },
+  template,
+};

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.5",
+  "version": "0.5.8",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -27,17 +27,21 @@
   "scripts": {
     "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
     "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
-    "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
+    "create-icons": "svgr --out-dir src svg",
     "convert-icons": "node figma-api/pngConverter.mjs",
-    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
     "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+  },
+  "dependencies": {
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",
+    "@types/uuid": "^8.3.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",

@navikt/core/icons/stories/icons.stories.mdx

@@ -16,9 +16,7 @@ yarn add @navikt/ds-icons
 Import { Expand } from `@navikt/ds-icons`;
 
 <Expand
-	aria-label="Åpne meny"
-	role="img"
-	focusable="false"
+	title="Åpne meny"
 />
 ```
 

@navikt/core/icons/template.js

@@ -0,0 +1,44 @@
+function defaultTemplate(
+  { template },
+  opts,
+  { imports, interfaces, componentName, props, jsx, exports }
+) {
+  const plugins = ["jsx"];
+  if (opts.typescript) {
+    plugins.push("typescript");
+  }
+
+  imports.push({
+    type: "ImportDeclaration",
+    specifiers: [
+      {
+        type: "ImportSpecifier",
+        imported: {
+          type: "Identifier",
+          name: "v4",
+        },
+      },
+    ],
+    source: {
+      type: "StringLiteral",
+      value: "uuid",
+    },
+  });
+
+  props[0].properties.find((prop) => prop.key.name === "titleId").value = {
+    type: "Identifier",
+    name: "_titleId",
+  };
+
+  const typeScriptTpl = template.smart({ plugins });
+  return typeScriptTpl.ast`
+  ${imports}
+  ${interfaces}
+  function ${componentName}(${props}) {
+    const titleId = _titleId ?? (title ? v4() : undefined);
+    return ${jsx};
+  }
+  ${exports}`;
+}
+
+module.exports = defaultTemplate;

@navikt/core/icons/tsconfig-esm.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "outDir": "./esm",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"]
-}

@navikt/core/icons/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/core/icons/tsconfig.json

@@ -1,13 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
     "outDir": "./cjs",
-    "target": "es2015",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"]
+    "module": "commonjs"
+  }
 }

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.10.5",
+  "version": "0.11.8",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -29,16 +29,15 @@
   "scripts": {
     "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.5.5",
+    "@navikt/ds-icons": "^0.5.8",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.14.3",

@navikt/core/react/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -32,9 +32,7 @@ const Collapsable: AccordionMenuCollapsableType = forwardRef(
         >
           {title}
           <Expand
-            role="img"
-            focusable="false"
-            aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
+            title={isOpen ? "Pil peker opp" : "Pil peker ned"}
             className="navds-accordion-menu-collapsable__expand-icon"
           />
         </button>

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,7 +1,6 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
 import { Collapse, UnmountClosed } from "react-collapse";
-import { useClientLayoutEffect, useId } from "../util";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -20,13 +19,6 @@ const AccordionContent: AccordionContentType = forwardRef(
   ({ children, className, id, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 
-    const newId = useId(id);
-    const setContentId = context && context.setContentId;
-
-    useClientLayoutEffect(() => {
-      setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
-    }, [setContentId, newId]);
-
     if (context === null) {
       console.error(
         "<Accordion.Content> has to be used within an <Accordion.Item>"
@@ -39,13 +31,7 @@ const AccordionContent: AccordionContentType = forwardRef(
       : UnmountClosed;
 
     return (
-      <div
-        ref={ref}
-        id={context.contentId}
-        role="region"
-        aria-labelledby={context.buttonId}
-        {...rest}
-      >
+      <div ref={ref} role="region" aria-labelledby={context.buttonId} {...rest}>
         <CollapseComponent isOpened={context.open}>
           <div className={cl("navds-accordion__content", className)}>
             {children}

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -52,22 +52,17 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
           "navds-heading--small"
         )}
         onClick={handleClick}
-        aria-controls={context.contentId}
         {...rest}
       >
         {children}
         <Expand
-          focusable="false"
-          role="img"
-          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
           className={cl("navds-accordion__expand-icon", {
             "navds-accordion__expand-icon--flip": context.open,
           })}
         />
         <ExpandFilled
-          focusable="false"
-          role="img"
-          aria-label={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
+          title={context.open ? "Lukk panel ikon" : "Åpne panel ikon"}
           className={cl(
             "navds-accordion__expand-icon",
             "navds-accordion__expand-icon--filled",

@navikt/core/react/src/accordion/AccordionItem.tsx

@@ -32,9 +32,7 @@ export interface AccordionItemContextProps {
   open: boolean;
   toggleOpen: () => void;
   setButtonId: (id: string) => void;
-  setContentId: (id: string) => void;
   buttonId: string;
-  contentId: string;
   renderContentWhenClosed: boolean;
 }
 
@@ -58,7 +56,6 @@ const AccordionItem: AccordionItemType = forwardRef(
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
     const [buttonId, setButtonId] = useState("");
-    const [contentId, setContentId] = useState("");
 
     return (
       <div
@@ -79,8 +76,6 @@ const AccordionItem: AccordionItemType = forwardRef(
             renderContentWhenClosed,
             setButtonId,
             buttonId,
-            setContentId,
-            contentId,
           }}
         >
           {children}

@navikt/core/react/src/alert/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, forwardRef } from "react";
+import React, { forwardRef } from "react";
 import cl from "classnames";
 import {
   ErrorFilled,
@@ -6,8 +6,6 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
-import AlertContent, { AlertContentType } from "./AlertContent";
-import AlertTitle, { AlertTitleType } from "./AlertTitle";
 import { BodyLong } from "..";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -54,15 +52,6 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
-export const AlertContext = createContext<AlertContextProps | null>(null);
-interface AlertComponent
-  extends React.ForwardRefExoticComponent<
-    AlertProps & React.RefAttributes<HTMLDivElement>
-  > {
-  Title: AlertTitleType;
-  Content: AlertContentType;
-}
-
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {
@@ -88,11 +77,8 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
       )}
     >
       <Icon
-        aria-label={`${variant}-ikon`}
-        focusable="false"
-        role="img"
+        title={`${variant}-ikon`}
         variant={variant}
-        alt={`${variant}-ikon`}
         className="navds-alert__icon"
       />
       <BodyLong as="div" size={size} className="navds-alert__wrapper">
@@ -100,9 +86,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
       </BodyLong>
     </div>
   )
-) as AlertComponent;
-
-Alert.Title = AlertTitle;
-Alert.Content = AlertContent;
+);
 
 export default Alert;

@navikt/core/react/src/alert/AlertContent.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { BodyLong } from "..";
-import { AlertContext } from ".";
-
-export interface AlertContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertContentType = React.ForwardRefExoticComponent<
-  AlertContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertContent: AlertContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertContent has to be wrapped in <Alert />");
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="div"
-        className={cl(className, "navds-alert__content")}
-        ref={ref}
-        size={context.size ?? "medium"}
-      >
-        {children}
-      </BodyLong>
-    );
-  }
-);
-
-export default AlertContent;

@navikt/core/react/src/alert/AlertTitle.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef, useContext } from "react";
-import cl from "classnames";
-import { AlertContext, Heading } from "..";
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Alert content
-   */
-  children: React.ReactNode;
-}
-
-export type AlertTitleType = React.ForwardRefExoticComponent<
-  AlertTitleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AlertTitle: AlertTitleType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const context = useContext(AlertContext);
-
-    if (context === null) {
-      console.warn("AlertTitle has to be wrapped in <Alert />");
-      return null;
-    }
-
-    const size = context.size === "medium" ? "small" : "xsmall";
-
-    return (
-      <Heading
-        {...rest}
-        ref={ref}
-        className={cl(className, "navds-alert__title")}
-        as="div"
-        size={size}
-      >
-        {children}
-      </Heading>
-    );
-  }
-);
-
-export default AlertTitle;

@navikt/core/react/src/form/Select.tsx

@@ -49,7 +49,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
   return (
     <div
       className={cl(
-        props.className,
+        className,
         "navds-form-field",
         `navds-form-field--${size}`,
         { "navds-select--error": hasError }
@@ -82,7 +82,6 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
           {...inputProps}
           ref={ref}
           className={cl(
-            className,
             "navds-select__input",
             "navds-body-short",
             `navds-body--${size ?? "medium"}`

@navikt/core/react/src/form/TextField.tsx

@@ -49,7 +49,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
   return (
     <div
       className={cl(
-        props.className,
+        className,
         "navds-form-field",
         `navds-form-field--${size}`,
         { "navds-text-field--error": hasError }
@@ -81,7 +81,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
         ref={ref}
         type={type}
         className={cl(
-          className,
           "navds-text-field__input",
           "navds-body-short",
           `navds-body-${size ?? "medium"}`

@navikt/core/react/src/form/Textarea.tsx

@@ -63,7 +63,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div
         className={cl(
-          props.className,
+          className,
           "navds-form-field",
           `navds-form-field--${size}`,
           { "navds-textarea--error": hasError }
@@ -96,7 +96,6 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             {...inputProps}
             ref={ref}
             className={cl(
-              className,
               "navds-textarea__input",
               "navds-body-short",
               `navds-body-${size ?? "medium"}`,

@navikt/core/react/src/form/checkbox/Checkbox.test.tsx

@@ -4,6 +4,8 @@ import userEvent from "@testing-library/user-event";
 import faker from "faker";
 import { Checkbox, CheckboxGroup } from ".";
 
+const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
+
 test("checkbox group chains onChange calls", () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();
@@ -26,4 +28,61 @@ test("checkbox group chains onChange calls", () => {
   expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true);
 });
 
-const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
+describe("Checkbox handles controlled-state correctly", () => {
+  const CheckboxComponent = ({
+    onChange = () => null,
+    value,
+  }) => (
+    <CheckboxGroup legend="legend" onChange={onChange} value={value}>
+      <Checkbox value={"value1"}>label1</Checkbox>
+      <Checkbox value={"value2"}>label2</Checkbox>
+    </CheckboxGroup>
+  );
+
+  test("Checkbox is still checked after click when controlled", () => {
+    render(<CheckboxComponent value={["value1", "value2"]} />);
+    userEvent.click(screen.getByLabelText("label1"));
+    userEvent.click(screen.getByLabelText("label2"));
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      true
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      true
+    );
+  });
+
+  test("onChange called with expected values", () => {
+    const onGroupChange = jest.fn();
+
+    render(<CheckboxComponent onChange={onGroupChange} value={["value1", "value2"]} />);
+
+    userEvent.click(screen.getByLabelText("label1"));
+
+    expect(onGroupChange).lastCalledWith(["value2"]);
+
+    userEvent.click(screen.getByLabelText("label2"));
+
+    expect(onGroupChange).lastCalledWith(["value1"]);
+  });
+
+  test("Checkboxes updates after value-prop change", () => {
+    const { rerender } = render(<CheckboxComponent value={[]} />);
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      false
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      false
+    );
+
+    rerender(<CheckboxComponent value={["value1", "value2"]} />);
+
+    expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
+      true
+    );
+    expect((screen.getByLabelText("label2") as HTMLInputElement).checked).toBe(
+      true
+    );
+  });
+});

@navikt/core/react/src/form/checkbox/CheckboxGroup.tsx

@@ -1,9 +1,9 @@
-import React, { createContext, forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext, useState } from "react";
 import cl from "classnames";
 import { Fieldset, FieldsetProps, FieldsetContext } from "..";
 
 export interface CheckboxGroupState {
-  readonly defaultValue: readonly string[];
+  readonly defaultValue?: readonly string[];
   readonly value?: readonly string[];
   toggleValue(value: string): void;
 }
@@ -33,20 +33,23 @@ export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
 
 const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
   (
-    {
-      value,
-      defaultValue = [],
-      onChange = () => {},
-      children,
-      className,
-      ...rest
-    },
+    { value, defaultValue, onChange = () => {}, children, className, ...rest },
     ref
   ) => {
-    const state = value ?? [];
-
     const fieldset = useContext(FieldsetContext);
 
+    const [state, setState] = useState<string[]>([]);
+
+    const handleChange = (v: string) => {
+      const newValue = value ? value : state;
+      const newState = newValue.includes(v)
+        ? newValue.filter((x) => x !== v)
+        : [...newValue, v];
+
+      value === undefined && setState(newState);
+      onChange(newState);
+    };
+
     return (
       <Fieldset
         {...rest}
@@ -61,12 +64,7 @@ const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
           value={{
             value,
             defaultValue,
-            toggleValue: (value: string) =>
-              onChange(
-                state.includes(value)
-                  ? state.filter((v) => v !== value)
-                  : [...state, value]
-              ),
+            toggleValue: (value: string) => handleChange(value),
           }}
         >
           <div className="navds-checkboxes">{children}</div>

@navikt/core/react/src/form/checkbox/useCheckbox.ts

@@ -32,7 +32,7 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
       checked: checkboxGroup?.value
         ? checkboxGroup.value.includes(props.value as string)
         : props.checked,
-      defaultChecked: checkboxGroup
+      defaultChecked: checkboxGroup?.defaultValue
         ? checkboxGroup.defaultValue.includes(props.value as string)
         : props.defaultChecked,
       onChange: (e) => {

@navikt/core/react/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 import { Heading, BodyShort } from "../..";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -23,6 +24,13 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
 }
 
+interface ErrorSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Item: ErrorSummaryItemType;
+}
+
 const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   (
     {
@@ -62,6 +70,8 @@ const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       </div>
     );
   }
-);
+) as ErrorSummaryComponent;
+
+ErrorSummary.Item = ErrorSummaryItem;
 
 export default ErrorSummary;

@navikt/core/react/src/form/error-summary/ErrorSummaryItem.tsx

@@ -10,11 +10,12 @@ export interface ErrorSummaryItemProps
   children: React.ReactNode;
 }
 
-export type ErrorType = OverridableComponent<
+export type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
-const ErrorSummaryItem: ErrorType = forwardRef(
+
+const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
       <Component

@navikt/core/react/src/form/error-summary/index.ts

@@ -1,5 +1,2 @@
-export { default as ErrorSummary, ErrorSummaryProps } from "./ErrorSummary";
-export {
-  default as ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./ErrorSummaryItem";
+export { default as ErrorSummary } from "./ErrorSummary";
+export * from "./ErrorSummary";

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.mdx

@@ -1,27 +1,27 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import { ErrorSummary, ErrorSummaryItem } from "../index";
+import { ErrorSummary } from "../index";
 
 <Meta title="ds-react/form/errorsummary/intro" />
 
 # Hvordan ta i bruk ErrorSummary
 
-`href` på `ErrorSummaryItem` linker til id som er satt på skjema-elementer.
+`href` på `ErrorSummary.Item` linker til id som er satt på skjema-elementer.
 
 ```jsx
 <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
   <ErrorSummary heading="Eiusmod est cillum mollit pariatur deserunt">
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>
 
@@ -34,11 +34,11 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
   heading="Eiusmod est cillum mollit pariatur deserunt"
   headingTag="h3"
 >
-  <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-  <ErrorSummaryItem href="#2">
+  <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+  <ErrorSummary.Item href="#2">
     Tekstfeltet må ha en godkjent e-mail
-  </ErrorSummaryItem>
-</ErrorSummaryItem>
+  </ErrorSummary.Item>
+</ErrorSummary>
 ```
 
 <Canvas>
@@ -46,9 +46,9 @@ import { ErrorSummary, ErrorSummaryItem } from "../index";
     heading="Eiusmod est cillum mollit pariatur deserunt"
     headingTag="h3"
   >
-    <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-    <ErrorSummaryItem href="#2">
+    <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+    <ErrorSummary.Item href="#2">
       Tekstfeltet må ha en godkjent e-mail
-    </ErrorSummaryItem>
+    </ErrorSummary.Item>
   </ErrorSummary>
 </Canvas>

@navikt/core/react/src/form/error-summary/stories/error-summary.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react/types-6-0";
-import { ErrorSummary, ErrorSummaryItem } from "..";
+import { ErrorSummary } from "..";
 export default {
   title: "ds-react/form/errorsummary",
   component: ErrorSummary,
@@ -11,17 +11,17 @@ export const All = () => {
     <>
       <h1>Error summary</h1>
       <ErrorSummary heading="Feiloppsummering komponent" headingTag="h4">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
       <h2>size small</h2>
       <ErrorSummary size="small" heading="Feiloppsummering komponent">
-        <ErrorSummaryItem href="#1">Checkbox må fylles ut</ErrorSummaryItem>
-        <ErrorSummaryItem href="#2">
+        <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+        <ErrorSummary.Item href="#2">
           Tekstfeltet må ha en godkjent e-mail
-        </ErrorSummaryItem>
+        </ErrorSummary.Item>
       </ErrorSummary>
     </>
   );

@navikt/core/react/src/form/index.ts

@@ -10,21 +10,9 @@ export {
   FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export {
-  SearchField,
-  SearchFieldProps,
-  SearchFieldInput,
-  SearchFieldInputProps,
-  SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./search-field";
+export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
-export {
-  ErrorSummary,
-  ErrorSummaryProps,
-  ErrorSummaryItem,
-  ErrorSummaryItemProps,
-} from "./error-summary";
+export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";
 export {

@navikt/core/react/src/form/search-field/SearchField.tsx

@@ -3,6 +3,11 @@ import React, { forwardRef } from "react";
 import { BodyShort, Label, omit } from "../..";
 import ErrorMessage from "../ErrorMessage";
 import { FormFieldProps, useFormField } from "../useFormField";
+import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
+import SearchFieldClearButton, {
+  SearchFieldClearButtonType,
+} from "./SearchFieldClearButton";
+import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
 
 export interface SearchFieldContextProps {
   inputProps: {
@@ -35,6 +40,15 @@ export interface SearchFieldProps
   label: React.ReactNode;
 }
 
+interface SearchFieldComponent
+  extends React.ForwardRefExoticComponent<
+    SearchFieldProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchFieldButtonType;
+  Clear: SearchFieldClearButtonType;
+  Input: SearchFieldInputType;
+}
+
 const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
   (props, ref) => {
     const {
@@ -105,6 +119,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
       </div>
     );
   }
-);
+) as SearchFieldComponent;
+
+SearchField.Button = SearchFieldButton;
+SearchField.Clear = SearchFieldClearButton;
+SearchField.Input = SearchFieldInput;
 
 export default SearchField;

@navikt/core/react/src/form/search-field/SearchFieldButton.tsx

@@ -16,7 +16,11 @@ export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldButton = forwardRef<HTMLButtonElement, SearchFieldButtonProps>(
+export type SearchFieldButtonType = React.ForwardRefExoticComponent<
+  SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchFieldButton: SearchFieldButtonType = forwardRef(
   ({ className, variant = "primary", disabled, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/SearchFieldClearButton.tsx

@@ -16,29 +16,34 @@ export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
   variant?: "primary" | "secondary";
 }
 
-const SearchFieldClearButton = forwardRef<
-  HTMLButtonElement,
-  SearchFieldClearButtonProps
->(({ className, variant = "secondary", disabled, ...rest }, ref) => {
-  const searchField = useContext(SearchFieldContext);
+export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
+  SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
 
-  if (searchField === null) {
-    console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
-    return null;
+const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
+  ({ className, variant = "secondary", disabled, ...rest }, ref) => {
+    const searchField = useContext(SearchFieldContext);
+
+    if (searchField === null) {
+      console.warn(
+        "SearchFieldClearButton has to be wrapped in <SearchField />"
+      );
+      return null;
+    }
+
+    const { size, inputProps } = searchField;
+
+    return (
+      <Button
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-search-field__clear-button")}
+        size={size}
+        variant={variant}
+        disabled={disabled ?? inputProps?.disabled}
+      />
+    );
   }
-
-  const { size, inputProps } = searchField;
-
-  return (
-    <Button
-      {...rest}
-      ref={ref}
-      className={cl(className, "navds-search-field__clear-button")}
-      size={size}
-      variant={variant}
-      disabled={disabled ?? inputProps?.disabled}
-    />
-  );
-});
+);
 
 export default SearchFieldClearButton;

@navikt/core/react/src/form/search-field/SearchFieldInput.tsx

@@ -5,7 +5,11 @@ import { SearchFieldContext } from "./SearchField";
 export interface SearchFieldInputProps
   extends InputHTMLAttributes<HTMLInputElement> {}
 
-const SearchFieldInput = forwardRef<HTMLInputElement, SearchFieldInputProps>(
+export type SearchFieldInputType = React.ForwardRefExoticComponent<
+  SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
+>;
+
+const SearchFieldInput: SearchFieldInputType = forwardRef(
   ({ className, ...rest }, ref) => {
     const searchField = useContext(SearchFieldContext);
 

@navikt/core/react/src/form/search-field/index.ts

@@ -1,13 +1,2 @@
 export { default as SearchField, SearchFieldProps } from "./SearchField";
-export {
-  default as SearchFieldInput,
-  SearchFieldInputProps,
-} from "./SearchFieldInput";
-export {
-  default as SearchFieldButton,
-  SearchFieldButtonProps,
-} from "./SearchFieldButton";
-export {
-  default as SearchFieldClearButton,
-  SearchFieldClearButtonProps,
-} from "./SearchFieldClearButton";
+export * from "./SearchField";

@navikt/core/react/src/form/search-field/stories/search-field-example.tsx

@@ -1,30 +1,25 @@
 import React, { useState } from "react";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
   const [value, setValue] = useState("");
 
   return (
     <SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
-      <SearchFieldInput
+      <SearchField.Input
         value={value}
         onChange={(e) => setValue(e.target.value)}
       />
       {!!value && (
-        <SearchFieldClearButton onClick={() => setValue("")}>
+        <SearchField.Clear onClick={() => setValue("")}>
           <Close />
           Tøm
-        </SearchFieldClearButton>
+        </SearchField.Clear>
       )}
-      <SearchFieldButton>
+      <SearchField.Button>
         <Search /> Søk
-      </SearchFieldButton>
+      </SearchField.Button>
     </SearchField>
   );
 };

@navikt/core/react/src/form/search-field/stories/search-field.stories.mdx

@@ -1,10 +1,5 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 
 import { Example } from "./search-field-example.tsx";
 
@@ -22,10 +17,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -34,10 +29,10 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -52,10 +47,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   description="Ea cupidatat eu sunt commodo"
   hideLabel
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -65,10 +60,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     description="Ea cupidatat eu sunt commodo"
     hideLabel
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -81,10 +76,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   size="small"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -95,10 +90,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     size="small"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
@@ -111,10 +106,10 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   hideLabel
   error="Error message"
 >
-  <SearchFieldInput />
-  <SearchFieldButton>
+  <SearchField.Input />
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 
@@ -125,31 +120,31 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
     hideLabel
     error="Error message"
   >
-    <SearchFieldInput />
-    <SearchFieldButton>
+    <SearchField.Input />
+    <SearchField.Button>
       <Search /> Søk
-    </SearchFieldButton>
+    </SearchField.Button>
   </SearchField>
 </Canvas>
 
 ## ClearButton
 
-Man kan bruke `SearchFieldClearButton` for å håndtere clearing av value i `<input />`. For å bruke denne
-kreves det da at `SearchFieldInput` er controlled slik at man styrer state selv slik som eksemplet under.
+Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
+kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
 Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
 den når inputvalue ikke er empty.
 
 ```jsx
 <SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchFieldInput value={value} onChange={(e) => setValue(e.target.value)} />
+  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
   {!!value && (
-    <SearchFieldClearButton onClick={() => setValue("")}>
+    <SearchField.Clear onClick={() => setValue("")}>
       <Close /> Tøm
-    </SearchFieldClearButton>
+    </SearchField.Clear>
   )}
-  <SearchFieldButton>
+  <SearchField.Button>
     <Search /> Søk
-  </SearchFieldButton>
+  </SearchField.Button>
 </SearchField>
 ```
 

@navikt/core/react/src/form/search-field/stories/search-field.stories.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from "react";
 import { Meta } from "@storybook/react/types-6-0";
 import { Close, Search } from "@navikt/ds-icons";
-import {
-  SearchField,
-  SearchFieldInput,
-  SearchFieldButton,
-  SearchFieldClearButton,
-} from "../index";
+import { SearchField } from "../index";
 import { Fieldset } from "../..";
 export default {
   title: "ds-react/form/search-field",
@@ -22,19 +17,19 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h1>SearchField w clearsearch</h1>
@@ -42,25 +37,25 @@ export const All = () => {
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close />
-        </SearchFieldClearButton>
-        <SearchFieldButton onClick={() => setShow(!show)}>
+        </SearchField.Clear>
+        <SearchField.Button onClick={() => setShow(!show)}>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <h2>Hidelabel</h2>
@@ -69,10 +64,10 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         hideLabel
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField small</h2>
@@ -81,11 +76,11 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -93,25 +88,25 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
-        <SearchFieldClearButton>
+        </SearchField.Button>
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldInput />
+        </SearchField.Clear>
+        <SearchField.Input />
       </SearchField>
 
       <SearchField
@@ -119,14 +114,14 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         size="small"
       >
-        <SearchFieldInput />
-        <SearchFieldClearButton>
+        <SearchField.Input />
+        <SearchField.Clear>
           <Close /> Tøm
-        </SearchFieldClearButton>
-        <SearchFieldButton>
+        </SearchField.Clear>
+        <SearchField.Button>
           <Search />
           <span className="sr-only">Søk</span>
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
 
       <h2>SearchField w error</h2>
@@ -135,20 +130,20 @@ export const All = () => {
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldInput />
-        <SearchFieldButton>
+        <SearchField.Input />
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
+        </SearchField.Button>
       </SearchField>
       <SearchField
         label="Mollit eiusmod"
         description="Ea cupidatat eu sunt commodo"
         error="Errormsg"
       >
-        <SearchFieldButton>
+        <SearchField.Button>
           <Search /> Søk
-        </SearchFieldButton>
-        <SearchFieldInput />
+        </SearchField.Button>
+        <SearchField.Input />
       </SearchField>
 
       <h2>SearchField in Fieldset</h2>
@@ -159,20 +154,20 @@ export const All = () => {
           error="Errormsg"
           hideLabel
         >
-          <SearchFieldInput />
-          <SearchFieldButton>
+          <SearchField.Input />
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
+          </SearchField.Button>
         </SearchField>
         <SearchField
           label="Mollit eiusmod"
           description="Ea cupidatat eu sunt commodo"
           hideLabel
         >
-          <SearchFieldButton>
+          <SearchField.Button>
             <Search /> Søk
-          </SearchFieldButton>
-          <SearchFieldInput />
+          </SearchField.Button>
+          <SearchField.Input />
         </SearchField>
       </Fieldset>
     </>

@navikt/core/react/src/guide-panel/Illustration.tsx

@@ -10,32 +10,32 @@ export const DefaultIllustration = () => (
     aria-label="NAV veileder illustrasjon"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M32.8313 30.4421C31.7718 33.868 29.6975 36.7117 27.0391 38.452L27.1752 39.9777L27.1745 40.0397L25.7375 52.6154H16.6236L16.5857 52.3512L14.8238 40.0181L14.8891 38.4756C12.2173 36.7398 10.1312 33.8914 9.06565 30.4564C9.02952 30.4598 8.99291 30.4616 8.95588 30.4616C8.26662 30.4616 7.72058 29.8614 7.72058 29.1343V25.0202C7.72058 24.5328 7.96592 24.1022 8.33526 23.8712C8.9115 16.1905 14.3251 10.1539 20.946 10.1539C27.5491 10.1539 32.9517 16.1579 33.5525 23.8089C33.9838 24.0179 34.2794 24.4845 34.2794 25.0202V29.1343C34.2794 29.8618 33.7341 30.4616 33.0441 30.4616C32.9714 30.4616 32.9003 30.4549 32.8313 30.4421Z"
       fill="#F1F1F1"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M26.7182 38.8777C26.6663 41.624 24.1261 44.4415 21 44.4415C17.8604 44.4415 15.3116 41.5994 15.2813 38.8419C13.6546 39.2527 11.1714 40.4917 9.12177 42.5623C7.13699 44.5674 5.55884 47.5814 5.55884 49.9194V64H36.4412V49.9194C36.4412 47.5766 34.829 44.5575 32.8075 42.5501C30.7861 40.5427 28.3553 39.3204 26.7182 38.8777Z"
       fill="#0056B4"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M15.1786 38.9372C13.6802 39.4793 11.1664 40.6641 9.2647 42.4632C3.70588 41.2308 1.23529 38.3022 1.23529 38.3022C1.23529 38.3022 6.35673 33.325 6.35982 24.6197V24.6105C6.35982 14.4173 11.8831 7.38464 20.9827 7.38464C30.0836 7.38464 35.6068 14.4173 35.6068 24.6105H35.6396C35.6396 33.3219 40.7647 38.3022 40.7647 38.3022C40.7647 38.3022 38.2941 41.2308 32.7353 42.4616L32.7269 42.4632C30.8901 40.7984 28.2262 39.5144 26.7769 38.9715L26.7785 38.971L26.7209 38.3257L26.7521 38.2722C29.4867 36.5294 31.6086 33.5933 32.6316 30.0454C32.7569 30.1148 32.8983 30.1539 33.048 30.1539C33.5601 30.1539 33.9746 29.6984 33.9746 29.1343V25.0202C33.9746 24.5375 33.6712 24.134 33.2628 24.0275C33.2624 24.0219 33.262 24.0164 33.2616 24.0108C20.3323 25.4483 15.6749 16.616 15.2926 16.6154C15.2926 16.6154 10.9987 19.6923 8.94657 23.3506C8.94657 23.3506 8.6338 24.0412 8.63228 24.0644C8.28095 24.2092 8.03035 24.5821 8.03035 25.0202V29.1343C8.03035 29.6984 8.44586 30.1539 8.95693 30.1539C9.07019 30.1539 9.17868 30.1316 9.27895 30.0908C10.3132 33.6404 12.4486 36.5733 15.1961 38.3046L15.2063 38.3257L15.1804 38.9372H15.1786Z"
       fill="#D05C4A"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M16.584 26.9976C15.7859 27.062 15.5625 25.8029 15.803 24.9807C15.8482 24.8249 16.1124 24.1154 16.5802 24.1154C17.0473 24.1154 17.2536 24.5032 17.2823 24.5699C17.6259 25.3715 17.4571 26.9268 16.584 26.9976"
       fill="#262626"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M25.8405 26.9976C26.6386 27.062 26.862 25.8029 26.6215 24.9807C26.5763 24.8249 26.3121 24.1154 25.8444 24.1154C25.3772 24.1154 25.171 24.5032 25.1423 24.5699C24.7987 25.3715 24.9674 26.9268 25.8405 26.9976"
       fill="#262626"
     />
@@ -48,50 +48,50 @@ export const DefaultIllustration = () => (
       fill="#262626"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M32.1651 58H21.8343C21.3733 58 21 57.621 21 57.153V51.5143C21 51.0462 21.3733 50.6667 21.8343 50.6667H32.1651C32.6261 50.6667 33 51.0462 33 51.5143V57.153C33 57.621 32.6261 58 32.1651 58"
       fill="white"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M27.6207 51.8307H26.5502C26.4709 51.8307 26.407 51.7671 26.407 51.6882V51.5086C26.407 51.4303 26.4709 51.3661 26.5502 51.3661H27.6207C27.7 51.3661 27.764 51.4303 27.764 51.5086V51.6882C27.764 51.7671 27.7 51.8307 27.6207 51.8307"
       fill="#262626"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M26.7756 51.6667H27.3958V50H26.7756V51.6667Z"
       fill="#6A6A6A"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M27.1269 56.6651C25.839 56.6651 24.7947 55.6208 24.7947 54.3327C24.7947 53.0444 25.839 52 27.1269 52C28.4153 52 29.4597 53.0444 29.4597 54.3327C29.4597 55.6208 28.4153 56.6651 27.1269 56.6651Z"
       fill="#C30000"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M23.6667 55.3511L24.1434 54.1712H24.6015L24.1254 55.3511H23.6667Z"
       fill="#C30000"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M29.5496 55.3511L30.0202 54.1712H30.2699L29.7993 55.3511H29.5496Z"
       fill="#C30000"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M30.4752 55.3511L30.9457 54.1712H31.0783L30.6077 55.3511H30.4752Z"
       fill="#C30000"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M29.1165 54.1712H28.7019C28.7019 54.1712 28.6733 54.1712 28.6632 54.1964L28.4337 54.8989L28.2044 54.1964C28.1943 54.1712 28.1656 54.1712 28.1656 54.1712H27.3683C27.3511 54.1712 27.3366 54.1856 27.3366 54.2028V54.4413C27.3366 54.2521 27.1352 54.1712 27.0173 54.1712C26.7533 54.1712 26.5765 54.3451 26.5215 54.6095C26.5185 54.4341 26.5039 54.3713 26.4567 54.3069C26.435 54.2754 26.4036 54.2489 26.3695 54.2269C26.2991 54.1857 26.236 54.1712 26.1003 54.1712H25.9409C25.9409 54.1712 25.9121 54.1712 25.9019 54.1964L25.7569 54.5558V54.2028C25.7569 54.1856 25.7426 54.1712 25.7253 54.1712H25.3566C25.3566 54.1712 25.3281 54.1712 25.3178 54.1964L25.167 54.5701C25.167 54.5701 25.152 54.6074 25.1864 54.6074H25.3281V55.3194C25.3281 55.3371 25.342 55.3511 25.3598 55.3511H25.7253C25.7426 55.3511 25.7569 55.3371 25.7569 55.3194V54.6074H25.8994C25.9812 54.6074 25.9985 54.6097 26.0303 54.6245C26.0495 54.6317 26.0667 54.6464 26.0762 54.6632C26.0954 54.6995 26.1003 54.7431 26.1003 54.8716V55.3194C26.1003 55.3371 26.1145 55.3511 26.132 55.3511H26.4823C26.4823 55.3511 26.5219 55.3511 26.5376 55.312L26.6152 55.1201C26.7185 55.2647 26.8884 55.3511 27.0996 55.3511H27.1458C27.1458 55.3511 27.1856 55.3511 27.2014 55.312L27.3366 54.9771V55.3194C27.3366 55.3371 27.3511 55.3511 27.3683 55.3511H27.726C27.726 55.3511 27.7654 55.3511 27.7813 55.312C27.7813 55.312 27.9243 54.9569 27.9249 54.9542H27.9251C27.9306 54.9246 27.8933 54.9246 27.8933 54.9246H27.7656V54.3153L28.1672 55.312C28.1829 55.3511 28.2225 55.3511 28.2225 55.3511H28.645C28.645 55.3511 28.6847 55.3511 28.7004 55.312L29.1457 54.2094C29.1611 54.1712 29.1165 54.1712 29.1165 54.1712V54.1712ZM27.3366 54.9246H27.0964C27.0007 54.9246 26.9229 54.8472 26.9229 54.7515C26.9229 54.6559 27.0007 54.578 27.0964 54.578H27.1635C27.2589 54.578 27.3366 54.6559 27.3366 54.7515V54.9246Z"
       fill="white"
     />

@navikt/core/react/src/help-text/HelpText.tsx

@@ -3,7 +3,7 @@ import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { Popover, useId } from "..";
+import { Popover } from "..";
 
 export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -29,7 +29,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const wrapperRef = useRef<HTMLDivElement | null>(null);
 
     const [open, setOpen] = useState(false);
-    const popoverId = `popover-${useId()}`;
 
     useEffect(() => {
       open && popoverRef.current?.focus();
@@ -51,7 +50,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}
-          aria-controls={popoverId}
           aria-haspopup="dialog"
           title={title}
         >
@@ -65,7 +63,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           open={open}
           role="tooltip"
           anchorEl={buttonRef.current}
-          id={popoverId}
           placement={placement}
         >
           <Popover.Content>{children}</Popover.Content>

@navikt/core/react/src/index.ts

@@ -2,7 +2,6 @@ export * from "./accordion";
 export * from "./accordion-menu";
 export * from "./alert";
 export * from "./button";
-export * from "./copy-to-clipboard";
 export * from "./form";
 export * from "./grid";
 export * from "./help-text";

@navikt/core/react/src/loader/Loader.tsx

@@ -39,11 +39,11 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref
   ) => {
-    const internalId = useId(id);
+    const internalId = useId();
 
     return (
       <svg
-        aria-labelledby={internalId}
+        aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
         className={cl(
           "navds-loader",

@navikt/core/react/src/modal/Modal.tsx

@@ -87,11 +87,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
           aria-label="lukk modalvindu"
           onClick={onClose}
         >
-          <Close
-            focusable="false"
-            role="img"
-            aria-label="X-ikon for å lukke modal"
-          />
+          <Close title="X-ikon for å lukke modal" />
         </Button>
       </ReactModal>
     );

@navikt/core/react/src/popover/Popover.tsx

@@ -150,7 +150,6 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         className={cl("navds-popover", className, {
           "navds-popover--hidden": !open || !anchorEl,
         })}
-        aria-live="polite"
         aria-hidden={!open || !anchorEl}
         tabIndex={-1}
         {...attributes.popper}

@navikt/core/react/src/typography/stories/typography.stories.mdx

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
+import { Alert, Heading, BodyLong } from "@navikt/ds-react";
 
 <Meta title="ds-react/Typography/intro" />
 
@@ -37,3 +38,46 @@ Vi anbefaler å før eller siden endre tilbake til default root font size da des
 komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
 forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
 for å tilpasse systemet for alle de forskjellige variantene av font size på root.
+
+## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
+
+De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
+
+### Overskrifter
+
+Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
+
+En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
+
+`<Sidetittel> -> <Heading size="2xlarge">`
+
+`<Innholdstittel> -> <Heading size="xlarge">`
+
+`<Systemtittel> -> <Heading size="medium">`
+
+`<Undertittel> -> <Heading size="small">`
+
+<Alert variant="warning">
+  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
+  hierarkiet (h1-h6).
+</Alert>
+
+### Brødtekst
+
+De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
+
+Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
+
+`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
+
+### Andre komponenter
+
+`<Ingress> -> <Ingress>`
+
+`<Element> -> <Label>`
+
+`<UndertekstBold> -> <Detail>`
+
+`<Undertekst> -> <Detail size="small">`
+
+`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.

@navikt/core/react/tsconfig-esm.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}

@navikt/core/react/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/core/react/tsconfig.json

@@ -1,14 +1,9 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
     "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
+    "noImplicitAny": false
   },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+  "include": ["./src"]
 }

@navikt/internal/css/copy-to-clipboard.css

@@ -1,3 +1,3 @@
-.navds-copy-to-clipboard__popover {
+.navdsi-copy-to-clipboard__popover {
   padding: var(--navds-spacing-1);
 }

@navikt/internal/css/index.css

@@ -1,3 +1,4 @@
+@import "copy-to-clipboard.css";
 @import "divider.css";
 @import "dropdown.css";
 @import "header.css";

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.5.3",
+  "version": "0.6.9",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -29,13 +29,16 @@
   "scripts": {
     "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json"
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.5.5",
-    "@navikt/ds-react": "^0.10.5",
-    "classnames": "^2.3.1"
+    "@navikt/ds-icons": "^0.5.8",
+    "@navikt/ds-react": "^0.11.8",
+    "@popperjs/core": "^2.10.1",
+    "classnames": "^2.3.1",
+    "copy-to-clipboard": "^3.3.1",
+    "react-merge-refs": "^1.1.0"
   },
   "devDependencies": {
     "rimraf": "^3.0.2"

@navikt/internal/react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -1,10 +1,10 @@
 import { Copy } from "@navikt/ds-icons";
-import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import copy from "copy-to-clipboard";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Button, ButtonProps, Popover } from "..";
+import { BodyShort, Button, ButtonProps, Popover } from "@navikt/ds-react";
+import { Placement } from "@popperjs/core";
 
 export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
   /**
@@ -66,17 +66,13 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           ref={mergedRef}
           variant="secondary"
           title={title}
-          className={cl("navds-copy-to-clipboard", className)}
+          className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
           {...rest}
         >
-          <Copy
-            focusable="false"
-            role="img"
-            aria-label="Fil ikon for kopiering"
-          />
-          {children ? children : <span className="sr-only">{title}</span>}
+          <Copy title="Fil ikon for kopiering" />
+          {children ? children : <span className="navds-sr-only">{title}</span>}
         </Button>
         <Popover
           role="alert"
@@ -85,7 +81,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClose={() => setOpenPopover(false)}
           placement={popoverPlacement}
           arrow={false}
-          className="navds-copy-to-clipboard__popover"
+          className="navdsi-copy-to-clipboard__popover"
         >
           <BodyShort size={size} as="span">
             {popoverText}

@navikt/internal/react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { CopyToClipboard } from "../index";
 
 export default {
-  title: "@ds-react/copy-to-clipboard",
+  title: "ds-react-internal/copy-to-clipboard",
   component: CopyToClipboard,
 };
 

@navikt/internal/react/src/copy-to-clipboard/stories/copy.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { CopyToClipboard } from "../../index";
 import { Success } from "@navikt/ds-react";
 
-<Meta title="ds-react/copy-to-clipboard/intro" />
+<Meta title="ds-react-internal/copy-to-clipboard/intro" />
 
 # Hvordan ta i bruk CopyToClipboard
 

@navikt/internal/react/src/dropdown/Menu/index.tsx

@@ -10,6 +10,10 @@ interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
    * Dropdown content
    */
   children: React.ReactNode;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
 }
 
 export interface MenuType<Props = MenuProps>
@@ -21,7 +25,7 @@ export interface MenuType<Props = MenuProps>
 }
 
 const Menu = forwardRef<HTMLDivElement, MenuProps>(
-  ({ className, ...rest }, ref) => {
+  ({ className, onClose, ...rest }, ref) => {
     const context = useContext(DropdownContext);
 
     if (!context) {
@@ -41,7 +45,10 @@ const Menu = forwardRef<HTMLDivElement, MenuProps>(
         offset={-4}
         anchorEl={anchorEl}
         open={isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={() => {
+          setIsOpen(false);
+          onClose && onClose();
+        }}
       />
     );
   }

@navikt/internal/react/src/dropdown/Toggle.tsx

@@ -14,29 +14,32 @@ export type ToggleType = React.ForwardRefExoticComponent<
   ToggleProps & React.RefAttributes<HTMLButtonElement>
 >;
 
-const Toggle: ToggleType = forwardRef(({ className, ...rest }, ref) => {
-  const context = useContext(DropdownContext);
+const Toggle: ToggleType = forwardRef(
+  ({ className, onClick, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
 
-  if (!context) {
-    console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
-    return null;
+    if (!context) {
+      console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { setAnchorEl, setIsOpen, isOpen } = context;
+
+    return (
+      <button
+        {...rest}
+        ref={ref}
+        onClick={(e) => {
+          setAnchorEl(e.currentTarget);
+          setIsOpen((isOpen) => !isOpen);
+          onClick && onClick(e);
+        }}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+        className={cl("navdsi-dropdown__toggle", className)}
+      />
+    );
   }
-
-  const { setAnchorEl, setIsOpen, isOpen } = context;
-
-  return (
-    <button
-      {...rest}
-      ref={ref}
-      onClick={(e) => {
-        setAnchorEl(e.currentTarget);
-        setIsOpen((isOpen) => !isOpen);
-      }}
-      aria-expanded={isOpen}
-      aria-haspopup="menu"
-      className={cl("navdsi-dropdown__toggle", className)}
-    />
-  );
-});
+);
 
 export default Toggle;

@navikt/internal/react/src/index.ts

@@ -1,3 +1,4 @@
+export * from "./copy-to-clipboard";
 export * from "./divider";
 export * from "./dropdown";
 export * from "./header";

@navikt/internal/react/tsconfig-esm.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}

@navikt/internal/react/tsconfig.esm.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}

@navikt/internal/react/tsconfig.json

@@ -1,14 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": {
     "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+    "module": "commonjs"
+  }
 }

package.json

@@ -72,6 +72,7 @@
     "@storybook/addon-storysource": "^6.3.4",
     "@storybook/addons": "^6.3.4",
     "@storybook/theming": "^6.3.4",
+    "@storybook/addon-a11y": "^6.3.12",
     "axios": "^0.21.3",
     "chalk": "^2.0.0",
     "color": "^3.1.3",

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "target": "es6",
+    "moduleResolution": "node"
+  },
+  "exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
+}

website/gatsby-config.js

@@ -122,6 +122,14 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
     },
+    {
+      resolve: `gatsby-plugin-hotjar-tracking`,
+      options: {
+        includeInDevelopment: false,
+        id: 148751,
+        sv: 6,
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

website/package.json

@@ -25,6 +25,7 @@
     "gatsby-plugin-robots-txt": "^1.5.3",
     "gatsby-plugin-sharp": "^2.6.37",
     "gatsby-plugin-sitemap": "^2.6.0",
+    "gatsby-plugin-hotjar-tracking": "^1.1.0",
     "gatsby-remark-autolink-headers": "^2.3.15",
     "gatsby-remark-prismjs": "^3.5.16",
     "gatsby-source-filesystem": "^2.3.31",

yarn.lock

@@ -3242,6 +3242,28 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@storybook/addon-a11y@^6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.3.12.tgz#2f930fc84fc275a4ed43a716fc09cc12caf4e110"
+  integrity sha512-q1NdRHFJV6sLEEJw0hatCc5ZIthELqM/AWdrEWDyhcJNyiq7Tq4nKqQBMTQSYwHiUAmxVgw7i4oa1vM2M51/3g==
+  dependencies:
+    "@storybook/addons" "6.3.12"
+    "@storybook/api" "6.3.12"
+    "@storybook/channels" "6.3.12"
+    "@storybook/client-api" "6.3.12"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/components" "6.3.12"
+    "@storybook/core-events" "6.3.12"
+    "@storybook/theming" "6.3.12"
+    axe-core "^4.2.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    react-sizeme "^3.0.1"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/addon-actions@6.3.8", "@storybook/addon-actions@^6.3.4":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.8.tgz#85e342c30b3118a7885a5cf0ea83c3bb03a18558"
@@ -3422,6 +3444,21 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addons@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.12.tgz#8773dcc113c5086dfff722388b7b65580e43b65b"
+  integrity sha512-UgoMyr7Qr0FS3ezt8u6hMEcHgyynQS9ucr5mAwZky3wpXRPFyUTmMto9r4BBUdqyUvTUj/LRKIcmLBfj+/l0Fg==
+  dependencies:
+    "@storybook/api" "6.3.12"
+    "@storybook/channels" "6.3.12"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/core-events" "6.3.12"
+    "@storybook/router" "6.3.12"
+    "@storybook/theming" "6.3.12"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@6.3.8", "@storybook/addons@^6.3.0", "@storybook/addons@^6.3.4":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.8.tgz#c4a839ae9b86fb4a1183466db6eb16201c1a0553"
@@ -3437,6 +3474,32 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/api@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.12.tgz#2845c20464d5348d676d09665e8ab527825ed7b5"
+  integrity sha512-LScRXUeCWEW/OP+jiooNMQICVdusv7azTmULxtm72fhkXFRiQs2CdRNTiqNg46JLLC9z95f1W+pGK66X6HiiQA==
+  dependencies:
+    "@reach/router" "^1.3.4"
+    "@storybook/channels" "6.3.12"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/core-events" "6.3.12"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.3.12"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.3.12"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^5.3.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@6.3.8", "@storybook/api@^6.3.0":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.8.tgz#251bcf6cc3a4e0b908bea7fb0aa9e48d6c48d720"
@@ -3539,6 +3602,19 @@
     webpack-hot-middleware "^2.25.0"
     webpack-virtual-modules "^0.2.2"
 
+"@storybook/channel-postmessage@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.12.tgz#3ff9412ac0f445e3b8b44dd414e783a5a47ff7c1"
+  integrity sha512-Ou/2Ga3JRTZ/4sSv7ikMgUgLTeZMsXXWLXuscz4oaYhmOqAU9CrJw0G1NitwBgK/+qC83lEFSLujHkWcoQDOKg==
+  dependencies:
+    "@storybook/channels" "6.3.12"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/core-events" "6.3.12"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    qs "^6.10.0"
+    telejson "^5.3.2"
+
 "@storybook/channel-postmessage@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.8.tgz#43a91760e3464017b8f753b5b383a15a8e56f884"
@@ -3552,6 +3628,15 @@
     qs "^6.10.0"
     telejson "^5.3.2"
 
+"@storybook/channels@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.12.tgz#aa0d793895a8b211f0ad3459c61c1bcafd0093c7"
+  integrity sha512-l4sA+g1PdUV8YCbgs47fIKREdEQAKNdQIZw0b7BfTvY9t0x5yfBywgQhYON/lIeiNGz2OlIuD+VUtqYfCtNSyw==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channels@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.8.tgz#1ae91e1f3c47b215b39c1c31b2a58b7ffafdff35"
@@ -3561,6 +3646,30 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.12.tgz#a0c6d72a871d1cb02b4b98675472839061e39b5b"
+  integrity sha512-xnW+lKKK2T774z+rOr9Wopt1aYTStfb86PSs9p3Fpnc2Btcftln+C3NtiHZl8Ccqft8Mz/chLGgewRui6tNI8g==
+  dependencies:
+    "@storybook/addons" "6.3.12"
+    "@storybook/channel-postmessage" "6.3.12"
+    "@storybook/channels" "6.3.12"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/core-events" "6.3.12"
+    "@storybook/csf" "0.0.1"
+    "@types/qs" "^6.9.5"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    stable "^0.1.8"
+    store2 "^2.12.0"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-api@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.8.tgz#60e608a5c2afbe6d63a4a063e616bedde8466584"
@@ -3585,6 +3694,14 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-logger@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.12.tgz#6585c98923b49fcb25dbceeeb96ef2a83e28e0f4"
+  integrity sha512-zNDsamZvHnuqLznDdP9dUeGgQ9TyFh4ray3t1VGO7ZqWVZ2xtVCCXjDvMnOXI2ifMpX5UsrOvshIPeE9fMBmiQ==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/client-logger@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.8.tgz#042b81c45f73066e4f6c32942c72f4aca0ae6646"
@@ -3593,6 +3710,36 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
+"@storybook/components@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.12.tgz#0c7967c60354c84afa20dfab4753105e49b1927d"
+  integrity sha512-kdQt8toUjynYAxDLrJzuG7YSNL6as1wJoyzNUaCfG06YPhvIAlKo7le9tS2mThVFN5e9nbKrW3N1V1sp6ypZXQ==
+  dependencies:
+    "@popperjs/core" "^2.6.0"
+    "@storybook/client-logger" "6.3.12"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.3.12"
+    "@types/color-convert" "^2.0.0"
+    "@types/overlayscrollbars" "^1.12.0"
+    "@types/react-syntax-highlighter" "11.0.5"
+    color-convert "^2.0.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    markdown-to-jsx "^7.1.3"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.13.1"
+    polished "^4.0.5"
+    prop-types "^15.7.2"
+    react-colorful "^5.1.2"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.3"
+    react-textarea-autosize "^8.3.0"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/components@6.3.8", "@storybook/components@^6.3.0":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.8.tgz#cb84b0245d8784d41e7e6be25a0d5774363e5b87"
@@ -3700,6 +3847,13 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
+"@storybook/core-events@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.12.tgz#73f6271d485ef2576234e578bb07705b92805290"
+  integrity sha512-SXfD7xUUMazaeFkB92qOTUV8Y/RghE4SkEYe5slAdjeocSaH7Nz2WV0rqNEgChg0AQc+JUI66no8L9g0+lw4Gw==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@6.3.8", "@storybook/core-events@^6.3.0":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.8.tgz#4c9a3deb9334b10116befbf2db5534d1319d2f39"
@@ -3885,6 +4039,22 @@
     ts-dedent "^2.0.0"
     webpack "4"
 
+"@storybook/router@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.12.tgz#0d572ec795f588ca886f39cb9b27b94ff3683f84"
+  integrity sha512-G/pNGCnrJRetCwyEZulHPT+YOcqEj/vkPVDTUfii2qgqukup6K0cjwgd7IukAURnAnnzTi1gmgFuEKUi8GE/KA==
+  dependencies:
+    "@reach/router" "^1.3.4"
+    "@storybook/client-logger" "6.3.12"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/router@6.3.8":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.8.tgz#16f6c73a760918adb146e456c5b98614cb747f79"
@@ -3925,6 +4095,24 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
+"@storybook/theming@6.3.12":
+  version "6.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.12.tgz#5bddf9bd90a60709b5ab238ecdb7d9055dd7862e"
+  integrity sha512-wOJdTEa/VFyFB2UyoqyYGaZdym6EN7RALuQOAMT6zHA282FBmKw8nL5DETHEbctpnHdcrMC/391teK4nNSrdOA==
+  dependencies:
+    "@emotion/core" "^10.1.1"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.27"
+    "@storybook/client-logger" "6.3.12"
+    core-js "^3.8.2"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.27"
+    global "^4.4.0"
+    memoizerific "^1.11.3"
+    polished "^4.0.5"
+    resolve-from "^5.0.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/theming@6.3.8", "@storybook/theming@^6.3.4":
   version "6.3.8"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.8.tgz#3af76408aa8a4f13e217cf407e63a03db217eedc"
@@ -4709,6 +4897,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/uuid@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.1.tgz#1a32969cf8f0364b3d8c8af9cc3555b7805df14f"
+  integrity sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==
+
 "@types/vfile-message@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
@@ -6028,6 +6221,11 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.3.tgz#b55cd8e8ddf659fe89b064680e1c6a4dceab0325"
   integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
 
+axe-core@^4.2.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.4.tgz#4f54afff45415b5dec220dec19505beb79c5fb2f"
+  integrity sha512-4Hk6iSA/H90rtiPoCpSkeJxNWCPBf7szwVvaUqrPdxo0j2Y04suHK9jPKXaE3WI7OET6wBSwsWw7FDc1DBq7iQ==
+
 axios@0.21.4, axios@^0.21.1, axios@^0.21.3, axios@^0.21.4:
   version "0.21.4"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
@@ -12269,6 +12467,13 @@ gatsby-plugin-cname@^1.0.0:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-cname/-/gatsby-plugin-cname-1.0.0.tgz#5752d006c476a3c7897fca5c307901df5501747a"
   integrity sha512-U0yRgn4cm1zBi+qC5a827acPFnUqKSowoCvAxT3MDmMJVLSWB4vmSyM7m6ThVz35obO4nKr4iP4vZhvA7gEVsA==
 
+gatsby-plugin-hotjar-tracking@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-hotjar-tracking/-/gatsby-plugin-hotjar-tracking-1.1.0.tgz#9dd1e1c780a68ceb4d4118a29e36984821d3f0d5"
+  integrity sha512-ec3t8cLz0FABGqnmhccCwam/SCPdDdCAw7mqTGLoq2XPM6zKGZkbArjdXUIX6NS3jmuqk9h9An8Rwr+zyb9Asw==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 gatsby-plugin-layout@^1.3.12:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-1.10.0.tgz#6b058e51d995d33ee0d020f6f136878a3d5a7c39"