Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.4
 - @navikt/ds-react-internal@0.6.4

.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.

.storybook/stories/roadmap-table.tsx

@@ -0,0 +1,269 @@
+import { Table as DsTable } from "@navikt/ds-react";
+import {
+  SuccessFilled as SuccessIcon,
+  ErrorFilled as ErrorIcon,
+} from "@navikt/ds-icons";
+import styled from "styled-components";
+
+const Success = styled(SuccessIcon)`
+  color: var(--navds-color-green-50);
+`;
+
+const Error = styled(ErrorIcon)`
+  color: var(--navds-color-red-50);
+`;
+
+const Table = styled(DsTable)`
+  .navds-table__cell > svg,
+  .navds-table__cell > span {
+    vertical-align: middle;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+type CompT = {
+  name: string;
+  status: Partial<[boolean, boolean, boolean]>;
+  desc?: React.ReactNode;
+};
+
+const Components: CompT[] = [
+  {
+    name: "Alertstriper",
+    status: [true, true, true],
+    desc: "Navn: Alert",
+  },
+  { name: "Chevron", status: [false], desc: "" },
+  {
+    name: "Core",
+    status: [true, true, false],
+    desc: <code>@navikt/ds-css</code>,
+  },
+  {
+    name: "Ekspanderbartpanel",
+    status: [true, true, true],
+    desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
+  },
+  { name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
+  {
+    name: "Fullbreddeknapp-style",
+    status: [false],
+    desc: "",
+  },
+  { name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
+  { name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
+  {
+    name: "Ikoner-assets",
+    status: [true, true, true],
+    desc: <code>@navikt/ds-icons</code>,
+  },
+  {
+    name: "js-utils",
+    status: [true, true, false],
+    desc:
+      "Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
+  },
+  { name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
+  { name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
+  { name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
+  { name: "Lesmerpanel", status: [false], desc: "" },
+  { name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
+  { name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
+  { name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
+  {
+    name: "Bekrefcheckbokspanel",
+    status: [true, true, true],
+    desc: "Navn: ConfirmationPanel",
+  },
+  {
+    name: "Checkbokspanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbokspanel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbox-gruppe",
+    status: [true, true, true],
+    desc: "Navn: CheckboxGroup",
+  },
+  { name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
+  {
+    name: "Feiloppsummering",
+    status: [true, true, false],
+    desc: "Navn: ErrorSummary, API vil bli endret for denne",
+  },
+  {
+    name: "Fnr-input",
+    status: [false],
+    desc:
+      "Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
+  },
+  { name: "Input", status: [true, true, true], desc: "Navn: TextField" },
+  {
+    name: "Label",
+    status: [false],
+    desc: "Skjema-elementer fikser dette selv",
+  },
+  { name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
+  { name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
+  {
+    name: "Radiopanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Radio-panel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  { name: "Select", status: [true, true, true], desc: "Navn: Select" },
+  { name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
+  {
+    name: "Skjemaelement-feilemelding",
+    status: [false],
+    desc: "",
+  },
+  { name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
+  { name: "Togglegruppe", status: [true, false, false], desc: "" },
+  { name: "ToggleKnapp", status: [true, false, false], desc: "" },
+  {
+    name: "Toggle",
+    status: [true, false, false],
+    desc: "Vil bli samme komponent som ToggleKnapp",
+  },
+  { name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
+  { name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
+  { name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
+  { name: "Stegindikator", status: [true, false, false], desc: "" },
+  {
+    name: "Tabell-style",
+    status: [true, true, false],
+    desc: "Navn: Table, Er nå publisert som React-component",
+  },
+  { name: "Tabs", status: [true, false, false], desc: "" },
+  { name: "Tekstomrade", status: [false], desc: "" },
+  {
+    name: "Typografi",
+    status: [true, true, true],
+    desc: "Navn: se typography-mappen i storybook",
+  },
+  { name: "veileder", status: [false], desc: "" },
+  {
+    name: "Veilederpanel",
+    status: [true, true, true],
+    desc: "Navn: GuidePanel",
+  },
+];
+
+const NewComps: CompT[] = [
+  {
+    name: "AccordionMenu",
+    status: [true, true, true],
+    desc: "",
+  },
+  {
+    name: "SearcField",
+    status: [true, true, false],
+    desc: "Denne vil undergå større endringer",
+  },
+  {
+    name: "MicroCard",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "PageHeader",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "CopyToClipboard",
+    status: [true, true, false],
+    desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
+  },
+  {
+    name: "Table",
+    status: [true, true, false],
+    desc:
+      "Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
+  },
+  {
+    name: "Switch",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Tooltip",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Timeline",
+    status: [true, false, false],
+    desc: "",
+  },
+];
+
+const CompTable = ({ list }) => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Komponent</Table.HeaderCell>
+        <Table.HeaderCell>Med i nytt system</Table.HeaderCell>
+        <Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
+        <Table.HeaderCell>Fullført**</Table.HeaderCell>
+        <Table.HeaderCell>Info</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {list.map((comp) => {
+        return (
+          <Table.Row>
+            <Table.HeaderCell>{comp.name}</Table.HeaderCell>
+            <Table.DataCell>
+              {comp.status?.[0] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[0] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[1] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[2] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
+          </Table.Row>
+        );
+      })}
+    </Table.Body>
+  </Table>
+);
+
+export const NewCompTable = () => {
+  return <CompTable list={NewComps} />;
+};
+
+export const OldCompTable = () => {
+  return <CompTable list={Components} />;
+};

.storybook/stories/roadmap.stories.mdx

@@ -1,16 +1,30 @@
 import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";
 
 <Meta title="ds-react/Roadmap" />
 
-# Plan videre
+# Roadmap
 
-Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
-lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
-å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
-ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
-bygge mer robuste og fleksible løsninger for fremtiden.
+## Komponenter
 
-(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)
 
 ## Tokens
 
@@ -20,12 +34,11 @@ Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke c
 ## Intern / Ekstern sizing
 
 Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
-Løsning er ikke fast bestemt, men eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
-Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
 
 ## Ny dokumentasjon-side
 
-Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"
 
 ## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`
 
