Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.1
 - nav-frontend-hjelpetekst@2.0.57
 - nav-frontend-popover@1.0.4

.storybook/preview.js

@@ -1,5 +1,5 @@
 import "nav-frontend-core";
-import "@navikt/ds-css";
+import "@navikt/ds-css/index.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/stories/introduction.stories.mdx

@@ -1,18 +1,33 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="ds-react/Introduksjon" />
+<Meta title="ds-react/Kom i gang" />
 
 # Ta i bruk `@navikt/ds-react` pakken
 
 ## Oppsett
 
 ```bash
-yarn install @navikt/ds-react
+yarn add @navikt/ds-react @navikt/ds-css
 ```
 
-Importer `@navikt/ds-tokens` høyt opp i dom-strukturen (må nås av alle komponentene)
-Dette vil legge til css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
+Siden stilene ikke importeres direkte i komponentene, så må man selv importere ds-css.
+Dette gjøres for å la komponetene brukes i Nextjs prosjekter.
 
 ```bash
-import "@navikt/ds-tokens";
+import "@navikt/ds-css"
 ```
+
+Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
+
+## Testing
+
+For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
+
+```bash
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
+Dette vil remappe komponentene (og ikonpakken) til å bruke CommonJs versjonen for testing

.storybook/webpack.config.js

@@ -1,11 +1,31 @@
 const path = require("path");
 
 module.exports = (baseConfig) => {
-  baseConfig.config.module.rules.push({
-    test: /\.less$/,
-    loaders: ["style-loader", "css-loader", "less-loader"],
-    include: path.resolve(__dirname, "../packages/"),
-  });
+  baseConfig.config.module.rules.push(
+    {
+      test: /\.css$/,
+      use: ["style-loader", "css-loader"],
+      include: [
+        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
+      ],
+    },
+    {
+      test: /\.less$/,
+      loaders: ["style-loader", "css-loader", "less-loader"],
+      include: path.resolve(__dirname, "../packages/"),
+    }
+  );
+  baseConfig.config.resolve.alias = {
+    ...baseConfig.config.resolve?.alias,
+    "./normalize.css": path.resolve(
+      __dirname,
+      "../node_modules/normalize.css/normalize.css"
+    ),
+    "./@navikt/ds-tokens": path.resolve(
+      __dirname,
+      "../node_modules/@navikt/ds-tokens/dist/tokens.css"
+    ),
+  };
 
   return baseConfig.config;
 };

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -17,7 +17,8 @@
   },
   "main": "./dist/index.css",
   "scripts": {
-    "build": "postcss --use postcss-import -o dist/index.css index.css"
+    "build": "postcss --use postcss-import -o dist/index.css index.css",
+    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
     "@navikt/ds-tokens": "^0.1.0",

@navikt/ds-icons/stories/icons.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="ds-icons/Introduksjon" />
+<Meta title="ds-icons/Kom i gang" />
 
 # Ta i bruk ikonpakken `@navikt/ds-icons`
 
@@ -9,7 +9,7 @@ Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
 ## Oppsett
 
 ```bash
-yarn install @navikt/ds-icons
+yarn add @navikt/ds-icons
 ```
 
 ```bash
@@ -21,3 +21,16 @@ Import { Expand } from `@navikt/ds-icons`;
 	focusable="false"
 />
 ```
+
+## Testing
+
+For å støtte testing med eks Jest som ikke tillater ESM moduler, så kan denne configen legges til
+
+```bash
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
+Dette vil remappe Ikonpakken (og komponentpakken) til å bruke CommonJs versjonen for testing

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/ds-react/popover/Popover.tsx

@@ -66,9 +66,16 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     useEventLister(
       "click",
       useCallback(
-        (e: MouseEvent) =>
-          !popoverRef.current?.contains(e.target as Node) && close(),
-        [close]
+        (e: MouseEvent) => {
+          if (
+            ![anchorEl, popoverRef.current].some((element) =>
+              element?.contains(e.target as Node)
+            )
+          ) {
+            close();
+          }
+        },
+        [anchorEl, close]
       )
     );
 
