Lerna versionbump [ci skip]

- @navikt/ds-css@0.16.16
 - @navikt/ds-tailwind@0.1.9
 - @navikt/ds-tokens@0.8.7
 - @navikt/ds-react-internal@0.12.21

.git-blame-ignore-revs

@@ -0,0 +1 @@
+509e1f2ded31a7d804422d05025454fac5a4c988

.storybook/deprecated.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react(deprecated)/intro" />
+
+# Utdaterte pakker
+
+På sikt vil komponentene under bli flyttet ut av ds-react eller erstattes av andre komponenter
+
+- PageHeader -> @navikt/ds-react-navno
+- MicroCard -> @navikt/ds-react-navno
+
+- StepIndicator -> Horisontal `<Stepper />`

.storybook/layout.css

@@ -0,0 +1,10 @@
+.rowgap {
+  display: flex;
+  gap: 1rem;
+}
+
+.colgap {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}

.storybook/main.js

@@ -10,7 +10,7 @@ module.exports = {
     return config;
   },
   devServer: { stats: "errors-only" },
-  stories: () => getStories(),
+  stories: () => [...getStories(), "./*.stories.mdx"],
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-a11y",

.storybook/preview.js

@@ -1,5 +1,6 @@
 import "@navikt/ds-css/index.css";
 import "@navikt/ds-css-internal/index.css";
+import "./layout.css";
 import { initialize, mswDecorator } from "msw-storybook-addon";
 
 initialize();
@@ -7,12 +8,14 @@ initialize();
 export const decorators = [mswDecorator];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  /* actions: { argTypesRegex: "^on[A-Z].*" }, */
   options: {
     storySort: {
       method: "",
-      order: [],
+      order: ["ds-icons", "ds-react", ["Default"]],
       locales: "",
     },
   },
+  viewMode: "docs",
+  layout: "centered",
 };

@navikt/core/css/baseline/baseline.css

@@ -20,10 +20,22 @@ html {
   box-sizing: inherit;
 }
 
+:root,
+[data-theme="light"] {
+  --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
+
+  color: var(--navds-semantic-color-text);
+}
+
+[data-theme="dark"] {
+  --navds-shadow-focus: var(--navds-shadow-focus-inverted);
+
+  color: var(--navds-semantic-color-text-inverted);
+}
+
 body {
   font-family: var(--navds-font-family);
   line-height: 1.333;
-  color: var(--navds-semantic-color-text);
   font-size: 1.125rem;
 }
 

@navikt/core/css/button.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   /* Primary */
   --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
   --navds-button-color-primary-border-focus: var(
@@ -80,6 +81,39 @@
   --navds-loader-color-on-button-foreground: currentColor;
 }
 
