Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.8
Less støtte for docs (#1059 )
2026-10-13 01:02:02 +00:00 · 2021-04-07 06:54:54 +00:00 · 2021-04-07 08:41:42 +02:00 · 2021-04-07 08:41:24 +02:00 · 2021-04-06 07:28:27 +00:00 · 2021-04-06 09:14:23 +02:00
252 changed files with 8996 additions and 3986 deletions
@@ -71,7 +71,7 @@ jobs:
      - run: git remote set-url origin https://github-actions[bot]:$NAV_DS_TOKEN@github.com/$GITHUB_REPOSITORY.git
        env:
          NAV_DS_TOKEN: ${{secrets.GIT_REPO}}
-      - run: yarn lerna version patch --include-merged-tags --no-private --yes
+      - run: yarn lerna version patch --include-merged-tags --yes
      - run: yarn lerna publish from-package --yes
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTOMATION}}
@@ -111,3 +111,7 @@ utilities/**/css
@navikt/ds-icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
+
+react-docgen.json
+cjs
+esm
@@ -1 +1 @@
-_
+_
@@ -1,7 +1,32 @@
 module.exports = {
+  webpackFinal: async (config, { configType }) => {
+    config.devServer = { stats: "errors-only" };
+    return config;
+  },
+  devServer: { stats: "errors-only" },
  stories: [
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
-    "../@navikt/**/*.stories.@(js|jsx|ts|tsx)",
+    "../.storybook/**/*.stories.@(mdx)",
+    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+    "../@navikt/**/*.stories.@(js|jsx|ts|tsx|mdx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-docs",
+    {
+      name: "@storybook/addon-storysource",
+      options: {
+        loaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    {
+      name: "@storybook/addon-essentials",
+      options: {
+        actions: false,
+        controls: { hideNoControlsWarning: true },
+      },
+    },
+    "@whitespace/storybook-addon-html",
  ],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
 };
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import NavTheme from "./theme.js";
+
+addons.setConfig({
+  theme: NavTheme,
+});
@@ -1,14 +1,13 @@
 import "nav-frontend-core";
-import "@navikt/ds-css/baseline/index.css";
+import "@navikt/ds-css/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: "",
    },
  },
 };
@@ -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
@@ -0,0 +1,6 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  brandTitle: "NAV Designsystem",
+});
@@ -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;
 };
