Lerna versionbump [ci skip]

- @navikt/ds-css@0.2.2 - @navikt/ds-react@0.2.4 - @navikt/ds-tokens@0.1.1
Rename Layout til ProductPageLayout, legg til tittel og container (#1022 )
2026-10-13 17:22:02 +00:00 · 2021-03-22 13:22:25 +00:00 · 2021-03-22 14:07:34 +01:00 · 2021-03-22 10:04:07 +01:00 · 2021-03-19 12:01:44 +01:00 · 2021-03-19 11:31:58 +01:00
81 changed files with 3342 additions and 849 deletions
@@ -0,0 +1,113 @@
+/*******************
+ * .accordion-menu *
+ *******************/
+
+.navds-accordion-menu__html {
+  scroll-behavior: smooth;
+}
+
+.navds-accordion-menu__nav {
+  padding: var(--navds-layout-padding-small) 0;
+  overflow: hidden;
+}
+
+.navds-accordion-menu__container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.navds-accordion-menu__title {
+  margin: var(--navds-layout-padding-small) 0;
+  padding: 0 var(--navds-layout-padding-small);
+}
+
+.navds-accordion-menu__item {
+  position: relative;
+  margin: 0;
+}
+
+.navds-accordion-menu__item--active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+  background-color: var(--navds-color-blue-50);
+}
+
+.navds-link.navds-accordion-menu__link,
+.navds-link.navds-accordion-menu__button {
+  min-height: 3rem;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--navds-layout-padding-small);
+  background: none;
+  cursor: pointer;
+}
+
+.navds-link.navds-accordion-menu__link--active:not(:active):not(:focus) {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--navds-color-text-primary);
+  text-decoration: none;
+}
+
+.navds-accordion-menu__chevron {
+  margin-right: 0.25rem;
+  font-size: 1rem;
+}
+
+.navds-accordion-menu__button {
+  display: flex;
+  clear: both;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  width: 100%;
+}
+
+.navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+.navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+  padding-left: calc(var(--navds-layout-padding-small) + 2rem);
+}
+
+@media (min-width: 448px) {
+  .navds-accordion-menu__nav {
+    padding: var(--navds-layout-padding-medium-and-larger) 0;
+  }
+
+  .navds-accordion-menu__title {
+    padding: 0 var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-link.navds-accordion-menu__link,
+  .navds-link.navds-accordion-menu__button {
+    padding: 0 var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-medium-and-larger) + 2rem);
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-accordion-menu__nav {
+    padding: var(--navds-layout-padding-small) 0;
+  }
+
+  .navds-accordion-menu__title {
+    padding: 0 var(--navds-layout-padding-small);
+  }
+
+  .navds-link.navds-accordion-menu__link,
+  .navds-link.navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-small));
+  }
+
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__link,
+  .navds-accordion-menu__dropdown--content .navds-accordion-menu__button {
+    padding: 0 calc(var(--navds-layout-padding-small) + 1rem);
+  }
+}
@@ -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;
@@ -1,11 +1,12 @@
@import "baseline/baseline.css";
@import "accordion.css";
+@import "accordion-menu.css";
@import "alert.css";
@import "button.css";
@import "content-container.css";
@import "grid.css";
@import "internal-header.css";
-@import "layout.css";
+@import "layouts.css";
@import "link.css";
@import "modal.css";
@import "popover.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,284 @@
+/*****************
+ * .navds-layout *
+ *****************/
+
+.navds-layout__container {
+  display: grid;
+  grid-gap: var(--navds-grid-gutter-small);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.navds-layout__container--1-columns,
+.navds-layout__container--2-columns {
+  max-width: 60rem;
+}
+
+.navds-layout__container--3-columns {
+  max-width: 79.5rem;
+}
+
+.navds-layout__section--white > * {
+  background: white;
+}
+
+.navds-layout__section--padding > * {
+  padding: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--sticky > * {
+  top: calc(var(--navds-grid-gutter-small) + var(--decorator-sticky-offset));
+  position: sticky;
+}
+
+.navds-layout__section > *:not(:last-child) {
+  margin-bottom: var(--navds-layout-padding-small);
+}
+
+.navds-layout__section--left,
+.navds-layout__section--main,
+.navds-layout__section--right {
+  grid-column: span 12;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section > *:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--left > *,
+  .navds-layout__section--padding.navds-layout__section--main > *,
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+}
+
+@media (min-width: 648px) {
+  .navds-layout__container {
+    grid-gap: var(--navds-grid-gutter-medium-and-larger);
+  }
+
+  .navds-layout__section--padding.navds-layout__section--right > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  /* prettier-ignore */
+  .navds-layout__container--2-columns > .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 10;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--left,
+  .navds-layout__container--2-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 4;
+  }
+
+  .navds-layout__container--2-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 2;
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-column: span 4;
+    grid-row: 1 / span 2;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__section--padding.navds-layout__section--left > * {
+    padding: var(--navds-layout-padding-small);
+  }
+
+  .navds-layout__container--1-columns > .navds-layout__section--main {
+    grid-column: span 8;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--left {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--main {
+    grid-row: 1;
+    grid-column: span 6;
+  }
+
+  .navds-layout__container--3-columns > .navds-layout__section--right {
+    grid-row: 1;
+    grid-column: span 3;
+  }
+}
+
+/*************************
+ * .navds-layout__header *
+ ************************/
+
+.navds-layout__header {
+  background: var(--navds-layout-background-white);
+}
+
+.navds-layout__header-content {
+  grid-column: span 12;
+}
+
+.navds-layout__header-title {
+  margin: 0.25rem 0.85rem;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__header-title {
+    margin: 0.25rem 0;
+  }
+}
+
+/*************************
+ * .navds-layout__body *
+ ************************/
+
+.navds-layout__body {
+  background: var(--navds-layout-background-gray);
+}
+
+.navds-layout__body--white {
+  background: var(--navds-layout-background-white);
+}
+
+@media (min-width: 648px) {
+  .navds-layout__body--2-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+@media (min-width: 960px) {
+  .navds-layout__body--3-columns.navds-layout__body--padding {
+    padding-top: 3rem;
+  }
+}
+
+/*************************
+ * .navds-layout__panel *
+ ************************/
+
+.navds-layout__panel {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  display: inline-block;
+  padding: var(--navds-layout-padding-small);
+  background: white;
+  padding-top: 2.5rem;
+}
+
+.navds-layout__panel--icon-margin {
+  margin-top: 2rem;
+}
+
+.navds-layout__panel:not(:last-child) {
+  margin-bottom: var(--navds-grid-gutter-small);
+}
+
+.navds-layout__panel--highlight {
+  box-shadow: rgb(102, 164, 220) 0 0 0 0.15rem;
+}
+
+.navds-layout__panel-content {
+  margin-top: 1.25rem;
+}
+
+.navds-layout__panel-icon {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: -2rem;
+  left: 0;
+}
+
+.navds-layout__panel-icon svg,
+.navds-layout__panel-icon img {
+  background: #c7dbed;
+  border-radius: 2rem;
+  padding: 1rem;
+  height: 4rem;
+  width: 4rem;
+}
+
+.navds-layout__panel-title {
+  margin: 0.5rem 0;
+}
+
+.navds-layout__panel-copy {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+
+.navds-layout__panel-copy-icon {
+  color: var(--navds-color-text-link);
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.navds-layout__panel-popover-content {
+  margin: 0.5rem;
+}
+
+.navds-layout__panel-copy-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: transparent;
+  margin: 0 1rem 0 0;
+  padding-left: 0;
+  padding-right: 0;
+  border: 0;
+}
+
+@media (min-width: 448px) {
+  .navds-layout__panel {
+    padding: var(--navds-layout-padding-medium-and-larger);
+  }
+
+  .navds-layout__panel:not(:last-child) {
+    margin-bottom: var(--navds-grid-gutter-medium-and-larger);
+  }
+}
+
+@media (min-width: 648px) {
+  /* prettier-ignore */
+  .navds-layout__container--2-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+}
+
+@media (min-width: 960px) {
+  /* prettier-ignore */
+  .navds-layout__container--3-columns .navds-layout__panel--icon-margin:first-child {
+    margin-top: 0;
+  }
+
+  .navds-layout__panel--icon-margin:not(:first-child) {
+    margin-top: 2rem;
+  }
+}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.2.1",
+  "version": "0.2.2",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.1.0",
+    "@navikt/ds-tokens": "^0.1.1",
    "normalize.css": "^8.0.1",
    "postcss": "^8.2.7",
    "postcss-cli": "^8.3.1",
@@ -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,40 @@
+import React, { createContext, useCallback, useContext, useState } from "react";
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export interface ActiveAnchorStore {
+  anchors: string[];
+  activeAnchor?: string;
+  registerAnchor: (anchor: string) => void;
+  unregisterAnchor: (anchor: string) => void;
+  setActiveAnchor: (anchor: string) => void;
+}
+
+export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
+export const ActiveAnchorProvider = (props: Props) => {
+  const { children } = props;
+  const [anchors, setAnchors] = useState<string[]>([]);
+  const [activeAnchor, setActiveAnchor] = useState<string>();
+
+  return (
+    <ActiveAnchorContext.Provider
+      value={{
+        anchors,
+        activeAnchor,
+        registerAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => [...anchors, anchor]);
+        }, []),
+        unregisterAnchor: useCallback((anchor) => {
+          setAnchors((anchors) => anchors.filter((a) => a !== anchor));
+        }, []),
+        setActiveAnchor: useCallback((anchor) => {
+          setActiveAnchor(anchor);
+        }, []),
+      }}
+    >
+      {children}
+    </ActiveAnchorContext.Provider>
+  );
+};
+export const useStore = () => useContext(ActiveAnchorContext);
@@ -0,0 +1,52 @@
+import React, { forwardRef, HTMLAttributes, useState } from "react";
+import cl from "classnames";
+import { Expand } from "@navikt/ds-icons";
+
+export interface AccordionMenuCollapsableProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  title: string;
+  active?: boolean;
+}
+
+const Collapsable = forwardRef<
+  HTMLButtonElement,
+  AccordionMenuCollapsableProps
+>(({ children, active, title, className, ...rest }, ref) => {
+  const [open, setOpen] = useState(active || false);
+  return (
+    <li
+      className={cl(
+        "navds-accordion-menu__item",
+        "navds-accordion-menu__dropdown"
+      )}
+    >
+      <button
+        ref={ref}
+        onClick={() => setOpen(!open)}
+        className={cl("navds-link", "navds-accordion-menu__button", className)}
+        {...rest}
+      >
+        {title}
+        <Expand
+          className={cl(
+            "navds-accordion__chevron",
+            `navds-accordion__chevron--${open ? "up" : "down"}`,
+            `navds-accordion-menu__chevron`
+          )}
+        />
+      </button>
+      {open && (
+        <ul
+          className={cl(
+            "navds-accordion-menu__container",
+            "navds-accordion-menu__dropdown--content"
+          )}
+        >
+          {children}
+        </ul>
+      )}
+    </li>
+  );
+});
+
+export default Collapsable;
@@ -0,0 +1,62 @@
+import React, { forwardRef, useEffect } from "react";
+import { useStore } from "./ActiveAnchorStore";
+import { OverridableComponent } from "../util";
+import cl from "classnames";
+
+export interface AccordionMenuItemProps {
+  props: {
+    children: React.ReactNode;
+    active?: boolean;
+  } & React.HTMLAttributes<HTMLLIElement>;
+  defaultComponent: "a";
+}
+
+const Item: OverridableComponent<AccordionMenuItemProps> = forwardRef(
+  (
+    {
+      children,
+      component: Component = "a",
+      active = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const anchor = rest.href && rest.href.split("#")[1];
+    const { activeAnchor, registerAnchor, unregisterAnchor } = useStore();
+    const isActive = active || (anchor && activeAnchor === anchor) || false;
+
+    useEffect(() => {
+      if (anchor) {
+        const target = document.getElementById(anchor);
+        if (target) {
+          registerAnchor(anchor);
+          return () => {
+            unregisterAnchor(anchor);
+          };
+        }
+      }
+    }, [anchor, registerAnchor, unregisterAnchor]);
+
+    return (
+      <li
+        className={cl(
+          "navds-accordion-menu__item",
+          isActive && "navds-accordion-menu__item--active"
+        )}
+      >
+        <Component
+          ref={ref}
+          className={cl("navds-link", "navds-accordion-menu__link", className, {
+            "navds-accordion-menu__link--active": isActive,
+          })}
+          {...rest}
+        >
+          {children}
+        </Component>
+      </li>
+    );
+  }
+);
+
+export default Item;
@@ -0,0 +1,68 @@
+import React, {
+  forwardRef,
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  useEffect,
+} from "react";
+import { default as Item, AccordionMenuItemProps } from "./Item";
+import { default as Collapsable } from "./Collapsable";
+import { AccordionMenuCollapsableProps } from "./Collapsable";
+import { Heading, OverridableComponent } from "../index";
+import { ActiveAnchorProvider } from "./ActiveAnchorStore";
+import Nav from "./Nav";
+import cl from "classnames";
+
+export interface LayoutWithSubComponents
+  extends ForwardRefExoticComponent<AccordionMenuProps> {
+  Collapsable: ForwardRefExoticComponent<AccordionMenuCollapsableProps>;
+  Item: OverridableComponent<AccordionMenuItemProps>;
+}
+
+export interface AccordionMenuProps extends HTMLAttributes<HTMLUListElement> {
+  title?: string;
+  smoothScrollBehavior?: boolean;
+}
+
+const AccordionMenu = forwardRef<HTMLUListElement, AccordionMenuProps>(
+  (
+    { children, title, smoothScrollBehavior = true, className, ...rest },
+    ref
+  ) => {
+    useEffect(() => {
+      if (smoothScrollBehavior) {
+        const htmlElement = document.documentElement;
+        htmlElement.classList.add("navds-accordion-menu__html");
+        return () => {
+          htmlElement.classList.remove("navds-accordion-menu__html");
+        };
+      }
+    }, [smoothScrollBehavior]);
+
+    return (
+      <ActiveAnchorProvider>
+        <Nav title={title}>
+          {title && (
+            <Heading
+              level={2}
+              size="medium"
+              className={cl("navds-accordion-menu__title", className)}
+            >
+              {title}
+            </Heading>
+          )}
+          <ul
+            ref={ref}
+            className={cl("navds-accordion-menu__container", className)}
+            {...rest}
+          >
+            {children}
+          </ul>
+        </Nav>
+      </ActiveAnchorProvider>
+    );
+  }
+) as LayoutWithSubComponents;
+
+AccordionMenu.Item = Item;
+AccordionMenu.Collapsable = Collapsable;
+export default AccordionMenu;
@@ -0,0 +1,54 @@
+import React, { forwardRef, HTMLAttributes, useEffect } from "react";
+import { useStore } from "./ActiveAnchorStore";
+
+export interface AccordionMenuItemProps
+  extends HTMLAttributes<HTMLAnchorElement> {
+  title?: string;
+}
+
+const Nav = forwardRef<HTMLAnchorElement, AccordionMenuItemProps>(
+  ({ children, title, className, ...rest }, ref) => {
+    const { anchors, activeAnchor, setActiveAnchor } = useStore();
+
+    useEffect(() => {
+      const scrollListener = () => {
+        const offset = 100;
+        const lastPassedAnchor = anchors
+          .map((anchor) => document.getElementById(anchor))
+          .map((element: HTMLElement) => ({
+            id: element.id,
+            top: element.getBoundingClientRect().top - offset,
+            scrolledToBottom:
+              window.innerHeight + window.pageYOffset >=
+              document.body.offsetHeight,
+          }))
+          .filter((element) => element.scrolledToBottom || element.top <= 0)
+          .sort((a, b) => (a.top < b.top ? -1 : 1))
+          .map((anchor) => anchor.id)
+          .pop();
+
+        // Set active anchor and related url hash
+        if (lastPassedAnchor && activeAnchor !== lastPassedAnchor) {
+          const { href, hash } = window.location;
+          const urlWithoutHash = href.replace(hash, "");
+          const urlWithAnchor = `${urlWithoutHash}#${lastPassedAnchor}`;
+          const title = document.title;
+          window.history.pushState(lastPassedAnchor, title, urlWithAnchor);
+          setActiveAnchor(lastPassedAnchor);
+        }
+      };
+      window.addEventListener("scroll", scrollListener);
+      return () => {
+        window.removeEventListener("scroll", scrollListener);
+      };
+    }, [anchors, activeAnchor, setActiveAnchor]);
+
+    return (
+      <nav className={"navds-accordion-menu__nav"} aria-label={title || "Meny"}>
+        {children}
+      </nav>
+    );
+  }
+);
+
+export default Nav;
@@ -0,0 +1,5 @@
+import { default as AccordionMenu, AccordionMenuProps } from "./Menu";
+import { AccordionMenuItemProps } from "./Item";
+
+export { AccordionMenu, AccordionMenuProps, AccordionMenuItemProps };
+export default AccordionMenu;
@@ -0,0 +1,12 @@
+.navds-story-menu {
+  margin-top: 0;
+  list-style-type: none;
+}
+
+.navds-story-menu li:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.navds-story-section {
+  margin-bottom: 1rem;
+}
@@ -0,0 +1,139 @@
+import * as React from "react";
+import Menu from "../index";
+import { useEffect } from "react";
+import { ProductPageLayout } from "../../index";
+import { Right } from "../../layouts/stories/components/sections/Right";
+import { LightBulb, Telephone } from "@navikt/ds-icons";
+import { MainOne } from "../../layouts/stories/components/sections/Main";
+import { MainTwo } from "../../layouts/stories/components/sections/Main";
+import { MainThree } from "../../layouts/stories/components/sections/Main";
+import { Link, HashRouter as Router } from "react-router-dom";
+
+import "./components/styles.css";
+
+export default {
+  title: "ds-react/accordion-menu",
+  component: { Menu },
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.getElementById("decorator-header").style.display = "block";
+        document.getElementById("decorator-footer").style.display = "block";
+        return () => {
+          document.getElementById("decorator-header").style.display = "none";
+          document.getElementById("decorator-footer").style.display = "none";
+        };
+      }, []);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const All = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu title={"Minima"}>
+        <Menu.Item href={"#leo-quis"}>Leo quis</Menu.Item>
+        <Menu.Collapsable title={"Proin accumsan"}>
+          <Menu.Item href={"#nulla-pariatur"}>Nulla pariatur</Menu.Item>
+          <Menu.Item href={"#luctus-justo"}>Luctus justo</Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Item href={"#maecenas-in-pretium"}>Maecenas in pretium</Menu.Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const ReactRouter = () => (
+  <ProductPageLayout title={"Nunc et lorem"}>
+    <ProductPageLayout.Section left sticky withPadding={false}>
+      <Menu>
+        <Menu.Item component={Link} to="/link1">
+          Leo quis
+        </Menu.Item>
+        <Menu.Collapsable title={"Proin accumsan"}>
+          <Menu.Item component={Link} to="/link2">
+            Nulla pariatur
+          </Menu.Item>
+          <Menu.Item component={Link} to="/link3">
+            Luctus justo
+          </Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Collapsable title={"Sint cupidatat"}>
+          <Menu.Item component={Link} to="/link4">
+            Nulla pariatur
+          </Menu.Item>
+          <Menu.Item component={Link} to="/link5">
+            Luctus justo
+          </Menu.Item>
+        </Menu.Collapsable>
+        <Menu.Item component={Link} to="/link6">
+          Maecenas in pretium
+        </Menu.Item>
+      </Menu>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];
@@ -1,16 +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 { 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;
 }

@@ -8,8 +8,22 @@ import {
 } from "@navikt/ds-icons";

 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,23 @@ import React, { forwardRef } from "react";
 import cl from "classnames";

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

@@ -1,7 +1,17 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

-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
@@ -3,9 +3,29 @@ import cl from "classnames";

 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,7 +1,16 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

-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}>
@@ -14,7 +14,16 @@ export {
  InternalHeaderUser,
  InternalHeaderUserProps,
 } from "./internal-header/index";