@@ -46,6 +59,6 @@ noe vi kunne ta en titt på hvis vi ser at det trengs.
 
 ## Versjonering
 
-To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
 ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
 slik at man kan ha mer finkontroll over komponentbruk på siden sin.

@navikt/core/css/alert.css

@@ -44,12 +44,12 @@
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xl);
+  height: var(--navds-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-l);
+  height: var(--navds-font-line-height-large);
 }
 
 .navds-alert--error {

@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.2",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.2",
+    "@navikt/ds-tokens": "^0.5.3",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",

@navikt/core/css/page-header.css

@@ -65,6 +65,6 @@
     height: 3rem;
   }
   .navds-page-header__title {
-    font-size: var(--navds-font-size-title-xl);
+    font-size: var(--navds-font-size-heading-xlarge);
   }
 }

@navikt/core/css/typography.css

@@ -5,9 +5,9 @@
 }
 
 .navds-heading--2xlarge {
-  font-size: var(--navds-font-size-heading-2xl);
+  font-size: var(--navds-font-size-heading-2xlarge);
   letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xl);
+  line-height: var(--navds-font-line-height-heading-2xlarge);
 }
 
 .navds-heading--2xlarge.navds-typo--spacing {
@@ -15,9 +15,9 @@
 }
 
 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-xl);
+  font-size: var(--navds-font-size-heading-xlarge);
   letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xl);
+  line-height: var(--navds-font-line-height-heading-xlarge);
 }
 
 .navds-heading--xlarge.navds-typo--spacing {
@@ -25,9 +25,9 @@
 }
 
 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-l);
+  font-size: var(--navds-font-size-heading-large);
   letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-l);
+  line-height: var(--navds-font-line-height-heading-large);
 }
 
 .navds-heading--large.navds-typo--spacing {
@@ -35,9 +35,9 @@
 }
 
 .navds-heading--medium {
-  font-size: var(--navds-font-size-heading-m);
+  font-size: var(--navds-font-size-heading-medium);
   letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-heading-m);
