Lerna versionbump [ci skip]

- @navikt/ds-css@0.2.2
 - @navikt/ds-react@0.2.4
 - @navikt/ds-tokens@0.1.1

.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

.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/accordion-menu.css

@@ -0,0 +1,113 @@
+/*******************
+ * .accordion-menu *
+ *******************/
+
+.navds-accordion-menu__html {
+  scroll-behavior: smooth;
+}
+
+.navds-accordion-menu__nav {
+  padding: var(--navds-layout-padding-small) 0;
+  overflow: hidden;
+}
+
+.navds-accordion-menu__container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.navds-accordion-menu__title {
+  margin: var(--navds-layout-padding-small) 0;
+  padding: 0 var(--navds-layout-padding-small);
+}
+
+.navds-accordion-menu__item {
+  position: relative;
+  margin: 0;
+}
+
+.navds-accordion-menu__item--active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+  background-color: var(--navds-color-blue-50);
+}
+
+.navds-link.navds-accordion-menu__link,
+.navds-link.navds-accordion-menu__button {
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--navds-layout-padding-small);
+  background: none;
+  cursor: pointer;
+}
+
+.navds-link.navds-accordion-menu__link--active:not(:active):not(:focus) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--navds-color-text-primary);
+  text-decoration: none;
+}
+
+.navds-accordion-menu__chevron {
+  margin-right: 0.25rem;
+  font-size: 1rem;
+}
+
+.navds-accordion-menu__button {
+  display: flex;
+  clear: both;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  width: 100%;
+}
+
+.navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+.navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+  padding-left: calc(var(--navds-layout-padding-small) + 2rem);
+}
+
+@media (min-width: 448px) {
+  .navds-accordion-menu__nav {
+    padding: var(--navds-layout-padding-medium-and-larger) 0;
+  }
+
+  .navds-accordion-menu__title {
+    padding: 0 var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-link.navds-accordion-menu__link,
+  .navds-link.navds-accordion-menu__button {
+    padding: 0 var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-medium-and-larger) + 2rem);
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-accordion-menu__nav {
+    padding: var(--navds-layout-padding-small) 0;
+  }
+
+  .navds-accordion-menu__title {
+    padding: 0 var(--navds-layout-padding-small);
+  }
+
+  .navds-link.navds-accordion-menu__link,
+  .navds-link.navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-small));
+  }
+
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-small) + 1rem);
+  }
+}

@navikt/ds-css/accordion.css