-export { Layout, LayoutProps, SectionProps } from "./layout/index";
+export {
+  ProductPageLayout,
+  ProductPageLayoutProps,
+  ProductPageLayoutSectionProps,
+} from "./layouts/index";
+export {
+  AccordionMenu,
+  AccordionMenuProps,
+  AccordionMenuItemProps,
+} from "./accordion-menu";
 export { Link, LinkProps } from "./link/index";
 export { Modal, ModalProps } from "./modal/index";
 export { Popover, PopoverProps } from "./popover/index";
@@ -2,7 +2,14 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Component content
+   */
  children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
 }

 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(
@@ -2,7 +2,18 @@ import React, { forwardRef, HTMLAttributes, createElement } from "react";
 import cl from "classnames";

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

@@ -3,7 +3,17 @@ import cl from "classnames";

 export interface InternalHeaderUserProps
  extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * user name
+   */
  name: string;
+  /**
+   * user ident
+   */
  ident: string;
 }

@@ -1,40 +0,0 @@
-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: "ds-react/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,108 +0,0 @@
-import * as React from "react";
-import {
-  Button,
-  Cell,
-  Grid,
-  Heading,
-  Link,
-  Paragraph,
-  Alert,
-} from "../../../../index";
-
-export const Main = () => (
-  <div>
-    <Heading className={"navds-story-section"} level={1} size={"xl"}>
-      Quis autem
-    </Heading>
-    <Paragraph className={"section"}>
-      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
-      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
-      fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
-      sequi nesciunt.
-    </Paragraph>
-    <Grid className={"section"}>
-      <Cell xs={6}>
-        <Link href={"#"}>Ea voluptate</Link>
-      </Cell>
-      <Cell xs={6}>
-        <Link href={"#"}>Quis autem</Link>
-      </Cell>
-    </Grid>
-    <Paragraph className={"section"}>
-      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
-      consectetur, adipisci velit, sed quia non numquam eius modi tempora
-      incidunt ut labore et dolore magnam aliquam quaerat voluptatem.{" "}
-    </Paragraph>
-    <Alert variant="info" className={"section"}>
-      Suspendisse potenti. Interdum et malesuada fames ac ante ipsum primis in
-      faucibus.
-    </Alert>
-    <Paragraph className={"section"}>
-      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
-      suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
-      vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
-      molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
-      pariatur?
-    </Paragraph>
-    <Heading className={"section"} level={2} size={"xl"}>
-      Nulla pariatur?
-    </Heading>
-    <Paragraph className={"section"}>
-      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
-      imperdiet erat. Morbi sodales bibendum volutpat. Sed malesuada risus
-      lorem, in elementum purus commodo eget. Mauris maximus congue efficitur.
-      Cras vestibulum id metus sed pellentesque.
-    </Paragraph>
-
-    <table className={"section tabell tabell--stripet"}>
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Fornavn</th>
-          <th>Etternavn</th>
-          <th>Rolle</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Jean-Luc</td>
-          <td>Picard</td>
-          <td>Kaptein</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>William</td>
-          <td>Riker</td>
-          <td>Kommandør</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Geordi</td>
-          <td>La Forge</td>
-          <td>Sjefsingeniør</td>
-        </tr>
-      </tbody>
-    </table>
-    <Paragraph className={"section"}>
-      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
-      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
-      commodo tortor, eget mollis nunc augue eu elit. Ut nec fringilla odio, eu
-      scelerisque tellus.
-    </Paragraph>
-    <Paragraph className={"section"}>
-      Proin nec luctus justo. Pellentesque et dapibus libero. Phasellus non elit
-      eget justo mattis venenatis. In hac habitasse platea dictumst. Proin nunc
-      ipsum, ornare eu pretium in, aliquet non velit. Nullam efficitur tincidunt
-      leo, vel tempus nibh consectetur sed. Etiam porttitor finibus erat varius
-      rhoncus. Sed ac augue imperdiet, porta tellus vitae, aliquam est.
-    </Paragraph>
-    <Paragraph className={"section"}>
-      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
-      ut cursus sem. In viverra felis vitae aliquet finibus.
-    </Paragraph>
-    <Button>Søk ...</Button>
-  </div>
-);
@@ -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;
@@ -4,16 +4,16 @@ import { Button, Link } from "../../../../index";
 export const Left = () => (
  <ul className={"navds-story-menu"}>
    <li>
-      <Link href={"#"}>Iusto odio dignissimos</Link>
+      <Link href={"#leo-quis"}>Leo quis</Link>
    </li>
    <li>
-      <Link href={"#"}>Nam libero tempore</Link>
+      <Link href={"#proin-accumsan"}>Proin accumsan</Link>
    </li>
    <li>
-      <Link href={"#"}>Reiciendis voluptatibus</Link>
+      <Link href={"#nulla-pariatur"}>Nulla pariatur?</Link>
    </li>
    <li>
-      <Link href={"#"}>Earum rerum</Link>
+      <Link href={"#maecenas-in-pretium"}>Maecenas in pretium</Link>
    </li>
    <li>
      <Button>Søk ...</Button>
@@ -0,0 +1,145 @@
+import * as React from "react";
+import {
+  Button,
+  Cell,
+  Grid,
+  Heading,
+  Link,
+  Paragraph,
+} from "../../../../index";
+import Snakkeboble from "nav-frontend-snakkeboble";
+
+export const Main = ({ title = true }) => (
+  <>
+    <MainOne title={title} />
+    <MainTwo title={title} />
+    <MainThree title={title} />
+  </>
+);
+
+export const MainOne = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"leo-quis"}>
+        Leo quis
+      </Heading>
+    )}
+    <Paragraph>
+      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
+      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
+      eget interdum nibh
+    </Paragraph>
+  </div>
+);
+
+export const MainTwo = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"proin-accumsan"}>
+        Proin accumsan
+      </Heading>
+    )}
+    <Paragraph className={"section"}>
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </Paragraph>
+    <Grid className={"section"}>
+      <Cell xs={6}>
+        <Link href={"#"}>Ea voluptate</Link>
+      </Cell>
+      <Cell xs={6}>
+        <Link href={"#"}>Quis autem</Link>
+      </Cell>
+    </Grid>
+    <Paragraph className={"section"}>
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+      consectetur, adipisci velit, sed quia non numquam eius modi tempora.
+    </Paragraph>
+    <Heading level={2} size={"large"} id={"nulla-pariatur"}>
+      Nulla pariatur?
+    </Heading>
+    <Paragraph className={"section"}>
+      Etiam viverra neque sit amet libero dapibus tincidunt. Pellentesque quis
+      imperdiet erat. Morbi sodales bibendum volutpat.
+    </Paragraph>
+    <table className={"section tabell tabell--stripet"}>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Fornavn</th>
+          <th>Etternavn</th>
+          <th>Rolle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>1</td>
+          <td>Jean-Luc</td>
+          <td>Picard</td>
+          <td>Kaptein</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>William</td>
+          <td>Riker</td>
+          <td>Kommandør</td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>Geordi</td>
+          <td>La Forge</td>
+          <td>Sjefsingeniør</td>
+        </tr>
+      </tbody>
+    </table>
+    <Paragraph className={"section"}>
+      Curabitur a purus pretium, condimentum magna ac, pellentesque diam. Nulla
+      facilisi. Nullam consequat, dui sed bibendum faucibus, metus mauris
+      commodo tortor.
+    </Paragraph>
+    <Heading level={2} size={"large"} id={"luctus-justo"}>
+      Luctus justo
+    </Heading>
+    <Paragraph className={"section"}>
+      Nunc eget consectetur felis, id scelerisque sapien. Ut id feugiat nulla,
+      ut cursus sem. In viverra felis vitae aliquet finibus.
+    </Paragraph>
+    <Button>Søk ...</Button>
+  </div>
+);
+
+export const MainThree = ({ title = true }) => (
+  <div>
+    {title && (
+      <Heading level={1} size={"xl"} id={"maecenas-in-pretium"}>
+        Maecenas in pretium
+      </Heading>
+    )}
+    <Paragraph>
+      Sed ullamcorper quam eget lorem volutpat, quis cursus risus fermentum.
+      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
+      eget interdum nibh
+    </Paragraph>
+    <Snakkeboble>Integer aliquam feugiat purus et imperdie</Snakkeboble>
+    <Paragraph>
+      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
+      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
+      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
+      convallis turpis.
+    </Paragraph>
+    <Snakkeboble pilHoyre={true}>
+      Integer aliquam feugiat purus et imperdie
+    </Snakkeboble>
+    <Paragraph>
+      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
+      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
+      feugiat nulla, ut cursus sem. In viverra felis vitae aliquet finibus.
+    </Paragraph>
+    <Paragraph>
+      Vivamus id mi lectus. Duis ac augue magna. Aliquam ut euismod dui. Duis
+      consectetur, magna a malesuada tempus, elit urna fermentum arcu, at
+      porttitor magna sapien id enim.
+    </Paragraph>
+  </div>
+);
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { ProductPageLayout } from "../../index";
+import { Left } from "./components/sections/Left";
+import { Main, MainOne, MainTwo, MainThree } from "./components/sections/Main";
+import { Right } from "./components/sections/Right";
+import { LightBulb, Telephone } from "@navikt/ds-icons";
+import "./components/styles.css";
+
+export default {
+  title: "ds-react/layouts/ProductPage",
+  component: ProductPageLayout,
+  decorators: [
+    (Story) => {
+      useEffect(() => {
+        document.getElementById("decorator-header").style.display = "block";
+        document.getElementById("decorator-footer").style.display = "block";
+        return () => {
+          document.getElementById("decorator-header").style.display = "none";
+          document.getElementById("decorator-footer").style.display = "none";
+        };
+      }, []);
+      return <Story />;
+    },
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const title = "Nunc et lorem";
+export const ThreeColumns = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section left sticky>
+      <Left />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section whiteBackground={false} withPadding={false}>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Proin accumsan"}
+        anchor={"proin-accumsan"}
+      >
+        <MainTwo title={false} />
+      </ProductPageLayout.Panel>
+      <ProductPageLayout.Panel
+        title={"Maecenas in pretium"}
+        anchor={"maecenas-in-pretium"}
+        icon={<Telephone />}
+      >
+        <MainThree title={false} />
+      </ProductPageLayout.Panel>
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const TwoColumnsLeft = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section left sticky>
+      <Left />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section>
+      <ProductPageLayout.Panel
+        title={"Leo quis"}
+        anchor={"leo-quis"}
+        highlight={true}
+        icon={<LightBulb />}
+      >
+        <MainOne title={false} />
+      </ProductPageLayout.Panel>
+      <Main />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const TwoColumnsRight = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section>
+      <Main />
+    </ProductPageLayout.Section>
+    <ProductPageLayout.Section right sticky>
+      <Right />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
+
+export const OneColumn = () => (
+  <ProductPageLayout title={title}>
+    <ProductPageLayout.Section>
+      <Main />
+    </ProductPageLayout.Section>
+  </ProductPageLayout>
+);
@@ -3,6 +3,14 @@ import cl from "classnames";

 export interface LinkProps
  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
  /**
   * Link anchor should direct to
   */
@@ -5,9 +5,6 @@ import mergeRefs from "react-merge-refs";
 import { Close } from "@navikt/ds-icons";
 import { Button } from "../index";

-// TODO: Has to be documented well that the user has to import react-modal and call
-// ReactModal.setAppElement("#root")
-
 export interface ModalProps {
  /**
   * Content of modal
@@ -27,7 +24,7 @@ export interface ModalProps {
   */
  shouldCloseOnOverlayClick?: boolean;
  /**
-   * User defined classname for wrapper element
+   * @ignore
   */
  className?: string;
  /**
@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import { Modal } from "../index";
-import ReactModal from "react-modal";

 export default {
  title: "ds-react/modal",
  component: Modal,
 };

-ReactModal.setAppElement("#root");
+Modal.setAppElement("#root");

 export const All = () => {
  const [open, setOpen] = useState(true);
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.2.2",
+  "version": "0.2.4",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -27,12 +27,15 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   * Content rendered inside popover
   */
  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
  /**
   * Orientation for popover
-   * @default 'auto'
+   * @default "right"
   */
  placement?: Placement;
-  size?: "medium" | "small";
 }

 const useEventLister = (event: string, callback) =>
@@ -52,7 +55,6 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
      children,
      placement = "right",
      className,
-      size = "medium",
      ...rest
    },
    ref
@@ -130,7 +132,7 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
    return (
      <div
        ref={mergedRef}
-        className={cl("navds-popover", `navds-popover--${size}`, className, {
+        className={cl("navds-popover", className, {
          "navds-popover--hidden": !open || !anchorEl,
        })}
        aria-live="polite"
@@ -27,7 +27,7 @@ const Template = (props) => {
        {props.placement}
      </div>
      <Popover {...props} anchorEl={anchorEl} onClose={() => {}} open>
-        Contents
+        <div style={{ margin: "1rem" }}>Contents</div>
      </Popover>
    </>
  );
@@ -56,27 +56,3 @@ export const All = () => {
    </div>
  );
 };
-
-export const Small = () => {
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexWrap: "wrap",
-        margin: "4rem 8rem 4rem 8rem",
-      }}
-    >
-      {placements.map((placement) => (
-        <div
-          style={{
-            width: "20%",
-            height: "100px",
-            margin: "4rem",
-          }}
-        >
-          <Template placement={placement} size="small" />
-        </div>
-      ))}
-    </div>
-  );
-};
@@ -2,7 +2,14 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";

 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Component content
+   */
  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
  /**
   * Changes background-color and border-color
   */
@@ -10,11 +17,12 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }

 const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant }, ref) => {
+  ({ children, className, variant, ...rest }, ref) => {
    return (
      <span
        ref={ref}
        className={cl("navds-tag", className, `navds-tag--${variant}`)}
+        {...rest}
      >
        {children}
      </span>
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.1.0",
+  "version": "0.1.1",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -170,6 +170,10 @@ module.exports = {
      },
    },
    layout: {
+      background: {
+        white: { value: "#FFFFFF" },
+        gray: { value: "#F1F1F1" },
+      },
      padding: {
        small: { value: "1rem" },
        mediumAndLarger: { value: "2.5rem" },
@@ -0,0 +1,18 @@
+import { Heading, Paragraph } from "@navikt/ds-react";
+import Bash from "./code/Bash";
+import Import from "./code/Import";
+import Preview from "./code-preview/Preview";
+import Npm from "./npm/Npm";
+import TableOfContents from "./table-of-contents/TableOfContents";
+
+export default {
+  h1: (props) => <Heading size="xxl" level={1} {...props} />,
+  h2: (props) => <Heading size="large" level={2} {...props} />,
+  h3: (props) => <Heading size="small" level={3} {...props} />,
+  p: (props) => <Paragraph size="medium" {...props} />,
+  Bash,
+  Preview,
+  Import,
+  Npm,
+  TableOfContents,
+};
@@ -97,7 +97,6 @@ const Bash = ({
              >
                Kode er kopiert
              </Popover>
-              )
            </div>
          </>
        )}
@@ -1,7 +1,5 @@
 import Header from "./header/Header";
 import Sidebar from "./sidebar/Sidebar";
-import Mdx from "./MdxProvider";
-import Toc from "../toc/Toc";
 import { Grid, Cell, ContentContainer } from "@navikt/ds-react";
 import { useMediaQuery } from "react-responsive";
 import useKeypress from "react-use-keypress";
@@ -10,9 +8,10 @@ import style from "./layout.module.css";

 interface LayoutProps {
  children?: React.ReactNode;
+  menu: any[];
 }

-const Layout = ({ children }: LayoutProps) => {
+const Layout = ({ children, menu }: LayoutProps) => {
  const [sidebar, setSidebar] = useState(false);

  const small = useMediaQuery({
@@ -31,19 +30,17 @@ const Layout = ({ children }: LayoutProps) => {
    <div className={style.pageWrapper + " lightTheme"}>
      <Header sidebar={sidebar} onSidebarChange={(x) => setSidebar(x)} />
      <Sidebar
+        menu={menu}
        sidebar={sidebar}
        small={small}
        onSidebarChange={(x) => setSidebar(x)}
      />
+      {/* TEMP UNTIL LAYOUT UPDATE */}
      <main className={style.contentWrapper}>
        <ContentContainer>
          <Grid>
-            <Cell className={style.content} xs={12} sm={12} md={10} lg={7}>
-              <Mdx>{children}</Mdx>
-            </Cell>
-            <Cell xs={12} sm={1} md={2} lg={1} />
-            <Cell xs={12} sm={12} md={8} lg={4}>
-              <Toc />
+            <Cell className={style.content} xs={12} sm={12} md={12} lg={12}>
+              {children}
            </Cell>
          </Grid>
        </ContentContainer>
@@ -1,25 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import { Heading, Paragraph } from "@navikt/ds-react";
-import Bash from "../code/Bash";
-import Import from "../code/Import";
-import Preview from "../code-preview/Preview";
-import Npm from "../npm/Npm";
-/* import { Button } from "@navikt/ds-react"; */
-
-const MdxWrapper = (props) => (
-  <MDXProvider
-    components={{
-      h1: (props) => <Heading size="xxl" level={1} {...props} />,
-      h2: (props) => <Heading size="large" level={2} {...props} />,
-      h3: (props) => <Heading size="small" level={3} {...props} />,
-      p: (props) => <Paragraph size="medium" {...props} />,
-      Bash,
-      Preview,
-      Import,
-      Npm,
-    }}
-    {...props}
-  />
-);
-
-export default MdxWrapper;
@@ -91,6 +91,9 @@
  overflow: visible;
  margin: 0 auto 0 0;
  width: 100%;
+
+  /* TMP UNTIL LAYOUT UPDATE */
+  max-width: 520px;
 }

 .content {
@@ -0,0 +1,47 @@
+import { NavdsPage } from "../../../src/pages";
+import Link from "next/link";
+
+/* TODO: Replace with accordion-menu when ready */
+const subLinks = (page: NavdsPage) => {
+  return (
+    <div key={page.title}>
+      <span>{page.title}</span>
+      <ul id={"collapse " + page.title}>{parsePages(page.children)}</ul>
+    </div>
+  );
+};
+
+const parsePages = (pages) => {
+  return pages?.map((page) => {
+    if (page.pathName) {
+      return (
+        <li key={page.pathName}>
+          <Link href={page.pathName}>
+            {page.title ? page.title : parseTitle(page.pathName)}
+          </Link>
+        </li>
+      );
+    } else if (page.title && page.children) {
+      return subLinks(page);
+    } else {
+      return null;
+    }
+  });
+};
+
+const parseTitle = (path: string) =>
+  path
+    .split("/")
+    .pop()
+    .replace(/^\w/, (c) => c.toUpperCase())
+    .replace("-", " ") || "ERR: Default Title";
+
+const Menu = ({ menu }) => {
+  return (
+    <nav>
+      <ul>{parsePages(menu)}</ul>
+    </nav>
+  );
+};
+
+export default Menu;
@@ -1,21 +1,17 @@
-import Link from "next/link";
 import cl from "classnames";
 import { Close } from "@navikt/ds-icons";
 import style from "../layout.module.css";
+import Menu from "./Menu";

 interface SidebarProps {
  classname?: string;
  sidebar: boolean;
  small: boolean;
  onSidebarChange: (x: boolean) => void;
+  menu: any[];
 }

-const Sidebar = ({
-  sidebar,
-  small,
-  onSidebarChange,
-  ...props
-}: SidebarProps) => {
+const Sidebar = ({ sidebar, small, onSidebarChange, menu }: SidebarProps) => {
  return (
    <>
      {sidebar && small && (
@@ -40,9 +36,7 @@ const Sidebar = ({
            <Close />
          </button>
        )}
-        <Link href="/">Home</Link>
-        <Link href="/komponenter">Komponenter</Link>
-        <Link href="/komponenter/button">Button</Link>
+        <Menu menu={menu} />
      </div>
    </>
  );
@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { Next } from "@navikt/ds-icons";
+import { Heading } from "@navikt/ds-react";
+import style from "./tableOfContents.module.css";
+import { PagePropsContext } from "../../pages/_app";
+
+const TableOfContents = () => {
+  const { tableOfContents } = useContext<any>(PagePropsContext);
+
+  return (
+    <>
+      <Heading size="large" level={2}>
+        Innhold
+      </Heading>
+      <ul className={style.ul}>
+        {tableOfContents?.map(({ heading, slug }) => (
+          <li key={slug} className={style.li}>
+            <Next
+              aria-label="Pil peker på lenke"
+              focusable="false"
+              role="img"
+              aria-hidden
+            />
+            <a href={`#${slug}`}>{heading}</a>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+
+export default TableOfContents;
@@ -0,0 +1,45 @@
+.ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.li {
+  list-style: none;
+  margin: 0;
+  font-size: var(--navds-font-size-medium);
+  line-height: var(--navds-font-line-height-medium);
+  color: var(--navds-color-blue-50);
+  display: flex;
+  align-items: center;
+  transition: margin 100ms linear;
+  column-gap: 0.25rem;
+  padding: 0.25rem 0;
+  width: fit-content;
+}
+
+.li > svg {
+  flex-shrink: 0;
+}
+
+.li:hover {
+  margin-left: 0.25rem;
+}
+
+.li > a {
+  padding: 0.25rem 0;
+}
+
+.li:hover > a,
+.li:hover > svg {
+  color: var(--navds-color-darkgray);
+  transition: color 150ms linear;
+  text-decoration: underline;
+}
+
+.li > svg + a:focus {
+  color: white;
+  transition: color 0ms linear;
+  background-color: var(--navds-color-blue-80);
+  outline: none;
+}
@@ -1,10 +0,0 @@
-import style from "./toc.module.css";
-interface TocProps {
-  className?: string;
-}
-
-const Header = ({ className, ...props }: TocProps) => {
-  return <nav className={style.toc}></nav>;
-};
-
-export default Header;
@@ -1,6 +0,0 @@
-.toc {
-  background-color: var(--bg-secondary);
-  width: 100%;
-  height: 500px;
-  outline: var(--outline);
-}
@@ -1,5 +1,7 @@
-# Home
+---
+title: Button
+---

-Hjemmeside
+# Button content

 <Npm packName="@navikt/ds-react" imports="Button" />
@@ -0,0 +1,4 @@
+---
+title: Komponenter
+rank: 3
+---
@@ -0,0 +1,5 @@
+---
+title: Header
+---
+
+# interne flater header
@@ -0,0 +1,3 @@
+---
+title: Interne flater
+---
@@ -0,0 +1,32 @@
+---
+title: Kom i gang
+rank: 1
+---
+
+# Kom i gang content
+
+<TableOfContents />
+
+## Varianter
+
+## Varianter
+
+Deserunt nostrud anim nisi reprehenderit cillum commodo. Ullamco excepteur sit aute commodo duis. Elit magna laboris amet occaecat velit proident dolore nostrud. Qui ullamco tempor ex sunt veniam cillum et anim. Deserunt dolore voluptate dolor nulla commodo laboris ad. Sint excepteur eu velit consectetur nostrud non irure excepteur adipisicing.
+
+## Størrelser
+
+Non fugiat irure excepteur adipisicing nulla enim nisi. Ut dolore ullamco est commodo consectetur nisi pariatur labore incididunt. Aute ipsum magna nulla sunt labore do nulla laboris anim proident Lorem deserunt aute ea. Anim ea aute qui ullamco. Proident nostrud sunt sit minim excepteur esse. Lorem laboris ad dolore qui pariatur laborum sunt dolore laboris voluptate incididunt. Quis amet aliqua eu minim laboris id occaecat.
+
+## Interne-flater
+
+adad
+
+## Tilgjengelighet
+
+adasd
+
+## Eksempler for bruk
+
+Non fugiat irure excepteur adipisicing nulla enim nisi. Ut dolore ullamco est commodo consectetur nisi pariatur labore incididunt. Aute ipsum magna nulla sunt labore do nulla laboris anim proident Lorem deserunt aute ea. Anim ea aute qui ullamco. Proident nostrud sunt sit minim excepteur esse. Lorem laboris ad dolore qui pariatur laborum sunt dolore laboris voluptate incididunt. Quis amet aliqua eu minim laboris id occaecat.
+
+## Prop-table
@@ -0,0 +1,4 @@
+---
+title: Retningslinjer
+rank: 2
+---
@@ -0,0 +1,5 @@
+---
+title: Typografi
+---
+
+# Typografi content
@@ -0,0 +1 @@
+# Hello, world
@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+};
@@ -1,10 +1,4 @@
-/* const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: process.env.ANALYZE === "true",
-}); */
 const glob = require("glob");
-const withMDX = require("@next/mdx")({
-  extension: /\.mdx?$/,
-});

 const loadPackage = () => {
  const navFrontend = glob.sync("../packages/**/package.json");
@@ -17,9 +11,8 @@ const loadPackage = () => {
    });
 };

-module.exports = withMDX({
-  pageExtensions: ["js", "jsx", "mdx"],
-  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+module.exports = {
+  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
@@ -29,4 +22,4 @@ module.exports = withMDX({
  publicRuntimeConfig: {
    packages: loadPackage(),
  },
-});
+};
@@ -5,7 +5,8 @@
  "scripts": {
    "dev": "next dev",
    "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest"
  },
  "dependencies": {
    "@types/react": "^17.0.2",
@@ -17,20 +18,26 @@
    "react-use-keypress": "^1.2.0",
    "classnames": "^2.2.6",
    "glob": "^7.1.6",
-    "@next/mdx": "^10.0.8",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
    "copy-to-clipboard": "^3.3.1",
+    "remark-parse": "^9.0.0",
+    "unified": "^9.2.1",
    "prismjs": "^1.23.0",
    "@svgr/webpack": "^5.5.0",
-    "@navikt/ds-css": "^0.2.0",
-    "@navikt/ds-react": "^0.2.0"
+    "@navikt/ds-css": "*",
+    "@navikt/ds-react": "*",
+    "next-mdx-remote": "^2.1.3",
+    "github-slugger": "1.3.0",
+    "remark-slug": "6.0.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^10.0.8",
    "@types/prettier": "^2.2.2",
    "@types/react-dom": "^17.0.2",
-    "prettier": "2.2.1"
+    "prettier": "2.2.1",
+    "gray-matter": "^4.0.2",
+    "jest": "^26.6.3",
+    "ts-jest": "^26.5.4",
+    "@types/jest": "^22.2.3"
  },
  "eslintConfig": {
    "rules": {
@@ -0,0 +1,45 @@
+import fs from "fs";
+import glob from "glob";
+import matter from "gray-matter";
+import hydrate from "next-mdx-remote/hydrate";
+import renderToString from "next-mdx-remote/render-to-string";
+import components from "../components/MDXComponents";
+import tableOfContents from "../src/table-of-contents";
+import mainMenu from "../src/main-menu";
+
+const Page = ({ mdxSource }) => hydrate(mdxSource, { components });
+
+export default Page;
+
+export async function getStaticProps({ params: { path } }) {
+  const { content } = matter(
+    fs.readFileSync(`data/${path?.join("/") || "index"}.mdx`, "utf8")
+  );
+
+  return {
+    props: {
+      mdxSource: await renderToString(content, {
+        components,
+        mdxOptions: {
+          remarkPlugins: [require("remark-slug")],
+        },
+      }),
+      menu: mainMenu(),
+      tableOfContents: tableOfContents(content),
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      { params: { path: [] } },
+      ...glob
+        .sync("data/**/*.mdx")
+        .filter((path) => !path.endsWith("index.mdx"))
+        .map((path) => path.slice(5, -4).split("/"))
+        .map((path) => ({ params: { path } })),
+    ],
+    fallback: false,
+  };
+}
@@ -1,23 +1,24 @@
+import { createContext } from "react";
 import Head from "next/head";
-import { useRouter } from "next/router";
 import Layout from "../components/layout/Layout";
 import "../styles/theme.css";
 import "../styles/globals.css";
 import "../styles/prismjs.css";
 import "@navikt/ds-css";

+export const PagePropsContext = createContext({});
+
 const Website = ({ Component, pageProps }) => {
-  const route = useRouter();
  return (
-    <>
+    <PagePropsContext.Provider value={pageProps}>
      <Head>
        <title>NAV Designsystem</title>
        <link rel="icon" href="/favicon-32x32.png" />
      </Head>
-      <Layout route={route}>
+      <Layout menu={pageProps.menu}>
        <Component {...pageProps} />
      </Layout>
-    </>
+    </PagePropsContext.Provider>
  );
 };

@@ -1,3 +0,0 @@
-# Getting-started
-
-Kom i gang
@@ -0,0 +1,45 @@
+import fs from "fs";
+import glob from "glob";
+import matter from "gray-matter";
+import pathsToTree from "../src/paths-to-tree";
+
+export default () => {
+  let tree = pathsToTree(
+    glob.sync("data/**/*.mdx").filter((path) => !path.endsWith("index.mdx"))
+  );
+
+  const populateNode = (node, parentPath) => {
+    let metadata;
+    if (node.name.endsWith(".mdx")) {
+      metadata = matter(fs.readFileSync(`${parentPath}${node.name}`, "utf8"))
+        .data;
+    } else {
+      const indexPath = `${parentPath}${node.name}/index.mdx`;
+      if (fs.existsSync(indexPath)) {
+        metadata = matter(fs.readFileSync(indexPath, "utf8")).data;
+      }
+    }
+
+    if (metadata) {
+      if (metadata.title) {
+        node.title = metadata.title;
+      }
+      if (metadata.rank) {
+        node.rank = metadata.rank;
+      }
+    }
+
+    if (node.children) {
+      node.children.forEach((child) =>
+        populateNode(child, `${parentPath}${node.name}/`)
+      );
+      node.children.sort((a, b) => a.rank - b.rank);
+    } else {
+      node.pathName = `/${parentPath}${node.name}`.slice(5, -4);
+    }
+  };
+
+  tree.forEach((node) => populateNode(node, ""));
+
+  return tree[0].children;
+};
@@ -0,0 +1,48 @@
+export interface NavdsPage {
+  pathName?: string;
+  children?: NavdsPage[];
+  title?: string;
+}
+
+const pages: NavdsPage[] = [
+  {
+    pathName: "/kom-i-gang",
+  },
+  {
+    title: "Komponenter",
+    children: [
+      { pathName: "/komponenter", title: "Kom i gang" },
+      { pathName: "/komponenter/alert" },
+      { pathName: "/komponenter/accordion" },
+      { pathName: "/komponenter/button" },
+      {
+        title: "Interne flater",
+        children: [
+          { pathName: "/komponenter/interne-flater/header" },
+          { pathName: "/komponenter/interne-flater/copy-knapp" },
+        ],
+      },
+    ],
+  },
+  {
+    title: "Ikonpakke",
+    children: [
+      { pathName: "/ikonpakke", title: "Ikonsøk" },
+      { pathName: "/ikonpakke/installering" },
+    ],
+  },
+  {
+    title: "Retningslinjer",
+    children: [
+      { pathName: "/retningslinjer/farger" },
+      { pathName: "/retningslinjer/typografi" },
+      { pathName: "/retningslinjer/språk" },
+    ],
+  },
+  {
+    pathName: "/kontakt",
+    title: "Kontakt oss",
+  },
+];
+
+export default pages;
@@ -0,0 +1,41 @@
+import pathsToTree from "./paths-to-tree";
+
+test("empty list", () => {
+  expect(pathsToTree([])).toEqual([]);
+});
+
+test("single simple string", () => {
+  expect(pathsToTree(["foo"])).toEqual([{ name: "foo" }]);
+});
+
+test("two levels", () => {
+  expect(pathsToTree(["foo/bar"])).toEqual([
+    {
+      name: "foo",
+      children: [{ name: "bar" }],
+    },
+  ]);
+});
+
+test("two levels, two strings", () => {
+  expect(pathsToTree(["foo", "foo/bar"])).toEqual([
+    {
+      name: "foo",
+      children: [{ name: "bar" }],
+    },
+  ]);
+});
+
+test("three levels, three strings", () => {
+  expect(pathsToTree(["foo", "foo/bar/baz", "foo/bar"])).toEqual([
+    {
+      name: "foo",
+      children: [
+        {
+          name: "bar",
+          children: [{ name: "baz" }],
+        },
+      ],
+    },
+  ]);
+});
@@ -0,0 +1,22 @@
+type Node = {
+  name: string;
+  children?: Node[];
+};
+
+const pathsToTree: (paths: string[]) => Node[] = (paths: string[]) =>
+  paths.reduce((list, path) => {
+    path.split("/").reduce((list, name, i, a) => {
+      let node = list.find((item) => item.name === name);
+      if (!node) {
+        node = { name };
+        list.push(node);
+      }
+      if (!node.children && i !== a.length - 1) {
+        node.children = [];
+      }
+      return node.children;
+    }, list);
+    return list;
+  }, []);
+
+export default pathsToTree;
@@ -0,0 +1,18 @@
+import GithubSlugger from "github-slugger";
+import markdown from "remark-parse";
+import unified from "unified";
+
+export default (content) => {
+  const slugger = new GithubSlugger();
+
+  return unified()
+    .use(markdown)
+    .parse(content)
+    .children.filter((node) => node.type === "heading")
+    .filter((node) => node.depth === 2)
+    .map((node) => node.children[0].value)
+    .map((heading) => ({
+      heading,
+      slug: slugger.slug(heading),
+    }));
+};
@@ -3,6 +3,7 @@ body {
  padding: 0;
  margin: 0;
  background-color: var(--bg-primary);
+  scroll-behavior: smooth;
 }

 a {
@@ -137,13 +137,13 @@
    "prettier": "2.2.1",
    "prop-types": "^15.5.10",
    "react": "^16.8.0 || ^17.0.0",
+    "react-docgen-typescript": "^1.21.0",
    "react-is": "^16.13.1",
    "stylelint": "^13.7.2",
    "stylelint-config-standard": "^20.0.0",
    "svg-url-loader": "^7.1.1",
    "typescript": "^3.7.3",
    "webpack": "^5.4.0",
-    "webpack-cli": "^4.2.0",
-    "react-docgen-typescript": "^1.21.0"
+    "webpack-cli": "^4.2.0"
  }
 }
@@ -27,7 +27,7 @@ Legg til `import EkspanderbartPanel from 'nav-frontend-ekspanderbartpanel'`
 Bruker man `redux` har man mulighet til å lagre staten der, og kan (om man vil) bruke en `pure` versjon av panelet.
 Da må man selv alltid sende inn `apen`-propen.

-Legg til `import { EkspanderbartpanelPure } from 'nav-frontend-ekspanderbartpanel'`
+Legg til `import { EkspanderbartpanelBase } from 'nav-frontend-ekspanderbartpanel'`

 <!-- AUTO-GENERATED-CONTENT:START (DISCLAIMER) -->
Author	SHA1	Message	Date
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