Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.2

.github/workflows/build-publish.yml

@@ -71,7 +71,7 @@ jobs:
       - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
         env:
           NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --no-private --yes
+      - run: yarn lerna version patch --include-merged-tags --yes
       - run: yarn lerna publish from-package --yes
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}

.gitignore

@@ -111,3 +111,7 @@ utilities/**/css
 @navikt/ds-icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
+
+react-docgen.json
+cjs
+esm

.husky/.gitignore

@@ -1 +1 @@
-_
+_

.storybook/main.js

@@ -1,7 +1,32 @@
 module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.devServer = { stats: "errors-only" };
+    return config;
+  },
+  devServer: { stats: "errors-only" },
   stories: [
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx)",
+    "../.storybook/**/*.stories.@(mdx)",
+    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: { hideNoControlsWarning: true },
+      },
+    },
+    "@whitespace/storybook-addon-html",
   ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
 };

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import NavTheme from "./theme.js";
+
+addons.setConfig({
+  theme: NavTheme,
+});

.storybook/preview.js

@@ -1,14 +1,13 @@
 import "nav-frontend-core";
-import "@navikt/ds-css/baseline/index.css";
+import "@navikt/ds-css/index.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   options: {
-    // Makes sure `all` story is first
-    storySort: (a, b) => {
-      if (a[0].indexOf("all") !== -1) return -1;
-      if (b[0].indexOf("all") !== -1) return 1;
-      return 0;
+    storySort: {
+      method: "",
+      order: [],
+      locales: "",
     },
   },
 };

.storybook/stories/introduction.stories.mdx

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Kom i gang" />
+
+# Ta i bruk `@navikt/ds-react` pakken
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-react @navikt/ds-css
+```
+
+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-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/theme.js

@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "NAV Designsystem",
+});

.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/baseline/baseline.css

@@ -0,0 +1,18 @@
+@import "@navikt/ds-tokens";
+@import "normalize.css";
+@import "Source-Sans-Pro-regular.css";
+@import "Source-Sans-Pro-italic.css";
+@import "Source-Sans-Pro-600.css";
+@import "print.css";
+@import "utility.css";
+
+body {
+  font-family: var(--navds-font-family);
+  line-height: 1.375;
+  color: var(--navds-color-text-primary);
+  font-size: 1.125rem;
+}
+
+a {
+  color: var(--navds-color-text-link);
+}

@navikt/ds-css/baseline/index.css

@@ -1,18 +0,0 @@
-@import url(~normalize.css);
-@import url(~@navikt/ds-tokens/dist/tokens.css);
-@import url(Source-Sans-Pro-regular.css);
-@import url(Source-Sans-Pro-italic.css);
-@import url(Source-Sans-Pro-600.css);
-@import url(print.css);
-@import url(utility.css);
-
-body {
-  font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
-  font-size: 1.125rem;
-}
-
-a {
-  color: var(--navds-color-text-link);
-}

@navikt/ds-css/grid.css

@@ -1,3 +1,23 @@
+/**************************
+ * .navds-grid *
+ **************************/
+
+.navds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-gap: var(--navds-grid-gutter-small);
+}
+
+@media (min-width: 448px) {
+  .navds-grid {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+/**************************
+ * .navds-grid__cell *
+ **************************/
+
 .navds-grid__cell--xs-1 {
   grid-column: span 1;
 }

@navikt/ds-css/grid/grid.css

@@ -1,11 +0,0 @@
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-grid-gutter-small);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-}

@navikt/ds-css/grid/index.css

@@ -1,2 +0,0 @@
-@import "./grid.css";
-@import "./cell.css";

@navikt/ds-css/index.css

@@ -0,0 +1,13 @@
+@import "baseline/baseline.css";
+@import "accordion.css";
+@import "alert.css";
+@import "button.css";
+@import "content-container.css";
+@import "grid.css";
+@import "internal-header.css";
+@import "layout.css";
+@import "link.css";
+@import "modal.css";
+@import "popover.css";
+@import "tag.css";
+@import "typography.css";

@navikt/ds-css/internal-header.css

@@ -0,0 +1,72 @@
+/**************************
+ * .navds-header *
+ **************************/
+
+.navds-header {
+  display: flex;
+  align-items: center;
+  background: var(--navds-color-darkgray);
+  color: white;
+  max-width: 100vw;
+  min-height: 50px;
+}
+
+.navds-header__column {
+  display: flex;
+  align-items: center;
+}
+
+/**************************
+  * .navds-header__title *
+  **************************/
+
+.navds-header__title {
+  padding: 0 1.5rem 0 1.5rem;
+  border-right: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--navds-color-text-inverse);
+  font-size: var(--navds-font-size-medium);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-header__title > span > a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.navds-header__title > span > a:focus {
+  box-shadow: var(--navds-shadow-focus-on-dark);
+  outline: none;
+}
+
+/**************************
+  * .navds-header__user *
+  **************************/
+
+.navds-header__user {
+  color: var(--navds-color-text-inverse);
+  padding: 0 1.5rem 0 1.5rem;
+  margin-left: auto;
+  border-left: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+}
+
+.navds-header__name {
+  margin-right: 1rem;
+  font-size: var(--navds-font-size-small);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-small);
+}
+
+.navds-header__ident {
+  font-size: var(--navds-font-size-xs);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-xs);
+}

@navikt/ds-css/internal-header/index.css

@@ -1,16 +0,0 @@
-@import "./title.css";
-@import "./user.css";
-
-.navds-header {
-  display: flex;
-  align-items: center;
-  background: var(--navds-color-darkgray);
-  color: white;
-  max-width: 100vw;
-  min-height: 50px;
-}
-
-.navds-header__column {
-  display: flex;
-  align-items: center;
-}

@navikt/ds-css/internal-header/title.css

@@ -1,23 +0,0 @@
-.navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
-  border-right: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-  text-decoration: none;
-  margin: 0;
-  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
-}
-
-.navds-header__title > span > a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.navds-header__title > span > a:focus {
-  box-shadow: var(--navds-shadow-focus-on-dark);
-  outline: none;
-}

@navikt/ds-css/internal-header/user.css

@@ -1,22 +0,0 @@
-.navds-header__user {
-  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
-  margin-left: auto;
-  border-left: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-}
-
-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
-}

@navikt/ds-css/layout/index.css

@@ -1 +0,0 @@
-@import "./layout.css";

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.1.16",
+  "version": "0.2.1",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -15,8 +15,16 @@
     "type": "git",
     "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
   },
-  "dependencies": {
-    "@navikt/ds-tokens": "0.1.0",
-    "normalize.css": "^8.0.1"
+  "main": "./dist/index.css",
+  "scripts": {
+    "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",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.2.7",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^14.0.0"
   }
 }

@navikt/ds-icons/config/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}

@navikt/ds-icons/figma-api/api.js

@@ -1,7 +1,7 @@
 // https://levelup.gitconnected.com/learn-svg-to-react-using-figma-api-be0a5f9c0ca
 // used for reference/implementation
 
-const api = require("axios");
+import { create, get } from "axios";
 
 // Requires user to add a personalized figma token in .env
 const headers = {
@@ -11,7 +11,7 @@ const headers = {
  * Api connection for icon components
  * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/NAV-ikoner-2.1-Figma-i-test?node-id=0%3A1
  */
-const instanceFiles = api.create({
+const instanceFiles = create({
   baseURL: `https://api.figma.com/v1/files/${process.env.FILE_KEY}/components`,
   headers,
 });
