Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.13

.github/workflows/build-publish.yml

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

.gitignore

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

.husky/.gitignore

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

.storybook/main.js

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

.storybook/manager.js

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

.storybook/preview.js

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

.storybook/stories/introduction.stories.mdx

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

.storybook/theme.js

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

.storybook/webpack.config.js

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

@navikt/ds-css/accordion-anchor-menu.css

@@ -0,0 +1,8 @@
+.navds-accordion-anchor-menu {
+  padding: 1rem 0;
+}
+
+.navds-accordion-anchor-menu__title {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}

@navikt/ds-css/accordion-menu.css

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

@navikt/ds-css/accordion.css

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

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

@@ -0,0 +1,37 @@
+@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:focus-within {
+  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;
+  }
+}

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

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

@navikt/ds-css/copy-to-clipboard.css

@@ -0,0 +1,10 @@
+.navds-copy-to-clipboard {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 0.5em;
+  padding: 0.25em;
+}
+
+.navds-copy-to-clipboard__popover {
+  padding: 0.25rem;
+}

@navikt/ds-css/grid.css

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

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

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

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

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

@navikt/ds-css/index.css

@@ -0,0 +1,16 @@
+@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 "copy-to-clipboard.css";
+@import "grid.css";
+@import "internal-header.css";
+@import "layouts.css";
+@import "link.css";
+@import "modal.css";
+@import "popover.css";
+@import "tag.css";
+@import "typography.css";

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/ds-css/layouts.css

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

@navikt/ds-css/modal.css

@@ -22,7 +22,7 @@
 }
 
 .navds-modal__overlay {
-  position: absolute;
+  position: fixed;
   z-index: var(--navds-z-index-modal-overlay);
   top: 0;
   bottom: 0;

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.1.16",
+  "version": "0.2.9",
   "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"
   }
 }

@navikt/ds-css/popover.css

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

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/ds-icons/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.1.6",
+  "version": "0.2.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
+  }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@navikt/ds-icons/tsconfig.json

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

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

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

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

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

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

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

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

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

@navikt/ds-react/package.json

@@ -1,36 +1,43 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.1.0",
+  "version": "0.2.13",
   "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",
-    "watch": "tsc --watch -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-esm.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",
+    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.12.1",
@@ -38,6 +45,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "copyfiles": "^2.4.1",
     "react-router-dom": "^5.2.0"
   },
   "peerDependencies": {

@navikt/ds-react/src/accordion-anchor-menu/AccordionAnchorMenu.tsx

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

@navikt/ds-react/src/accordion-anchor-menu/AccordionAnchorMenuCollapsable.tsx

@@ -0,0 +1 @@
+export { AccordionMenuCollapsable as AccordionAnchorMenuCollapsable } from "../accordion-menu";

@navikt/ds-react/src/accordion-anchor-menu/AccordionAnchorMenuItem.tsx

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

@navikt/ds-react/src/accordion-anchor-menu/ActiveAnchorStore.tsx

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

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

@@ -0,0 +1,3 @@
+export { default as AccordionAnchorMenu } from "./AccordionAnchorMenu";
+export { AccordionAnchorMenuCollapsable } from "./AccordionAnchorMenuCollapsable";
+export { default as AccordionAnchorMenuItem } from "./AccordionAnchorMenuItem";

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

@@ -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>
+  ),
+];

@navikt/ds-react/src/accordion-menu/AccordionMenu.tsx

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

@navikt/ds-react/src/accordion-menu/AccordionMenuCollapsable.tsx

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

@navikt/ds-react/src/accordion-menu/AccordionMenuItem.tsx

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

@navikt/ds-react/src/accordion-menu/MenuItems.tsx

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

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

@@ -0,0 +1,6 @@
+export { default as AccordionMenu } from "./AccordionMenu";
+export { default as AccordionMenuCollapsable } from "./AccordionMenuCollapsable";
+export {
+  default as AccordionMenuItem,
+  AccordionMenuItemType,
+} from "./AccordionMenuItem";

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

@@ -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>
+  ),
+];

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

@@ -1,17 +1,39 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-
 import { Expand } from "@navikt/ds-icons";
-import "@navikt/ds-css/accordion/index.css";
 import { v4 as uuidv4 } from "uuid";
 
 export interface AccordionProps
   extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Content on interactive surface of component
+   */
   heading: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   * @default false
+   */
   open?: boolean;
+  /**
+   * Callback for when user interacts with component
+   *
+   * @param {object} event
+   */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
   renderContentWhenClosed?: boolean;
 }
 

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

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

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

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

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

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

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