@@ -24,7 +24,6 @@
 .navds-accordion__chevron {
   width: 1.25em;
   height: 1.25em;
-  transition: 300ms transform;
   transform: rotateZ(0deg);
   flex-shrink: 0;
   margin-left: 1rem;

@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,14 @@
+@import "baseline/baseline.css";
+@import "accordion.css";
+@import "accordion-menu.css";
+@import "alert.css";
+@import "button.css";
+@import "content-container.css";
+@import "grid.css";
+@import "internal-header.css";
+@import "layouts.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/layout/layout.css

@@ -1,117 +0,0 @@
-.navds-layout__container {
-  display: grid;
-  grid-gap: var(--navds-grid-gutter-small);
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.navds-layout__container--1-columns,
-.navds-layout__container--2-columns {
-  max-width: 60rem;
-}
-
-.navds-layout__container--3-columns {
-  max-width: 79.5rem;
-}
-
-.navds-layout__section--white > * {
-  background: white;
-}
-
-.navds-layout__section--padding > * {
-  padding: var(--navds-layout-padding-small);
-}
-
-.navds-layout__section--sticky > * {
-  top: var(--navds-grid-gutter-small);
-  position: sticky;
-}
-
-.navds-layout__section--left,
-.navds-layout__section--main,
-.navds-layout__section--right {
-  grid-column: span 12;
-}
-
-@media (min-width: 448px) {
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--left > *,
-  .navds-layout__section--padding.navds-layout__section--main > *,
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-medium-and-larger);
-  }
-}
-
-@media (min-width: 648px) {
-  .navds-layout__container {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-
-  .navds-layout__section--padding.navds-layout__section--right > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  /* prettier-ignore */
-  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 10;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--left,
-  .navds-layout__container--2-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 4;
-  }
-
-  .navds-layout__container--2-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 2;
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-column: span 4;
-    grid-row: 1 / span 2;
-  }
-}
-
-@media (min-width: 960px) {
-  .navds-layout__section--padding.navds-layout__section--left > * {
-    padding: var(--navds-layout-padding-small);
-  }
-
-  .navds-layout__container--1-columns > .navds-layout__section--main {
-    grid-column: span 8;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--left {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--main {
-    grid-row: 1;
-    grid-column: span 6;
-  }
-
-  .navds-layout__container--3-columns > .navds-layout__section--right {
-    grid-row: 1;
-    grid-column: span 3;
-  }
-}

@navikt/ds-css/layouts.css

@@ -0,0 +1,284 @@
+/*****************
+ * .navds-layout *
+ *****************/
+
+.navds-layout__container {
+  display: grid;
+  grid-gap: var(--navds-grid-gutter-small);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.navds-layout__container--1-columns,
+.navds-layout__container--2-columns {
+  max-width: 60rem;
+}
+
+.navds-layout__container--3-columns {
+  max-width: 79.5rem;
+}
+
+.navds-layout__section--white > * {
+  background: white;
+}
+
+.navds-layout__section--padding > * {
+  padding: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--sticky > * {
+  top: calc(var(--navds-grid-gutter-small) + var(--decorator-sticky-offset));
+  position: sticky;
+}
+
+.navds-layout__section > *:not(:last-child) {
+  margin-bottom: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--left,
+.navds-layout__section--main,
+.navds-layout__section--right {
+  grid-column: span 12;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section > *:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--left > *,
+  .navds-layout__section--padding.navds-layout__section--main > *,
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+}
+
+@media (min-width: 648px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  /* prettier-ignore */
+  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 10;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--left,
+  .navds-layout__container--2-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 4;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 2;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-column: span 4;
+    grid-row: 1 / span 2;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 6;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+}
+
+/*************************
+ * .navds-layout__header *
+ ************************/
+
+.navds-layout__header {
+  background: var(--navds-layout-background-white);
+}
+
+.navds-layout__header-content {
+  grid-column: span 12;
+}
+
+.navds-layout__header-title {
+  margin: 0.25rem 0.85rem;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__header-title {
+    margin: 0.25rem 0;
+  }
+}
+
+/*************************
+ * .navds-layout__body *
+ ************************/
+
+.navds-layout__body {
+  background: var(--navds-layout-background-gray);
+}
+
+.navds-layout__body--white {
+  background: var(--navds-layout-background-white);
+}
+
+@media (min-width: 648px) {
+  .navds-layout__body--2-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__body--3-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+/*************************
+ * .navds-layout__panel *
+ ************************/
+
+.navds-layout__panel {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  display: inline-block;
+  padding: var(--navds-layout-padding-small);
+  background: white;
+  padding-top: 2.5rem;
+}
+
+.navds-layout__panel--icon-margin {
+  margin-top: 2rem;
+}
+
+.navds-layout__panel:not(:last-child) {
+  margin-bottom: var(--navds-grid-gutter-small);
+}
+
+.navds-layout__panel--highlight {
+  box-shadow: rgb(102, 164, 220) 0 0 0 0.15rem;
+}
+
+.navds-layout__panel-content {
+  margin-top: 1.25rem;
+}
+
+.navds-layout__panel-icon {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -2rem;
+  left: 0;
+}
+
+.navds-layout__panel-icon svg,
+.navds-layout__panel-icon img {
+  background: #c7dbed;
+  border-radius: 2rem;
+  padding: 1rem;
+  height: 4rem;
+  width: 4rem;
+}
+
+.navds-layout__panel-title {
+  margin: 0.5rem 0;
+}
+
+.navds-layout__panel-copy {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.navds-layout__panel-copy-icon {
+  color: var(--navds-color-text-link);
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-layout__panel-popover-content {
+  margin: 0.5rem;
+}
+
+.navds-layout__panel-copy-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: transparent;
+  margin: 0 1rem 0 0;
+  padding-left: 0;
+  padding-right: 0;
+  border: 0;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__panel {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-layout__panel:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+@media (min-width: 648px) {
+  /* prettier-ignore */
+  .navds-layout__container--2-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 960px) {
+  /* prettier-ignore */
+  .navds-layout__container--3-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+
+  .navds-layout__panel--icon-margin:not(:first-child) {
+    margin-top: 2rem;
+  }
+}

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.1.17",
+  "version": "0.2.2",
   "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.1",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.2.7",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^14.0.0"
   }
 }

@navikt/ds-css/popover.css

@@ -4,11 +4,6 @@
   box-shadow: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);
   border: var(--navds-border-default);
   border-radius: 2px;
-  padding: 1rem;
-}
-
-.navds-popover--small {
-  padding: 0.5rem;
 }
 
 .navds-popover--hidden {

@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/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.7",
+  "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/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-menu/ActiveAnchorStore.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useCallback, useContext, useState } from "react";
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export interface ActiveAnchorStore {
+  anchors: string[];
+  activeAnchor?: string;
+  registerAnchor: (anchor: string) => void;
+  unregisterAnchor: (anchor: string) => void;
+  setActiveAnchor: (anchor: string) => void;
+}
+
+export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
+export const ActiveAnchorProvider = (props: Props) => {
+  const { children } = props;
+  const [anchors, setAnchors] = useState<string[]>([]);
+  const [activeAnchor, setActiveAnchor] = useState<string>();
+
+  return (
+    <ActiveAnchorContext.Provider
+      value={{
+        anchors,
+        activeAnchor,
+        registerAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => [...anchors, anchor]);
+        }, []),
+        unregisterAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
+        }, []),
+        setActiveAnchor: useCallback((anchor) => {
+          setActiveAnchor(anchor);
+        }, []),
+      }}
+    >
+      {children}
+    </ActiveAnchorContext.Provider>
+  );
+};
+export const useStore = () => useContext(ActiveAnchorContext);

@navikt/ds-react/accordion-menu/Collapsable.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, HTMLAttributes, useState } from "react";
+import cl from "classnames";
+import { Expand } from "@navikt/ds-icons";
+
+export interface AccordionMenuCollapsableProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  title: string;
+  active?: boolean;
+}
+
+const Collapsable = forwardRef<
+  HTMLButtonElement,
+  AccordionMenuCollapsableProps
+>(({ children, active, title, className, ...rest }, ref) => {
+  const [open, setOpen] = useState(active || false);
+  return (
+    <li
+      className={cl(
+        "navds-accordion-menu__item",
+        "navds-accordion-menu__dropdown"
+      )}
+    >
+      <button
+        ref={ref}
+        onClick={() => setOpen(!open)}
+        className={cl("navds-link", "navds-accordion-menu__button", className)}
+        {...rest}
+      >
+        {title}
+        <Expand
+          className={cl(
+            "navds-accordion__chevron",
+            `navds-accordion__chevron--${open ? "up" : "down"}`,
+            `navds-accordion-menu__chevron`
+          )}
+        />
+      </button>
+      {open && (
+        <ul
+          className={cl(
+            "navds-accordion-menu__container",
+            "navds-accordion-menu__dropdown--content"
+          )}
+        >
+          {children}
+        </ul>
+      )}
+    </li>
+  );
+});
+
+export default Collapsable;