@@ -19,7 +19,7 @@ const instanceFiles = api.create({
 /**
  * api endpoint for images
  */
-const instanceImages = api.create({
+const instanceImages = create({
   baseURL: `https://api.figma.com/v1/images/${process.env.FILE_KEY}`,
   headers,
 });
@@ -45,9 +45,9 @@ const getSvgImageUrls = async (nodeIds) => {
 /**
  * Gets raw svg data from url
  */
-const getIconContent = async (url) => api.get(url);
+const getIconContent = async (url) => get(url);
 
-module.exports = {
+export default {
   getNodeChildren,
   getSvgImageUrls,
   getIconContent,

@navikt/ds-icons/figma-api/index.js

@@ -1,9 +1,9 @@
-const api = require("./api");
-const fs = require("fs");
-const path = require("path");
-const pLimit = require("p-limit");
-const rimraf = require("rimraf");
-const startCase = require("lodash.startcase");
+import { getNodeChildren, getSvgImageUrls, getIconContent } from "./api";
+import { existsSync, unlinkSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";
 
 const generateMetadata = (iconNodesArr) => {
   return iconNodesArr
@@ -32,14 +32,14 @@ const main = async () => {
   // Limiting to ~20 concurrent downloads seems to lead to fewer erros
   const limit = pLimit(20);
 
-  const iconNodesArr = await api.getNodeChildren().catch((e) => {
+  const iconNodesArr = await getNodeChildren().catch((e) => {
     throw e;
   });
 
-  if (fs.existsSync(metadataFileName)) {
-    fs.unlinkSync(metadataFileName);
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
   }
-  fs.writeFileSync(
+  writeFileSync(
     metadataFileName,
     JSON.stringify(generateMetadata(iconNodesArr), null, 4),
     {
@@ -47,25 +47,24 @@ const main = async () => {
     }
   );
 
-  const iconUrls = await api.getSvgImageUrls(
+  const iconUrls = await getSvgImageUrls(
     iconNodesArr.map((node) => node.node_id).join(",")
   );
 
-  if (fs.existsSync(iconFolder)) {
+  if (existsSync(iconFolder)) {
     rimraf.sync(iconFolder);
   }
-  fs.mkdirSync(iconFolder);
+  mkdirSync(iconFolder);
 
   console.log("Total icons: " + iconNodesArr.length);
 
   await Promise.all(
     iconUrls.map((url, x) =>
       limit(() =>
-        api
-          .getIconContent(url)
+        getIconContent(url)
           .then(({ data }) => {
-            fs.writeFileSync(
-              path.resolve(
+            writeFileSync(
+              resolve(
                 iconFolder,
                 `${startCase(iconNodesArr[x].name).replace(/\s/g, "")}.svg`
               ),
@@ -86,8 +85,8 @@ const main = async () => {
   );
 
   if (misses.length > 0) {
-    fs.writeFileSync(
-      path.resolve("./", `misses.txt`),
+    writeFileSync(
+      resolve("./", `misses.txt`),
       JSON.stringify(misses, null, 4),
       {
         encoding: "utf8",

@navikt/ds-icons/figma-api/metadata.json

@@ -1311,6 +1311,22 @@
     "pageName": "Social media",
     "visible": true
   },
+  {
+    "name": "Link",
+    "description": "",
+    "created_at": "2021-03-05T09:54:39.896Z",
+    "updated_at": "2021-03-05T09:54:39.896Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "LinkFilled",
+    "description": "",
+    "created_at": "2021-03-05T09:35:48.053Z",
+    "updated_at": "2021-03-05T09:35:48.053Z",
+    "pageName": "Interface",
+    "visible": true
+  },
   {
     "name": "List",
     "description": "",
@@ -1427,7 +1443,7 @@
     "name": "Mobile",
     "description": "",
     "created_at": "2020-07-01T10:37:43.010Z",
-    "updated_at": "2020-07-01T10:37:43.010Z",
+    "updated_at": "2021-03-05T06:30:19.733Z",
     "pageName": "Device",
     "visible": true
   },
@@ -1467,7 +1483,7 @@
     "name": "MonitorFilled",
     "description": "",
     "created_at": "2021-01-11T13:37:55.526Z",
-    "updated_at": "2021-02-23T18:47:13.465Z",
+    "updated_at": "2021-02-24T09:00:04.733Z",
     "pageName": "Device",
     "visible": true
   },
@@ -1519,6 +1535,22 @@
     "pageName": "Gender",
     "visible": true
   },
+  {
+    "name": "NewTab",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.248Z",
+    "updated_at": "2021-03-02T15:45:51.239Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "NewTabFilled",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.243Z",
+    "updated_at": "2021-03-02T15:45:51.248Z",
+    "pageName": "Interface",
+    "visible": true
+  },
   {
     "name": "Next",
     "description": "",
@@ -1551,6 +1583,22 @@
     "pageName": "Fyrstikkalleen",
     "visible": true
   },
+  {
+    "name": "Notes",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.821Z",
+    "updated_at": "2021-03-02T15:27:31.821Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "NotesFilled",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.814Z",
+    "updated_at": "2021-03-02T15:27:31.814Z",
+    "pageName": "File",
+    "visible": true
+  },
   {
     "name": "Office1",
     "description": "",
@@ -1731,10 +1779,26 @@
     "name": "Print",
     "description": "",
     "created_at": "2020-07-01T10:37:43.050Z",
-    "updated_at": "2020-07-01T10:37:43.050Z",
+    "updated_at": "2021-02-25T11:46:52.195Z",
     "pageName": "Attachment",
     "visible": true
   },
+  {
+    "name": "PrinterRoom",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.707Z",
+    "updated_at": "2021-02-24T09:00:04.707Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
+  {
+    "name": "PrinterRoomFilled",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.721Z",
+    "updated_at": "2021-02-24T09:00:04.721Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
   {
     "name": "PrintFilled",
     "description": "",
@@ -1983,6 +2047,22 @@
     "pageName": "Communication",
     "visible": true
   },
+  {
+    "name": "Share",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.208Z",
+    "updated_at": "2021-02-26T07:42:06.022Z",
+    "pageName": "Social media",
+    "visible": true
+  },
+  {
+    "name": "ShareFilled",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.201Z",
+    "updated_at": "2021-02-26T07:42:06.014Z",
+    "pageName": "Social media",
+    "visible": true
+  },
   {
     "name": "Shower",
     "description": "",
@@ -2027,7 +2107,7 @@
     "name": "SightFilled",
     "description": "",
     "created_at": "2021-01-28T14:00:38.604Z",
-    "updated_at": "2021-02-23T18:47:13.472Z",
+    "updated_at": "2021-02-24T09:00:04.743Z",
     "pageName": "Fyrstikkalleen",
     "visible": true
   },

@navikt/ds-icons/figma-api/pngConverter.js

@@ -1,7 +1,7 @@
-const fs = require("fs");
-const sharp = require("sharp");
-const rimraf = require("rimraf");
-const pLimit = require("p-limit");
+import { existsSync, mkdirSync, readdirSync } from "fs";
+import sharp from "sharp";
+import rimraf from "rimraf";
+import pLimit from "p-limit";
 
 const convertToPng = async () => {
   const inputDir = "./svg/";
@@ -11,14 +11,14 @@ const convertToPng = async () => {
 
   const limit = pLimit(20);
 
-  if (fs.existsSync(outDir)) {
+  if (existsSync(outDir)) {
     rimraf.sync(outDir);
   }
-  fs.mkdirSync(outDir);
-  sizes.forEach((size) => fs.mkdirSync(outDir + size.toString()));
+  mkdirSync(outDir);
+  sizes.forEach((size) => mkdirSync(outDir + size.toString()));
 
   await Promise.all(
-    fs.readdirSync(inputDir).map((file) => {
+    readdirSync(inputDir).map((file) => {
       return limit(() =>
         sizes.forEach((size) => {
           const density = (100 * size) / 16;

@navikt/ds-icons/figma-api/zipIcons.js

@@ -1,4 +1,4 @@
-const zipdir = require("zip-dir");
+import zipdir from "zip-dir";
 
 const zipDir = async (dir, name) => {
   await zipdir(dir, { saveTo: name }, function (err, buffer) {

@navikt/ds-icons/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
+  },
   "keywords": [
     "NAV",
     "designsystem",
@@ -10,29 +14,30 @@
   ],
   "license": "MIT",
   "author": "NAV",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
+  "sideEffects": false,
+  "type": "module",
   "files": [
-    "/lib",
-    "/src",
+    "/cjs",
+    "/esm",
     "/svg"
   ],
   "scripts": {
+    "cjs-package": "copyfiles -f config/package.json cjs",
     "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node -r dotenv/config figma-api/index.js dotenv_config_path=figma-api/.env",
     "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#3E3832=currentColor\" -d src svg",
     "convert-icons": "node figma-api/pngConverter.js",
-    "clean": "rm -rf src && rm -rf lib && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
-    "build": "npm run clean && npm run create-icons && tsc && npm run convert-icons && node figma-api/zipIcons.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-icons"
+    "clean": "rm -rf src && rm -rf esm && rm -rf cjs && rm -rf png && rm -rf NAV-ikonpakke-png.zip && rm -rf NAV-ikonpakke-svg.zip",
+    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn cjs-package && npm run convert-icons && node figma-api/zipIcons.js"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.4.0",
+    "copyfiles": "^2.4.1",
     "dotenv": "^8.2.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
@@ -40,6 +45,5 @@
     "rimraf": "3.0.2",
     "sharp": "0.27.1",
     "zip-dir": "^2.0.0"
-  },
-  "sideEffects": false
+  }
 }

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

@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-icons/Kom i gang" />
+
+# Ta i bruk ikonpakken `@navikt/ds-icons`
+
+Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
+
+## Oppsett
+
+```bash
+yarn add @navikt/ds-icons
+```
+
+```bash
+Import { Expand } from `@navikt/ds-icons`;
+
+<Expand
+	aria-label="Åpne meny"
+	role="img"
+	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-icons/stories/icons.stories.tsx

@@ -1,35 +1,65 @@
 import React from "react";
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-// import { Story, Meta } from '@storybook/react/types-6-0';
 import { storiesOf } from "@storybook/react";
 
 import * as Icons from "../src";
+export default {
+  title: "ds-icons/Ikoner",
+  argTypes: {
+    Icon: {
+      defaultValue: "System",
+      control: {
+        type: "select",
+        options: Object.entries(Icons).map(([Name, _]) => Name),
+      },
+    },
+    color: { control: "color" },
+  },
+};
 
-const iconsStories = storiesOf("@navikt/icons", module);
+if (process.env.STORYBOOK_CHROMATIC === "true") {
+  const iconsStories = storiesOf("ds-icons/Ikoner", module);
 
-Object.entries(Icons).forEach(([name, Icon]) => {
-  iconsStories.add(name, () => (
-    <div>
-      <Icon title="hello, world" />
-      <Icon style={{ height: "2em", width: "2em" }} />
-      <Icon style={{ height: "4em", width: "4em" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "white" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
-      <br />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#777" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#333" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#000" }} />
-      <br />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
-      />
-    </div>
-  ));
-});
+  Object.entries(Icons).forEach(([name, Icon]) => {
+    iconsStories.add(name, () => (
+      <div>
+        <Icon title="hello, world" />
+        <Icon style={{ height: "2em", width: "2em" }} />
+        <Icon style={{ height: "4em", width: "4em" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
+        />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
+        />
+      </div>
+    ));
+  });
+}
+
+const Template = ({ Icon, color, size, ...args }) => {
+  const Iconname = Icons[Icon];
+  return <Iconname style={{ fontSize: size, color }} {...args} />;
+};
+export const Ikon = Template.bind({});
+Ikon.args = {
+  size: "24px",
+};

@navikt/ds-icons/svg/Link.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7454 1.48842C19.7297 -0.496138 16.468 -0.496139 14.4522 1.48842L11.8753 4.02547C11.4818 4.41294 11.4768 5.04609 11.8643 5.43964C12.2518 5.8332 12.8849 5.83813 13.2785 5.45066L15.8554 2.9136C17.0927 1.69546 19.105 1.69547 20.3423 2.91361L21.0786 3.63848C22.3071 4.84808 22.3071 6.80268 21.0786 8.01228L15.9247 13.0864C14.6875 14.3045 12.6751 14.3045 11.4378 13.0864L10.7016 12.3615C10.308 11.9741 9.67487 11.979 9.28741 12.3725C8.89993 12.7661 8.90487 13.3992 9.29842 13.7867L10.0347 14.5116C12.0504 16.4961 15.3122 16.4961 17.3279 14.5116L22.4817 9.43747C24.5061 7.44438 24.5061 4.20638 22.4817 2.21329L21.7454 1.48842Z" fill="#3E3832"/>
+<path d="M2.25455 22.5116C4.27028 24.4961 7.53205 24.4961 9.54777 22.5116L12.1247 19.9745C12.5182 19.5871 12.5232 18.9539 12.1357 18.5604C11.7482 18.1668 11.1151 18.1619 10.7215 18.5493L8.14462 21.0864C6.90735 22.3045 4.89498 22.3045 3.65771 21.0864L2.92145 20.3615C1.69285 19.1519 1.69285 17.1973 2.92145 15.9877L8.07525 10.9136C9.31253 9.69546 11.3249 9.69547 12.5622 10.9136L13.2984 11.6385C13.692 12.0259 14.3251 12.021 14.7126 11.6275C15.1001 11.2339 15.0951 10.6008 14.7016 10.2133L13.9653 9.48842C11.9496 7.50386 8.68783 7.50386 6.6721 9.48841L1.5183 14.5625C-0.506099 16.5556 -0.506098 19.7936 1.5183 21.7867L2.25455 22.5116Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/LinkFilled.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.51472 15.906C11.8579 18.2501 15.6569 18.2501 18 15.906L22.2426 11.6616C24.5858 9.31754 24.5858 5.51699 22.2426 3.17288L20.8284 1.75808C18.4853 -0.586027 14.6863 -0.586027 12.3431 1.75808L11.2825 2.81918C10.5014 3.60055 10.5014 4.8674 11.2825 5.64877C12.0635 6.43014 13.3299 6.43014 14.1109 5.64877L15.1716 4.58767C15.9526 3.8063 17.219 3.8063 18 4.58767L19.4142 6.00247C20.1953 6.78384 20.1953 8.05069 19.4142 8.83206L15.1716 13.0764C14.3905 13.8578 13.1242 13.8578 12.3431 13.0764L11.636 12.369C10.855 11.5877 9.58866 11.5877 8.80761 12.369C8.02656 13.1504 8.02656 14.4173 8.80761 15.1986L9.51472 15.906Z" fill="#3E3832"/>
+<path d="M14.4853 8.09396C12.1421 5.74986 8.34314 5.74985 6 8.09396L1.75736 12.3384C-0.585786 14.6825 -0.585787 18.483 1.75736 20.8271L3.17157 22.2419C5.51472 24.586 9.31371 24.586 11.6569 22.2419L12.7175 21.1808C13.4986 20.3995 13.4986 19.1326 12.7175 18.3512C11.9365 17.5699 10.6701 17.5699 9.88909 18.3512L8.82843 19.4123C8.04738 20.1937 6.78105 20.1937 6 19.4123L4.58579 17.9975C3.80474 17.2162 3.80474 15.9493 4.58579 15.1679L8.82843 10.9236C9.60948 10.1422 10.8758 10.1422 11.6569 10.9236L12.364 11.631C13.145 12.4123 14.4113 12.4123 15.1924 11.631C15.9734 10.8496 15.9734 9.58273 15.1924 8.80136L14.4853 8.09396Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/NewTab.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16V2H22V16H8ZM6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H18V22C18 23.1046 17.1046 24 16 24H2C0.895431 24 0 23.1046 0 22V8C0 6.89543 0.895431 6 2 6H6V1ZM6 8V17C6 17.5523 6.44772 18 7 18H16V22H2V8H6ZM14 10H10V8H14V4H16V8H20V10H16V14H14V10Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/NewTabFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H7C6.44772 18 6 17.5523 6 17V1ZM14 10V14H16V10L20 10V8L16 8V4H14V8H10V10H14ZM17 24H1C0.447716 24 0 23.5523 0 23V7C0 6.44772 0.447715 6 1 6H4V19C4 19.5523 4.44772 20 5 20H18V23C18 23.5523 17.5523 24 17 24Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/Notes.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L22 7.25109V24H2V2H17.2933L17.7456 1.45042L17.8862 1.27963L18.0394 1.10889L18.0696 1.07797C19.3139 -0.193727 21.3848 -0.408755 22.8251 0.823961L22.8608 0.854533L23.0271 1.01096ZM15.6471 4H4V22H20V9.68214L14.1812 16.7559L9.272 18.975L6.96045 20.0199L7.55858 17.5547L8.83932 12.2761L15.2039 4.53926L15.2042 4.53888L15.2039 4.53857L15.6471 4ZM21.6612 4.51583L21.6611 4.51599L20.1639 6.33464L20.1634 6.33523L12.9327 15.1254L9.87014 16.5098L10.6749 13.1929L16.7488 5.80947L17.939 4.3626L17.9393 4.3622L17.9394 4.36215L17.9405 4.3608L18.0188 4.26567L19.4033 2.58351L19.4991 2.47669C20.0702 1.89304 20.9511 1.85255 21.5246 2.34338L21.5246 2.3434L21.6223 2.43532L21.6223 2.43534C22.1422 2.97278 22.1888 3.87388 21.6616 4.51541L21.6612 4.51583Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/NotesFilled.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.00735L23.0598 1.04119C24.3286 2.35288 24.3404 4.40345 23.2057 5.78294L21.708 7.60217L14.1812 16.7523L22 7.24842V24H2V2H17.2903L17.7456 1.44681L17.8862 1.27601L18.0394 1.10527L18.0696 1.07435C19.3139 -0.197341 21.3848 -0.41237 22.8251 0.820347L22.8608 0.850918L23.0271 1.00735ZM21.6612 4.51222L21.6611 4.51237L20.1639 6.33103L20.1634 6.33162L12.9327 15.1218L9.87014 16.5062L10.6749 13.1893L16.7488 5.80585L17.939 4.35898L17.9393 4.35859L17.9394 4.35853L17.9405 4.35718L18.0188 4.26206L19.4033 2.5799L19.4991 2.47307C20.0702 1.88943 20.9511 1.84893 21.5246 2.33977L21.5246 2.33978L21.6223 2.43171L21.6223 2.43172C22.1422 2.96916 22.1888 3.87027 21.6616 4.5118L21.6612 4.51222Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/PrinterRoom.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9998 17.1959V14.5544L21.5299 12.3481C21.9983 12.0553 22.1406 11.4384 21.8479 10.9701C21.5552 10.5017 20.9383 10.3594 20.4699 10.6521L17.9998 12.1959V7.02724C18.0043 6.85811 17.9656 6.69086 17.8888 6.54166C17.7914 6.35317 17.6358 6.19963 17.4457 6.10481L5.92689 0.113051C5.43694 -0.141811 4.83314 0.0487713 4.57828 0.538729C4.32342 1.02869 4.514 1.63248 5.00396 1.88734L12.9106 6.00015H2.99997C2.44769 6.00015 1.99998 6.44787 1.99998 7.00015V23C1.99998 23.5523 2.44769 24 2.99997 24H16.9999C17.5521 24 17.9998 23.5523 17.9998 23V19.5544L21.5299 17.3481C21.9982 17.0553 22.1406 16.4384 21.8479 15.9701C21.5552 15.5017 20.9383 15.3594 20.4699 15.6521L17.9998 17.1959ZM15.9999 18.9974V14.0047V13.9973V8.00014H3.99997V22H15.9999V19.0046V18.9974ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/PrinterRoomFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9998 7.02724V12.1959L20.4699 10.6521C20.9383 10.3594 21.5552 10.5017 21.8479 10.9701C22.1406 11.4384 21.9983 12.0554 21.5299 12.3481L17.9998 14.5544V17.1959L20.4699 15.6521C20.9383 15.3594 21.5552 15.5017 21.8479 15.9701C22.1406 16.4384 21.9982 17.0553 21.5299 17.3481L17.9998 19.5544V23C17.9998 23.5523 17.5521 24 16.9999 24H2.99997C2.44769 24 1.99998 23.5523 1.99998 23V7.00015C1.99998 6.44787 2.44769 6.00015 2.99997 6.00015H12.9106L5.00396 1.88734C4.514 1.63248 4.32342 1.02869 4.57828 0.538729C4.83314 0.0487713 5.43694 -0.141811 5.92689 0.113051L17.4457 6.10481C17.6358 6.19963 17.7914 6.35317 17.8888 6.54166C17.9656 6.69086 18.0043 6.85811 17.9998 7.02724ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/Share.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6.93671L12.2673 7.17036C8.69604 7.65193 6.1851 9.64766 4.51125 12.423C3.60163 13.9312 2.9476 15.6631 2.53546 17.4722C3.01938 16.8564 3.54509 16.2463 4.1131 15.6615C6.02443 13.6938 8.51404 11.9122 11.5955 11.2759L14 10.7794V14.1589L21.2613 9.04409L14 3.92931V6.93671ZM2.00483 21.8319C1.98661 21.8633 1.96852 21.8946 1.95055 21.9259C1.87942 22.0496 1.81022 22.1719 1.74298 22.2926C1.6773 22.4105 1.61348 22.5269 1.55151 22.6415C1.20695 23.279 0 23.0173 0 22.2926C0 22.1308 0.00164753 21.9684 0.00495931 21.8056C0.00785945 21.6631 0.0120358 21.5202 0.0174997 21.377C0.0188241 21.3423 0.0202242 21.3076 0.0217002 21.2728C0.32595 14.1118 3.85178 6.28706 12 5.1883V2.00175C12 1.19139 12.9134 0.717542 13.5759 1.1842L23.5737 8.22654C24.1392 8.62488 24.1392 9.46329 23.5737 9.86163L13.5759 16.904C12.9134 17.3706 12 16.8968 12 16.0864V13.2346C11.3031 13.3785 10.6364 13.5944 10 13.8685C6.32101 15.4535 3.65449 18.9871 2.00483 21.8319Z" fill="#3E3832"/>
+</svg>

@navikt/ds-icons/svg/ShareFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5759 16.904L23.5737 9.86163C24.1392 9.46329 24.1392 8.62488 23.5737 8.22654L13.5759 1.1842C12.9134 0.717542 12 1.19139 12 2.00175V5.1883C3.46298 6.33949 0 14.8739 0 22.2926C0 23.0173 1.20695 23.279 1.55151 22.6415C3.39544 19.2298 6.88128 14.2916 12 13.2346V16.0864C12 16.8968 12.9134 17.3706 13.5759 16.904Z" fill="#3E3832"/>
+</svg>

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

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

@navikt/ds-icons/tsconfig.json

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

@navikt/ds-react/accordion/Accordion.tsx

@@ -3,7 +3,6 @@ import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
 
 import { Expand } from "@navikt/ds-icons";
-import "@navikt/ds-css/accordion/index.css";
 import { v4 as uuidv4 } from "uuid";
 
 export interface AccordionProps

@navikt/ds-react/accordion/stories/accordion.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Accordion } from "../index";
 
 export default {
-  title: "@navikt/accordion",
+  title: "ds-react/accordion",
   component: Accordion,
 };
 

@navikt/ds-react/alert/Alert.tsx

@@ -6,7 +6,6 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
-import "@navikt/ds-css/alert/index.css";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   variant: "error" | "warning" | "info" | "success";

@navikt/ds-react/alert/stories/alert.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Alert } from "../index";
 
 export default {
-  title: "@navikt/alert",
+  title: "ds-react/alert",
   component: Alert,
 };
 

@navikt/ds-react/button/Button.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/button/index.css";
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary" | "action" | "danger";

@navikt/ds-react/button/stories/button.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "../index";
 
 export default {
-  title: "@navikt/button",
+  title: "ds-react/button",
   component: Button,
 };
 

@navikt/ds-react/config/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}

@navikt/ds-react/content-container/ContentContainer.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/content-container/index.css";
 
 export type ContentContainerProps = HTMLAttributes<HTMLDivElement>;
 const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(

@navikt/ds-react/content-container/stories/container.stories.tsx

@@ -5,7 +5,7 @@ import "./style.css";
 import { useEffect } from "react";
 
 export default {
-  title: "@navikt/content-container",
+  title: "ds-react/content-container",
   component: ContentContainer,
   decorators: [
     (Story) => {

@navikt/ds-react/grid/Cell.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/grid/index.css";
 
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface CellProps extends HTMLAttributes<HTMLDivElement> {

@navikt/ds-react/grid/Grid.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/grid/index.css";
 
 export type GridProps = HTMLAttributes<HTMLDivElement>;
 const Grid = forwardRef<HTMLDivElement, GridProps>(

@navikt/ds-react/grid/stories/grid.stories.tsx

@@ -4,7 +4,7 @@ import { ContentContainer } from "../../index";
 import "./styles.css";
 
 export default {
-  title: "@navikt/grid",
+  title: "ds-react/grid",
   component: { Grid, Cell },
   parameters: {
     layout: "fullscreen",

@navikt/ds-react/internal-header/InternalHeader.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;

@navikt/ds-react/internal-header/InternalHeaderTitle.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef, HTMLAttributes, createElement } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderTitleProps extends HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;

@navikt/ds-react/internal-header/InternalHeaderUser.tsx

@@ -1,7 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderUserProps
   extends HTMLAttributes<HTMLDivElement> {

@navikt/ds-react/internal-header/stories/internal-header.stories.tsx

@@ -7,7 +7,7 @@ import {
 } from "../index";
 
 export default {
-  title: "@navikt/internal-header",
+  title: "ds-react/internal-header",
   component: InternalHeader,
 };
 

@navikt/ds-react/layout/Layout.tsx

@@ -1,4 +1,3 @@
-import "@navikt/ds-css/layout/index.css";
 import cl from "classnames";
 import React, {
   Children,

@navikt/ds-react/layout/stories/article.layout.stories.tsx

@@ -8,7 +8,7 @@ import { Right } from "./components/sections/Right";
 import "./components/styles.css";
 
 export default {
-  title: "@navikt/layout/Article",
+  title: "ds-react/layout/Article",
   component: { Layout },
   decorators: [
     (Story) => {

@navikt/ds-react/link/Link.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/link/index.css";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

@navikt/ds-react/link/stories/link.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "../index";
 import { Add } from "@navikt/ds-icons";
 export default {
-  title: "@navikt/link",
+  title: "ds-react/link",
   component: Link,
 };
 

@navikt/ds-react/modal/Modal.tsx

@@ -3,7 +3,6 @@ import cl from "classnames";
 import ReactModal from "react-modal";
 import mergeRefs from "react-merge-refs";
 import { Close } from "@navikt/ds-icons";
-import "@navikt/ds-css/modal/index.css";
 import { Button } from "../index";
 
 // TODO: Has to be documented well that the user has to import react-modal and call
@@ -37,7 +36,14 @@ export interface ModalProps {
   contentClassName?: string;
 }
 
-const Modal = forwardRef<ReactModal, ModalProps>(
+type ModalLifecycle = {
+  setAppElement?: (element: any) => void;
+};
+
+const Modal: ModalLifecycle &
+  React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<ReactModal>
+  > = forwardRef<ReactModal, ModalProps>(
   (
     {
       children,
@@ -90,8 +96,6 @@ const Modal = forwardRef<ReactModal, ModalProps>(
   }
 );
 
-export const setAppElement = (element) => {
-  ReactModal.setAppElement(element);
-};
+Modal.setAppElement = (element) => ReactModal.setAppElement(element);
 
 export default Modal;

@navikt/ds-react/modal/stories/modal.stories.tsx

@@ -3,7 +3,7 @@ import { Modal } from "../index";
 import ReactModal from "react-modal";
 
 export default {
-  title: "@navikt/modal",
+  title: "ds-react/modal",
   component: Modal,
 };
 

@navikt/ds-react/package.json

@@ -1,34 +1,38 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
+  "license": "MIT",
   "keywords": [
     "react",
     "typescript",
     "javascript"
   ],
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/navikt/nav-frontend-moduler/tree/master/%40navikt/ds-react"
+  },
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
+  "sideEffects": false,
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "/lib"
+    "/cjs",
+    "/esm"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "cjs-package": "copyfiles -f config/package.json cjs",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig-esm.json && yarn cjs-package",
     "watch": "tsc --watch -p tsconfig.json"
   },
   "dependencies": {
-    "@navikt/ds-css": "0.1.0",
-    "@navikt/ds-icons": "^0.1.0",
+    "@navikt/ds-icons": "^0.2.0",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -38,6 +42,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "copyfiles": "^2.4.1",
     "react-router-dom": "^5.2.0"
   },
   "peerDependencies": {

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

@@ -9,7 +9,6 @@ import { usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
 import mergeRefs from "react-merge-refs";
 import cl from "classnames";
-import "@navikt/ds-css/popover/index.css";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -67,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]
       )
     );
 
@@ -125,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}

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

@@ -3,7 +3,7 @@ import { Popover } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { placements } from "@popperjs/core";
 export default {
-  title: "@navikt/popover",
+  title: "ds-react/popover",
   component: Popover,
   parameters: {
     chromatic: { disable: true },

@navikt/ds-react/tag/Tag.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/tag/index.css";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;

@navikt/ds-react/tag/stories/tag.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Tag } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "@navikt/tag",
+  title: "ds-react/tag",
   component: Tag,
 } as Meta;
 

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

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

@navikt/ds-react/tsconfig.json

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

@navikt/ds-react/typography/index.ts

@@ -1,5 +1,3 @@
-import "@navikt/ds-css/typography/index.css";
-
 export { default as Heading } from "./Heading";
 export * from "./Heading";
 export { default as Text } from "./Text";

@navikt/ds-react/typography/stories/typography.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Heading, Text, Paragraph, Lead } from "../index";
 
 export default {
-  title: "@navikt/typography",
+  title: "ds-react/typography",
   component: Heading,
 };
 

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Endringslogg
 
+## 10. Mars 2021
+
+### Oppdatert feil-styling og state-handling for skjemakomponenter
+
+[#1018](https://github.com/navikt/nav-frontend-moduler/pull/1018)
+
+- Feil på Skjemagruppe vil føre til feil-styling på checkbox/radio og checkboxpanel/radiopanel
+- Checkboxpanel, Radiopanel og Radio har nå feil-prop
+- Feil + disabled styling er satt til bare disabled nå.
+- checkbox/radio og checkboxpanel/radiopanel kan nå alle ta i bruk utenFeilPropagerings-prop
+
 ## 01. Mars 2021
 
 ### Nav-frontend-typografi-style støtter nå Less v4

docs/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

docs/README.md

@@ -0,0 +1,48 @@
+# Nytt oppsett for design.nav.no
+
+Planener er at nytt design og innhold for design.nav.no vil bli utviklet her med hjelp av nextjs.
+
+## Kom i gang
+
+> Note: Kjøres fra root, ikke docs/package.json
+
+- `yarn install`
+- `yarn boot`
+- `yarn next-dev`
+
+## Nextjs default Readme
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

docs/components/assets/navlogo.svg

@@ -0,0 +1,6 @@
+<svg width="77" height="48" viewBox="0 0 77 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.4688L4.90367 22.3328H9.61534L4.71792 34.4688H0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.5095 34.4688L65.3504 22.3328H67.9191L63.0785 34.4688H60.5095Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.0298 34.4688L74.8699 22.3328H76.2341L71.3934 34.4688H70.0298Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.055 22.3327H51.7901C51.7901 22.3327 51.4962 22.3327 51.3922 22.5923L49.032 29.8176L46.6737 22.5923C46.5698 22.3327 46.2741 22.3327 46.2741 22.3327H38.0738C37.8963 22.3327 37.7474 22.481 37.7474 22.6574V25.1111C37.7474 23.1647 35.6763 22.3327 34.4635 22.3327C31.7477 22.3327 29.9297 24.1215 29.3636 26.8411C29.3329 25.0369 29.183 24.3905 28.697 23.7284C28.4738 23.4041 28.1511 23.1314 27.7998 22.9059C27.0764 22.4821 26.4268 22.3327 25.0308 22.3327H23.3917C23.3917 22.3327 23.0955 22.3327 22.991 22.5923L21.4996 26.2883V22.6574C21.4996 22.481 21.3519 22.3327 21.1747 22.3327H17.3818C17.3818 22.3327 17.089 22.3327 16.9825 22.5923L15.432 26.4355C15.432 26.4355 15.2772 26.8198 15.6311 26.8198H17.089V34.143C17.089 34.3248 17.2321 34.4688 17.4147 34.4688H21.1747C21.3519 34.4688 21.4996 34.3248 21.4996 34.143V26.8198H22.9651C23.8061 26.8198 23.9842 26.8428 24.3114 26.9953C24.5085 27.0697 24.686 27.2202 24.7829 27.3938C24.9811 27.767 25.0308 28.2152 25.0308 29.5367V34.143C25.0308 34.3248 25.1768 34.4688 25.3572 34.4688H28.9609C28.9609 34.4688 29.3682 34.4688 29.5292 34.0666L30.3279 32.0927C31.3898 33.5801 33.1377 34.4688 35.3099 34.4688H35.7845C35.7845 34.4688 36.1944 34.4688 36.3566 34.0666L37.7474 30.622V34.143C37.7474 34.3248 37.8963 34.4688 38.0738 34.4688H41.7524C41.7524 34.4688 42.1583 34.4688 42.3213 34.0666C42.3213 34.0666 43.7926 30.4138 43.7983 30.3862H43.8005C43.8571 30.0823 43.4731 30.0823 43.4731 30.0823H42.16V23.8145L46.2911 34.0666C46.4525 34.4688 46.8592 34.4688 46.8592 34.4688H51.205C51.205 34.4688 51.614 34.4688 51.7754 34.0666L56.3552 22.7258C56.5137 22.3327 56.055 22.3327 56.055 22.3327V22.3327ZM37.7474 30.0823H35.2764C34.2928 30.0823 33.4927 29.2859 33.4927 28.3012C33.4927 27.3182 34.2928 26.5167 35.2764 26.5167H35.9674C36.9485 26.5167 37.7474 27.3182 37.7474 28.3012V30.0823ZM35.5908 47.9835C22.3436 47.9835 11.6021 37.2426 11.6021 23.9935C11.6021 10.7429 22.3436 0 35.5908 0C48.8427 0 59.5854 10.7429 59.5854 23.9935C59.5854 37.2426 48.8427 47.9835 35.5908 47.9835Z" fill="white"/>
+</svg>

docs/components/code-preview/Preview.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import Tabs from "../tabs/Tabs";
+import style from "./preview.module.css";
+import { renderToString } from "react-dom/server";
+import Bash from "../code/Bash";
+import Prettier from "prettier/standalone";
+import ParserBabel from "prettier/parser-babel";
+
+const prettierOptions = {
+  semi: true,
+  parser: "babel",
+  plugins: [ParserBabel],
+  jsxBracketSameLine: false,
+  printWidth: 30,
+};
+
+interface PreviewProps {
+  react: string;
+  children?: React.ReactElement;
+  hideHtml?: boolean;
+}
+
+const Preview = ({
+  children,
+  react,
+  hideHtml = false,
+  ...props
+}: PreviewProps) => {
+  const [tab, setTab] = useState(0);
+  const handleChange = (x: number) => {
+    setTab(x);
+  };
+
+  const reactFormat = Prettier.format(react, prettierOptions).slice(0, -2);
+  const htmlFormat =
+    !!children &&
+    Prettier.format(
+      renderToString(
+        React.Children.count(children) > 1 ? <div>{children}</div> : children
+      ),
+      prettierOptions
+    )
+      .slice(0, -2)
+      .replace(` data-reactroot=""`, "");
+
+  const tabs = !hideHtml || !!children ? ["REACT", "HTML/CSS"] : ["REACT"];
+
+  return (
+    <div className={style.wrapper}>
+      {!!children && <div className={style.preview}>{children}</div>}
+      <Tabs tabs={tabs} onChange={(x) => handleChange(x)} />
+      {tab === 0 && <Bash code={reactFormat} language="jsx" copy />}
+
+      {(!hideHtml || !!children) && tab === 1 && (
+        <Bash code={htmlFormat} language="jsx" copy />
+      )}
+    </div>
+  );
+};
+
+export default Preview;

docs/components/code-preview/preview.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  padding: 1rem;
+  margin: 1rem 0;
+  background-color: var(--bg-secondary);
+  margin-bottom: 3rem;
+  outline: var(--outline);
+}
+
+.preview {
+  border-bottom: 2px solid var(--code-divider);
+  padding-bottom: 3rem;
+  margin-bottom: 1rem;
+}

docs/components/code/Bash.tsx

@@ -0,0 +1,109 @@
+import copy from "copy-to-clipboard";
+import Prism from "prismjs";
+import style from "./bash.module.css";
+import cl from "classnames";
+import { Files } from "@navikt/ds-icons";
+import { Popover } from "@navikt/ds-react";
+import { useEffect, useRef, useState } from "react";
+import "prismjs/components/prism-jsx.min";
+
+type PrismLanguages =
+  | "extend"
+  | "insertBefore"
+  | "DFS"
+  | "markup"
+  | "html"
+  | "mathml"
+  | "svg"
+  | "xml"
+  | "ssml"
+  | "atom"
+  | "rss"
+  | "css"
+  | "clike"
+  | "javascript"
+  | "js"
+  | "jsx";
+
+export const copyCode = (content) => {
+  if (typeof content === "string") {
+    copy(content, {
+      format: "text/plain",
+    });
+  }
+};
+
+const Bash = ({
+  code,
+  terminal = false,
+  copy = false,
+  language = "html",
+  ...props
+}: {
+  code: string;
+  terminal?: boolean;
+  copy?: boolean;
+  language?: PrismLanguages;
+}) => {
+  const highlighted = terminal
+    ? code
+    : Prism.highlight(code, Prism.languages[language], language);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const [openPopover, setOpenPopover] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (openPopover) {
+      timeoutRef.current = setTimeout(() => setOpenPopover(false), 1500);
+      return () => timeoutRef.current && clearTimeout(timeoutRef.current);
+    }
+  }, [openPopover]);
+
+  const handleCopy = () => {
+    copyCode(code);
+    setOpenPopover(true);
+  };
+
+  return (
+    <div className={style.preWrapper}>
+      <pre className={style.pre}>
+        <code
+          className={cl(style.code, {
+            [style.codeCopy]: copy,
+            [style.terminal]: terminal,
+          })}
+          {...props}
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+        {copy && (
+          <>
+            <div className={style.buttonBackground}>
+              <button
+                ref={buttonRef}
+                className={style.copyButton}
+                onClick={() => handleCopy()}
+              >
+                <Files />
+              </button>
+              <Popover
+                role="alert"
+                anchorEl={buttonRef.current}
+                open={openPopover}
+                onClose={() => setOpenPopover(false)}
+                size="small"
+                placement="auto-start"
+                /* arrow={false} */
+              >
+                Kode er kopiert
+              </Popover>
+              )
+            </div>
+          </>
+        )}
+      </pre>
+    </div>
+  );
+};
+
+export default Bash;

docs/components/code/Import.tsx

@@ -0,0 +1,22 @@
+import Bash from "./Bash";
+
+interface ImportProps {
+  from: string;
+  imports: string | string[];
+  namedExport?: boolean;
+}
+
+const Import = ({ namedExport = true, from, imports }: ImportProps) => {
+  const genCode = () => {
+    if (Array.isArray(imports)) {
+      return `import { ${imports.join(", ")} } from "${from}";`;
+    } else if (!namedExport) {
+      return `import ${imports} from "${from}";`;
+    } else {
+      return `import { ${imports} } from "${from}";`;
+    }
+  };
+  return <Bash code={genCode()} copy language="jsx"></Bash>;
+};
+
+export default Import;

docs/components/code/bash.module.css

@@ -0,0 +1,64 @@
+.pre {
+  padding: 1rem;
+  margin: 1rem 0 0 0;
+  overflow: auto;
+  width: calc(100vw - 2rem);
+  background-color: var(--bg-code);
+  align-items: center;
+  display: flex;
+
+  /* Fixer pixelbug på høyre side av bash-panel */
+  box-shadow: inset -4px 0 0 var(--bg-code);
+}
+
+.preWrapper {
+  position: relative;
+  align-items: center;
+  display: flex;
+}
+
+.terminal {
+  color: var(--color-code);
+}
+
+.code {
+  padding-right: 4rem;
+  color: var(--color-code);
+}
+
+.terminal::before {
+  content: "$ ";
+}
+
+.buttonBackground {
+  width: 3rem;
+  background-color: var(--bg-code);
+  position: absolute;
+  right: 0;
+  margin: 1rem 0;
+  display: flex;
+  justify-content: center;
+  height: calc(100% - 3rem - 0.5rem);
+  align-items: center;
+}
+
+.copyButton {
+  background-color: var(--bg-code);
+  color: white;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  border: none;
+  align-items: center;
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.copyButton:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.copyButton:focus {
+  outline: var(--outline-code);
+  outline-offset: var(--outline-offset);
+}

docs/components/layout/Layout.tsx

@@ -0,0 +1,55 @@
+import Header from "./header/Header";
+import Sidebar from "./sidebar/Sidebar";
+import Mdx from "./MdxProvider";
+import Toc from "../toc/Toc";
+import { Grid, Cell, ContentContainer } from "@navikt/ds-react";
+import { useMediaQuery } from "react-responsive";
+import useKeypress from "react-use-keypress";
+import { useEffect, useState } from "react";
+import style from "./layout.module.css";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  const [sidebar, setSidebar] = useState(false);
+
+  const small = useMediaQuery({
+    query: "(max-width: 959px)",
+  });
+
+  useKeypress("Escape", () => {
+    setSidebar(false);
+  });
+
+  useEffect(() => {
+    setSidebar(!small);
+  }, [small]);
+
+  return (
+    <div className={style.pageWrapper + " lightTheme"}>
+      <Header sidebar={sidebar} onSidebarChange={(x) => setSidebar(x)} />
+      <Sidebar
+        sidebar={sidebar}
+        small={small}
+        onSidebarChange={(x) => setSidebar(x)}
+      />
+      <main className={style.contentWrapper}>
+        <ContentContainer>
+          <Grid>
+            <Cell className={style.content} xs={12} sm={12} md={10} lg={7}>
+              <Mdx>{children}</Mdx>
+            </Cell>
+            <Cell xs={12} sm={1} md={2} lg={1} />
+            <Cell xs={12} sm={12} md={8} lg={4}>
+              <Toc />
+            </Cell>
+          </Grid>
+        </ContentContainer>
+      </main>
+    </div>
+  );
+};
+
+export default Layout;

docs/components/layout/MdxProvider.tsx

@@ -0,0 +1,25 @@
+import { MDXProvider } from "@mdx-js/react";
+import { Heading, Paragraph } from "@navikt/ds-react";
+import Bash from "../code/Bash";
+import Import from "../code/Import";
+import Preview from "../code-preview/Preview";
+import Npm from "../npm/Npm";
+/* import { Button } from "@navikt/ds-react"; */
+
+const MdxWrapper = (props) => (
+  <MDXProvider
+    components={{
+      h1: (props) => <Heading size="xxl" level={1} {...props} />,
+      h2: (props) => <Heading size="large" level={2} {...props} />,
+      h3: (props) => <Heading size="small" level={3} {...props} />,
+      p: (props) => <Paragraph size="medium" {...props} />,
+      Bash,
+      Preview,
+      Import,
+      Npm,
+    }}
+    {...props}
+  />
+);
+
+export default MdxWrapper;

docs/components/layout/header/Header.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import NavLogo from "../../assets/navLogo.svg";
+import { HamburgerFilled } from "@navikt/ds-icons";
+import cl from "classnames";
+import style from "../layout.module.css";
+
+interface HeaderProps {
+  className?: string;
+  sidebar: boolean;
+  onSidebarChange: (x: boolean) => void;
+}
+
+const Header = ({
+  className,
+  sidebar,
+  onSidebarChange,
+  ...props
+}: HeaderProps) => {
+  return (
+    <header className={style.header}>
+      <button
+        onClick={() => onSidebarChange(!sidebar)}
+        className={cl(style.header__link, style.header__icon, {
+          [style["header__icon--hidden"]]: sidebar,
+        })}
+        tabIndex={!sidebar ? 0 : -1}
+      >
+        <HamburgerFilled />
+      </button>
+      <Link href="/">
+        <button className={style.header__link}>
+          <NavLogo />
+          <span className={style["header__link-title"]}>NAV Designsystem</span>
+        </button>
+      </Link>
+    </header>
+  );
+};
+
+export default Header;

docs/components/layout/layout.module.css

@@ -0,0 +1,144 @@
+.pageWrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar content";
+  height: 100vh;
+  background-color: var(--bg-primary);
+}
+
+.header {
+  grid-area: header;
+  width: 100vw;
+  display: flex;
+  z-index: 99;
+  color: #fff;
+  height: 5rem;
+  background-color: #c30000;
+}
+
+.header__link {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  column-gap: 3rem;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.header__icon {
+  color: #fff;
+  font-size: 1.5rem;
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sidebar__icon {
+  color: var(--navds-color-blue-50);
+  height: 5rem;
+  width: 5rem;
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  align-items: center;
+}
+
+.sidebar__icon:focus {
+  outline: 2px solid var(--navds-color-blue-50);
+  outline-offset: -2px;
+}
+
+.header__icon--hidden {
+  visibility: hidden;
+}
+
+.header__link:focus {
+  outline: 2px solid white;
+  outline-offset: -2px;
+}
+
+.header__link-title {
+  color: white;
+  font-size: var(--navds-font-size-heading-large);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-large);
+}
+
+.sidebar {
+  display: flex;
+  grid-area: sidebar;
+  flex-direction: column;
+  width: 300px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: var(--bg-secondary);
+  box-shadow: inset -2px 0px 0px var(--sidebar-shadow);
+  flex-grow: 1;
+}
+
+.contentWrapper {
+  grid-area: content;
+  overflow-y: auto;
+  overflow: visible;
+  margin: 0 auto 0 0;
+  width: 100%;
+}
+
+.content {
+  width: 100%;
+}
+
+@media (max-width: 959px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 447px) {
+  .header__link {
+    column-gap: 1rem;
+  }
+}
+
+.sidebar__mobile {
+  z-index: 999;
+  display: flex;
+  background-color: var(--bg-secondary);
+  flex-direction: column;
+  color: var(--text-color);
+  overflow-y: auto;
+  position: fixed;
+  left: -300px;
+  min-height: 100vh;
+  border-right: var(--sidebar-divider);
+}
+
+.sidebar__mobile--open {
+  transition: transform 250ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
+  transform: translateX(100%);
+}
+
+.sidebar--overlay {
+  display: block;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  transition: background 0.15s linear;
+}
+
+.sidebar--overlay--fade {
+  background: rgba(0, 0, 0, 0.5);
+}

docs/components/layout/sidebar/Sidebar.tsx

@@ -0,0 +1,51 @@
+import Link from "next/link";
+import cl from "classnames";
+import { Close } from "@navikt/ds-icons";
+import style from "../layout.module.css";
+
+interface SidebarProps {
+  classname?: string;
+  sidebar: boolean;
+  small: boolean;
+  onSidebarChange: (x: boolean) => void;
+}
+
+const Sidebar = ({
+  sidebar,
+  small,
+  onSidebarChange,
+  ...props
+}: SidebarProps) => {
+  return (
+    <>
+      {sidebar && small && (
+        <div
+          onClick={() => onSidebarChange(false)}
+          className={cl(style["sidebar--overlay"], {
+            [style["sidebar--overlay--fade"]]: sidebar,
+          })}
+        />
+      )}
+      <div
+        className={cl(style.sidebar, {
+          [style.sidebar__mobile]: small,
+          [style["sidebar__mobile--open"]]: small && sidebar,
+        })}
+      >
+        {small && sidebar && (
+          <button
+            onClick={() => onSidebarChange(!sidebar)}
+            className={style.sidebar__icon}
+          >
+            <Close />
+          </button>
+        )}
+        <Link href="/">Home</Link>
+        <Link href="/komponenter">Komponenter</Link>
+        <Link href="/komponenter/button">Button</Link>
+      </div>
+    </>
+  );
+};
+
+export default Sidebar;

docs/components/npm/Npm.tsx

@@ -0,0 +1,61 @@
+import getConfig from "next/config";
+import Import from "../code/Import";
+import style from "./npm.module.css";
+
+const Npm = ({
+  packName,
+  imports,
+  namedExport,
+}: {
+  packName: string;
+  imports: string | string[];
+  namedExport?: boolean;
+}) => {
+  const { publicRuntimeConfig } = getConfig();
+
+  const packs = publicRuntimeConfig.packages.filter(
+    (pack) => pack.name === packName
+  );
+
+  return (
+    <div>
+      {packs.map(({ name, data }) => (
+        <div key={name}>
+          <span className={style.badges}>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://www.npmjs.com/package/${name}`}
+            >
+              <img src={`https://badgen.net/npm/v/${name}`} alt="123" />
+            </a>
+
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://bundlephobia.com/result?p=${name}`}
+            >
+              <img
+                src={`https://badgen.net/bundlephobia/tree-shaking/${name}`}
+                alt="123"
+              />
+            </a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://bundlephobia.com/result?p=${name}`}
+            >
+              <img
+                src={`https://badgen.net/bundlephobia/min/${name}`}
+                alt="123"
+              />
+            </a>
+          </span>
+          <Import from={name} imports={imports} namedExport={namedExport} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Npm;

docs/components/npm/npm.module.css

@@ -0,0 +1,5 @@
+.badges {
+  display: flex;
+  column-gap: 0.5rem;
+  flex-wrap: wrap;
+}

docs/components/tabs/Tabs.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import style from "./tabs.module.css";
+import cl from "classnames";
+
+interface TabsProps {
+  onChange: (tab: number) => void;
+  tabs: string[];
+}
+
+const Tabs = ({ onChange, tabs, ...props }: TabsProps) => {
+  const [tab, setTab] = useState(0);
+
+  const handleClick = (x: number) => {
+    onChange(x);
+    setTab(x);
+  };
+
+  return (
+    <ul className={style.ul}>
+      {tabs.map((t, x) => (
+        <li key={t + x} className={style.li}>
+          <button
+            className={cl(style.button, { [style.buttonActive]: x === tab })}
+            onClick={() => handleClick(x)}
+          >
+            {t}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Tabs;