@@ -0,0 +1,8 @@
+.navds-accordion-anchor-menu {
+  padding: 1rem 0;
+}
+
+.navds-accordion-anchor-menu__title {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
@@ -0,0 +1,85 @@
+.navds-accordion-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.navds-accordion-menu-collapsable__button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font: inherit;
+  text-align: inherit;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: var(--navds-font-weight-bold);
+  color: var(--navds-color-text-link);
+  text-decoration: underline;
+}
+
+.navds-accordion-menu-collapsable .navds-accordion-menu__list,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  font-weight: var(--navds-font-weight-regular);
+}
+
+.navds-accordion-menu-item,
+.navds-accordion-menu-collapsable__button {
+  display: flex;
+  padding: 0.75rem 1rem;
+  line-height: 1.5rem; /* TODO: fix typography. */
+}
+
+.navds-accordion-menu-collapsable__expand-icon {
+  font-size: 1.5rem;
+  color: var(--navds-color-text-link);
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+.navds-accordion-menu-collapsable--open
+  > .navds-accordion-menu-collapsable__button
+  > .navds-accordion-menu-collapsable__expand-icon {
+  transform: rotate(180deg);
+}
+
+.navds-accordion-menu-collapsable .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: 2rem;
+}
+
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-item,
+.navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable
+  .navds-accordion-menu-collapsable__button {
+  padding-left: 3rem;
+}
+
+.navds-accordion-menu-item:focus,
+.navds-accordion-menu-collapsable__button:focus {
+  outline: 3px solid var(--navds-text-focus);
+  outline-offset: -3px;
+}
+
+.navds-accordion-menu-item:hover,
+.navds-accordion-menu-collapsable__button:hover {
+  background-color: var(--navds-color-gray-20);
+}
+
+.navds-accordion-menu-item--active {
+  box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
+  color: var(--navds-color-text);
+  text-decoration: none;
+  font-weight: var(--navds-font-weight-bold);
+}
@@ -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;
@@ -0,0 +1,35 @@
+@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";
+
+html {
+  scroll-behavior: smooth;
+}
+
+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);
+}
+
+/* https://web.dev/prefers-reduced-motion/ */
+@media (prefers-reduced-motion: reduce) {
+  *, ::before, ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}
@@ -1,18 +0,0 @@
-@import url(~normalize.css);
-@import url(~@navikt/ds-tokens/dist/tokens.css);
-@import url(Source-Sans-Pro-regular.css);
-@import url(Source-Sans-Pro-italic.css);
-@import url(Source-Sans-Pro-600.css);
-@import url(print.css);
-@import url(utility.css);
-
-body {
-  font-family: var(--navds-font-family);
-  line-height: 1.375;
-  color: var(--navds-color-text-primary);
-  font-size: 1.125rem;
-}
-
-a {
-  color: var(--navds-color-text-link);
-}
@@ -1,3 +1,23 @@
+/**************************
+ * .navds-grid *
+ **************************/
+
+.navds-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-gap: var(--navds-grid-gutter-small);
+}
+
+@media (min-width: 448px) {
+  .navds-grid {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+/**************************
+ * .navds-grid__cell *
+ **************************/
+
 .navds-grid__cell--xs-1 {
  grid-column: span 1;
 }
@@ -1,11 +0,0 @@
-.navds-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  grid-gap: var(--navds-grid-gutter-small);
-}
-
-@media (min-width: 448px) {
-  .navds-grid {
-    grid-gap: var(--navds-grid-gutter-medium-and-larger);
-  }
-}
@@ -1,2 +0,0 @@
-@import "./grid.css";
-@import "./cell.css";
@@ -0,0 +1,15 @@
+@import "baseline/baseline.css";
+@import "accordion.css";
+@import "accordion-anchor-menu.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";
@@ -0,0 +1,72 @@
+/**************************
+ * .navds-header *
+ **************************/
+
+.navds-header {
+  display: flex;
+  align-items: center;
+  background: var(--navds-color-darkgray);
+  color: white;
+  max-width: 100vw;
+  min-height: 50px;
+}
+
+.navds-header__column {
+  display: flex;
+  align-items: center;
+}
+
+/**************************
+  * .navds-header__title *
+  **************************/
+
+.navds-header__title {
+  padding: 0 1.5rem 0 1.5rem;
+  border-right: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  text-decoration: none;
+  margin: 0;
+  color: var(--navds-color-text-inverse);
+  font-size: var(--navds-font-size-medium);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-medium);
+}
+
+.navds-header__title > span > a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.navds-header__title > span > a:focus {
+  box-shadow: var(--navds-shadow-focus-on-dark);
+  outline: none;
+}
+
+/**************************
+  * .navds-header__user *
+  **************************/
+
+.navds-header__user {
+  color: var(--navds-color-text-inverse);
+  padding: 0 1.5rem 0 1.5rem;
+  margin-left: auto;
+  border-left: 1px solid var(--navds-color-gray-40);
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+}
+
+.navds-header__name {
+  margin-right: 1rem;
+  font-size: var(--navds-font-size-small);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-small);
+}
+
+.navds-header__ident {
+  font-size: var(--navds-font-size-xs);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-xs);
+}
@@ -1,16 +0,0 @@
-@import "./title.css";
-@import "./user.css";
-
-.navds-header {
-  display: flex;
-  align-items: center;
-  background: var(--navds-color-darkgray);
-  color: white;
-  max-width: 100vw;
-  min-height: 50px;
-}
-
-.navds-header__column {
-  display: flex;
-  align-items: center;
-}
@@ -1,23 +0,0 @@
-.navds-header__title {
-  padding: 0 1.5rem 0 1.5rem;
-  border-right: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-  text-decoration: none;
-  margin: 0;
-  color: var(--navds-color-text-inverse);
-  font-size: var(--navds-font-size-medium);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-medium);
-}
-
-.navds-header__title > span > a {
-  text-decoration: none;
-  color: inherit;
-}
-
-.navds-header__title > span > a:focus {
-  box-shadow: var(--navds-shadow-focus-on-dark);
-  outline: none;
-}
@@ -1,22 +0,0 @@
-.navds-header__user {
-  color: var(--navds-color-text-inverse);
-  padding: 0 1.5rem 0 1.5rem;
-  margin-left: auto;
-  border-left: 1px solid var(--navds-color-gray-40);
-  display: flex;
-  align-self: stretch;
-  align-items: center;
-}
-
-.navds-header__name {
-  margin-right: 1rem;
-  font-size: var(--navds-font-size-small);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-small);
-}
-
-.navds-header__ident {
-  font-size: var(--navds-font-size-xs);
-  font-weight: var(--navds-font-weight-bold);
-  line-height: var(--navds-font-line-height-xs);
-}
@@ -1 +0,0 @@
-@import "./layout.css";
@@ -1,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;
-  }
-}
@@ -0,0 +1,322 @@
+/*****************
+ * .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: 448px) and (max-width: 959px) {
+  .navds-layout__section .navds-accordion-anchor-menu__title {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+  .navds-layout__section .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
+  }
+
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-item,
+  .navds-layout__section
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable
+    .navds-accordion-menu-collapsable__button {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+}
+
+@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;
+  }
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.1.16",
+  "version": "0.2.5",
  "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.2",
+    "normalize.css": "^8.0.1",
+    "postcss": "^8.2.7",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^14.0.0"
  }
 }
@@ -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 {
@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -1,7 +1,7 @@
 // https://levelup.gitconnected.com/learn-svg-to-react-using-figma-api-be0a5f9c0ca
 // used for reference/implementation

-const api = require("axios");
+import { create, get } from "axios";

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

-module.exports = {
+export default {
  getNodeChildren,
  getSvgImageUrls,
  getIconContent,
@@ -1,9 +1,9 @@
-const api = require("./api");
-const fs = require("fs");
-const path = require("path");
-const pLimit = require("p-limit");
-const rimraf = require("rimraf");
-const startCase = require("lodash.startcase");
+import { getNodeChildren, getSvgImageUrls, getIconContent } from "./api";
+import { existsSync, unlinkSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";

 const generateMetadata = (iconNodesArr) => {
  return iconNodesArr
@@ -32,14 +32,14 @@ const main = async () => {
  // Limiting to ~20 concurrent downloads seems to lead to fewer erros
  const limit = pLimit(20);

-  const iconNodesArr = await api.getNodeChildren().catch((e) => {
+  const iconNodesArr = await getNodeChildren().catch((e) => {
    throw e;
  });

-  if (fs.existsSync(metadataFileName)) {
-    fs.unlinkSync(metadataFileName);
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
  }
-  fs.writeFileSync(
+  writeFileSync(
    metadataFileName,
    JSON.stringify(generateMetadata(iconNodesArr), null, 4),
    {
@@ -47,25 +47,24 @@ const main = async () => {
    }
  );

-  const iconUrls = await api.getSvgImageUrls(
+  const iconUrls = await getSvgImageUrls(
    iconNodesArr.map((node) => node.node_id).join(",")
  );

-  if (fs.existsSync(iconFolder)) {
+  if (existsSync(iconFolder)) {
    rimraf.sync(iconFolder);
  }
-  fs.mkdirSync(iconFolder);
+  mkdirSync(iconFolder);

  console.log("Total icons: " + iconNodesArr.length);

  await Promise.all(
    iconUrls.map((url, x) =>
      limit(() =>
-        api
-          .getIconContent(url)
+        getIconContent(url)
          .then(({ data }) => {
-            fs.writeFileSync(
-              path.resolve(
+            writeFileSync(
+              resolve(
                iconFolder,
                `${startCase(iconNodesArr[x].name).replace(/\s/g, "")}.svg`
              ),
@@ -86,8 +85,8 @@ const main = async () => {
  );

  if (misses.length > 0) {
-    fs.writeFileSync(
-      path.resolve("./", `misses.txt`),
+    writeFileSync(
+      resolve("./", `misses.txt`),
      JSON.stringify(misses, null, 4),
      {
        encoding: "utf8",
@@ -1311,6 +1311,22 @@
    "pageName": "Social media",
    "visible": true
  },
+  {
+    "name": "Link",
+    "description": "",
+    "created_at": "2021-03-05T09:54:39.896Z",
+    "updated_at": "2021-03-05T09:54:39.896Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "LinkFilled",
+    "description": "",
+    "created_at": "2021-03-05T09:35:48.053Z",
+    "updated_at": "2021-03-05T09:35:48.053Z",
+    "pageName": "Interface",
+    "visible": true
+  },
  {
    "name": "List",
    "description": "",
@@ -1427,7 +1443,7 @@
    "name": "Mobile",
    "description": "",
    "created_at": "2020-07-01T10:37:43.010Z",
-    "updated_at": "2020-07-01T10:37:43.010Z",
+    "updated_at": "2021-03-05T06:30:19.733Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1467,7 +1483,7 @@
    "name": "MonitorFilled",
    "description": "",
    "created_at": "2021-01-11T13:37:55.526Z",
-    "updated_at": "2021-02-23T18:47:13.465Z",
+    "updated_at": "2021-02-24T09:00:04.733Z",
    "pageName": "Device",
    "visible": true
  },
@@ -1519,6 +1535,22 @@
    "pageName": "Gender",
    "visible": true
  },
+  {
+    "name": "NewTab",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.248Z",
+    "updated_at": "2021-03-02T15:45:51.239Z",
+    "pageName": "Interface",
+    "visible": true
+  },
+  {
+    "name": "NewTabFilled",
+    "description": "",
+    "created_at": "2021-02-26T18:51:49.243Z",
+    "updated_at": "2021-03-02T15:45:51.248Z",
+    "pageName": "Interface",
+    "visible": true
+  },
  {
    "name": "Next",
    "description": "",
@@ -1551,6 +1583,22 @@
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
+  {
+    "name": "Notes",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.821Z",
+    "updated_at": "2021-03-02T15:27:31.821Z",
+    "pageName": "File",
+    "visible": true
+  },
+  {
+    "name": "NotesFilled",
+    "description": "",
+    "created_at": "2021-03-02T15:27:31.814Z",
+    "updated_at": "2021-03-02T15:27:31.814Z",
+    "pageName": "File",
+    "visible": true
+  },
  {
    "name": "Office1",
    "description": "",
@@ -1731,10 +1779,26 @@
    "name": "Print",
    "description": "",
    "created_at": "2020-07-01T10:37:43.050Z",
-    "updated_at": "2020-07-01T10:37:43.050Z",
+    "updated_at": "2021-02-25T11:46:52.195Z",
    "pageName": "Attachment",
    "visible": true
  },
+  {
+    "name": "PrinterRoom",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.707Z",
+    "updated_at": "2021-02-24T09:00:04.707Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
+  {
+    "name": "PrinterRoomFilled",
+    "description": "",
+    "created_at": "2021-02-24T09:00:04.721Z",
+    "updated_at": "2021-02-24T09:00:04.721Z",
+    "pageName": "Fyrstikkalleen",
+    "visible": true
+  },
  {
    "name": "PrintFilled",
    "description": "",
@@ -1983,6 +2047,22 @@
    "pageName": "Communication",
    "visible": true
  },
+  {
+    "name": "Share",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.208Z",
+    "updated_at": "2021-02-26T07:42:06.022Z",
+    "pageName": "Social media",
+    "visible": true
+  },
+  {
+    "name": "ShareFilled",
+    "description": "",
+    "created_at": "2021-02-24T15:40:16.201Z",
+    "updated_at": "2021-02-26T07:42:06.014Z",
+    "pageName": "Social media",
+    "visible": true
+  },
  {
    "name": "Shower",
    "description": "",
@@ -2027,7 +2107,7 @@
    "name": "SightFilled",
    "description": "",
    "created_at": "2021-01-28T14:00:38.604Z",
-    "updated_at": "2021-02-23T18:47:13.472Z",
+    "updated_at": "2021-02-24T09:00:04.743Z",
    "pageName": "Fyrstikkalleen",
    "visible": true
  },
@@ -1,7 +1,7 @@
-const fs = require("fs");
-const sharp = require("sharp");
-const rimraf = require("rimraf");
-const pLimit = require("p-limit");
+import { existsSync, mkdirSync, readdirSync } from "fs";
+import sharp from "sharp";
+import rimraf from "rimraf";
+import pLimit from "p-limit";

 const convertToPng = async () => {
  const inputDir = "./svg/";
@@ -11,14 +11,14 @@ const convertToPng = async () => {

  const limit = pLimit(20);

-  if (fs.existsSync(outDir)) {
+  if (existsSync(outDir)) {
    rimraf.sync(outDir);
  }
-  fs.mkdirSync(outDir);
-  sizes.forEach((size) => fs.mkdirSync(outDir + size.toString()));
+  mkdirSync(outDir);
+  sizes.forEach((size) => mkdirSync(outDir + size.toString()));

  await Promise.all(
-    fs.readdirSync(inputDir).map((file) => {
+    readdirSync(inputDir).map((file) => {
      return limit(() =>
        sizes.forEach((size) => {
          const density = (100 * size) / 16;
@@ -1,4 +1,4 @@
-const zipdir = require("zip-dir");
+import zipdir from "zip-dir";

 const zipDir = async (dir, name) => {
  await zipdir(dir, { saveTo: name }, function (err, buffer) {
@@ -1,8 +1,12 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.1.6",
+  "version": "0.2.1",
  "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,31 @@
  ],
  "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",
+    "/cjs",
+    "/esm",
    "/src",
    "/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 +46,5 @@
    "rimraf": "3.0.2",
    "sharp": "0.27.1",
    "zip-dir": "^2.0.0"
-  },
-  "sideEffects": false
+  }
 }
@@ -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
@@ -1,35 +1,65 @@
 import React from "react";
-// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-// import { Story, Meta } from '@storybook/react/types-6-0';
 import { storiesOf } from "@storybook/react";

 import * as Icons from "../src";
+export default {
+  title: "ds-icons/Ikoner",
+  argTypes: {
+    Icon: {
+      defaultValue: "System",
+      control: {
+        type: "select",
+        options: Object.entries(Icons).map(([Name, _]) => Name),
+      },
+    },
+    color: { control: "color" },
+  },
+};

-const iconsStories = storiesOf("@navikt/icons", module);
+if (process.env.STORYBOOK_CHROMATIC === "true") {
+  const iconsStories = storiesOf("ds-icons/Ikoner", module);

-Object.entries(Icons).forEach(([name, Icon]) => {
-  iconsStories.add(name, () => (
-    <div>
-      <Icon title="hello, world" />
-      <Icon style={{ height: "2em", width: "2em" }} />
-      <Icon style={{ height: "4em", width: "4em" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "white" }} />
-      <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
-      <br />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#777" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#333" }} />
-      <Icon style={{ height: "4em", width: "4em", backgroundColor: "#000" }} />
-      <br />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
-      />
-      <Icon
-        style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
-      />
-    </div>
-  ));
-});
+  Object.entries(Icons).forEach(([name, Icon]) => {
+    iconsStories.add(name, () => (
+      <div>
+        <Icon title="hello, world" />
+        <Icon style={{ height: "2em", width: "2em" }} />
+        <Icon style={{ height: "4em", width: "4em" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "white" }} />
+        <Icon style={{ height: "4em", width: "4em", color: "crimson" }} />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#aaa" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#777" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#333" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", backgroundColor: "#000" }}
+        />
+        <br />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(45deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(90deg)" }}
+        />
+        <Icon
+          style={{ height: "4em", width: "4em", transform: "rotate(180deg)" }}
+        />
+      </div>
+    ));
+  });
+}
+
+const Template = ({ Icon, color, size, ...args }) => {
+  const Iconname = Icons[Icon];
+  return <Iconname style={{ fontSize: size, color }} {...args} />;
+};
+export const Ikon = Template.bind({});
+Ikon.args = {
+  size: "24px",
+};
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7454 1.48842C19.7297 -0.496138 16.468 -0.496139 14.4522 1.48842L11.8753 4.02547C11.4818 4.41294 11.4768 5.04609 11.8643 5.43964C12.2518 5.8332 12.8849 5.83813 13.2785 5.45066L15.8554 2.9136C17.0927 1.69546 19.105 1.69547 20.3423 2.91361L21.0786 3.63848C22.3071 4.84808 22.3071 6.80268 21.0786 8.01228L15.9247 13.0864C14.6875 14.3045 12.6751 14.3045 11.4378 13.0864L10.7016 12.3615C10.308 11.9741 9.67487 11.979 9.28741 12.3725C8.89993 12.7661 8.90487 13.3992 9.29842 13.7867L10.0347 14.5116C12.0504 16.4961 15.3122 16.4961 17.3279 14.5116L22.4817 9.43747C24.5061 7.44438 24.5061 4.20638 22.4817 2.21329L21.7454 1.48842Z" fill="#3E3832"/>
+<path d="M2.25455 22.5116C4.27028 24.4961 7.53205 24.4961 9.54777 22.5116L12.1247 19.9745C12.5182 19.5871 12.5232 18.9539 12.1357 18.5604C11.7482 18.1668 11.1151 18.1619 10.7215 18.5493L8.14462 21.0864C6.90735 22.3045 4.89498 22.3045 3.65771 21.0864L2.92145 20.3615C1.69285 19.1519 1.69285 17.1973 2.92145 15.9877L8.07525 10.9136C9.31253 9.69546 11.3249 9.69547 12.5622 10.9136L13.2984 11.6385C13.692 12.0259 14.3251 12.021 14.7126 11.6275C15.1001 11.2339 15.0951 10.6008 14.7016 10.2133L13.9653 9.48842C11.9496 7.50386 8.68783 7.50386 6.6721 9.48841L1.5183 14.5625C-0.506099 16.5556 -0.506098 19.7936 1.5183 21.7867L2.25455 22.5116Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.51472 15.906C11.8579 18.2501 15.6569 18.2501 18 15.906L22.2426 11.6616C24.5858 9.31754 24.5858 5.51699 22.2426 3.17288L20.8284 1.75808C18.4853 -0.586027 14.6863 -0.586027 12.3431 1.75808L11.2825 2.81918C10.5014 3.60055 10.5014 4.8674 11.2825 5.64877C12.0635 6.43014 13.3299 6.43014 14.1109 5.64877L15.1716 4.58767C15.9526 3.8063 17.219 3.8063 18 4.58767L19.4142 6.00247C20.1953 6.78384 20.1953 8.05069 19.4142 8.83206L15.1716 13.0764C14.3905 13.8578 13.1242 13.8578 12.3431 13.0764L11.636 12.369C10.855 11.5877 9.58866 11.5877 8.80761 12.369C8.02656 13.1504 8.02656 14.4173 8.80761 15.1986L9.51472 15.906Z" fill="#3E3832"/>
+<path d="M14.4853 8.09396C12.1421 5.74986 8.34314 5.74985 6 8.09396L1.75736 12.3384C-0.585786 14.6825 -0.585787 18.483 1.75736 20.8271L3.17157 22.2419C5.51472 24.586 9.31371 24.586 11.6569 22.2419L12.7175 21.1808C13.4986 20.3995 13.4986 19.1326 12.7175 18.3512C11.9365 17.5699 10.6701 17.5699 9.88909 18.3512L8.82843 19.4123C8.04738 20.1937 6.78105 20.1937 6 19.4123L4.58579 17.9975C3.80474 17.2162 3.80474 15.9493 4.58579 15.1679L8.82843 10.9236C9.60948 10.1422 10.8758 10.1422 11.6569 10.9236L12.364 11.631C13.145 12.4123 14.4113 12.4123 15.1924 11.631C15.9734 10.8496 15.9734 9.58273 15.1924 8.80136L14.4853 8.09396Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16V2H22V16H8ZM6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H18V22C18 23.1046 17.1046 24 16 24H2C0.895431 24 0 23.1046 0 22V8C0 6.89543 0.895431 6 2 6H6V1ZM6 8V17C6 17.5523 6.44772 18 7 18H16V22H2V8H6ZM14 10H10V8H14V4H16V8H20V10H16V14H14V10Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1C6 0.447716 6.44772 0 7 0H23C23.5523 0 24 0.447715 24 1V17C24 17.5523 23.5523 18 23 18H7C6.44772 18 6 17.5523 6 17V1ZM14 10V14H16V10L20 10V8L16 8V4H14V8H10V10H14ZM17 24H1C0.447716 24 0 23.5523 0 23V7C0 6.44772 0.447715 6 1 6H4V19C4 19.5523 4.44772 20 5 20H18V23C18 23.5523 17.5523 24 17 24Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.01096L23.0598 1.04481C24.3286 2.3565 24.3404 4.40707 23.2057 5.78656L22 7.25109V24H2V2H17.2933L17.7456 1.45042L17.8862 1.27963L18.0394 1.10889L18.0696 1.07797C19.3139 -0.193727 21.3848 -0.408755 22.8251 0.823961L22.8608 0.854533L23.0271 1.01096ZM15.6471 4H4V22H20V9.68214L14.1812 16.7559L9.272 18.975L6.96045 20.0199L7.55858 17.5547L8.83932 12.2761L15.2039 4.53926L15.2042 4.53888L15.2039 4.53857L15.6471 4ZM21.6612 4.51583L21.6611 4.51599L20.1639 6.33464L20.1634 6.33523L12.9327 15.1254L9.87014 16.5098L10.6749 13.1929L16.7488 5.80947L17.939 4.3626L17.9393 4.3622L17.9394 4.36215L17.9405 4.3608L18.0188 4.26567L19.4033 2.58351L19.4991 2.47669C20.0702 1.89304 20.9511 1.85255 21.5246 2.34338L21.5246 2.3434L21.6223 2.43532L21.6223 2.43534C22.1422 2.97278 22.1888 3.87388 21.6616 4.51541L21.6612 4.51583Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0271 1.00735L23.0598 1.04119C24.3286 2.35288 24.3404 4.40345 23.2057 5.78294L21.708 7.60217L14.1812 16.7523L22 7.24842V24H2V2H17.2903L17.7456 1.44681L17.8862 1.27601L18.0394 1.10527L18.0696 1.07435C19.3139 -0.197341 21.3848 -0.41237 22.8251 0.820347L22.8608 0.850918L23.0271 1.00735ZM21.6612 4.51222L21.6611 4.51237L20.1639 6.33103L20.1634 6.33162L12.9327 15.1218L9.87014 16.5062L10.6749 13.1893L16.7488 5.80585L17.939 4.35898L17.9393 4.35859L17.9394 4.35853L17.9405 4.35718L18.0188 4.26206L19.4033 2.5799L19.4991 2.47307C20.0702 1.88943 20.9511 1.84893 21.5246 2.33977L21.5246 2.33978L21.6223 2.43171L21.6223 2.43172C22.1422 2.96916 22.1888 3.87027 21.6616 4.5118L21.6612 4.51222Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9998 17.1959V14.5544L21.5299 12.3481C21.9983 12.0553 22.1406 11.4384 21.8479 10.9701C21.5552 10.5017 20.9383 10.3594 20.4699 10.6521L17.9998 12.1959V7.02724C18.0043 6.85811 17.9656 6.69086 17.8888 6.54166C17.7914 6.35317 17.6358 6.19963 17.4457 6.10481L5.92689 0.113051C5.43694 -0.141811 4.83314 0.0487713 4.57828 0.538729C4.32342 1.02869 4.514 1.63248 5.00396 1.88734L12.9106 6.00015H2.99997C2.44769 6.00015 1.99998 6.44787 1.99998 7.00015V23C1.99998 23.5523 2.44769 24 2.99997 24H16.9999C17.5521 24 17.9998 23.5523 17.9998 23V19.5544L21.5299 17.3481C21.9982 17.0553 22.1406 16.4384 21.8479 15.9701C21.5552 15.5017 20.9383 15.3594 20.4699 15.6521L17.9998 17.1959ZM15.9999 18.9974V14.0047V13.9973V8.00014H3.99997V22H15.9999V19.0046V18.9974ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9998 7.02724V12.1959L20.4699 10.6521C20.9383 10.3594 21.5552 10.5017 21.8479 10.9701C22.1406 11.4384 21.9983 12.0554 21.5299 12.3481L17.9998 14.5544V17.1959L20.4699 15.6521C20.9383 15.3594 21.5552 15.5017 21.8479 15.9701C22.1406 16.4384 21.9982 17.0553 21.5299 17.3481L17.9998 19.5544V23C17.9998 23.5523 17.5521 24 16.9999 24H2.99997C2.44769 24 1.99998 23.5523 1.99998 23V7.00015C1.99998 6.44787 2.44769 6.00015 2.99997 6.00015H12.9106L5.00396 1.88734C4.514 1.63248 4.32342 1.02869 4.57828 0.538729C4.83314 0.0487713 5.43694 -0.141811 5.92689 0.113051L17.4457 6.10481C17.6358 6.19963 17.7914 6.35317 17.8888 6.54166C17.9656 6.69086 18.0043 6.85811 17.9998 7.02724ZM6.99994 18.0001C6.44766 18.0001 5.99995 18.4478 5.99995 19C5.99995 19.5523 6.44766 20 6.99994 20H12.9999C13.5522 20 13.9999 19.5523 13.9999 19C13.9999 18.4478 13.5522 18.0001 12.9999 18.0001L6.99994 18.0001Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 6.93671L12.2673 7.17036C8.69604 7.65193 6.1851 9.64766 4.51125 12.423C3.60163 13.9312 2.9476 15.6631 2.53546 17.4722C3.01938 16.8564 3.54509 16.2463 4.1131 15.6615C6.02443 13.6938 8.51404 11.9122 11.5955 11.2759L14 10.7794V14.1589L21.2613 9.04409L14 3.92931V6.93671ZM2.00483 21.8319C1.98661 21.8633 1.96852 21.8946 1.95055 21.9259C1.87942 22.0496 1.81022 22.1719 1.74298 22.2926C1.6773 22.4105 1.61348 22.5269 1.55151 22.6415C1.20695 23.279 0 23.0173 0 22.2926C0 22.1308 0.00164753 21.9684 0.00495931 21.8056C0.00785945 21.6631 0.0120358 21.5202 0.0174997 21.377C0.0188241 21.3423 0.0202242 21.3076 0.0217002 21.2728C0.32595 14.1118 3.85178 6.28706 12 5.1883V2.00175C12 1.19139 12.9134 0.717542 13.5759 1.1842L23.5737 8.22654C24.1392 8.62488 24.1392 9.46329 23.5737 9.86163L13.5759 16.904C12.9134 17.3706 12 16.8968 12 16.0864V13.2346C11.3031 13.3785 10.6364 13.5944 10 13.8685C6.32101 15.4535 3.65449 18.9871 2.00483 21.8319Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5759 16.904L23.5737 9.86163C24.1392 9.46329 24.1392 8.62488 23.5737 8.22654L13.5759 1.1842C12.9134 0.717542 12 1.19139 12 2.00175V5.1883C3.46298 6.33949 0 14.8739 0 22.2926C0 23.0173 1.20695 23.279 1.55151 22.6415C3.39544 19.2298 6.88128 14.2916 12 13.2346V16.0864C12 16.8968 12.9134 17.3706 13.5759 16.904Z" fill="#3E3832"/>
+</svg>
@@ -0,0 +1,13 @@
+{
+  "extends": "../../utilities/build/tsconfig-pakker.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "esModuleInterop": true,
+    "module": "ES2020",
+    "target": "ES2015",
+    "outDir": "./esm",
+    "sourceMap": true,
+    "declaration": true
+  },
+  "include": ["./src"]
+}
@@ -1,11 +1,13 @@
 {
  "extends": "../../utilities/build/tsconfig-pakker.json",
  "compilerOptions": {
-    "module": "ES6",
-    "outDir": "./lib",
+    "module": "commonjs",
+    "outDir": "./cjs",
+    "target": "es2015",
    "rootDir": "./src",
    "esModuleInterop": true,
-    "sourceMap": true
+    "sourceMap": false,
+    "declaration": false
  },
  "include": ["./src"]
 }
@@ -0,0 +1,6 @@
+{
+  "type": "commonjs",
+  "main": "index.js",
+  "typings": "../esm/index.d.ts",
+  "sideEffects": false
+}
@@ -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;
@@ -1,3 +0,0 @@
-export { default as Layout } from "./Layout";
-export * from "./Layout";
-export * from "./Section";
@@ -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>
-);
@@ -1,34 +1,40 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.1.0",
+  "version": "0.2.8",
  "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",
+    "/src"
  ],
-  "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",
+    "clean": "rm -rf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
    "watch": "tsc --watch -p tsconfig.json"
  },
  "dependencies": {
-    "@navikt/ds-css": "0.1.0",
-    "@navikt/ds-icons": "^0.1.0",
+    "@navikt/ds-icons": "^0.2.1",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -38,6 +44,7 @@
    "uuid": "^8.3.2"
  },
  "devDependencies": {
+    "copyfiles": "^2.4.1",
    "react-router-dom": "^5.2.0"
  },
  "peerDependencies": {
@@ -0,0 +1,40 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import { AccordionMenu as BaseAccordionMenu } from "../accordion-menu";
+import { Heading } from "../index";
+import { ActiveAnchorProvider } from "./ActiveAnchorStore";
+import cl from "classnames";
+
+export interface AccordionAnchorMenuProps
+  extends HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionAnchorMenu = forwardRef<
+  HTMLDivElement,
+  AccordionAnchorMenuProps
+>(({ children, title, className, ...rest }, ref) => (
+  <div
+    className={cl("navds-accordion-anchor-menu", className)}
+    ref={ref}
+    {...rest}
+  >
+    {title && (
+      <Heading
+        level={2}
+        size="medium"
+        className="navds-accordion-anchor-menu__title"
+      >
+        {title}
+      </Heading>
+    )}
+    <ActiveAnchorProvider>
+      <BaseAccordionMenu aria-label={title || "Meny"}>
+        {children}
+      </BaseAccordionMenu>
+    </ActiveAnchorProvider>
+  </div>
+));
+
+export default AccordionAnchorMenu;
@@ -0,0 +1 @@
+export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";
@@ -0,0 +1,39 @@
+import React, { forwardRef, useEffect } from "react";
+import { AccordionMenuItem, AccordionMenuItemType } from "../accordion-menu";
+import { useStore } from "./ActiveAnchorStore";
+
+const AccordionAnchorMenuItem: AccordionMenuItemType = forwardRef(
+  (props, ref) => {
+    const isAnchorActive = useIsAnchorActive(
+      props.href && props.href.split("#")[1]
+    );
+
+    return (
+      <AccordionMenuItem
+        {...props}
+        ref={ref}
+        active={props.active || isAnchorActive}
+      />
+    );
+  }
+);
+
+const useIsAnchorActive = (anchor: string | undefined) => {
+  const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
+
+  useEffect(() => {
+    if (anchor) {
+      const target = document.getElementById(anchor);
+      if (target) {
+        registerAnchor(anchor);
+        return () => {
+          unregisterAnchor(anchor);
+        };
+      }
+    }
+  }, [anchor, registerAnchor, unregisterAnchor]);
+
+  return (anchor && activeAnchor === anchor) || false;
+};
+
+export default AccordionAnchorMenuItem;
@@ -0,0 +1,69 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  useEffect,
+} from "react";
+
+export interface ActiveAnchorStore {
+  activeAnchor?: string;
+  registerAnchor: (anchor: string) => void;
+  unregisterAnchor: (anchor: string) => void;
+}
+
+export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
+export const ActiveAnchorProvider = ({ children }) => {
+  const [anchors, setAnchors] = useState<string[]>([]);
+  const [activeAnchor, setActiveAnchor] = useState<string>();
+
+  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]);
+
+  return (
+    <ActiveAnchorContext.Provider
+      value={{
+        activeAnchor,
+        registerAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => [...anchors, anchor]);
+        }, []),
+        unregisterAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
+        }, []),
+      }}
+    >
+      {children}
+    </ActiveAnchorContext.Provider>
+  );
+};
+export const useStore = () => useContext(ActiveAnchorContext);
@@ -0,0 +1,3 @@
+export { default as AccordionAnchorMenu } from "./AccordionAnchorMenu";
+export { AccordionAnchorMenuCollapsable } from "./AccordionAnchorMenuCollapsable";
+export { default as AccordionAnchorMenuItem } from "./AccordionAnchorMenuItem";
@@ -0,0 +1,141 @@
+import * as React from "react";
+import {
+  AccordionAnchorMenu as Menu,
+  AccordionAnchorMenuCollapsable as Collapsable,
+  AccordionAnchorMenuItem as Item,
+} 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";
+
+export default {
+  title: "ds-react/accordion-anchor-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"} smoothScrollBehavior>
+        <Item href={"#leo-quis"}>Leo quis</Item>
+        <Collapsable title={"Proin accumsan"}>
+          <Item href={"#nulla-pariatur"}>Nulla pariatur</Item>
+          <Item href={"#luctus-justo"}>Luctus justo</Item>
+        </Collapsable>
+        <Item href={"#maecenas-in-pretium"}>Maecenas in pretium</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>
+        <Item component={Link} to="/link1">
+          Leo quis
+        </Item>
+        <Collapsable title={"Proin accumsan"}>
+          <Item component={Link} to="/link2">
+            Nulla pariatur
+          </Item>
+          <Item component={Link} to="/link3">
+            Luctus justo
+          </Item>
+        </Collapsable>
+        <Collapsable title={"Sint cupidatat"}>
+          <Item component={Link} to="/link4">
+            Nulla pariatur
+          </Item>
+          <Item component={Link} to="/link5">
+            Luctus justo
+          </Item>
+        </Collapsable>
+        <Item component={Link} to="/link6">
+          Maecenas in pretium
+        </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>
+  ),
+];
@@ -0,0 +1,25 @@
+import React, { forwardRef, HTMLAttributes } from "react";
+import cl from "classnames";
+import MenuItems from "./MenuItems";
+
+export interface AccordionMenuProps extends HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionMenu = forwardRef<HTMLElement, AccordionMenuProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <nav
+        role="navigation"
+        ref={ref}
+        className={cl("navds-accordion-menu", className)}
+        {...rest}
+      >
+        <MenuItems>{children}</MenuItems>
+      </nav>
+    );
+  }
+);
+
+export default AccordionMenu;
@@ -0,0 +1,44 @@
+import React, { forwardRef, HTMLAttributes, useState } from "react";
+import cl from "classnames";
+import { Expand } from "@navikt/ds-icons";
+import MenuItems from "./MenuItems";
+
+export interface AccordionMenuCollapsableProps
+  extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const AccordionMenuCollapsable = forwardRef<
+  HTMLDivElement,
+  AccordionMenuCollapsableProps
+>(({ children, defaultOpen = false, title, className, ...rest }, ref) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      ref={ref}
+      className={cl("navds-accordion-menu-collapsable", className, {
+        "navds-accordion-menu-collapsable--open": isOpen,
+      })}
+      {...rest}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="navds-accordion-menu-collapsable__button"
+      >
+        {title}
+        <Expand
+          role="img"
+          aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
+          className="navds-accordion-menu-collapsable__expand-icon"
+        />
+      </button>
+      {isOpen && <MenuItems>{children}</MenuItems>}
+    </div>
+  );
+});
+
+export default AccordionMenuCollapsable;
@@ -0,0 +1,40 @@
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util";
+import cl from "classnames";
+
+export type AccordionMenuItemType = OverridableComponent<AccordionMenuItemProps>;
+
+export interface AccordionMenuItemProps {
+  props: {
+    children: React.ReactNode;
+    active?: boolean;
+  } & React.HTMLAttributes<HTMLAnchorElement>;
+  defaultComponent: "a";
+}
+
+const AccordionMenuItem: AccordionMenuItemType = forwardRef(
+  (
+    {
+      children,
+      component: Component = "a",
+      active = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cl("navds-accordion-menu-item", className, {
+          "navds-accordion-menu-item--active": active,
+        })}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+
+export default AccordionMenuItem;
@@ -0,0 +1,16 @@
+import React from "react";
+
+/**
+ * @ignore
+ */
+const MenuItems = ({ children }) => (
+  <ul className="navds-accordion-menu__list">
+    {React.Children.toArray(children).map((child, i) => (
+      <li key={i} className="navds-accordion-menu__list-item">
+        {child}
+      </li>
+    ))}
+  </ul>
+);
+
+export default MenuItems;
@@ -0,0 +1,6 @@
+export { default as AccordionMenu } from "./AccordionMenu";
+export { default as AccordionMenuCollapsable } from "./AccordionMenuCollapsable";
+export {
+  default as AccordionMenuItem,
+  AccordionMenuItemType,
+} from "./AccordionMenuItem";
@@ -0,0 +1,160 @@
+import * as React from "react";
+import {
+  AccordionMenu,
+  AccordionMenuItem as Item,
+  AccordionMenuCollapsable as Collapsable,
+} from "../index";
+import { NavLink, HashRouter as Router } from "react-router-dom";
+
+export default {
+  title: "ds-react/accordion-menu",
+  component: { AccordionMenu },
+  parameters: {
+    backgrounds: {
+      default: "light",
+      values: [
+        {
+          name: "light",
+          value: "#F1F1F1",
+        },
+        {
+          name: "white",
+          value: "#fff",
+        },
+      ],
+    },
+  },
+};
+
+export const All = () => (
+  <div
+    style={{
+      background: "white",
+      maxWidth: 288,
+    }}
+  >
+    <AccordionMenu>
+      <Item href="#leo">Leo</Item>
+      <Collapsable title="Proin">
+        <Item href="#nulla" active>
+          Nulla
+        </Item>
+        <Item href="#luctus">Luctus</Item>
+      </Collapsable>
+      <Collapsable title="Accumsan">
+        <Item href="#justo" ariaCurrent="page">
+          Justo
+        </Item>
+        <Item href="#pariatur" active ariaCurrent="page">
+          Pariatur
+        </Item>
+        <Collapsable title="Proin">
+          <Item href="#nulla" active>
+            Nulla
+          </Item>
+          <Item href="#luctus">Luctus</Item>
+        </Collapsable>
+      </Collapsable>
+      <Item href="#justo" active>
+        Justo
+      </Item>
+      <Item href="#pariatur">Pariatur</Item>
+    </AccordionMenu>
+  </div>
+);
+
+export const ReactRouter = () => (
+  <AccordionMenu>
+    <Collapsable title="Nivå 1 – 3 rems høy">
+      <Item
+        component={NavLink}
+        activeClassName="navds-accordion-menu-item--active"
+        to="/1"
+      >
+        Nivå 2 innrykk 2 rems
+      </Item>
+      <Item
+        component={NavLink}
+        activeClassName="navds-accordion-menu-item--active"
+        to="/2"
+      >
+        Subtitle 3
+      </Item>
+    </Collapsable>
+    <Collapsable title="Skjema og søknad">
+      <Collapsable title="Satser">
+        <Item
+          component={NavLink}
+          activeClassName="navds-accordion-menu-item--active"
+          to="/3"
+        >
+          Nivå 3 – 3 rems innrykk Har du rett til dagpenger når du mottar annen
+          økonomisk støtte fra NAV?
+        </Item>
+      </Collapsable>
+      <Item
+        component={NavLink}
+        activeClassName="navds-accordion-menu-item--active"
+        to="/4"
+      >
+        Subtitle 2
+      </Item>
+      <Item
+        component={NavLink}
+        activeClassName="navds-accordion-menu-item--active"
+        to="/5"
+      >
+        Subtitle 3
+      </Item>
+    </Collapsable>
+    <Collapsable title="Sakbehandlingstider">
+      <Collapsable title="Subtitle 4 Lang tittel på andre nivå lorem ipsum">
+        <Item
+          component={NavLink}
+          activeClassName="navds-accordion-menu-item--active"
+          to="/6"
+        >
+          Subtitle 5
+        </Item>
+      </Collapsable>
+    </Collapsable>
+    <Item
+      component={NavLink}
+      activeClassName="navds-accordion-menu-item--active"
+      to="/7"
+    >
+      Internasjonalt
+    </Item>
+    <Collapsable title="Meld fra om endringer lang tittel på første nivå">
+      <Item
+        component={NavLink}
+        activeClassName="navds-accordion-menu-item--active"
+        to="/8"
+      >
+        Subtitle 6
+      </Item>
+    </Collapsable>
+    <Item
+      component={NavLink}
+      activeClassName="navds-accordion-menu-item--active"
+      to="/9"
+    >
+      Nivå 1
+    </Item>
+  </AccordionMenu>
+);
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <div
+        style={{
+          background: "white",
+          maxWidth: 288,
+        }}
+      >
+        <Story />
+      </div>
+    </Router>
+  ),
+];
@@ -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;
 }

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Accordion } from "../index";

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Alert } from "../index";

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