@navikt/ds-react/accordion-menu/Item.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef, useEffect } from "react";
+import { useStore } from "./ActiveAnchorStore";
+import { OverridableComponent } from "../util";
+import cl from "classnames";
+
+export interface AccordionMenuItemProps {
+  props: {
+    children: React.ReactNode;
+    active?: boolean;
+  } & React.HTMLAttributes<HTMLLIElement>;
+  defaultComponent: "a";
+}
+
+const Item: OverridableComponent<AccordionMenuItemProps> = forwardRef(
+  (
+    {
+      children,
+      component: Component = "a",
+      active = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const anchor = rest.href && rest.href.split("#")[1];
+    const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
+    const isActive = active || (anchor && activeAnchor === anchor) || false;
+
+    useEffect(() => {
+      if (anchor) {
+        const target = document.getElementById(anchor);
+        if (target) {
+          registerAnchor(anchor);
+          return () => {
+            unregisterAnchor(anchor);
+          };
+        }
+      }
+    }, [anchor, registerAnchor, unregisterAnchor]);
+
+    return (
+      <li
+        className={cl(
+          "navds-accordion-menu__item",
+          isActive && "navds-accordion-menu__item--active"
+        )}
+      >
+        <Component
+          ref={ref}
+          className={cl("navds-link", "navds-accordion-menu__link", className, {
+            "navds-accordion-menu__link--active": isActive,
+          })}
+          {...rest}
+        >
+          {children}
+        </Component>
+      </li>
+    );
+  }
+);
+
+export default Item;

@navikt/ds-react/accordion-menu/Menu.tsx

@@ -0,0 +1,68 @@
+import React, {
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  useEffect,
+} from "react";
+import { default as Item, AccordionMenuItemProps } from "./Item";
+import { default as Collapsable } from "./Collapsable";
+import { AccordionMenuCollapsableProps } from "./Collapsable";
+import { Heading, OverridableComponent } from "../index";
+import { ActiveAnchorProvider } from "./ActiveAnchorStore";
+import Nav from "./Nav";
+import cl from "classnames";
+
+export interface LayoutWithSubComponents
+  extends ForwardRefExoticComponent<AccordionMenuProps> {
+  Collapsable: ForwardRefExoticComponent<AccordionMenuCollapsableProps>;
+  Item: OverridableComponent<AccordionMenuItemProps>;
+}
+
+export interface AccordionMenuProps extends HTMLAttributes<HTMLUListElement> {
+  title?: string;
+  smoothScrollBehavior?: boolean;
+}
+
+const AccordionMenu = forwardRef<HTMLUListElement, AccordionMenuProps>(
+  (
+    { children, title, smoothScrollBehavior = true, className, ...rest },
+    ref
+  ) => {
+    useEffect(() => {
+      if (smoothScrollBehavior) {
+        const htmlElement = document.documentElement;
+        htmlElement.classList.add("navds-accordion-menu__html");
+        return () => {
+          htmlElement.classList.remove("navds-accordion-menu__html");
+        };
+      }
+    }, [smoothScrollBehavior]);
+
+    return (
+      <ActiveAnchorProvider>
+        <Nav title={title}>
+          {title && (
+            <Heading
+              level={2}
+              size="medium"
+              className={cl("navds-accordion-menu__title", className)}
+            >
+              {title}
+            </Heading>
+          )}
+          <ul
+            ref={ref}
+            className={cl("navds-accordion-menu__container", className)}
+            {...rest}
+          >
+            {children}
+          </ul>
+        </Nav>
+      </ActiveAnchorProvider>
+    );
+  }
+) as LayoutWithSubComponents;
+
+AccordionMenu.Item = Item;
+AccordionMenu.Collapsable = Collapsable;
+export default AccordionMenu;

@navikt/ds-react/accordion-menu/Nav.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, HTMLAttributes, useEffect } from "react";
+import { useStore } from "./ActiveAnchorStore";
+
+export interface AccordionMenuItemProps
+  extends HTMLAttributes<HTMLAnchorElement> {
+  title?: string;
+}
+
+const Nav = forwardRef<HTMLAnchorElement, AccordionMenuItemProps>(
+  ({ children, title, className, ...rest }, ref) => {
+    const { anchors, activeAnchor, setActiveAnchor } = useStore();
+
+    useEffect(() => {
+      const scrollListener = () => {
+        const offset = 100;
+        const lastPassedAnchor = anchors
+          .map((anchor) => document.getElementById(anchor))
+          .map((element: HTMLElement) => ({
+            id: element.id,
+            top: element.getBoundingClientRect().top - offset,
+            scrolledToBottom:
+              window.innerHeight + window.pageYOffset >=
+              document.body.offsetHeight,
+          }))
+          .filter((element) => element.scrolledToBottom || element.top <= 0)
+          .sort((a, b) => (a.top < b.top ? -1 : 1))
+          .map((anchor) => anchor.id)
+          .pop();
+
+        // Set active anchor and related url hash
+        if (lastPassedAnchor && activeAnchor !== lastPassedAnchor) {
+          const { href, hash } = window.location;
+          const urlWithoutHash = href.replace(hash, "");
+          const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
+          const title = document.title;
+          window.history.pushState(lastPassedAnchor, title, urlWithAnchor);
+          setActiveAnchor(lastPassedAnchor);
+        }
+      };
+      window.addEventListener("scroll", scrollListener);
+      return () => {
+        window.removeEventListener("scroll", scrollListener);
+      };
+    }, [anchors, activeAnchor, setActiveAnchor]);
+
+    return (
+      <nav className={"navds-accordion-menu__nav"} aria-label={title || "Meny"}>
+        {children}
+      </nav>
+    );
+  }
+);
+
+export default Nav;