@@ -124,7 +131,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       <div
         ref={mergedRef}
         className={cl("navds-popover", `navds-popover--${size}`, className, {
-          "popover--hidden": !open || !anchorEl,
+          "navds-popover--hidden": !open || !anchorEl,
         })}
         aria-live="polite"
         aria-hidden={!open || !anchorEl}

docs/package.json

@@ -13,8 +13,8 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "typescript": "^4.2.3",
-    "@navikt/ds-css": "^0.2.0-beta.1",
-    "@navikt/ds-react": "^0.2.0-beta.1"
+    "@navikt/ds-css": "^0.2.0",
+    "@navikt/ds-react": "^0.2.0"
   },
   "eslintConfig": {
     "rules": {

package.json

@@ -12,9 +12,9 @@
     "serve": "yarn workspace website serve",
     "storybook": "yarn run start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "watch-css": "yarn workspace @navikt/ds-css run watch",
     "chromatic": "STORYBOOK_CHROMATIC=true npx chromatic --project-token x3xqdfgkujg",
-    "lerna:watch": "yarn run lerna run watch --parallel",
-    "lerna:watch-css": "yarn run lerna run watch-css --parallel",
+    "lerna:watch": "yarn run lerna run watch --stream",
     "lerna:build": "yarn run --silent lerna run build",
     "lerna:token": "yarn run lerna run token",
     "lerna:icons": "yarn run lerna run dl-icons",

packages/nav-frontend-hjelpetekst/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-hjelpetekst",
-  "version": "2.0.56",
+  "version": "2.0.57",
   "main": "lib/hjelpetekst.js",
   "types": "lib/hjelpetekst.d.ts",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "nav-frontend-hjelpetekst-style": "^2.0.42",
     "nav-frontend-ikoner-assets": "^2.0.10",
     "nav-frontend-js-utils": "^1.0.17",
-    "nav-frontend-popover": "^1.0.3",
+    "nav-frontend-popover": "^1.0.4",
     "prop-types": "^15.5.10",
     "react": "^16.8.0 || ^17.0.0"
   },

packages/nav-frontend-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nav-frontend-popover",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "lib/popover.js",
   "types": "lib/popover.d.ts",
   "license": "MIT",

packages/nav-frontend-popover/src/popover.tsx

@@ -123,7 +123,7 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
   handleClick = (e) => {
     if (
       this.state.apen &&
-      !ReactDOM.findDOMNode(this.props.ankerEl).contains(e.target)
+      !ReactDOM.findDOMNode(this.props.ankerEl)?.contains(e.target)
     ) {
       this.props.onRequestClose();
     }

website/package.json

@@ -43,8 +43,8 @@
     "react-use-keypress": "^1.0.1",
     "rehype-slug": "^4.0.1",
     "rehype-toc": "^3.0.2",
-    "@navikt/ds-css": "^0.2.0-beta.1",
-    "@navikt/ds-react": "^0.2.0-beta.1",
+    "@navikt/ds-css": "^0.2.0",
+    "@navikt/ds-react": "^0.2.0",
     "canvg": "^3.0.7"
   },
   "devDependencies": {

yarn.lock

@@ -18117,6 +18117,15 @@ postcss-loader@^3.0.0:
     postcss-load-config "^2.0.0"
     schema-utils "^1.0.0"
 
+postcss-loader@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-5.1.0.tgz#8a36f18b8989bee94172626b25f2b9cc6160fb43"
+  integrity sha512-tGgKZF6Ntn16zIWXt7yKV19L0rISaozHPCfdPt+aHOnTZrreeqVR6hCkFhZYfJ6KgpyIFRkKuW8ygHtUid4GlA==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.4"
+    semver "^7.3.4"
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -18515,6 +18524,15 @@ postcss@^8.2.6, postcss@^8.2.7:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
+postcss@^8.2.8:
+  version "8.2.8"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.8.tgz#0b90f9382efda424c4f0f69a2ead6f6830d08ece"
+  integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 potrace@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.8.tgz#50f6fba92e1e39ddef6f979b0a0f841809e0acf2"