+  line-height: var(--navds-font-line-height-heading-medium);
 }
 
 .navds-heading--medium.navds-typo--spacing {
@@ -45,9 +45,9 @@
 }
 
 .navds-heading--small {
-  font-size: var(--navds-font-size-heading-s);
+  font-size: var(--navds-font-size-heading-small);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-s);
+  line-height: var(--navds-font-line-height-heading-small);
 }
 
 .navds-heading--small.navds-typo--spacing {
@@ -55,9 +55,9 @@
 }
 
 .navds-heading--xsmall {
-  font-size: var(--navds-font-size-heading-xs);
+  font-size: var(--navds-font-size-heading-xsmall);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-xs);
+  line-height: var(--navds-font-line-height-heading-xsmall);
 }
 
 .navds-heading--xsmall.navds-typo--spacing {
@@ -66,10 +66,10 @@
 
 /* Ingress */
 .navds-ingress {
-  font-size: var(--navds-font-size-xl);
+  font-size: var(--navds-font-size-xlarge);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -79,10 +79,10 @@
 
 /* Body */
 .navds-body-long {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
   margin: 0;
 }
 
@@ -91,9 +91,9 @@
 }
 
 .navds-body-long--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
 }
 
 .navds-body-long--small.navds-typo--spacing {
@@ -101,10 +101,10 @@
 }
 
 .navds-body-short {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-regular);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -113,9 +113,9 @@
 }
 
 .navds-body-short--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-body-short--small.navds-typo--spacing {
@@ -124,10 +124,10 @@
 
 /* Label */
 .navds-label {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
   margin: 0;
 }
 
@@ -136,9 +136,9 @@
 }
 
 .navds-label--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
   letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }
 
 .navds-label--small.navds-typo--spacing {
@@ -147,10 +147,10 @@
 
 /* Small text */
 .navds-detail {
-  font-size: var(--navds-font-size-s);
+  font-size: var(--navds-font-size-small);
   font-weight: var(--navds-font-weight-bold);
   letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
   margin: 0;
 }
 

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -31,7 +31,7 @@
     "convert-icons": "node figma-api/pngConverter.mjs",
     "clean": "rimraf src 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"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

@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.4",
+  "version": "0.11.4",
   "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.6",
     "@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/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,7 +52,6 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
           "navds-heading--small"
         )}
         onClick={handleClick}
-        aria-controls={context.contentId}
         {...rest}
       >
         {children}

@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>(
   (
     {
@@ -100,9 +89,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/ConfirmationPanel.tsx

@@ -23,7 +23,7 @@ const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
       <div
         ref={ref}
         className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--s": props.size === "small",
+          "navds-confirmation-panel--small": props.size === "small",
           "navds-confirmation-panel--error": !!props.error,
           "navds-confirmation-panel--checked": !!props.checked,
         })}

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

@@ -84,7 +84,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
           className,
           "navds-text-field__input",
           "navds-body-short",
-          `navds-body-${size ?? "m"}`
+          `navds-body-${size ?? "medium"}`
         )}
         size={htmlSize}
       />

@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/form/stories/confirmation-panel.stories.mdx

@@ -22,7 +22,7 @@ import { ConfirmationPanelExample } from "./live-examples";
 
 ## Størrelser
 
-Kommer i størrelsene "m" og "s".
+Kommer i størrelsene "medium" og "small".
 
 ```jsx
 <ConfirmationPanel

@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/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/speech-bubble/stories/speechbubble.stories.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { SpeechBubble, Bubble } from "../index";
+import { SpeechBubble } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { Illustration } from "./illustration";
 
 export default {
   title: "ds-react/speechbubble",
   component: SpeechBubble,
-  subcomponents: { Bubble },
 } as Meta;
 
 export const All = () => {

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

@@ -0,0 +1,112 @@
+import { Table } from "../index";
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/table/intro" />
+
+# Hvordan ta i bruk Table
+
+Komponenten er fortsatt WIP. Dette vil si at komponenten ikke er tilpasset for eks ikoner, inputelementer og lignende.
+Dette er noe vi har planer om å få på plass etterhvert.
+
+```jsx
+<Table>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>ID</Table.HeaderCell>
+      <Table.HeaderCell>Fornavn</Table.HeaderCell>
+      <Table.HeaderCell>Etternavn</Table.HeaderCell>
+      <Table.HeaderCell>Rolle</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.HeaderCell>1</Table.HeaderCell>
+      <Table.DataCell>Jean-Luc</Table.DataCell>
+      <Table.DataCell>Picard</Table.DataCell>
+      <Table.DataCell>Kaptein</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>2</Table.HeaderCell>
+      <Table.DataCell>William</Table.DataCell>
+      <Table.DataCell>Riker</Table.DataCell>
+      <Table.DataCell>Kommandør</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>3</Table.HeaderCell>
+      <Table.DataCell>Geordi</Table.DataCell>
+      <Table.DataCell>La Forge</Table.DataCell>
+      <Table.DataCell>Sjefsingeniør</Table.DataCell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
+
+<Canvas>
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>
+
+## Sizing
+
+Størrelse kan justeres med `size`-proppen. Valg: `medium | small`
+
+<Canvas>
+  <Table size="small">
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>