@navikt/ds-react/accordion-menu/index.ts

@@ -0,0 +1,5 @@
+import { default as AccordionMenu, AccordionMenuProps } from "./Menu";
+import { AccordionMenuItemProps } from "./Item";
+
+export { AccordionMenu, AccordionMenuProps, AccordionMenuItemProps };
+export default AccordionMenu;

@navikt/ds-react/accordion-menu/stories/components/styles.css

@@ -0,0 +1,12 @@
+.navds-story-menu {
+  margin-top: 0;
+  list-style-type: none;
+}
+
+.navds-story-menu li:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.navds-story-section {
+  margin-bottom: 1rem;
+}

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

@@ -0,0 +1,139 @@
+import * as React from "react";
+import Menu from "../index";
+import { useEffect } from "react";
+import { ProductPageLayout } from "../../index";
+import { Right } from "../../layouts/stories/components/sections/Right";
+import { LightBulb, Telephone } from "@navikt/ds-icons";
+import { MainOne } from "../../layouts/stories/components/sections/Main";
+import { MainTwo } from "../../layouts/stories/components/sections/Main";
+import { MainThree } from "../../layouts/stories/components/sections/Main";
+import { Link, HashRouter as Router } from "react-router-dom";
+
+import "./components/styles.css";
+
+export default {
+  title: "ds-react/accordion-menu",
+  component: { Menu },
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.getElementById("decorator-header").style.display = "block";
+        document.getElementById("decorator-footer").style.display = "block";
+        return () => {
+          document.getElementById("decorator-header").style.display = "none";
+          document.getElementById("decorator-footer").style.display = "none";
+        };
+      }, []);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const All = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu title={"Minima"}>
+        <Menu.Item href={"#leo-quis"}>Leo quis</Menu.Item>
+        <Menu.Collapsable title={"Proin accumsan"}>
+          <Menu.Item href={"#nulla-pariatur"}>Nulla pariatur</Menu.Item>
+          <Menu.Item href={"#luctus-justo"}>Luctus justo</Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Menu.Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const ReactRouter = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu>
+        <Menu.Item component={Link} to="/link1">
+          Leo quis
+        </Menu.Item>
+        <Menu.Collapsable title={"Proin accumsan"}>
+          <Menu.Item component={Link} to="/link2">
+            Nulla pariatur
+          </Menu.Item>
+          <Menu.Item component={Link} to="/link3">
+            Luctus justo
+          </Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Collapsable title={"Sint cupidatat"}>
+          <Menu.Item component={Link} to="/link4">
+            Nulla pariatur
+          </Menu.Item>
+          <Menu.Item component={Link} to="/link5">
+            Luctus justo
+          </Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Item component={Link} to="/link6">
+          Maecenas in pretium
+        </Menu.Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];

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

@@ -1,17 +1,39 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 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
   extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Content on interactive surface of component
+   */
   heading: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   * @default false
+   */
   open?: boolean;
+  /**
+   * Callback for when user interacts with component
+   *
+   * @param {object} event
+   */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
   renderContentWhenClosed?: boolean;
 }
 

@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,11 +6,24 @@ import {
   InformationFilled,
   SuccessFilled,
 } from "@navikt/ds-icons";
-import "@navikt/ds-css/alert/index.css";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Decides what design the alert will have
+   */
   variant: "error" | "warning" | "info" | "success";
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Reduces padding on component
+   * @default "medium"
+   */
   size?: "medium" | "small";
 }
 