@@ -1,10 +1,30 @@
 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";
+  /**
+   * Prevent the user from interacting with the button: it cannot be pressed or focused.
+   * @default false
+   */
+  disabled?: boolean;
 }

 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -2,7 +2,7 @@ import React from "react";
 import { Button } from "../index";

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

@@ -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
@@ -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) => {
@@ -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;
 }

@@ -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}>
@@ -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",
@@ -1,3 +1,13 @@
+export {
+  AccordionAnchorMenu,
+  AccordionAnchorMenuCollapsable,
+  AccordionAnchorMenuItem,
+} from "./accordion-anchor-menu";
+export {
+  AccordionMenu,
+  AccordionMenuCollapsable,
+  AccordionMenuItem,
+} from "./accordion-menu";
 export { Accordion, AccordionProps } from "./accordion/index";
 export { Alert, AlertProps } from "./alert/index";
 export { Button, ButtonProps } from "./button/index";
@@ -14,7 +24,11 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
-export { Layout, LayoutProps, SectionProps } from "./layout/index";
+export {
+  ProductPageLayout,
+  ProductPageLayoutProps,
+  ProductPageLayoutSectionProps,
+} from "./layouts/index";
 export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
@@ -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>(
@@ -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;
 }

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

@@ -7,7 +7,7 @@ import {
 } from "../index";

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