@@ -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>(

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

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

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

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

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

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

@navikt/ds-react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -0,0 +1,81 @@
+import { Files } from "@navikt/ds-icons";
+import copy from "copy-to-clipboard";
+import cl from "classnames";
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import { Popover, Button } from "../index";
+
+export interface CopyToClipboardProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Text to be copied to clipboard
+   */
+  text: string;
+  /**
+   * Description of text, examples: "personnummer", "navn", "epost" etc.
+   */
+  label: string;
+  /**
+   * Use a differnet icon to display
+   * @default "Files" from @navikt/ds-icons
+   */
+  icon?: React.ReactElement;
+}
+
+const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
+  ({ children, text, label, icon, className, ...rest }, ref) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const mergedRef = mergeRefs([buttonRef, ref]);
+    const timeoutRef = useRef<NodeJS.Timeout>();
+    const [openPopover, setOpenPopover] = useState(false);
+
+    useEffect(() => {
+      if (openPopover) {
+        timeoutRef.current = setTimeout(() => setOpenPopover(false), 2000);
+        return () => timeoutRef.current && clearTimeout(timeoutRef.current);
+      }
+    }, [openPopover]);
+
+    const title = `Kopier ${label} (${text})`;
+
+    const handleClick = () => {
+      copy(text);
+      setOpenPopover(true);
+    };
+
+    return (
+      <>
+        <Button
+          ref={mergedRef}
+          variant="secondary"
+          title={title}
+          className={cl("navds-copy-to-clipboard", className)}
+          onClick={handleClick}
+          {...rest}
+        >
+          {icon ? <>{icon}</> : <Files aria-label="Fil ikon for kopiering" />}
+          {children ? children : <span className="sr-only">{title}</span>}
+        </Button>
+        <Popover
+          role="alert"
+          anchorEl={buttonRef.current}
+          open={openPopover}
+          onClose={() => setOpenPopover(false)}
+          placement="right"
+          arrow={false}
+          className="navds-copy-to-clipboard__popover"
+        >
+          {label}
+        </Popover>
+      </>
+    );
+  }
+);
+
+export default CopyToClipboard;

@navikt/ds-react/src/copy-to-clipboard/index.ts

@@ -0,0 +1,2 @@
+export { default as CopyToClipboard } from "./CopyToClipboard";
+export * from "./CopyToClipboard";

@navikt/ds-react/src/copy-to-clipboard/stories/copy-to-clipboard.stories.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { CopyToClipboard } from "../index";
+import { Link } from "@navikt/ds-icons";
+
+export default {
+  title: "@ds-react/copy-to-clipboard",
+  component: CopyToClipboard,
+};
+
+export const All = () => {
+  const label = "pi";
+
+  const text = "3.14159265359";
+  return (
+    <div>
+      <h2>Fritstående knapp</h2>
+      <CopyToClipboard label={label} text={text} />
+
+      <h2>Sammen med tekst</h2>
+      <CopyToClipboard label={label} text={text}>
+        Kopier tekst
+      </CopyToClipboard>
+
+      <h2>Tilpasser seg fontstørrelse</h2>
+      <CopyToClipboard label={label} text={text} style={{ fontSize: "0.8rem" }}>
+        Kopier tekst
+      </CopyToClipboard>
+
+      <h2>Custom icon</h2>
+      <CopyToClipboard
+        icon={<Link />}
+        label={label}
+        text={text}
+        style={{ fontSize: "0.8rem" }}
+      >
+        Kopier tekst
+      </CopyToClipboard>
+    </div>
+  );
+};

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

@@ -1,12 +1,31 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/grid/index.css";
 
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface CellProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Component content
+   */
+  children?: React.ReactNode;
+  /**
+   * Cell columns on width < 448px
+   */
   xs: Column;
+  /**
+   * Cell columns on min-width: 448
+   */
   sm?: Column;
+  /**
+   * Cell columns on min-width: 648
+   */
   md?: Column;
+  /**
+   * Cell columns on min-width: 960px
+   */
   lg?: Column;
 }
 

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

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

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

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

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

@@ -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";
@@ -6,6 +16,7 @@ export {
   ContentContainerProps,
 } from "./content-container/index";
 export { Cell, CellProps, Grid, GridProps } from "./grid/index";
+export { CopyToClipboard } from "./copy-to-clipboard/index";
 export {
   InternalHeader,
   InternalHeaderProps,
@@ -14,7 +25,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";

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

@@ -1,10 +1,15 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
 }
 
 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(

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

@@ -1,10 +1,19 @@
 import React, { forwardRef, HTMLAttributes, createElement } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderTitleProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Tag this component will use. Usefull for defining a button/link
+   * @default "h1"
+   */
   element?: keyof React.ReactHTML;
 }
 

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

@@ -1,11 +1,19 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
-import "@navikt/ds-css/internal-header/index.css";
-import "@navikt/ds-css/typography/index.css";
 
 export interface InternalHeaderUserProps
   extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * user name
+   */
   name: string;
+  /**
+   * user ident
+   */
   ident: string;
 }
 

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

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