@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,9 +1,24 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/button/index.css";
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Decides component design and interactions
+   * @default "primary"
+   */
   variant?: "primary" | "secondary" | "action" | "danger";
+  /**
+   * Reduces internal padding for component
+   * @default "medium"
+   */
   size?: "medium" | "small";
 }
 

@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,8 +1,17 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/content-container/index.css";
 
-export type ContentContainerProps = HTMLAttributes<HTMLDivElement>;
+export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  classNames?: string;
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+}
+
 const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(
   ({ children, className, ...rest }, ref) => (
     <div

@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,12 +1,31 @@
 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> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Component content
+   */
+  children?: React.ReactNode;
+  /**
+   * Cell columns on width < 448px
+   */
   xs: Column;
+  /**
+   * Cell columns on min-width: 448
+   */
   sm?: Column;
+  /**
+   * Cell columns on min-width: 648
+   */
   md?: Column;
+  /**
+   * Cell columns on min-width: 960px
+   */
   lg?: Column;
 }
 

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

@@ -1,8 +1,16 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/grid/index.css";
 
-export type GridProps = HTMLAttributes<HTMLDivElement>;
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+}
 const Grid = forwardRef<HTMLDivElement, GridProps>(
   ({ children, className, ...rest }, ref) => (
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>

@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/index.ts

@@ -14,7 +14,16 @@ export {
   InternalHeaderUser,
   InternalHeaderUserProps,
 } from "./internal-header/index";
-export { Layout, LayoutProps, SectionProps } from "./layout/index";
+export {
+  ProductPageLayout,
+  ProductPageLayoutProps,
+  ProductPageLayoutSectionProps,
+} from "./layouts/index";
+export {
+  AccordionMenu,
+  AccordionMenuProps,
+  AccordionMenuItemProps,
+} from "./accordion-menu";
 export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";

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

@@ -1,10 +1,15 @@
 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> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
 }
 
 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(

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

@@ -1,10 +1,19 @@
 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> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Tag this component will use. Usefull for defining a button/link
+   * @default "h1"
+   */
   element?: keyof React.ReactHTML;
 }
 

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

@@ -1,11 +1,19 @@
 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> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * user name
+   */
   name: string;
+  /**
+   * user ident
+   */
   ident: string;
 }
 

@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,41 +0,0 @@
-import "@navikt/ds-css/layout/index.css";
-import cl from "classnames";
-import React, {
-  Children,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-} from "react";
-import { default as Section, SectionProps } from "./Section";
-
-export interface LayoutWithSubComponents
-  extends ForwardRefExoticComponent<LayoutProps> {
-  Section: ForwardRefExoticComponent<SectionProps>;
-}
-
-export interface LayoutProps extends HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const Layout = forwardRef<HTMLDivElement, LayoutProps>(
-  ({ children, className, ...rest }, ref) => {
-    const columns = Children.count(children);
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-layout__container",
-          `navds-layout__container--${columns}-columns`,
-          className
-        )}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  }
-) as LayoutWithSubComponents;
-
-Layout.Section = Section;
-export default Layout;

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

@@ -1,3 +0,0 @@
-export { default as Layout } from "./Layout";
-export * from "./Layout";
-export * from "./Section";

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

@@ -1,94 +0,0 @@
-import * as React from "react";
-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 "./components/styles.css";
-
-export default {
-  title: "@navikt/layout/Article",
-  component: { Layout },
-  decorators: [
-    (Story) => {
-      useEffect(() => {
-        document.getElementById("decorator-header").style.display = "block";
-        document.getElementById("decorator-footer").style.display = "block";
-        return () => {
-          document.getElementById("decorator-header").style.display = "none";
-          document.getElementById("decorator-footer").style.display = "none";
-        };
-      }, []);
-      return <Story />;
-    },
-  ],
-  parameters: {
-    layout: "fullscreen",
-    backgrounds: {
-      default: "NAV gray",
-      values: [
-        {
-          name: "NAV gray",
-          value: "#f1f1f1",
-        },
-        {
-          name: "white",
-          value: "#ffffff",
-        },
-      ],
-    },
-  },
-};
-
-export const ThreeColumns = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section left sticky>
-        <Left />
-      </Layout.Section>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-      <Layout.Section right sticky>
-        <Right />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const TwoColumnsLeft = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section left sticky>
-        <Left />
-      </Layout.Section>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const TwoColumnsRight = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-      <Layout.Section right sticky>
-        <Right />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);
-
-export const OneColumn = () => (
-  <ContentContainer>
-    <Layout>
-      <Layout.Section>
-        <Main />
-      </Layout.Section>
-    </Layout>
-  </ContentContainer>
-);

@navikt/ds-react/layout/stories/components/sections/Main.tsx

