Lerna versionbump [ci skip]

- @navikt/ds-css@0.2.0 - @navikt/ds-icons@0.2.0 - @navikt/ds-react@0.2.0
Fjernet css-imports i komponenter (vnext) (#1030 )
2026-10-17 03:02:03 +00:00 · 2021-03-10 13:53:25 +00:00 · 2021-03-10 14:36:58 +01:00 · 2021-03-10 13:51:11 +01:00 · 2021-03-10 10:07:50 +01:00 · 2021-03-10 10:03:14 +01:00
216 changed files with 4511 additions and 3861 deletions
@@ -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}}
@@ -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
@@ -1 +1 @@
-_
+_
@@ -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"],
 };
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import NavTheme from "./theme.js";
+
+addons.setConfig({
+  theme: NavTheme,
+});
@@ -1,14 +1,13 @@
 import "nav-frontend-core";
-import "@navikt/ds-css/baseline/index.css";
+import "@navikt/ds-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: "",
    },
  },
 };
@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-react/Introduksjon" />
+
+# Ta i bruk `@navikt/ds-react` pakken
+
+## Oppsett
+
+```bash
+yarn install @navikt/ds-react
+```
+
+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/#/
+
+```bash
+import "@navikt/ds-tokens";
+```
@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "NAV Designsystem",
+});
@@ -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);
+}
@@ -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);
-}
@@ -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;
 }
@@ -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);
-  }
-}
@@ -1,2 +0,0 @@
-@import "./grid.css";
-@import "./cell.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";
@@ -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);
+}
@@ -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;
-}
@@ -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;
-}
@@ -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);
-}
@@ -1 +0,0 @@
-@import "./layout.css";
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.1.15",
+  "version": "0.2.0",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -15,8 +15,15 @@
    "type": "git",
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
-  "dependencies": {
-    "@navikt/ds-tokens": "0.1.0-beta.6",
-    "normalize.css": "^8.0.1"
+  "main": "./dist/index.css",
+  "scripts": {
+    "build": "postcss --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"
  }
 }
@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -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,
@@ -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",
@@ -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
  },
@@ -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;
@@ -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) {
@@ -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
+  }
 }
@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="ds-icons/Introduksjon" />
+
+# Ta i bruk ikonpakken `@navikt/ds-icons`
+
+Alle ikoner kan bli funnet her https://design.nav.no/resources/icons
+
+## Oppsett
+
+```bash
+yarn install @navikt/ds-icons
+```
+
+```bash
+Import { Expand } from `@navikt/ds-icons`;
+
+<Expand
+	aria-label="Åpne meny"
+	role="img"
+	focusable="false"
+/>
+```
@@ -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",
+};
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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"]
+}
@@ -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"]
 }
@@ -3,8 +3,7 @@ import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";

 import { Expand } from "@navikt/ds-icons";