+[data-theme="dark"] {
+  /* Primary */
+  --navds-button-color-primary-text: var(--navds-semantic-color-text);
+  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
+  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
+  --navds-button-color-primary-background-hover: var(
+    --navds-global-color-blue-300
+  );
+  --navds-button-color-primary-background-active: var(
+    --navds-global-color-blue-400
+  );
+
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-hover: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-text-active: var(
+    --navds-global-color-blue-200
+  );
+  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
+  --navds-button-color-secondary-border-focus-active-hover: var(
+    --navds-semantic-color-text
+  );
+  --navds-button-color-secondary-background: var(
+    --navds-semantic-color-component-background-inverted
+  );
+  --navds-button-color-secondary-background-hover: var(
+    --navds-global-color-blue-900
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-global-color-blue-800
+  );
+}
+
 .navds-button {
   display: inline-flex;
   cursor: pointer;

@navikt/core/css/form/search.css

@@ -1,8 +1,18 @@
-:root {
+:root,
+[data-theme="light"] {
+  --navds-search-color-text: var(--navds-semantic-color-text);
   --navds-search-color-border: var(--navds-semantic-color-border);
   --navds-search-color-border-hover: var(
     --navds-semantic-color-interaction-primary
   );
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
+}
+
+[data-theme="dark"] {
+  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
 }
 
 .navds-search {
@@ -22,22 +32,45 @@
 }
 
 .navds-search__input {
-  padding-right: var(--navds-spacing-12);
+  padding-right: var(--navds-spacing-10);
+}
+
+.navds-form-field--small .navds-search__input {
+  padding-right: var(--navds-spacing-8);
+}
+
+.navds-search__input--simple {
+  padding-left: var(--navds-spacing-11);
+}
+
+.navds-form-field--small .navds-search__input--simple {
+  padding-left: var(--navds-spacing-7);
+}
+
+.navds-search__input:not(.navds-search__input--simple) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.navds-form-field--small .navds-search__input {
-  min-height: 32px;
-  padding: 0.15rem;
-  padding-right: var(--navds-spacing-8);
+.navds-search__search-icon {
+  position: absolute;
+  left: var(--navds-spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 1.5rem;
+}
+
+.navds-form-field--small .navds-search__search-icon {
+  left: var(--navds-spacing-2);
+  font-size: 1rem;
 }
 
 .navds-search__button-clear {
   position: absolute;
   right: 0.75rem;
   border-radius: var(--navds-border-radius-medium);
-  color: var(--navds-semantic-color-text);
+  color: var(--navds-search-color-text);
   height: 32px;
   width: 32px;
   top: 50%;
@@ -59,7 +92,7 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--navds-global-color-blue-500);
+  color: var(--navds-search-color-clear-hover);
 }
 
 .navds-search__button-clear:focus {
@@ -84,13 +117,13 @@
   min-width: 40px;
 }
 
-.navds-search__button-search.navds-button--tertiary {
+.navds-search__button-search.navds-button--secondary {
   box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset,
     0 1px 0 0 var(--navds-search-color-border) inset,
     0 -1px 0 0 var(--navds-search-color-border) inset;
 }
 
-.navds-search__button-search.navds-button--tertiary:hover {
+.navds-search__button-search.navds-button--secondary:hover {
   box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset,
     0 1px 0 0 var(--navds-search-color-border-hover) inset,
     0 -1px 0 0 var(--navds-search-color-border-hover) inset,
@@ -99,21 +132,21 @@
 }
 
 .navds-search__wrapper-inner:focus-within
-  + .navds-search__button-search.navds-button--tertiary:hover {
+  + .navds-search__button-search.navds-button--secondary:hover {
   z-index: auto;
 }
 
-.navds-search__button-search.navds-button--tertiary:focus {
+.navds-search__button-search.navds-button--secondary:focus {
   box-shadow: 0 0 0 1px var(--navds-search-color-border) inset,
     var(--navds-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--tertiary:focus:hover {
+.navds-search__button-search.navds-button--secondary:focus:hover {
   box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset,
     var(--navds-shadow-focus);
 }
 
-.navds-search__button-search.navds-button--tertiary:focus:active {
+.navds-search__button-search.navds-button--secondary:focus:active {
   box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
 }
 

@navikt/core/css/form/text-field.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --navds-text-field-color-text: var(--navds-semantic-color-text);
   --navds-text-field-color-background: var(
     --navds-semantic-color-component-background-light
@@ -18,11 +19,24 @@
     --navds-semantic-color-component-background-alternate
   );
   --navds-text-field-color-text-disabled: var(--navds-semantic-color-text);
+  --navds-text-field-color-placeholder-text: var(
+    --navds-semantic-color-text-muted
+  );
+}
+
+[data-theme="dark"] {
+  --navds-text-field-color-text: var(--navds-semantic-color-text-inverted);
+  --navds-text-field-color-background: var(
+    --navds-semantic-color-component-background-dark
+  );
+  --navds-text-field-color-border: var(--navds-semantic-color-border-inverted);
+  --navds-text-field-color-border-hover: var(--navds-global-color-blue-200);
+  --navds-text-field-color-placeholder-text: var(--navds-global-color-gray-500);
 }
 
 .navds-text-field__input {
   appearance: none;
-  padding: 0.5rem;
+  padding: var(--navds-spacing-2);
   background-color: var(--navds-text-field-color-background);
   border-radius: var(--navds-border-radius-medium);
   border: 1px solid var(--navds-text-field-color-border);
@@ -31,7 +45,11 @@
   color: var(--navds-text-field-color-text);
 }
 
-.navds-form-field--small > .navds-text-field__input {
+.navds-text-field__input::placeholder {
+  color: var(--navds-text-field-color-placeholder-text);
+}
+
+.navds-form-field--small .navds-text-field__input {
   padding: 0 0.25rem;
   min-height: 32px;
 }

@navikt/core/css/index.css

@@ -17,6 +17,7 @@
 @import "pagination.css";
 @import "popover.css";
 @import "tag.css";
+@import "tooltip.css";
 @import "toggle-group.css";
 @import "panel.css";
 @import "link-panel.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.16.12",
+  "version": "0.16.16",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -17,14 +17,15 @@
   },
   "main": "./dist/index.css",
   "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.4",
+    "@navikt/ds-tokens": "^0.8.7",
     "normalize.css": "^8.0.1",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
+    "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   }
 }

@navikt/core/css/tooltip.css

@@ -0,0 +1,56 @@
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip {
+  z-index: var(--navds-z-index-tooltip);
+}
+
+.navds-tooltip__inner {
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-2);
+  align-items: center;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05))
+    drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
+  display: flex;
+  flex-direction: column;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 0.2s;
+  animation-name: tooltipFadeIn;
+  text-align: center;
+}
+
+.navds-tooltip__arrow {
+  height: 7px;
+  width: 7px;
+  transform: rotate(45deg);
+  z-index: -1;
+  background-color: var(--navds-semantic-color-component-background-inverted);
+  position: absolute;
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--navds-spacing-1);
+  display: flex;
+  gap: var(--navds-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--navds-font-family);
+  background-color: var(--navds-global-color-gray-700);
+  color: var(--navds-semantic-color-text-inverted);
+  border-radius: var(--navds-border-radius-small);
+  padding: 0 var(--navds-spacing-1);
+  min-width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -26,7 +26,7 @@
     "/meta.json"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "create-icons": "svgr --out-dir src svg",
     "clean": "rimraf src cjs esm",
     "build": "yarn clean && copyfiles util/* src && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",
@@ -49,7 +49,7 @@
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
-    "react": "^16.8.0 || ^17.0.0",
+    "react": "^18.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
     "ts-node": "^10.4.0"

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.15",
+  "version": "0.17.20",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -27,15 +27,16 @@
     "/src"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../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",
     "test": "jest"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.6",
+    "@navikt/ds-icons": "^0.8.8",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -47,25 +48,25 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/faker": "^5.5.8",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
     "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "faker": "^5.5.3",
-    "jest": "^27.2.0",
-    "react-router-dom": "^6.1.0",
+    "faker": "5.5.3",
+    "jest": "^27.5.0",
+    "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "swr": "^1.1.2",
-    "ts-jest": "^27.0.5"
+    "ts-jest": "^27.1.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
   }
 }

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

@@ -5,7 +5,7 @@ import AccordionItem from "./AccordionItem";
 import { Accordion } from ".";
 
 export default {
-  title: "ds-react/accordion",
+  title: "ds-react/Accordion",
   component: Accordion,
   subcomponents: {
     AccordionItem,
@@ -14,77 +14,89 @@ export default {
   },
 };
 
-export const All = () => {
+const Content = () => (
+  <Accordion.Content>
+    Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam officia
+    laboris voluptate officia pariatur.Lorem est ex anim velit occaecat nisi qui
+    nostrud sit consectetur consectetur officia nostrud ullamco. Est ex duis
+    proident nostrud elit qui laborum anim minim eu eiusmod. Veniam in nostrud
+    sunt tempor velit incididunt sint ex dolor qui velit id eu. Deserunt magna
+    sunt velit in. Est exercitation id cillum qui do. Minim adipisicing nostrud
+    commodo proident occaecat aliquip nulla anim proident reprehenderit. Magna
+    ipsum officia veniam cupidatat duis veniam dolore reprehenderit mollit
+    velit.Ut consequat commodo minim occaecat id pariatur. Nisi enim tempor
+    laborum commodo. Tempor sit quis nostrud eu cupidatat sunt commodo
+    reprehenderit irure deserunt eiusmod ipsum. Exercitation quis commodo cillum
+    eiusmod eiusmod. Do laborum qui proident commodo adipisicing eiusmod id.
+  </Accordion.Content>
+);
+
+export const Default = (props) => {
   const [open, setOpen] = useState(false);
 
+  const Item = () =>
+    props.controlled ? (
+      <Accordion.Item
+        open={open}
+        renderContentWhenClosed={props.renderContentWhenClosed}
+      >
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    ) : (
+      <Accordion.Item renderContentWhenClosed={props.renderContentWhenClosed}>
+        <Accordion.Header>Accordion header text</Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    );
   return (
-    <>
-      <h1>Accordion</h1>
-      <h2>Controlled</h2>
-      <Accordion>
-        <Accordion.Item open={open}>
-          <Accordion.Header onClick={() => setOpen(!open)}>
-            Accordion header text
-          </Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-      <h2>Un-controlled</h2>
-      <Accordion>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>Accordion header text</Accordion.Header>
-          <Accordion.Content>
-            Magna aliquip aliquip fugiat nostrud nostrud velit pariatur veniam
-            officia laboris voluptate officia pariatur.Lorem est ex anim velit
-            occaecat nisi qui nostrud sit consectetur consectetur officia
-            nostrud ullamco. Est ex duis proident nostrud elit qui laborum anim
-            minim eu eiusmod. Veniam in nostrud sunt tempor velit incididunt
-            sint ex dolor qui velit id eu. Deserunt magna sunt velit in. Est
-            exercitation id cillum qui do. Minim adipisicing nostrud commodo
-            proident occaecat aliquip nulla anim proident reprehenderit. Magna
-            ipsum officia veniam cupidatat duis veniam dolore reprehenderit
-            mollit velit.Ut consequat commodo minim occaecat id pariatur. Nisi
-            enim tempor laborum commodo. Tempor sit quis nostrud eu cupidatat
-            sunt commodo reprehenderit irure deserunt eiusmod ipsum.
-            Exercitation quis commodo cillum eiusmod eiusmod. Do laborum qui
-            proident commodo adipisicing eiusmod id.
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion>
-    </>
+    <Accordion>
+      {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+        <Item key={y} />
+      ))}
+    </Accordion>
   );
 };
+
+Default.args = {
+  controlled: false,
+  renderContentWhenClosed: false,
+  nItems: 2,
+};
+
+export const Controlled = () => {
+  const [open, setOpen] = useState(false);
+  const [open2, setOpen2] = useState(false);
+
+  return (
+    <Accordion>
+      <Accordion.Item open={open}>
+        <Accordion.Header onClick={() => setOpen(!open)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+      <Accordion.Item open={open2}>
+        <Accordion.Header onClick={() => setOpen2(!open2)}>
+          Accordion header text
+        </Accordion.Header>
+        <Content />
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+
+export const Uncontrolled = () => (
+  <Accordion>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+    <Accordion.Item>
+      <Accordion.Header>Accordion header text</Accordion.Header>
+      <Content />
+    </Accordion.Item>
+  </Accordion>
+);

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { Alert } from ".";
-import { BodyLong, Heading } from "..";
+import { BodyLong, Heading as DsHeading } from "..";
 
 export default {
-  title: "ds-react/alert",
+  title: "ds-react/Alert",
   component: Alert,
 };
 
@@ -14,111 +14,101 @@ const variants: Array<"error" | "warning" | "info" | "success"> = [
   "success",
 ];
 
-export const All = () => {
+export const Default = (props) => (
+  <Alert
+    variant={props.variant}
+    size={props.size}
+    fullWidth={props.fullWidth}
+    inline={props.inline}
+  >
+    {props.children}
+  </Alert>
+);
+
+Default.args = {
+  variant: "info",
+  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+};
+
+export const Small = () => {
   return (
-    <>
-      <h1>Alert</h1>
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Alert fullWidth</h2>
+    </div>
+  );
+};
+
+export const FullWidth = () => {
+  return (
+    <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert fullWidth key={variant} variant={variant}>
+        <Alert key={variant} variant={variant} fullWidth>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud."
           )}
         </Alert>
       ))}
-      <h2>Small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert fullWidth key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant}>
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Inline small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert inline key={variant} variant={variant} size="small">
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud."
-            )}
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant}>
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-      <h2>Med Heading small</h2>
-      <div>
-        {variants.map((variant, i) => (
-          <Alert key={variant} variant={variant} size="small">
-            <Heading spacing size="small" level="3">
-              Aliquip duis est in commodo pariatur
-            </Heading>
-            <BodyLong spacing>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-            <Heading level="4" size="xsmall" spacing>
-              Ullamco eiusmod Lorem eiusmod eu.
-            </Heading>
-            <BodyLong>
-              Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-              laboris ex. Labore ex occaecat proident qui qui fugiat magna.
-              Fugiat sint commodo consequat eu aute.
-            </BodyLong>
-          </Alert>
-        ))}
-      </div>
-    </>
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} fullWidth size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Inline = () => {
+  return (
+    <div className="colgap">
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline>
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+      {variants.map((variant, i) => (
+        <Alert key={variant} variant={variant} inline size="small">
+          {new Array(i + 1).fill(
+            "Id elit esse enim reprehenderit enim nisi veniam nostrud."
+          )}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export const Heading = () => {
+  return (
+    <div className="colgap">
+      <Alert variant="info">
+        <DsHeading spacing size="small" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+      <Alert variant="info" size="small">
+        <DsHeading spacing size="xsmall" level="3">
+          Aliquip duis est in commodo pariatur
+        </DsHeading>
+        <BodyLong>
+          Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
+          laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
+          sint commodo consequat eu aute.
+        </BodyLong>
+      </Alert>
+    </div>
   );
 };

@navikt/core/react/src/button/button.stories.tsx

@@ -1,30 +1,29 @@
-import React, { useState } from "react";
+import { Star } from "@navikt/ds-icons";
+import React from "react";
 import { Button } from "./index";
-import { Success } from "@navikt/ds-icons";
 
 export default {
-  title: "ds-react/button",
+  title: "ds-react/Button",
   component: Button,
   parameters: {
     chromatic: { delay: 300 },
   },
+  argTypes: {
+    variant: {
+      control: {
+        type: "radio",
+        options: ["primary", "secondary", "tertiary", "danger"],
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
 };
 
-const Section = ({ children }) => (
-  <div
-    style={{
-      display: "flex",
-      gap: 16,
-      gridAutoFlow: "column",
-      justifyContent: "start",
-      padding: 24,
-      paddingLeft: 0,
-    }}
-  >
-    {children}
-  </div>
-);
-
 const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
   "primary",
   "secondary",
@@ -39,119 +38,132 @@ const varSwitch = {
   danger: "Danger",
 };
 
-export const All = () => {
-  const [loadingState, setLoadingState] = useState(true);
-  const [content, setContent] = useState<string>("");
-
-  const toggleLoading = () => {
-    setLoadingState(!loadingState);
-  };
-
+export const Default = (props) => {
   return (
-    <div style={{ paddingLeft: "1rem" }}>
-      <h1>Button</h1>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>disabled</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} disabled>
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>As link</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button as="a" key={variant} variant={variant} href="the-link">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Xsmall</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="xsmall">
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {variant} <Success />
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/icon</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <Success /> {variant}
-          </Button>
-        ))}
-      </Section>
-      <Section>
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant} size="small">
-            <span className="navds-sr-only">Success ikon</span>
-            <Success />
-          </Button>
-        ))}
-      </Section>
-      <h2>Button w/loader</h2>
-      <Button onClick={toggleLoading}>Toggle loaders</Button>
-      <Button onClick={() => setContent((content) => `${content} wat`)}>
-        Change content
-      </Button>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {content || varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-      <h2>Small w/loader</h2>
-      <Section>
-        {variants.map((variant) => (
-          <Button
-            key={variant}
-            variant={variant}
-            size="small"
-            loading={loadingState}
-            onClick={toggleLoading}
-          >
-            {varSwitch[variant]}
-          </Button>
-        ))}
-      </Section>
-    </div>
+    <Button variant={props.variant} size={props.size} loading={props.loading}>
+      {props.icon ? <Star /> : null}
+      {props.children}
+      {props.icon ? <Star /> : null}
+    </Button>
   );
 };
+
+Default.args = {
+  icon: false,
+  loading: false,
+  children: "Knapp",
+};
+
+export const Small = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="small">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const XSmall = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} size="xsmall">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
+export const Loading = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading>
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="small">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} loading size="xsmall">
+          {varSwitch[variant]}
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Icon = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const IconWText = () => (
+  <div className="colgap">
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant}>
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="small">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+    <div className="rowgap">
+      {variants.map((variant) => (
+        <Button key={variant} variant={variant} size="xsmall">
+          <Star />
+          {varSwitch[variant]}
+          <Star />
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+export const Link = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);

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

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { MicroCard } from "../index.ts";
 
-<Meta title="ds-react/card/intro" />
+<Meta title="ds-react(deprecated)/card/intro" />
 
 # Hvordan ta i bruk card
 

@navikt/core/react/src/card/stories/card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { MicroCard } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/card",
+  title: "ds-react(deprecated)/card",
   component: MicroCard,
 } as Meta;
 

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

@@ -6,11 +6,12 @@ import { Checkbox, CheckboxGroup } from ".";
 
 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
 
-test("checkbox group chains onChange calls", () => {
+test("checkbox group chains onChange calls", async () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();
   const value = faker.datatype.string();
   const label = faker.datatype.string();
+  const user = userEvent.setup();
 
   render(
     <CheckboxGroup legend="legend" onChange={onGroupChange}>
@@ -20,7 +21,7 @@ test("checkbox group chains onChange calls", () => {
     </CheckboxGroup>
   );
 
-  userEvent.click(screen.getByLabelText(label));
+  await user.click(screen.getByLabelText(label));
 
   expect(onGroupChange).toBeCalledTimes(1);
   expect(onGroupChange).toBeCalledWith([value]);
@@ -36,21 +37,24 @@ describe("Checkbox handles controlled-state correctly", () => {
     </CheckboxGroup>
   );
 
-  test("Checkbox is still checked after click when controlled", () => {
+  test("Checkbox is still checked after click when controlled", async () => {
+    const user = userEvent.setup();
     render(<CheckboxComponent value={["value1", "value2"]} />);
-    userEvent.click(screen.getByLabelText("label1"));
-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label1"));
+    await user.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", () => {
+  test("onChange called with expected values", async () => {
     const onGroupChange = jest.fn();
+    const user = userEvent.setup();
 
     render(
       <CheckboxComponent
@@ -59,11 +63,11 @@ describe("Checkbox handles controlled-state correctly", () => {
       />
     );
 
-    userEvent.click(screen.getByLabelText("label1"));
+    await user.click(screen.getByLabelText("label1"));
 
     expect(onGroupChange).lastCalledWith(["value2"]);
 
-    userEvent.click(screen.getByLabelText("label2"));
+    await user.click(screen.getByLabelText("label2"));
 
     expect(onGroupChange).lastCalledWith(["value1"]);
   });

@navikt/core/react/src/form/radio/Radio.test.tsx

@@ -31,7 +31,9 @@ describe("Controlled RadioGroup", () => {
 });
 
 describe("Uncontrolled RadioGroup", () => {
-  test("handles state correctly", () => {
+  test("handles state correctly", async () => {
+    const user = userEvent.setup();
+
     render(<Group />);
 
     const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -40,13 +42,14 @@ describe("Uncontrolled RadioGroup", () => {
     expect(input1.checked).toBe(false);
     expect(input2.checked).toBe(false);
 
-    userEvent.click(screen.getByLabelText(label2));
+    await user.click(screen.getByLabelText(label2));
 
     expect(input1.checked).toBe(false);
     expect(input2.checked).toBe(true);
   });
 
-  test("handles defaultValue correctly", () => {
+  test("handles defaultValue correctly", async () => {
+    const user = userEvent.setup();
     render(<Group defaultValue={value1} />);
 
     const input1 = screen.getByLabelText(label1) as HTMLInputElement;
@@ -55,7 +58,7 @@ describe("Uncontrolled RadioGroup", () => {
     expect(input1.checked).toBe(true);
     expect(input2.checked).toBe(false);
 
-    userEvent.click(screen.getByLabelText(label2));
+    await user.click(screen.getByLabelText(label2));
 
     expect(input1.checked).toBe(false);
     expect(input2.checked).toBe(true);

@navikt/core/react/src/form/search/Search.tsx

@@ -1,10 +1,9 @@
-import { Close } from "@navikt/ds-icons";
+import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
 import React, {
   forwardRef,
   InputHTMLAttributes,
   useCallback,
-  useEffect,
   useRef,
   useState,
 } from "react";
@@ -59,9 +58,9 @@ export interface SearchProps
   clearButton?: boolean;
   /**
    * Changes button-variant
-   * @default "tertiary"
+   * @default "primary"
    */
-  variant?: "tertiary" | "primary";
+  variant?: "primary" | "secondary" | "simple";
 }
 
 interface SearchComponent
@@ -74,8 +73,8 @@ interface SearchComponent
 export interface SearchContextProps {
   disabled?: boolean;
   size: "medium" | "small";
-  variant?: "tertiary" | "primary";
-  onSearch?: () => void;
+  variant: "primary" | "secondary" | "simple";
+  onSearch: () => void;
 }
 
 export const SearchContext = React.createContext<SearchContextProps | null>(
@@ -99,7 +98,9 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     clearButton = true,
     children,
     onSearch,
-    variant = "tertiary",
+    variant = "primary",
+    defaultValue,
+    onChange,
     ...rest
   } = props;
 
@@ -107,26 +108,23 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
   const mergedRef = mergeRefs([searchRef, ref]);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
 
-  const [controlledValue, setControlledValue] = useState(value ?? "");
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
   const handleChange = useCallback(
     (v: string) => {
-      searchRef.current && value === undefined && setControlledValue(v);
-      props?.onChange?.(v);
+      value === undefined && setInternalValue(v);
+      onChange?.(v);
     },
-    [props, value]
+    [onChange, value]
   );
 
   const handleClear = useCallback(
     (event: SearchClearEvent) => {
       onClear?.(event);
       handleChange("");
-      if (searchRef.current && value === undefined) {
-        searchRef.current.value = "";
-      }
       searchRef.current && searchRef.current?.focus?.();
     },
-    [handleChange, onClear, value]
+    [handleChange, onClear]
   );
 
   useEventListener(
@@ -143,10 +141,6 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
     wrapperRef
   );
 
-  useEffect(() => {
-    value !== undefined && setControlledValue(value);
-  }, [value]);
-
   return (
     <div
       ref={setWrapperRef}
@@ -184,23 +178,27 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
       )}
       <div className="navds-search__wrapper">
         <div className="navds-search__wrapper-inner">
+          {variant === "simple" && (
+            <SearchIcon aria-hidden className="navds-search__search-icon" />
+          )}
           <input
             ref={mergedRef}
             {...omit(rest, ["size"])}
             {...inputProps}
-            {...(props.value !== undefined && { value: props.value })}
+            value={value ?? internalValue}
             onChange={(e) => handleChange(e.target.value)}
             type="search"
             role="searchbox"
             className={cl(
               className,
               "navds-search__input",
+              `navds-search__input--${variant}`,
               "navds-text-field__input",
               "navds-body-short",
-              `navds-body-${size ?? "medium"}`
+              `navds-body-${size}`
             )}
           />
-          {controlledValue && clearButton && (
+          {(value ?? internalValue) && clearButton && (
             <button
               type="button"
               onClick={(e) => handleClear({ trigger: "Click", event: e })}
@@ -218,10 +216,10 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
             size,
             disabled: inputProps.disabled,
             variant,
-            onSearch: () => onSearch?.(controlledValue),
+            onSearch: () => onSearch?.(value ?? internalValue),
           }}
         >
-          {children ? children : <SearchButton />}
+          {children ? children : variant !== "simple" && <SearchButton />}
         </SearchContext.Provider>
       </div>
     </div>

@navikt/core/react/src/form/search/SearchButton.tsx

@@ -33,7 +33,7 @@ const SearchButton: SearchButtonType = forwardRef(
         {...rest}
         ref={ref}
         size={size}
-        variant={variant}
+        variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
         onClick={(e) => {

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

@@ -0,0 +1,52 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { Heading } from "../..";
+import { Search } from "..";
+
+export default {
+  title: "ds-react/form/search",
+  component: Search,
+} as Meta;
+
+export const LightTheme = () => (
+  <div
+    style={{ maxWidth: 400, display: "flex", flexDirection: "column", gap: 16 }}
+  >
+    <Heading size="xlarge">Search</Heading>
+    <Heading level="2" size="large">
+      size medium
+    </Heading>
+    <Search label="hidden label" placeholder="Søk" />
+    <Search label="hidden label" variant="secondary" defaultValue="dagpenger" />
+    <Search label="hidden label" variant="simple" placeholder="Søk" />
+    <Search label="with label" hideLabel={false} />
+
+    <Heading level="2" size="large">
+      size small
+    </Heading>
+    <Search label="hidden label" size="small" placeholder="Søk" />
+    <Search
+      label="hidden label"
+      variant="secondary"
+      size="small"
+      defaultValue="dagpenger"
+    />
+    <Search
+      label="hidden label"
+      variant="simple"
+      size="small"
+      placeholder="Søk"
+    />
+    <Search label="with label" hideLabel={false} size="small" />
+  </div>
+);
+
+export const DarkTheme = () => (
+  <div data-theme="dark">
+    <LightTheme />
+  </div>
+);
+
+DarkTheme.parameters = {
+  backgrounds: { default: "dark" },
+};

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

@@ -21,11 +21,18 @@ export const All = () => {
       <h1>Search</h1>
 
       <Search label="Søk alle sider om X og Y" onSearch={console.log}></Search>
-      <h2>Primary search</h2>
+      <h2>Secondary</h2>
       <Search
         label="Søk alle sider om X og Y"
         onSearch={console.log}
-        variant="primary"
+        variant="secondary"
+      ></Search>
+
+      <h2>No button</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        onSearch={console.log}
+        variant="simple"
       ></Search>
 
       <h2>Search small</h2>
@@ -42,7 +49,7 @@ export const All = () => {
         description="Beskrivelse av søket"
         size="small"
         hideLabel
-        variant="primary"
+        variant="secondary"
       >
         <Search.Button />
       </Search>

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

@@ -21,6 +21,7 @@ export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
 

@navikt/core/react/src/page-header/stories/header.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { PageHeader } from "../index";
 import { illustrationPictogram } from "./pictogram";
 
-<Meta title="ds-react/page-header/intro" />
+<Meta title="ds-react(deprecated)/page-header/intro" />
 
 # Hvordan ta i bruk PageHeader
 

@navikt/core/react/src/page-header/stories/header.stories.tsx

@@ -3,7 +3,7 @@ import { PageHeader } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { illustrationPictogram } from "./pictogram";
 export default {
-  title: "ds-react/page-header",
+  title: "ds-react(deprecated)/page-header",
   component: PageHeader,
 } as Meta;
 

@navikt/core/react/src/read-more/ReadMore.tsx

@@ -55,6 +55,7 @@ const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     return (
       <>
         <button
+          type="button"
           {...rest}
           className={cl(
             "navds-read-more",

@navikt/core/react/src/step-indicator/stories/step-indicator.stories.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas } from "@storybook/addon-docs";
 import { StepIndicator } from "..";
 import { Example } from "./Example";
 
-<Meta title="ds-react/step-indicator/intro" />
+<Meta title="ds-react(deprecated)/step-indicator/intro" />
 
 # Hvordan ta i bruk StepIndicator
 

@navikt/core/react/src/step-indicator/stories/step-indicator.stories.tsx

@@ -4,7 +4,7 @@ import { Meta } from "@storybook/react/types-6-0";
 import { Link, HashRouter as Router, useLocation } from "react-router-dom";
 
 export default {
-  title: "ds-react/step-indicator",
+  title: "ds-react(deprecated)/step-indicator",
   component: StepIndicator,
 } as Meta;
 

@navikt/core/react/src/table/ExpandableRow.tsx

@@ -84,11 +84,11 @@ const ExpandableRow: ExpandableRowType = forwardRef(
             >
               <Expand
                 className="navds-table__expandable-icon"
-                title="Vis mer"
+                title={isOpen ? "Vis mindre" : "Vis mer"}
               />
               <ExpandFilled
                 className="navds-table__expandable-icon navds-table__expandable-icon--filled"
-                title="Vis mindre"
+                title={isOpen ? "Vis mindre" : "Vis mer"}
               />
             </button>
           </DataCell>

@navikt/core/react/src/tooltip/Tooltip.tsx

@@ -0,0 +1,301 @@
+import cl from "classnames";
+import React, {
+  cloneElement,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { composeEventHandlers, Detail, useEventListener } from "..";
+import {
+  useFloating,
+  arrow as flArrow,
+  shift,
+  autoUpdate,
+  flip,
+  hide,
+} from "@floating-ui/react-dom";
+import mergeRefs from "react-merge-refs";
+import Portal from "./portal";
+import { useId } from "../util";
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Element tooltip anchors to
+   */
+  children: React.ReactElement & React.RefAttributes<HTMLElement>;
+  /**
+   * Open state for contolled tooltip
+   */
+  open?: boolean;
+  /**
+   * Tells tooltip to start in open state
+   * @note "open"-prop overwrites this
+   */
+  defaultOpen?: boolean;
+  /**
+   * Orientation for tooltip
+   * @default "top"
+   */
+  placement?: "top" | "right" | "bottom" | "left";
+  /**
+   *  Toggles rendering of arrow
+   *  @default true
+   */
+  arrow?: boolean;
+  /**
+   * Distance from anchor to tooltip
+   * @default 10px with arrow, 2px without arrow
+   */
+  offset?: number;
+  /**
+   * Content shown in tooltip
+   */
+  content: string;
+  /**
+   * Sets max allowed character length
+   * @default 80
+   */
+  maxChar?: number;
+  /**
+   * Adds a delay in milliseconds before opening tooltip
+   * @default 300
+   */
+  delay?: number;
+  /**
+   * List of Keyboard-keys for shortcuts
+   */
+  keys?: string[];
+}
+
+const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    {
+      children,
+      className,
+      arrow: _arrow = true,
+      placement: _placement = "top",
+      open,
+      defaultOpen = false,
+      offset: _offset,
+      content,
+      delay = 150,
+      id,
+      keys,
+      maxChar = 80,
+      ...rest
+    },
+    ref
+  ) => {
+    const arrowRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const openTimerRef = useRef(0);
+    const leaveTimerRef = useRef(0);
+    const isMouseDownRef = useRef(false);
+
+    const ariaId = useId(id);
+
+    const {
+      x,
+      y,
+      update,
+      placement,
+      refs,
+      middlewareData: {
+        arrow: { x: arrowX, y: arrowY } = {},
+        hide: { referenceHidden } = {},
+      },
+    } = useFloating({
+      placement: _placement,
+      middleware: [
+        shift(),
+        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        flArrow({ element: arrowRef, padding: 5 }),
+        hide(),
+      ],
+    });
+
+    /* https://floating-ui.com/docs/react-dom#updating */
+    useEffect(() => {
+      if (!refs.reference.current || !refs.floating.current) {
+        return;
+      }
+
+      // Only call this when the floating element is rendered
+      return autoUpdate(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update, open, isOpen]);
+
+    const handleOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      setIsOpen(true);
+    }, [setIsOpen]);
+
+    const handleDelayedOpen = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      window.clearTimeout(leaveTimerRef.current);
+      openTimerRef.current = window.setTimeout(() => {
+        setIsOpen(true);
+      }, delay);
+    }, [delay, setIsOpen]);
+
+    const handleClose = useCallback(() => {
+      window.clearTimeout(openTimerRef.current);
+      leaveTimerRef.current = window.setTimeout(() => {
+        setIsOpen(false);
+      }, 50);
+    }, [setIsOpen]);
+
+    const handleMouseUp = useCallback(
+      () => (isMouseDownRef.current = false),
+      []
+    );
+
+    useEffect(() => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      return () => window.clearTimeout(openTimerRef.current);
+    }, []);
+
+    useEffect(() => {
+      return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [handleMouseUp]);
+
+    useEventListener(
+      "keydown",
+      useCallback((e) => e.key === "Escape" && handleClose(), [handleClose]),
+      document
+    );
+
+    /* https://floating-ui.com/docs/react-dom#stable-ref-prop */
+    const stableRef = useMemo(() => mergeRefs([ref, refs.floating]), [
+      ref,
+      refs.floating,
+    ]);
+
+    if (
+      !children ||
+      children?.type === React.Fragment ||
+      (children as any) === React.Fragment
+    ) {
+      console.error(
+        "<Tooltip> children needs to be a single ReactElement and not <React.Fragment/>/<></>"
+      );
+      return null;
+    }
+
+    if (content?.length > maxChar) {
+      console.error(
+        `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop`
+      );
+      return null;
+    }
+
+    return (
+      <>
+        {cloneElement(children, {
+          ...children.props,
+          "aria-describedby":
+            open || isOpen
+              ? cl(ariaId, children?.props["aria-describedby"])
+              : children?.props["aria-describedby"],
+          ref: mergeRefs([(children as any).ref, refs.reference]),
+          onMouseEnter: composeEventHandlers(
+            children.props.onMouseEnter,
+            handleDelayedOpen
+          ),
+          onMouseLeave: composeEventHandlers(
+            children.props.onMouseLeave,
+            handleClose
+          ),
+          onMouseDown: composeEventHandlers(children.props.onMouseDown, () => {
+            isMouseDownRef.current = true;
+            document.addEventListener("mouseup", handleMouseUp, { once: true });
+          }),
+          onFocus: composeEventHandlers(
+            children.props.onFocus,
+            () => !isMouseDownRef.current && handleOpen()
+          ),
+          onBlur: composeEventHandlers(children.props.onBlur, handleClose),
+        })}
+        {(open ?? isOpen) && (
+          <Portal>
+            <div
+              ref={stableRef}
+              {...rest}
+              onMouseEnter={handleOpen}
+              onMouseLeave={handleClose}
+              role="tooltip"
+              id={ariaId}
+              style={{
+                position: "absolute",
+                top: y ?? "",
+                left: x ?? "",
+                visibility: referenceHidden ? "hidden" : "visible",
+              }}
+              data-side={placement}
+              className={cl(
+                "navds-tooltip",
+                "navds-detail navds-detail--small",
+                className
+              )}
+            >
+              <div
+                className="navds-tooltip__inner"
+                style={{
+                  [{
+                    top: "marginBottom",
+                    right: "marginLeft",
+                    bottom: "marginTop",
+                    left: "marginRight",
+                  }[placement]]: _offset ? _offset : _arrow ? 10 : 2,
+                }}
+              >
+                {content}
+                {keys && (
+                  <span className="navds-tooltip__keys">
+                    {keys.map((key) => (
+                      <Detail
+                        size="small"
+                        as="kbd"
+                        key={key}
+                        className="navds-tooltip__key"
+                      >
+                        {key}
+                      </Detail>
+                    ))}
+                  </span>
+                )}
+                {_arrow && (
+                  <div
+                    ref={(node) => {
+                      arrowRef.current = node;
+                    }}
+                    className="navds-tooltip__arrow"
+                    style={{
+                      left: arrowX != null ? `${arrowX}px` : "",
+                      top: arrowY != null ? `${arrowY}px` : "",
+                      right: "",
+                      bottom: "",
+
+                      [{
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right",
+                      }[placement]]: "-3.5px",
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+          </Portal>
+        )}
+      </>
+    );
+  }
+);
+
+export default Tooltip;

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

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export * from "./Tooltip";

@navikt/core/react/src/tooltip/portal.tsx

@@ -0,0 +1,15 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/react/portal/src/Portal.tsx */
+import ReactDOM from "react-dom";
+
+const Portal = ({ children }) => {
+  const hostElement = globalThis?.document?.body;
+
+  if (hostElement) {
+    return ReactDOM.createPortal(children, hostElement);
+  }
+
+  // bail out of ssr
+  return null;
+};
+
+export default Portal;

@navikt/core/react/src/tooltip/tooltip.stories.tsx

@@ -0,0 +1,144 @@
+import React, { useRef, useState } from "react";
+import { Tooltip } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+import { Refresh } from "@navikt/ds-icons";
+import { Button } from "../..";
+import { ToggleGroup } from "../toggle-group";
+
+export default {
+  title: "ds-react/tooltip",
+  component: Tooltip,
+  parameters: {
+    chromatic: { disable: true },
+  },
+} as Meta;
+
+export const Demo = () => {
+  const [open, setOpen] = useState(true);
+  const testRef = useRef(null);
+  return (
+    <div
+      style={{
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        gap: 32,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        open={open}
+        ref={testRef}
+      >
+        <Button aria-describedby="test123" onClick={() => setOpen(!open)}>
+          Tooltip C
+        </Button>
+      </Tooltip>
+      <Tooltip
+        content="Tooltip example"
+        keys={["Cmd", "K"]}
+        placement="right"
+        defaultOpen
+      >
+        <Button onClick={() => console.log(testRef.current)}>Tooltip C</Button>
+      </Tooltip>
+      <ToggleGroup onChange={null} defaultValue="321">
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="123">Tekst</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="321">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3212">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3213">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+        <Tooltip content="Tooltip" placement="bottom">
+          <ToggleGroup.Item value="3214">tekst 2</ToggleGroup.Item>
+        </Tooltip>
+      </ToggleGroup>
+    </div>
+  );
+};
+
+export const All = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ margin: "4rem 8rem 4rem 8rem" }}>
+      <h2>Controlled</h2>
+      <Tooltip open={open} content="Controlled tooltip example" placement="top">
+        <Button onClick={() => setOpen((x) => !x)}>Toggle tooltip</Button>
+      </Tooltip>
+
+      <h2>no arrow</h2>
+      <Tooltip content="no arrow" placement="top" arrow={false}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>Keys</h2>
+      <Tooltip content="Tooltip" placement="top" open keys={["Cmd", "K"]}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+      <h2>more offset</h2>
+      <Tooltip content="Tooltip" placement="top" open offset={20}>
+        <Button>Tooltip</Button>
+      </Tooltip>
+
+      <h2>all placements</h2>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexWrap: "wrap",
+          gap: "3rem",
+        }}
+      >
+        {["top", "left", "bottom", "right"].map((placement) => (
+          <div key={placement}>
+            <h3>{placement}</h3>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                flexWrap: "wrap",
+                gap: "3rem",
+              }}
+            >
+              <Tooltip
+                key={placement}
+                defaultOpen
+                content={placement}
+                placement={placement as any}
+              >
+                <Refresh aria-hidden tabIndex={0} />
+              </Tooltip>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const UUDemo = () => {
+  return (
+    <div>
+      <Button>Placeholder</Button>
+      <br />
+      <br />
+      <Tooltip content="Shortcut" placement="right" keys={["Cmd", "S"]}>
+        <Button>Lagre</Button>
+      </Tooltip>
+      <br />
+      <br />
+      <Button>Placeholder</Button>
+    </div>
+  );
+};

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

@@ -44,3 +44,17 @@ export const useEventListener = <T extends ListenerT>(
     };
   }, [name, handler, target]);
 };
+
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
+export const composeEventHandlers = <E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void
+) => {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (!((event as unknown) as Event).defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+};

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "0.1.6",
+  "version": "0.1.9",
   "private": false,
   "description": "Auto-generated tailwind config based on @navikt/ds-tokens",
   "author": "NAV Designsystem team",
@@ -23,7 +23,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.8.4",
+    "@navikt/ds-tokens": "^0.8.7",
     "@types/jest": "^27.0.1",
     "jest": "^27.2.0",
     "lodash": "^4.17.21",

@navikt/core/tokens/package.json

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

@navikt/core/tokens/src/colors.json

@@ -396,7 +396,7 @@
         },
         "focus": {
           "inverted": {
-            "value": "{navds.global.color.blue.200.value}"
+            "value": "{navds.global.color.blue.300.value}"
           },
           "@": {
             "value": "{navds.global.color.blue.800.value}"

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

@@ -43,6 +43,7 @@ module.exports = {
       modal: { value: 2000 },
       popover: { value: 1000 },
       focus: { value: 10 },
+      tooltip: { value: 3000 },
     },
   },
 };

@navikt/core/tokens/stories/border-radius.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Border-radius",
+} as Meta;
+
+export const BorderRadius = () => {
+  const allRadius: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsBorderRadius") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allRadius).sort(
+      (a, b) => Number(a[1].replace("px", "")) - Number(b[1].replace("px", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            width: 600,
+            height: 40,
+            backgroundColor: "thistle",
+            borderRadius: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/colors.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Colors",
+} as Meta;
+
+export const Global = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("GlobalColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Semantic = () => {
+  const globalColors: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.includes("SemanticColor") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(globalColors).map(([key, val]) => (
+        <div key={key}>
+          <span>{key}</span>
+          <div style={{ background: val, width: 600, height: 40 }} />
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/shadows.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Shadows",
+} as Meta;
+
+export const Shadows = () => {
+  const allShadows: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsShadow") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  return (
+    <div className="colgap" style={{ gap: "4rem" }}>
+      {Object.entries(allShadows).map(([key, val]) => (
+        <div
+          key={key}
+          style={{
+            height: 40,
+            width: 600,
+            boxShadow: val,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          {key}
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/stories/spacing.stories.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import * as tokens from "../dist/tokens.js";
+
+export default {
+  title: "ds-tokens/Spacing",
+} as Meta;
+
+export const Spacing = () => {
+  const allSpacing: { [key: string]: string } = Object.entries(tokens).reduce(
+    (old, [key, val]) =>
+      key.startsWith("NavdsSpacing") ? { ...old, [key]: val } : { ...old },
+    {}
+  );
+
+  const sortObject = Object.fromEntries(
+    Object.entries(allSpacing).sort(
+      (a, b) =>
+        Number(a[0].replace("NavdsSpacing", "")) -
+        Number(b[0].replace("NavdsSpacing", ""))
+    )
+  );
+
+  return (
+    <div className="colgap">
+      {Object.entries(sortObject).map(([key, val]) => (
+        <div>
+          {key}
+          <div
+            key={key}
+            style={{
+              width: val,
+              height: 40,
+              backgroundColor: "thistle",
+              display: "flex",
+              alignItems: "center",
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

@navikt/core/tokens/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "esModuleInterop": true,
     "resolveJsonModule": true
-  }
+  },
+  "include": ["./stories"]
 }

@navikt/internal/css/header.css

@@ -1,9 +1,9 @@
 :root {
+  --navdsi-header-color-text: var(--navds-semantic-color-text-inverted);
   --navdsi-header-color-background: var(
     --navds-semantic-color-component-background-inverted
   );
   --navdsi-header-color-border: var(--navds-semantic-color-border-muted);
-  --navdsi-header-color-text: var(--navds-semantic-color-text-inverted);
   --navdsi-header-focus: inset 0 0 0 2px var(--navds-global-color-blue-100);
   --navdsi-header-color-hover: var(--navds-global-color-gray-800);
   --navdsi-header-color-active: var(--navds-global-color-gray-600);
@@ -37,7 +37,6 @@ button.navdsi-header__title {
 }
 
 .navdsi-header__user {
-  color: var(--navdsi-header-color-text);
   padding: 0 var(--navds-spacing-5);
   border-left: 1px solid var(--navdsi-header-color-border);
   display: flex;

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "private": false,
   "description": "Css for NAV internal Designsystem components",
   "author": "NAV Designsystem team",
@@ -17,12 +17,13 @@
   },
   "main": "./dist/index.css",
   "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "build": "postcss --use postcss-import postcss-combine-duplicated-selectors -o dist/index.css index.css",
     "watch": "yarn build --watch"
   },
   "devDependencies": {
     "postcss": "^8.3.8",
     "postcss-cli": "^9.0.0",
+    "postcss-combine-duplicated-selectors": "10.0.3",
     "postcss-import": "^14.0.2"
   }
 }

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.12.15",
+  "version": "0.12.21",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -27,14 +27,14 @@
     "/src"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../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"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.8.6",
-    "@navikt/ds-react": "^0.17.15",
+    "@navikt/ds-icons": "^0.8.8",
+    "@navikt/ds-react": "^0.17.20",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -45,6 +45,6 @@
   },
   "peerDependencies": {
     "@types/react": "^17.0.30",
-    "react": "^17.0.0"
+    "react": "^17.0.0 | ^18.0.0"
   }
 }

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

@@ -16,7 +16,7 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
    */
   copyText: string;
   /**
-   * Description of text, examples: "personnummer", "navn", "epost" etc.
+   * Description of text. Example: "Kopierte personnummer til clipboard"
    */
   popoverText: string;
   /**
@@ -24,6 +24,11 @@ export interface CopyToClipboardProps extends Omit<ButtonProps, "children"> {
    * @default "right"
    */
   popoverPlacement?: Placement;
+  /**
+   * Copy button title attribute
+   * @default `Kopier ${copyText}`
+   */
+  title?: string;
 }
 
 const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
@@ -35,6 +40,7 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
       className,
       size = "medium",
       popoverPlacement = "right",
+      title,
       ...rest
     },
     ref
@@ -53,8 +59,6 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
       };
     }, [openPopover]);
 
-    const title = `Kopier ${copyText}`;
-
     const handleClick = () => {
       copy(copyText);
       setOpenPopover(true);
@@ -65,14 +69,12 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
         <Button
           ref={mergedRef}
           variant="secondary"
-          title={title}
           className={cl("navdsi-copy-to-clipboard", className)}
           onClick={handleClick}
           size={size}
           {...rest}
         >
-          <Copy title="Fil ikon for kopiering" />
-          {children ? children : <span className="navds-sr-only">{title}</span>}
+          <Copy title={title ?? `Kopier ${copyText}`} />
         </Button>
         <Popover
           role="alert"

@navikt/internal/react/src/header/Header.tsx

@@ -23,7 +23,12 @@ interface HeaderComponent
 }
 
 const Header = forwardRef(({ className, ...rest }, ref) => (
-  <header {...rest} ref={ref} className={cl("navdsi-header", className)} />
+  <header
+    data-theme="dark"
+    {...rest}
+    ref={ref}
+    className={cl("navdsi-header", className)}
+  />
 )) as HeaderComponent;
 
 Header.Title = HeaderTitle;

README.md

@@ -23,16 +23,16 @@
 Repoet inneholder følgende:
 
 - [Felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/)
-- [Storybook](https://5f801fb2aea7820022de2936-rognyzqcpw.chromatic.com/) for komponenter.
+- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/) for komponenter.
 - [Gammel dokumentasjon](https://old-design-nav.vercel.app) for komponenter.
 
 ## Dokumentasjon
 
-[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/verktoykassen)
+[Dokumentasjon side forvaltes i dette repoet](https://github.com/navikt/aksel-website)
 
 ## Endringslogg
 
-[Alle relevante kode-endringer blir dokumentert her](https://design.nav.no/designsystem/side/endringslogg)
+[Alle relevante kode-endringer blir dokumentert her](https://aksel.nav.no/designsystem/side/changelog)
 
 ## Bidra
 

package.json

@@ -18,7 +18,7 @@
     "lint": "yarn lint:jsts && yarn lint:css",
     "lint:jsts": "yarn eslint .",
     "lint:css": "yarn stylelint --syntax css @navikt/**/*.css",
-    "clean:lib": "node utilities/scripts/clean.js"
+    "clean:lib": "node scripts/clean.js"
   },
   "workspaces": [
     "@navikt/core/*",
@@ -60,11 +60,11 @@
     "extend": "^3.0.2",
     "gh-pages": "^3.1.0",
     "glob": "^7.1.6",
-    "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.0",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.0.1",
     "husky": "^5.0.0",
     "lerna": "^4.0.0",
-    "pretty-quick": "^3.1.0",
+    "pretty-quick": "^3.1.3",
     "style-loader": "^1.2.1",
     "yarn": "^1.22.10"
   },
@@ -96,14 +96,14 @@
     "eslint-plugin-react-hooks": "^4.1.2",
     "prettier": "2.2.1",
     "prop-types": "^15.5.10",
-    "react": "^17.0.0",
+    "react": "^18.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-config-prettier": "^8.0.2",
     "typescript": "^4.3.5",
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "msw": "^0.36.5",
     "msw-storybook-addon": "^1.6.0"
   }