@@ -1,108 +0,0 @@
-import * as React from "react";
-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>
-    <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.
-    </Paragraph>
-    <Grid className={"section"}>
-      <Cell xs={6}>
-        <Link href={"#"}>Ea voluptate</Link>
-      </Cell>
-      <Cell xs={6}>
-        <Link href={"#"}>Quis autem</Link>
-      </Cell>
-    </Grid>
-    <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.{" "}
-    </Paragraph>
-    <Alert variant="info" className={"section"}>
-      Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in
-      faucibus.
-    </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?
-    </Paragraph>
-    <Heading className={"section"} level={2} size={"xl"}>
-      Nulla pariatur?
-    </Heading>
-    <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.
-    </Paragraph>
-
-    <table className={"section tabell tabell--stripet"}>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Fornavn</th>
-          <th>Etternavn</th>
-          <th>Rolle</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Jean-Luc</td>
-          <td>Picard</td>
-          <td>Kaptein</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>William</td>
-          <td>Riker</td>
-          <td>Kommandør</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Geordi</td>
-          <td>La Forge</td>
-          <td>Sjefsingeniør</td>
-        </tr>
-      </tbody>
-    </table>
-    <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.
-    </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.
-    </Paragraph>
-    <Paragraph className={"section"}>
-      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
-      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
-    <Button>Søk ...</Button>
-  </div>
-);

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

@@ -0,0 +1,3 @@
+export { default as ProductPageLayout } from "./product-page/Layout";
+export { LayoutProps as ProductPageLayoutProps } from "./product-page/Layout";
+export { SectionProps as ProductPageLayoutSectionProps } from "./product-page/Section";

@navikt/ds-react/layouts/product-page/Layout.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, Children, forwardRef } from "react";
+import { ForwardRefExoticComponent, HTMLAttributes } from "react";
+import { default as Section, SectionProps } from "./Section";
+import { default as Panel, PanelProps } from "./Panel";
+import { ContentContainer, Heading, OverridableComponent } from "../../";
+import cl from "classnames";
+
+export interface LayoutWithSubComponents
+  extends ForwardRefExoticComponent<LayoutProps> {
+  Section: ForwardRefExoticComponent<SectionProps>;
+  Panel: OverridableComponent<PanelProps>;
+}
+
+export interface LayoutProps extends HTMLAttributes<HTMLElement> {
+  title: string;
+  children?: React.ReactNode;
+}
+
+const Layout = forwardRef<HTMLDivElement, LayoutProps>(
+  ({ children, title, className, ...rest }, ref) => {
+    const columns = Children.toArray(children).length;
+    const classNames = cl(
+      "navds-layout__container",
+      `navds-layout__container--${columns}-columns`,
+      className
+    );
+
+    useEffect(() => {
+      const layoutBody = document.getElementById("navds-layout-body");
+      layoutBody?.classList.add(`navds-layout__body--${columns}-columns`);
+      document.body.classList.add("navds-layout__body--white");
+      return () => {
+        layoutBody?.classList.remove(`navds-layout__body--${columns}-columns`);
+        document.body.classList.remove("navds-layout__body--white");
+      };
+    }, [columns]);
+
+    return (
+      <div ref={ref}>
+        <div id={"navds-layout-header"} className={"navds-layout__header"}>
+          <ContentContainer>
+            <div className={classNames} {...rest}>
+              <div className={cl("navds-layout__header-content")}>
+                <Heading
+                  size={"xxl"}
+                  className={cl("navds-layout__header-title")}
+                  level={1}
+                >
+                  {title}
+                </Heading>
+              </div>
+            </div>
+          </ContentContainer>
+        </div>
+        <div id={"navds-layout-body"} className={"navds-layout__body"}>
+          <ContentContainer>
+            <div className={classNames} {...rest}>
+              {children}
+            </div>
+          </ContentContainer>
+        </div>
+      </div>
+    );
+  }
+) as LayoutWithSubComponents;
+
+Layout.Section = Section;
+Layout.Panel = Panel;
+export default Layout;