@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" />
 
@@ -21,15 +22,15 @@ Denne stylingen vil overskrive default variablene og tilpasse font-size.
 ```css
 /* autogenerated fix for 18px root-font-size*/
 :root {
-  --navds-font-size-title-2xl: 2.2222222222222223rem;
-  --navds-font-size-title-xl: 1.7777777777777777rem;
-  --navds-font-size-title-l: 1.5555555555555556rem;
-  --navds-font-size-title-m: 1.3333333333333333rem;
-  --navds-font-size-title-s: 1.1111111111111112rem;
-  --navds-font-size-xl: 1.1111111111111112rem;
-  --navds-font-size-l: 1rem;
-  --navds-font-size-m: 0.8888888888888888rem;
-  --navds-font-size-s: 0.7777777777777778rem;
+  --navds-font-size-heading-2xlarge: 2.2222222222222223rem;
+  --navds-font-size-heading-xlarge: 1.7777777777777777rem;
+  --navds-font-size-heading-large: 1.5555555555555556rem;
+  --navds-font-size-heading-medium: 1.3333333333333333rem;
+  --navds-font-size-heading-small: 1.1111111111111112rem;
+  --navds-font-size-xlarge: 1.1111111111111112rem;
+  --navds-font-size-large: 1rem;
+  --navds-font-size-medium: 0.8888888888888888rem;
+  --navds-font-size-small: 0.7777777777777778rem;
 }
 ```
 
@@ -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/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": false,
   "description": "Auto-generated design-tokens for NAV design-systems framework",
   "author": "NAV Designsystem team",

@navikt/core/tokens/src/index.js

@@ -140,31 +140,31 @@ module.exports = {
       line: {
         height: {
           heading: {
-            "2xl": { value: getFontSize(52) },
-            xl: { value: getFontSize(40) },
-            l: { value: getFontSize(36) },
-            m: { value: getFontSize(32) },
-            s: { value: getFontSize(28) },
-            xs: { value: getFontSize(24) },
+            "2xlarge": { value: getFontSize(52) },
+            xlarge: { value: getFontSize(40) },
+            large: { value: getFontSize(36) },
+            medium: { value: getFontSize(32) },
+            small: { value: getFontSize(28) },
+            xsmall: { value: getFontSize(24) },
           },
-          xl: { value: getFontSize(28) },
-          l: { value: getFontSize(24) },
-          m: { value: getFontSize(20) },
+          xlarge: { value: getFontSize(28) },
+          large: { value: getFontSize(24) },
+          medium: { value: getFontSize(20) },
         },
       },
       size: {
         heading: {
-          "2xl": { value: getFontSize(40) },
-          xl: { value: getFontSize(32) },
-          l: { value: getFontSize(28) },
-          m: { value: getFontSize(24) },
-          s: { value: getFontSize(20) },
-          xs: { value: getFontSize(18) },
+          "2xlarge": { value: getFontSize(40) },
+          xlarge: { value: getFontSize(32) },
+          large: { value: getFontSize(28) },
+          medium: { value: getFontSize(24) },
+          small: { value: getFontSize(20) },
+          xsmall: { value: getFontSize(18) },
         },
-        xl: { value: getFontSize(20) },
-        l: { value: getFontSize(18) },
-        m: { value: getFontSize(16) },
-        s: { value: getFontSize(14) },
+        xlarge: { value: getFontSize(20) },
+        large: { value: getFontSize(18) },
+        medium: { value: getFontSize(16) },
+        small: { value: getFontSize(14) },
       },
       weight: {
         bold: { value: "600" },

@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.2",
+  "version": "0.6.4",
   "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.4",
-    "classnames": "^2.3.1"
+    "@navikt/ds-icons": "^0.5.6",
+    "@navikt/ds-react": "^0.11.4",
+    "@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,7 +66,7 @@ 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}
@@ -76,7 +76,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
             role="img"
             aria-label="Fil ikon for kopiering"
           />
-          {children ? children : <span className="sr-only">{title}</span>}
+          {children ? children : <span className="navds-sr-only">{title}</span>}
         </Button>
         <Popover
           role="alert"
@@ -85,7 +85,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/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"
+  }
 }

tsconfig.json

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