-import "@navikt/ds-css/accordion/index.css";
-import { guid } from "nav-frontend-js-utils";
+import { v4 as uuidv4 } from "uuid";

 export interface AccordionProps
  extends React.HTMLAttributes<HTMLButtonElement> {
@@ -28,8 +27,8 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
    },
    ref
  ) => {
-    const contentId = useRef(guid());
-    const buttonId = useRef(guid());
+    const contentId = useRef(uuidv4());
+    const buttonId = useRef(uuidv4());
    const [internalOpen, setInternalOpen] = useState<boolean>(open);

    useEffect(() => {
@@ -0,0 +1,2 @@
+export { default as Accordion } from "./Accordion";
+export * from "./Accordion";
@@ -1,18 +0,0 @@
-{
-  "name": "@navikt/ds-react-accordion",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-collapse": "^5.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Accordion from "./Accordion";
-export default Accordion;
-export { AccordionProps } from "./Accordion";
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import Accordion from "../src/index";
+import { Accordion } from "../index";

 export default {
-  title: "@navikt/accordion",
+  title: "ds-react/accordion",
  component: Accordion,
 };

@@ -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";
@@ -0,0 +1,2 @@
+export { default as Alert } from "./Alert";
+export * from "./Alert";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-alert",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navds/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Alert from "./Alert";
-export default Alert;
-export { AlertProps } from "./Alert";
@@ -1,8 +1,8 @@
 import React from "react";
-import Alert from "../src/index";
+import { Alert } from "../index";

 export default {
-  title: "@navikt/alert",
+  title: "ds-react/alert",
  component: Alert,
 };

@@ -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";
@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export * from "./Button";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-button",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,3 +0,0 @@
-import Button from "./Button";
-export default Button;
-export { ButtonProps } from "./Button";
@@ -1,8 +1,8 @@
 import React from "react";
-import Button from "../src/index";
+import { Button } from "../index";

 export default {
-  title: "@navikt/button",
+  title: "ds-react/button",
  component: Button,
 };

@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -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>(
@@ -0,0 +1,2 @@
+export { default as ContentContainer } from "./ContentContainer";
+export * from "./ContentContainer";
@@ -1,19 +0,0 @@
-{
-  "name": "@navikt/ds-react-content-container",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6",
-    "react-modal": "^3.11.2",
-    "react-merge-refs": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-export {
-  default as ContentContainer,
-  ContentContainerProps,
-} from "./ContentContainer";
@@ -1,11 +1,11 @@
 import * as React from "react";
-import { ContentContainer } from "../src/index";
-import { Element } from "nav-frontend-typografi";
+import { ContentContainer } from "../index";
+import { Text } from "../../index";
 import "./style.css";
 import { useEffect } from "react";

 export default {
-  title: "@navikt/content-container",
+  title: "ds-react/content-container",
  component: ContentContainer,
  decorators: [
    (Story) => {
@@ -41,7 +41,7 @@ export default {
 export const All = () => {
  return (
    <ContentContainer className={"navds-story-content-container"}>
-      <Element>-- Innhold --</Element>
+      <Text size="medium">-- Innhold --</Text>
    </ContentContainer>
  );
 };
@@ -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> {
@@ -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>(
@@ -0,0 +1,4 @@
+export { default as Cell } from "./Cell";
+export * from "./Cell";
+export { default as Grid } from "./Grid";
+export * from "./Grid";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-grid",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,2 +0,0 @@
-export { default as Cell, CellProps } from "./Cell";
-export { default as Grid, GridProps } from "./Grid";
@@ -1,10 +1,10 @@
 import * as React from "react";
-import { Grid, Cell } from "../src/index";
-import { ContentContainer } from "../../content-container/src";
+import { Grid, Cell } from "../index";
+import { ContentContainer } from "../../index";
 import "./styles.css";

 export default {
-  title: "@navikt/grid",
+  title: "ds-react/grid",
  component: { Grid, Cell },
  parameters: {
    layout: "fullscreen",
@@ -1,11 +1,11 @@
-export { AccordionProps, default as Accordion } from "./accordion/src/index";
-export { AlertProps, default as Alert } from "./alert/src/index";
-export { ButtonProps, default as Button } from "./button/src/index";
+export { Accordion, AccordionProps } from "./accordion/index";
+export { Alert, AlertProps } from "./alert/index";
+export { Button, ButtonProps } from "./button/index";
 export {
  ContentContainer,
  ContentContainerProps,
-} from "./content-container/src/index";
-export { Cell, CellProps, Grid, GridProps } from "./grid/src/index";
+} from "./content-container/index";
+export { Cell, CellProps, Grid, GridProps } from "./grid/index";
 export {
  InternalHeader,
  InternalHeaderProps,
@@ -13,12 +13,12 @@ export {
  InternalHeaderTitleProps,
  InternalHeaderUser,
  InternalHeaderUserProps,
-} from "./internal-header/src/index";
-export { Layout, LayoutProps, SectionProps } from "./layout/src/index";
-export { default as Link, LinkProps } from "./link/src/index";
-export { default as Modal, ModalProps } from "./modal/src/index";
-export { default as Popover, PopoverProps } from "./popover/src/index";
-export { default as Tag, TagProps } from "./tag/src/index";
+} from "./internal-header/index";
+export { Layout, LayoutProps, SectionProps } from "./layout/index";
+export { Link, LinkProps } from "./link/index";
+export { Modal, ModalProps } from "./modal/index";
+export { Popover, PopoverProps } from "./popover/index";
+export { Tag, TagProps } from "./tag/index";
 export {
  Heading,
  HeadingProps,
@@ -26,5 +26,5 @@ export {
  Paragraph,
  Text,
  TextProps,
-} from "./typography/src/index";
-export { OverridableComponent } from "./util/src/index";
+} from "./typography/index";
+export { OverridableComponent } from "./util/index";
@@ -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;
@@ -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;
@@ -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> {
@@ -0,0 +1,6 @@
+export { default as InternalHeader } from "./InternalHeader";
+export * from "./InternalHeader";
+export { default as InternalHeaderTitle } from "./InternalHeaderTitle";
+export * from "./InternalHeaderTitle";
+export { default as InternalHeaderUser } from "./InternalHeaderUser";
+export * from "./InternalHeaderUser";
@@ -1,20 +0,0 @@
-{
-  "name": "@navikt/ds-react-internalheader",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "react-router-dom": "^5.2.0"
-  }
-}
@@ -1,12 +0,0 @@
-export {
-  default as InternalHeader,
-  InternalHeaderProps,
-} from "./InternalHeader";
-export {
-  default as InternalHeaderTitle,
-  InternalHeaderTitleProps,
-} from "./InternalHeaderTitle";
-export {
-  default as InternalHeaderUser,
-  InternalHeaderUserProps,
-} from "./InternalHeaderUser";
@@ -4,10 +4,10 @@ import {
  InternalHeader,
  InternalHeaderTitle,
  InternalHeaderUser,
-} from "../src/index";
+} from "../index";

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

@@ -1,8 +1,11 @@
-import React, { Children } from "react";
-import { forwardRef, ForwardRefExoticComponent, HTMLAttributes } from "react";
 import cl from "classnames";
+import React, {
+  Children,
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+} from "react";
 import { default as Section, SectionProps } from "./Section";
-import "@navikt/ds-css/layout/index.css";

 export interface LayoutWithSubComponents
  extends ForwardRefExoticComponent<LayoutProps> {
@@ -0,0 +1,3 @@
+export { default as Layout } from "./Layout";
+export * from "./Layout";
+export * from "./Section";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-layout",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-import { default as Layout, LayoutProps } from "./Layout";
-import { SectionProps } from "./Section";
-
-export { Layout, LayoutProps, SectionProps };
@@ -1,14 +1,14 @@
 import * as React from "react";
-import { Layout } from "../src/index";
+import { useEffect } from "react";
+import { ContentContainer } from "../../index";
+import { Layout } from "../index";
 import { Left } from "./components/sections/Left";
 import { Main } from "./components/sections/Main";
 import { Right } from "./components/sections/Right";
-import { ContentContainer } from "../../content-container/src";
-import { useEffect } from "react";
 import "./components/styles.css";

 export default {
-  title: "@navikt/layout/Article",
+  title: "ds-react/layout/Article",
  component: { Layout },
  decorators: [
    (Story) => {
@@ -1,20 +1,19 @@
 import * as React from "react";
-import Lenke from "nav-frontend-lenker";
-import { Button } from "../../../../lib";
+import { Button, Link } from "../../../../index";

 export const Left = () => (
  <ul className={"navds-story-menu"}>
    <li>
-      <Lenke href={"#"}>Iusto odio dignissimos</Lenke>
+      <Link href={"#"}>Iusto odio dignissimos</Link>
    </li>
    <li>
-      <Lenke href={"#"}>Nam libero tempore</Lenke>
+      <Link href={"#"}>Nam libero tempore</Link>
    </li>
    <li>
-      <Lenke href={"#"}>Reiciendis voluptatibus</Lenke>
+      <Link href={"#"}>Reiciendis voluptatibus</Link>
    </li>
    <li>
-      <Lenke href={"#"}>Earum rerum</Lenke>
+      <Link href={"#"}>Earum rerum</Link>
    </li>
    <li>
      <Button>Søk ...</Button>
@@ -1,57 +1,60 @@
 import * as React from "react";
-import { Heading } from "../../../../lib/typography/src";
-import { Normaltekst } from "nav-frontend-typografi";
-import { Cell, Grid } from "../../../../grid/src";
-import Lenke from "nav-frontend-lenker";
-import Snakkeboble from "nav-frontend-snakkeboble";
-import { Button } from "../../../../lib";
+import {
+  Button,
+  Cell,
+  Grid,
+  Heading,
+  Link,
+  Paragraph,
+  Alert,
+} from "../../../../index";

 export const Main = () => (
  <div>
    <Heading className={"navds-story-section"} level={1} size={"xl"}>
      Quis autem
    </Heading>
-    <Normaltekst className={"navds-story-section"}>
+    <Paragraph className={"section"}>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
      fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
      sequi nesciunt.
-    </Normaltekst>
-    <Grid className={"navds-story-section"}>
+    </Paragraph>
+    <Grid className={"section"}>
      <Cell xs={6}>
-        <Lenke href={"#"}>Ea voluptate</Lenke>
+        <Link href={"#"}>Ea voluptate</Link>
      </Cell>
      <Cell xs={6}>
-        <Lenke href={"#"}>Quis autem</Lenke>
+        <Link href={"#"}>Quis autem</Link>
      </Cell>
    </Grid>
-    <Normaltekst className={"navds-story-section"}>
+    <Paragraph className={"section"}>
      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
      consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.{" "}
-    </Normaltekst>
-    <Snakkeboble className={"navds-story-section"}>
+    </Paragraph>
+    <Alert variant="info" className={"section"}>
      Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in
      faucibus.
-    </Snakkeboble>
-    <Normaltekst className={"navds-story-section"}>
+    </Alert>
+    <Paragraph className={"section"}>
      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
      suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
      pariatur?
-    </Normaltekst>
-    <Heading className={"navds-story-section"} level={2} size={"lg"}>
+    </Paragraph>
+    <Heading className={"section"} level={2} size={"xl"}>
      Nulla pariatur?
    </Heading>
-    <Normaltekst className={"navds-story-section"}>
+    <Paragraph className={"section"}>
      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
      imperdiet erat. Morbi sodales bibendum volutpat. Sed malesuada risus
      lorem, in elementum purus commodo eget. Mauris maximus congue efficitur.
      Cras vestibulum id metus sed pellentesque.
-    </Normaltekst>
+    </Paragraph>

    <table className={"section tabell tabell--stripet"}>
      <thead>
@@ -83,23 +86,23 @@ export const Main = () => (
        </tr>
      </tbody>
    </table>
-    <Normaltekst className={".navds-story-section"}>
+    <Paragraph className={"section"}>
      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
      commodo tortor, eget mollis nunc augue eu elit. Ut nec fringilla odio, eu
      scelerisque tellus.
-    </Normaltekst>
-    <Normaltekst className={"navds-story-section"}>
+    </Paragraph>
+    <Paragraph className={"section"}>
      Proin nec luctus justo. Pellentesque et dapibus libero. Phasellus non elit
      eget justo mattis venenatis. In hac habitasse platea dictumst. Proin nunc
      ipsum, ornare eu pretium in, aliquet non velit. Nullam efficitur tincidunt
      leo, vel tempus nibh consectetur sed. Etiam porttitor finibus erat varius
      rhoncus. Sed ac augue imperdiet, porta tellus vitae, aliquam est.
-    </Normaltekst>
-    <Normaltekst className={"navds-story-section"}>
+    </Paragraph>
+    <Paragraph className={"section"}>
      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Normaltekst>
+    </Paragraph>
    <Button>Søk ...</Button>
  </div>
 );
@@ -1,8 +1,8 @@
 import * as React from "react";
-import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
+import { Accordion } from "../../../../index";

 export const Right = () => (
  <div>
-    <Ekspanderbartpanel tittel={"Snareveier"}>Test</Ekspanderbartpanel>
+    <Accordion heading={"Snareveier"}>Test</Accordion>
  </div>
 );
@@ -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> {
@@ -0,0 +1,2 @@
+export { default as Link } from "./Link";
+export * from "./Link";
@@ -1,17 +0,0 @@
-{
-  "name": "@navikt/ds-react-link",
-  "author": "NAV Designsystem team",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
-  },
-  "dependencies": {
-    "@navikt/ds-css": "0.1.0-beta.1",
-    "classnames": "^2.2.6"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
-  }
-}
@@ -1,4 +0,0 @@
-import Link from "./Link";
-export default Link;
-
-export { LinkProps } from "./Link";
@@ -1,8 +1,8 @@
 import React from "react";
-import Link from "../src/index";
+import { Link } from "../index";
 import { Add } from "@navikt/ds-icons";
 export default {
-  title: "@navikt/link",
+  title: "ds-react/link",
  component: Link,
 };
Author	SHA1	Message	Date
github-actions[bot]	709c20ed6d	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.0 - @navikt/ds-icons@0.2.0 - @navikt/ds-react@0.2.0	2021-03-10 13:53:25 +00:00
Ken	6530211445	Fjernet css-imports i komponenter (vnext) (#1030 ) * fjernet ds-react dep for css * fjernet styling fra alle komponenter * minified css * flyttet normalize fra node til lokalt * oppdatert pakke-versjoner * fikset website deps * Update preview.js * yarn lock * flyttet normalize til top * fikset dist og sourcemap * yarn lock * fikset css imports * storybook bruker nå kompilert index.css * Endret css naming fra index -> komponentnavn (#1032) * renamet css fra index -> navn * flyttet css ut fra mapper * css til beta	2021-03-10 14:36:58 +01:00
Ken	88a665f772	Tree-shakable ds-react og ds-icons (#1033 ) * oppdatert ikonpakke for esm støttte * ds-react med esm exports * opprydding package.json, sideeffects * oppdatert ds-react * target es2015 * oppdatert ds-icons for esm * oppdatert ds-icons for esm * oppdatert ds-react script * oppdatert clean script * eslint fiks * minor bump for pakker * yarn lock	2021-03-10 13:51:11 +01:00
Ken	dc2b063fda	Update CHANGELOG.md	2021-03-10 10:07:50 +01:00
Ken	1414f85484	Update CHANGELOG.md	2021-03-10 10:03:14 +01:00
github-actions[bot]	2fd93bb2be	Lerna versionbump [ci skip] - nav-frontend-skjema-style@2.1.0 - nav-frontend-skjema@3.1.0	2021-03-10 08:47:58 +00:00
Ken	1360789bc3	Endret feil-styling og state-handling for skjema-komponenter (#1018 ) * bedre feilhåndtering for skjemaelementer * oppdatert disabled + feil state * yarn lockfile * oppdatert stories * oppdatert examples * oppdatert yarn lock * oppdatert versions * oppdatert versions-2 * oppdatert version * fikset state-styling * yarn lock	2021-03-10 09:34:13 +01:00
Ken	cecc905f58	Oppgradert storybook (#1027 ) * oppdatert stories * oppdatert nav-frontend stories * oppdatert warnings, theme * oppdatert ikoner stories * oppdatert chromatic script * flyttet env variabel * oppdatert yarn lock	2021-03-08 13:49:40 +01:00
Audun Fauchald Strandandsnyk-bot	1cda942e61	fix: package.json to reduce vulnerabilities (#1028 ) The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-GLOBPARENT-1016905 Co-authored-by: snyk-bot <snyk-bot@snyk.io>	2021-03-08 13:45:32 +01:00
Ken	ab3a4289ea	Omskrevet hvordan react-docgen genereres (#1029 ) * ny generering av docs * gatsby bruker nå nye props * flyttet docgen til gatsby build steg * fjernet docgen copi * yarn lock	2021-03-08 12:00:43 +01:00
Ken	9bafdd3c06	Satt opp nextjs for ny nettside (#1031 ) * setup-ready * flyttet useRoute * config testing nextjs * renamet til docs * opprydding * yarn lock * oppdatert readme	2021-03-08 11:55:09 +01:00
github-actions[bot]	90c1b3ce0e	Lerna versionbump [ci skip] - @navikt/ds-icons@0.1.7 - @navikt/ds-react@0.1.2	2021-03-05 13:16:16 +00:00
Andreas NordahlandKen	d5d2996896	Display font size of each typography component in clear text in doc (#1025 ) * Display font size of each typography component in clear text in doc * oppdatert font-eksempel Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-05 14:01:50 +01:00
Ken	7c63f23dd0	Sync ikoner fra Figma (#1026 ) * oppdatert ikoner * genererer riktige farger for alle path elementer	2021-03-05 14:01:28 +01:00
github-actions[bot]	7be4a72afc	Lerna versionbump [ci skip] - @navikt/ds-css@0.1.17 - @navikt/ds-react@0.1.1	2021-03-05 08:28:46 +00:00
Ken	5c64474a59	Fikset gatsby-bug, småfeil (#1024 ) * fikset bug, fikset småfeil i dependencies * oppdatert yarn lock * oppdatert dep	2021-03-05 09:14:56 +01:00
github-actions[bot]	5f132bf445	Lerna versionbump [ci skip] - @navikt/ds-css@0.1.16 - @navikt/ds-react@0.1.0 - @navikt/ds-tokens@0.1.0	2021-03-02 14:20:09 +00:00
Ken	6eedb1c78d	Oppdatert pakkeoppsett for vnext (#1015 )	2021-03-02 15:06:29 +01:00