@navikt/ds-react/layouts/product-page/Panel.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import { forwardRef, ReactNode } from "react";
+import cl from "classnames";
+import { Button, Heading, Popover } from "../../";
+import { Attachment } from "@navikt/ds-icons";
+import { OverridableComponent } from "../../util";
+
+export interface PanelProps {
+  props: {
+    title: string;
+    icon?: ReactNode;
+    highlight?: boolean;
+    anchor?: string;
+    whiteBackground?: boolean;
+    withPadding?: boolean;
+  } & React.HTMLAttributes<HTMLDivElement>;
+  defaultComponent: "div";
+}
+
+const Panel: OverridableComponent<PanelProps> = forwardRef(
+  (
+    {
+      title,
+      highlight,
+      icon,
+      anchor,
+      component: Component = "div",
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+    const [copied, setIsCopied] = useState<boolean>(false);
+
+    useEffect(() => {
+      const header = document.getElementById("navds-layout-body");
+      header?.classList.add("navds-layout__body--padding");
+    }, []);
+
+    return (
+      <Component
+        ref={ref}
+        id={anchor}
+        className={cl(
+          "navds-layout__panel",
+          icon && "navds-layout__panel--icon-margin",
+          highlight && "navds-layout__panel--highlight",
+          className
+        )}
+        {...rest}
+      >
+        {icon && <div className={"navds-layout__panel-icon"}>{icon}</div>}
+        <Heading size={"xl"} className={"navds-layout__panel-title"} level={2}>
+          {title}
+        </Heading>
+        {anchor && (
+          <div className={"navds-layout__panel-copy"}>
+            <Button
+              ref={(el) => setAnchorEl(el)}
+              variant={"secondary"}
+              className={"navds-layout__panel-copy-button"}
+              onClick={() => {
+                setIsCopied(true);
+                const { href, hash } = window.location;
+                const urlWithoutHash = href.replace(hash, "");
+                copyToClipboard(`${urlWithoutHash}#${anchor}`);
+                setTimeout(() => {
+                  setIsCopied(false);
+                }, 1000);
+              }}
+            >
+              <Attachment className={"navds-layout__panel-copy-icon"} />
+              <span>Kopier lenke</span>
+            </Button>
+            <Popover anchorEl={anchorEl} open={copied} onClose={() => {}}>
+              <div className="navds-layout__panel-popover-content">Kopiert</div>
+            </Popover>
+          </div>
+        )}
+        <div className={"navds-layout__panel-content"}>{children}</div>
+      </Component>
+    );
+  }
+);
+
+const copyToClipboard = (text: string) => {
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  document.execCommand("copy");
+  document.body.removeChild(textArea);
+};
+
+export default Panel;

@navikt/ds-react/layouts/stories/components/sections/Left.tsx

@@ -4,16 +4,16 @@ import { Button, Link } from "../../../../index";
 export const Left = () => (
   <ul className={"navds-story-menu"}>
     <li>
-      <Link href={"#"}>Iusto odio dignissimos</Link>
+      <Link href={"#leo-quis"}>Leo quis</Link>
     </li>
     <li>
-      <Link href={"#"}>Nam libero tempore</Link>
+      <Link href={"#proin-accumsan"}>Proin accumsan</Link>
     </li>
     <li>
-      <Link href={"#"}>Reiciendis voluptatibus</Link>
+      <Link href={"#nulla-pariatur"}>Nulla pariatur?</Link>
     </li>
     <li>
-      <Link href={"#"}>Earum rerum</Link>
+      <Link href={"#maecenas-in-pretium"}>Maecenas in pretium</Link>
     </li>
     <li>
       <Button>Søk ...</Button>

@navikt/ds-react/layouts/stories/components/sections/Main.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import {
+  Button,
+  Cell,
+  Grid,
+  Heading,
+  Link,
+  Paragraph,
+} from "../../../../index";
+import Snakkeboble from "nav-frontend-snakkeboble";
+
+export const Main = ({ title = true }) => (
+  <>
+    <MainOne title={title} />
+    <MainTwo title={title} />
+    <MainThree title={title} />
+  </>
+);
+
+export const MainOne = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"leo-quis"}>
+        Leo quis
+      </Heading>
+    )}
+    <Paragraph>
+      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
+      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
+      eget interdum nibh
+    </Paragraph>
+  </div>
+);
+
+export const MainTwo = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"proin-accumsan"}>
+        Proin accumsan
+      </Heading>
+    )}
+    <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.
+    </Paragraph>
+    <Grid className={"section"}>
+      <Cell xs={6}>
+        <Link href={"#"}>Ea voluptate</Link>
+      </Cell>
+      <Cell xs={6}>
+        <Link href={"#"}>Quis autem</Link>
+      </Cell>
+    </Grid>
+    <Paragraph className={"section"}>
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+      consectetur, adipisci velit, sed quia non numquam eius modi tempora.
+    </Paragraph>
+    <Heading level={2} size={"large"} id={"nulla-pariatur"}>
+      Nulla pariatur?
+    </Heading>
+    <Paragraph className={"section"}>
+      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
+      imperdiet erat. Morbi sodales bibendum volutpat.
+    </Paragraph>
+    <table className={"section tabell tabell--stripet"}>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Fornavn</th>
+          <th>Etternavn</th>
+          <th>Rolle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Jean-Luc</td>
+          <td>Picard</td>
+          <td>Kaptein</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>William</td>
+          <td>Riker</td>
+          <td>Kommandør</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Geordi</td>
+          <td>La Forge</td>
+          <td>Sjefsingeniør</td>
+        </tr>
+      </tbody>
+    </table>
+    <Paragraph className={"section"}>
+      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
+      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
+      commodo tortor.
+    </Paragraph>
+    <Heading level={2} size={"large"} id={"luctus-justo"}>
+      Luctus justo
+    </Heading>
+    <Paragraph className={"section"}>
+      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
+      ut cursus sem. In viverra felis vitae aliquet finibus.
+    </Paragraph>
+    <Button>Søk ...</Button>
+  </div>
+);
+
+export const MainThree = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"maecenas-in-pretium"}>
+        Maecenas in pretium
+      </Heading>
+    )}
+    <Paragraph>
+      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
+      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
+      eget interdum nibh
+    </Paragraph>
+    <Snakkeboble>Integer aliquam feugiat purus et imperdie</Snakkeboble>
+    <Paragraph>
+      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
+      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
+      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
+      convallis turpis.
+    </Paragraph>
+    <Snakkeboble pilHoyre={true}>
+      Integer aliquam feugiat purus et imperdie
+    </Snakkeboble>
+    <Paragraph>
+      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
+      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
+      feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
+    </Paragraph>
+    <Paragraph>
+      Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
+      consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
+      porttitor magna sapien id enim.
+    </Paragraph>
+  </div>
+);