@@ -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";
@@ -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;
@@ -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;
Author	SHA1	Message	Date
github-actions[bot]	4b1424daf2	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.8	2021-04-07 06:54:54 +00:00
Ken	318b8c8ac6	Less støtte for docs (#1059 ) * oppdatert til less + modules * støtter nå less + css, erstattet modules med standard css	2021-04-07 08:41:42 +02:00
Ken	4dd746d27d	Fikset sourcemapping støtte for `@navikt/ds-react` (#1065 ) * flyttet filer til src-mapper * fjernet less fra ds-react story * forbedret exlude av stories	2021-04-07 08:41:24 +02:00
github-actions[bot]	ffcfe79c18	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.7	2021-04-06 07:28:27 +00:00
Andreas Nordahl	5d8d2ffba9	Add disabled to button props (#1063 )	2021-04-06 09:14:23 +02:00
github-actions[bot]	c785316086	Lerna versionbump [ci skip] - @navikt/ds-icons@0.2.1 - @navikt/ds-react@0.2.6	2021-04-06 06:55:27 +00:00
Jakob Havstein Eriksen	7087f160e8	Legger til sources i ds-icons (#1064 ) * Inkludér src i tarball, for sourcemaps * Fjern output-mapper før bygg for å unngå ts-feilmeldinger Eksempel på feilmelding: error TS5055: Cannot write file '/Users/jakob/dev/nav-frontend-moduler/@navikt/ds-react/esm/typography/Heading.d.ts' because it would overwrite input file.	2021-04-06 08:44:49 +02:00
Karina LudwigandAndreas Nordahl	235e48a843	Update overview.mdx (#1060 ) * Update overview.mdx * fix html structure. p in p is not legal Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-03-31 10:35:26 +02:00
Karina Ludwig	93fc5dc6ae	Update overview.mdx (#1061 )	2021-03-31 10:28:57 +02:00
github-actions[bot]	5c49902ffb	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.5	2021-03-30 08:00:35 +00:00
Andreas NordahlandKen	c9c148e050	use accordion menu in docs (#1057 ) * use accordion menu in docs * la til internal-padding for sidebar * menu update * oppdatert keys Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-30 09:47:25 +02:00
Andreas Nordahl	adf9de3c63	inset outline accordion menu (#1058 )	2021-03-30 09:36:51 +02:00
github-actions[bot]	26612e371d	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.4 - @navikt/ds-react@0.2.5 - @navikt/ds-tokens@0.1.2	2021-03-25 15:35:16 +00:00
Andreas NordahlandKen	b194506943	Accordion menu refactor (#1054 ) * accordion-menu-refactor * lint * styling * smaller padding for items * remove placeholder hover and focus style * use accordion-menu in accordion-anchor-menu * delete old css * balance title margins * aria-current * remove smooth scrolling code * remove unused import * fikset smoothscroll * fix reponsive padding for accordion-anchor-menu in product page * accordion-menu focus and hover style * oppdatert export navn * oppdatert export navn anchor-menu * oppdatert index import/export * oppdatert props * increase height * remove unused style Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-25 16:20:26 +01:00
github-actions[bot]	79dbffff1d	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.3	2021-03-24 14:11:12 +00:00
Ken	0359934bb9	Smooth scrollbehavior baseline.css (#1055 )	2021-03-24 14:58:44 +01:00
github-actions[bot]	2723363fa0	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.2 - @navikt/ds-react@0.2.4 - @navikt/ds-tokens@0.1.1	2021-03-22 13:22:25 +00:00
Morten Jansrud Ken Ken Andreas Nordahl	d56bc72977	Rename Layout til ProductPageLayout, legg til tittel og container (#1022 ) * Rename Layout til ProductPageLayout, legg til tittel og container * Juster padding på header * Korriger mobil-visning * Korriger brekkpunkt * Del opp css * Fjern ubrukt import * Korriger klassenavn * Legg på --decorator-sticky-offset på sticky-menyer * Legg modul under riktig mappe * Merge * Oppdater ds-icons * Fjern react-dom * Revert package.json endringer * Fiks typo i package.json * Legg inn avhengighet til @navikt/nav-dekoratoren-moduler * Oppdater versjon av @navikt/nav-dekoratoren-moduler * Refaktorer css * Fiks identering * Rename decorator function name * Prettify * Fiks react-import * Flytt på import * Fjern avhengigheten til nav-dekoratoren-moduler * Sett bakgrunnsfarge på body * Fjern nav-dekoratoren-moduler fra yarn lock * Layout with panels (#1023) * Legg til panel i layouts * Oppdaters responsive regler * Fiks posisjonen på ikonet * Responsive tweak * Rename klasser * Legg til funksjonalitet for kopiering * Endre til et mer logisk funksjonsnavn * Engelsk klassenavn * Legg til highlight param * Oppdater eksempel * Fiks linting * Fjern ubrukte imports * Fiks styling * Oppdater anker * Flytt id * Fjern trailing slash * Endre bakgrunn på body * Bugfiks for copyToClipboard * Flytt window.location inn i onClick * Rename variabeler * Fiks gutters * Bugfixes * Bugfixes * Accordion menu (#1019) * Legg til dekoratøren på content-container og layout i storybook * Fjern duplikat bakgrunn * Dytt footer til bunnen av siden * Flytt styling til preview-head.html * Legg til prettier ignore på en stygg linje * Flytt env til toppen av fil * Flytt docs-root * Legg til accordion-menu * Oppdater eksempeldata, dropdown -> collapsable * V2 * Oppdater dummy-data * Fiks linting * Fiks imports * Oppdater size * Fiks feil på layout * Korriger størrelser på teksten * Merge * Fiks logikk for aktivt element i sidemeny * Legg komponent under riktig kategori * fjernet bruken av nav-frontend- pakker * endringer for venstre-notch active link * width px -> rem for notch * Accordion menu med Overridablecomponent (#1034) * oppdatert til link * now with overridable component * ignore stories in eslint * riktig styling * imports opprydding * fjernet console log * Fiks skrivefeil i variabelnavn * Kun rendre tittel dersom den er definert * fikset active styling * Legg padding på lenkene * Refaktor styles * Flytt tilbake styling * Fjern ubrukt import * Flytt komponenter opp en mappe * Refaktor context * Legg til hooks dependencies * Flytt smoothScrollBehavior * Fjern ubrukt import * Refaktor register og unregister anchor * Benytt useCallback for å forhindre infinite loop * Rename store * Forhindre duplikat variabeldefinisjon * Endre default aria-label på nav * Set url hash * Revert store-endringer * Oppdater beta-versjon * Oppdater versjonsnr * Endre overskrift * Versjon 0.2.1-beta.1 * Rename variabler * v0.2.1-beta.1 * Sjekk om brukeren har scrollet til bunnen av siden * 0.2.1-beta.3 * IE11 support * v0.2.1-beta.4 * Margin only if not last child * v0.2.1-beta.5 * Rename css * 0.2.1-beta.6 * Legg til overridable component * Fjern prop * v0.2.1-beta.7 * Fiks body-padding * v0.2.1-beta.8 * v0.2.1-beta.8 * Fiks eslint-problemer * Fjern ubrukt import * Fiks signatur på funskjon * Fjern anchor-interface Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> * use popover for copied-text * oppdatert versjoner Co-authored-by: Ken <ken.aleksander@gmail.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-03-22 14:07:34 +01:00
Andreas NordahlandKen	e203d669e1	Refactor docs mdx handling (#1050 ) * remove unused plugins and mdxproviders * toc in getStaticProps * unused imports * strange next link behaviour * moved mdxcomponents * slugger slugging slugs * fjernet ubrukte npm-pakker Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-22 10:04:07 +01:00
Andreas NordahlandKen	90c06964a3	dynamic docs menu PoC (#1047 ) * dynamic docs menu PoC * working menu * render mdx * remove stray parens * null check * npm works :) * fix index page and toc * fikset id for heading Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-19 12:01:44 +01:00
Ken	c35850a5e5	Nextjs TableOfContents (#1048 ) * oppdatert toc * oppdatert toc * pr fix * css update	2021-03-19 11:31:58 +01:00
Henning Håkonsen	fd2ebe2629	Update README.md (#1046 )	2021-03-18 09:50:50 +01:00
Ken	206cdaa2ce	Forsøk på manuell sidestruktur (#1045 ) * demo sidebar * flyttet menu * fjernet route * fikset imports * refactored meny * fikset key	2021-03-17 13:44:52 +01:00
github-actions[bot]	42bc4288f5	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.3	2021-03-17 10:37:50 +00:00
Ken	3d7cc1112c	Oppdatert kommentarer for komponenter (#1043 ) * accordion comments + props * alert comments + props * button comments + props * contentcontainer comments + props * grid comments + props * grid + internal-header * oppdatert alle componenter * fjernet unødvendig endring i pr modal * fikset popover * fjernet prop-types fra komponenter	2021-03-17 11:26:13 +01:00
github-actions[bot]	00fec86f80	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.2	2021-03-16 13:23:29 +00:00
Ken	d631e4b611	setappelement extender nå Modal komponent (#1044 ) * setappelement implementert * fjernet comments	2021-03-16 14:10:48 +01:00
Ken	3097afe082	Nextjs base-struktur med mdx v0.1 (#1040 ) * nav-logo white * base-struktur layout * fjernet docs-old * fjernet docs-old * Code-preview, bash og npm (#1041) * laget code-preview * fikset styling * npm komponent	2021-03-16 11:08:14 +01:00
github-actions[bot]	fe22c83bef	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.1 - nav-frontend-hjelpetekst@2.0.57 - nav-frontend-popover@1.0.4	2021-03-16 09:30:14 +00:00
Ken	4684d487af	Fikset @navikt/ds-react popover + TSerror for nav-frontend-popover (#1038 ) * oppdatert vnext popover * oppdatert nav-frontend popover	2021-03-16 10:17:18 +01:00
Ken	7485befdfa	Stories typo fiks (#1036 ) * Update introduction.stories.mdx * install -> add	2021-03-16 10:15:53 +01:00
github-actions[bot]	313fd1558a	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.1	2021-03-11 08:24:39 +00:00
Ken	e184e872a1	Hot-reloading av css i storybook, watch script (#1037 ) * hot-reloading av css, watch script * fjernet postcss imports * navn watch-script	2021-03-11 09:10:21 +01:00
Ken	65bd0a8be6	oppdatert stories for å forklare v0.2.0 oppsett (#1035 )	2021-03-10 15:18:06 +01:00
Ken	1eadf5d287	Update package.json	2021-03-10 14:56:08 +01:00
Ken	541ef45b8e	Update package.json	2021-03-10 14:55:48 +01:00
github-actions[bot]	709c20ed6d	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.0 - @navikt/ds-icons@0.2.0 - @navikt/ds-react@0.2.0	2021-03-10 13:53:25 +00:00
Ken	6530211445	Fjernet css-imports i komponenter (vnext) (#1030 ) * fjernet ds-react dep for css * fjernet styling fra alle komponenter * minified css * flyttet normalize fra node til lokalt * oppdatert pakke-versjoner * fikset website deps * Update preview.js * yarn lock * flyttet normalize til top * fikset dist og sourcemap * yarn lock * fikset css imports * storybook bruker nå kompilert index.css * Endret css naming fra index -> komponentnavn (#1032) * renamet css fra index -> navn * flyttet css ut fra mapper * css til beta	2021-03-10 14:36:58 +01:00
Ken	88a665f772	Tree-shakable ds-react og ds-icons (#1033 ) * oppdatert ikonpakke for esm støttte * ds-react med esm exports * opprydding package.json, sideeffects * oppdatert ds-react * target es2015 * oppdatert ds-icons for esm * oppdatert ds-icons for esm * oppdatert ds-react script * oppdatert clean script * eslint fiks * minor bump for pakker * yarn lock	2021-03-10 13:51:11 +01:00
Ken	dc2b063fda	Update CHANGELOG.md	2021-03-10 10:07:50 +01:00
Ken	1414f85484	Update CHANGELOG.md	2021-03-10 10:03:14 +01:00
github-actions[bot]	2fd93bb2be	Lerna versionbump [ci skip] - nav-frontend-skjema-style@2.1.0 - nav-frontend-skjema@3.1.0	2021-03-10 08:47:58 +00:00
Ken	1360789bc3	Endret feil-styling og state-handling for skjema-komponenter (#1018 ) * bedre feilhåndtering for skjemaelementer * oppdatert disabled + feil state * yarn lockfile * oppdatert stories * oppdatert examples * oppdatert yarn lock * oppdatert versions * oppdatert versions-2 * oppdatert version * fikset state-styling * yarn lock	2021-03-10 09:34:13 +01:00
Ken	cecc905f58	Oppgradert storybook (#1027 ) * oppdatert stories * oppdatert nav-frontend stories * oppdatert warnings, theme * oppdatert ikoner stories * oppdatert chromatic script * flyttet env variabel * oppdatert yarn lock	2021-03-08 13:49:40 +01:00
Audun Fauchald Strandandsnyk-bot	1cda942e61	fix: package.json to reduce vulnerabilities (#1028 ) The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-GLOBPARENT-1016905 Co-authored-by: snyk-bot <snyk-bot@snyk.io>	2021-03-08 13:45:32 +01:00
Ken	ab3a4289ea	Omskrevet hvordan react-docgen genereres (#1029 ) * ny generering av docs * gatsby bruker nå nye props * flyttet docgen til gatsby build steg * fjernet docgen copi * yarn lock	2021-03-08 12:00:43 +01:00
Ken	9bafdd3c06	Satt opp nextjs for ny nettside (#1031 ) * setup-ready * flyttet useRoute * config testing nextjs * renamet til docs * opprydding * yarn lock * oppdatert readme	2021-03-08 11:55:09 +01:00
github-actions[bot]	90c1b3ce0e	Lerna versionbump [ci skip] - @navikt/ds-icons@0.1.7 - @navikt/ds-react@0.1.2	2021-03-05 13:16:16 +00:00
Andreas NordahlandKen	d5d2996896	Display font size of each typography component in clear text in doc (#1025 ) * Display font size of each typography component in clear text in doc * oppdatert font-eksempel Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-05 14:01:50 +01:00
Ken	7c63f23dd0	Sync ikoner fra Figma (#1026 ) * oppdatert ikoner * genererer riktige farger for alle path elementer	2021-03-05 14:01:28 +01:00
github-actions[bot]	7be4a72afc	Lerna versionbump [ci skip] - @navikt/ds-css@0.1.17 - @navikt/ds-react@0.1.1	2021-03-05 08:28:46 +00:00
Ken	5c64474a59	Fikset gatsby-bug, småfeil (#1024 ) * fikset bug, fikset småfeil i dependencies * oppdatert yarn lock * oppdatert dep	2021-03-05 09:14:56 +01:00
				`@@ -0,0 +1 @@`
				`export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";`