@navikt/ds-react/layouts/stories/product-page-layout.stories.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { ProductPageLayout } from "../../index";
+import { Left } from "./components/sections/Left";
+import { Main, MainOne, MainTwo, MainThree } from "./components/sections/Main";
+import { Right } from "./components/sections/Right";
+import { LightBulb, Telephone } from "@navikt/ds-icons";
+import "./components/styles.css";
+
+export default {
+  title: "ds-react/layouts/ProductPage",
+  component: ProductPageLayout,
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.getElementById("decorator-header").style.display = "block";
+        document.getElementById("decorator-footer").style.display = "block";
+        return () => {
+          document.getElementById("decorator-header").style.display = "none";
+          document.getElementById("decorator-footer").style.display = "none";
+        };
+      }, []);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const title = "Nunc et lorem";
+export const ThreeColumns = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section left sticky>
+      <Left />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const TwoColumnsLeft = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section left sticky>
+      <Left />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <Main />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const TwoColumnsRight = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section>
+      <Main />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const OneColumn = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section>
+      <Main />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);

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

@@ -1,9 +1,16 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/link/index.css";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Link anchor should direct to
    */

@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,12 +3,8 @@ 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
-// ReactModal.setAppElement("#root")
-
 export interface ModalProps {
   /**
    * Content of modal
@@ -28,7 +24,7 @@ export interface ModalProps {
    */
   shouldCloseOnOverlayClick?: boolean;
   /**
-   * User defined classname for wrapper element
+   * @ignore
    */
   className?: string;
   /**
@@ -37,7 +33,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 +93,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

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import { Modal } from "../index";
-import ReactModal from "react-modal";
 
 export default {
-  title: "@navikt/modal",
+  title: "ds-react/modal",
   component: Modal,
 };
 
-ReactModal.setAppElement("#root");
+Modal.setAppElement("#root");
 
 export const All = () => {
   const [open, setOpen] = useState(true);

@navikt/ds-react/package.json

@@ -1,34 +1,38 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.1.2",
+  "version": "0.2.4",
   "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.17",
-    "@navikt/ds-icons": "^0.1.7",
+    "@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> {
   /**
@@ -28,12 +27,15 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * Content rendered inside popover
    */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Orientation for popover
-   * @default 'auto'
+   * @default "right"
    */
   placement?: Placement;
-  size?: "medium" | "small";
 }
 
 const useEventLister = (event: string, callback) =>
@@ -53,7 +55,6 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       children,
       placement = "right",
       className,
-      size = "medium",
       ...rest
     },
     ref
@@ -67,9 +68,16 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     useEventLister(
       "click",
       useCallback(
-        (e: MouseEvent) =>
-          !popoverRef.current?.contains(e.target as Node) && close(),
-        [close]
+        (e: MouseEvent) => {
+          if (
+            ![anchorEl, popoverRef.current].some((element) =>
+              element?.contains(e.target as Node)
+            )
+          ) {
+            close();
+          }
+        },
+        [anchorEl, close]
       )
     );
 
@@ -124,8 +132,8 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     return (
       <div
         ref={mergedRef}
-        className={cl("navds-popover", `navds-popover--${size}`, className, {
-          "popover--hidden": !open || !anchorEl,
+        className={cl("navds-popover", className, {
+          "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 },
@@ -27,7 +27,7 @@ const Template = (props) => {
         {props.placement}
       </div>
       <Popover {...props} anchorEl={anchorEl} onClose={() => {}} open>
-        Contents
+        <div style={{ margin: "1rem" }}>Contents</div>
       </Popover>
     </>
   );
@@ -56,27 +56,3 @@ export const All = () => {
     </div>
   );
 };
-
-export const Small = () => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        margin: "4rem 8rem 4rem 8rem",
-      }}
-    >
-      {placements.map((placement) => (
-        <div
-          style={{
-            width: "20%",
-            height: "100px",
-            margin: "4rem",
-          }}
-        >
-          <Template placement={placement} size="small" />
-        </div>
-      ))}
-    </div>
-  );
-};

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

@@ -1,9 +1,15 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/tag/index.css";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Changes background-color and border-color
    */
@@ -11,11 +17,12 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant }, ref) => {
+  ({ children, className, variant, ...rest }, ref) => {
     return (
       <span
         ref={ref}
         className={cl("navds-tag", className, `navds-tag--${variant}`)}
+        {...rest}
       >
         {children}
       </span>

@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,
 };
 

@navikt/ds-tokens/package.json

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

@navikt/ds-tokens/src/index.js

@@ -170,6 +170,10 @@ module.exports = {
       },
     },
     layout: {
+      background: {
+        white: { value: "#FFFFFF" },
+        gray: { value: "#F1F1F1" },
+      },
       padding: {
         small: { value: "1rem" },
         mediumAndLarger: { value: "2.5rem" },

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/MDXComponents.tsx

@@ -0,0 +1,18 @@
+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 TableOfContents from "./table-of-contents/TableOfContents";
+
+export default {
+  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,
+  TableOfContents,
+};

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>