Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.2
setappelement extender nå Modal komponent (#1044 )
2026-10-15 10:12:03 +00:00 · 2021-03-16 13:23:29 +00:00 · 2021-03-16 14:10:48 +01:00 · 2021-03-16 11:08:14 +01:00
31 changed files with 1060 additions and 66 deletions
@@ -36,7 +36,14 @@ export interface ModalProps {
  contentClassName?: string;
 }

-const Modal = forwardRef<ReactModal, ModalProps>(
+type ModalLifecycle = {
+  setAppElement?: (element: any) => void;
+};
+
+const Modal: ModalLifecycle &
+  React.ForwardRefExoticComponent<
+    ModalProps & React.RefAttributes<ReactModal>
+  > = forwardRef<ReactModal, ModalProps>(
  (
    {
      children,
@@ -89,8 +96,6 @@ const Modal = forwardRef<ReactModal, ModalProps>(
  }
 );

-export const setAppElement = (element) => {
-  ReactModal.setAppElement(element);
-};
+Modal.setAppElement = (element) => ReactModal.setAppElement(element);

 export default Modal;
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.2.1",
+  "version": "0.2.2",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -0,0 +1,6 @@
+<svg width="77" height="48" viewBox="0 0 77 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 34.4688L4.90367 22.3328H9.61534L4.71792 34.4688H0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60.5095 34.4688L65.3504 22.3328H67.9191L63.0785 34.4688H60.5095Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.0298 34.4688L74.8699 22.3328H76.2341L71.3934 34.4688H70.0298Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.055 22.3327H51.7901C51.7901 22.3327 51.4962 22.3327 51.3922 22.5923L49.032 29.8176L46.6737 22.5923C46.5698 22.3327 46.2741 22.3327 46.2741 22.3327H38.0738C37.8963 22.3327 37.7474 22.481 37.7474 22.6574V25.1111C37.7474 23.1647 35.6763 22.3327 34.4635 22.3327C31.7477 22.3327 29.9297 24.1215 29.3636 26.8411C29.3329 25.0369 29.183 24.3905 28.697 23.7284C28.4738 23.4041 28.1511 23.1314 27.7998 22.9059C27.0764 22.4821 26.4268 22.3327 25.0308 22.3327H23.3917C23.3917 22.3327 23.0955 22.3327 22.991 22.5923L21.4996 26.2883V22.6574C21.4996 22.481 21.3519 22.3327 21.1747 22.3327H17.3818C17.3818 22.3327 17.089 22.3327 16.9825 22.5923L15.432 26.4355C15.432 26.4355 15.2772 26.8198 15.6311 26.8198H17.089V34.143C17.089 34.3248 17.2321 34.4688 17.4147 34.4688H21.1747C21.3519 34.4688 21.4996 34.3248 21.4996 34.143V26.8198H22.9651C23.8061 26.8198 23.9842 26.8428 24.3114 26.9953C24.5085 27.0697 24.686 27.2202 24.7829 27.3938C24.9811 27.767 25.0308 28.2152 25.0308 29.5367V34.143C25.0308 34.3248 25.1768 34.4688 25.3572 34.4688H28.9609C28.9609 34.4688 29.3682 34.4688 29.5292 34.0666L30.3279 32.0927C31.3898 33.5801 33.1377 34.4688 35.3099 34.4688H35.7845C35.7845 34.4688 36.1944 34.4688 36.3566 34.0666L37.7474 30.622V34.143C37.7474 34.3248 37.8963 34.4688 38.0738 34.4688H41.7524C41.7524 34.4688 42.1583 34.4688 42.3213 34.0666C42.3213 34.0666 43.7926 30.4138 43.7983 30.3862H43.8005C43.8571 30.0823 43.4731 30.0823 43.4731 30.0823H42.16V23.8145L46.2911 34.0666C46.4525 34.4688 46.8592 34.4688 46.8592 34.4688H51.205C51.205 34.4688 51.614 34.4688 51.7754 34.0666L56.3552 22.7258C56.5137 22.3327 56.055 22.3327 56.055 22.3327V22.3327ZM37.7474 30.0823H35.2764C34.2928 30.0823 33.4927 29.2859 33.4927 28.3012C33.4927 27.3182 34.2928 26.5167 35.2764 26.5167H35.9674C36.9485 26.5167 37.7474 27.3182 37.7474 28.3012V30.0823ZM35.5908 47.9835C22.3436 47.9835 11.6021 37.2426 11.6021 23.9935C11.6021 10.7429 22.3436 0 35.5908 0C48.8427 0 59.5854 10.7429 59.5854 23.9935C59.5854 37.2426 48.8427 47.9835 35.5908 47.9835Z" fill="white"/>
+</svg>
@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import Tabs from "../tabs/Tabs";
+import style from "./preview.module.css";
+import { renderToString } from "react-dom/server";
+import Bash from "../code/Bash";
+import Prettier from "prettier/standalone";
+import ParserBabel from "prettier/parser-babel";
+
+const prettierOptions = {
+  semi: true,
+  parser: "babel",
+  plugins: [ParserBabel],
+  jsxBracketSameLine: false,
+  printWidth: 30,
+};
+
+interface PreviewProps {
+  react: string;
+  children?: React.ReactElement;
+  hideHtml?: boolean;
+}
+
+const Preview = ({
+  children,
+  react,
+  hideHtml = false,
+  ...props
+}: PreviewProps) => {
+  const [tab, setTab] = useState(0);
+  const handleChange = (x: number) => {
+    setTab(x);
+  };
+
+  const reactFormat = Prettier.format(react, prettierOptions).slice(0, -2);
+  const htmlFormat =
+    !!children &&
+    Prettier.format(
+      renderToString(
+        React.Children.count(children) > 1 ? <div>{children}</div> : children
+      ),
+      prettierOptions
+    )
+      .slice(0, -2)
+      .replace(` data-reactroot=""`, "");
+
+  const tabs = !hideHtml || !!children ? ["REACT", "HTML/CSS"] : ["REACT"];
+
+  return (
+    <div className={style.wrapper}>
+      {!!children && <div className={style.preview}>{children}</div>}
+      <Tabs tabs={tabs} onChange={(x) => handleChange(x)} />
+      {tab === 0 && <Bash code={reactFormat} language="jsx" copy />}
+
+      {(!hideHtml || !!children) && tab === 1 && (
+        <Bash code={htmlFormat} language="jsx" copy />
+      )}
+    </div>
+  );
+};
+
+export default Preview;
@@ -0,0 +1,13 @@
+.wrapper {
+  padding: 1rem;
+  margin: 1rem 0;
+  background-color: var(--bg-secondary);
+  margin-bottom: 3rem;
+  outline: var(--outline);
+}
+
+.preview {
+  border-bottom: 2px solid var(--code-divider);
+  padding-bottom: 3rem;
+  margin-bottom: 1rem;
+}
@@ -0,0 +1,109 @@
+import copy from "copy-to-clipboard";
+import Prism from "prismjs";
+import style from "./bash.module.css";
+import cl from "classnames";
+import { Files } from "@navikt/ds-icons";
+import { Popover } from "@navikt/ds-react";
+import { useEffect, useRef, useState } from "react";
+import "prismjs/components/prism-jsx.min";
+
+type PrismLanguages =
+  | "extend"
+  | "insertBefore"
+  | "DFS"
+  | "markup"
+  | "html"
+  | "mathml"
+  | "svg"
+  | "xml"
+  | "ssml"
+  | "atom"
+  | "rss"
+  | "css"
+  | "clike"
+  | "javascript"
+  | "js"
+  | "jsx";
+
+export const copyCode = (content) => {
+  if (typeof content === "string") {
+    copy(content, {
+      format: "text/plain",
+    });
+  }
+};
+
+const Bash = ({
+  code,
+  terminal = false,
+  copy = false,
+  language = "html",
+  ...props
+}: {
+  code: string;
+  terminal?: boolean;
+  copy?: boolean;
+  language?: PrismLanguages;
+}) => {
+  const highlighted = terminal
+    ? code
+    : Prism.highlight(code, Prism.languages[language], language);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const [openPopover, setOpenPopover] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (openPopover) {
+      timeoutRef.current = setTimeout(() => setOpenPopover(false), 1500);
+      return () => timeoutRef.current && clearTimeout(timeoutRef.current);
+    }
+  }, [openPopover]);
+
+  const handleCopy = () => {
+    copyCode(code);
+    setOpenPopover(true);
+  };
+
+  return (
+    <div className={style.preWrapper}>
+      <pre className={style.pre}>
+        <code
+          className={cl(style.code, {
+            [style.codeCopy]: copy,
+            [style.terminal]: terminal,
+          })}
+          {...props}
+          dangerouslySetInnerHTML={{ __html: highlighted }}
+        />
+        {copy && (
+          <>
+            <div className={style.buttonBackground}>
+              <button
+                ref={buttonRef}
+                className={style.copyButton}
+                onClick={() => handleCopy()}
+              >
+                <Files />
+              </button>
+              <Popover
+                role="alert"
+                anchorEl={buttonRef.current}
+                open={openPopover}
+                onClose={() => setOpenPopover(false)}
+                size="small"
+                placement="auto-start"
+                /* arrow={false} */
+              >
+                Kode er kopiert
+              </Popover>
+              )
+            </div>
+          </>
+        )}
+      </pre>
+    </div>
+  );
+};
+
+export default Bash;
@@ -0,0 +1,22 @@
+import Bash from "./Bash";
+
+interface ImportProps {
+  from: string;
+  imports: string | string[];
+  namedExport?: boolean;
+}
+
+const Import = ({ namedExport = true, from, imports }: ImportProps) => {
+  const genCode = () => {
+    if (Array.isArray(imports)) {
+      return `import { ${imports.join(", ")} } from "${from}";`;
+    } else if (!namedExport) {
+      return `import ${imports} from "${from}";`;
+    } else {
+      return `import { ${imports} } from "${from}";`;
+    }
+  };
+  return <Bash code={genCode()} copy language="jsx"></Bash>;
+};
+
+export default Import;
@@ -0,0 +1,64 @@
+.pre {
+  padding: 1rem;
+  margin: 1rem 0 0 0;
+  overflow: auto;
+  width: calc(100vw - 2rem);
+  background-color: var(--bg-code);
+  align-items: center;
+  display: flex;
+
+  /* Fixer pixelbug på høyre side av bash-panel */
+  box-shadow: inset -4px 0 0 var(--bg-code);
+}
+
+.preWrapper {
+  position: relative;
+  align-items: center;
+  display: flex;
+}
+
+.terminal {
+  color: var(--color-code);
+}
+
+.code {
+  padding-right: 4rem;
+  color: var(--color-code);
+}
+
+.terminal::before {
+  content: "$ ";
+}
+
+.buttonBackground {
+  width: 3rem;
+  background-color: var(--bg-code);
+  position: absolute;
+  right: 0;
+  margin: 1rem 0;
+  display: flex;
+  justify-content: center;
+  height: calc(100% - 3rem - 0.5rem);
+  align-items: center;
+}
+
+.copyButton {
+  background-color: var(--bg-code);
+  color: white;
+  font-size: 1.5rem;
+  padding: 0.5rem;
+  border: none;
+  align-items: center;
+  display: inline-flex;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.copyButton:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.copyButton:focus {
+  outline: var(--outline-code);
+  outline-offset: var(--outline-offset);
+}
@@ -0,0 +1,55 @@
+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";
+import { useEffect, useState } from "react";
+import style from "./layout.module.css";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  const [sidebar, setSidebar] = useState(false);
+
+  const small = useMediaQuery({
+    query: "(max-width: 959px)",
+  });
+
+  useKeypress("Escape", () => {
+    setSidebar(false);
+  });
+
+  useEffect(() => {
+    setSidebar(!small);
+  }, [small]);
+
+  return (
+    <div className={style.pageWrapper + " lightTheme"}>
+      <Header sidebar={sidebar} onSidebarChange={(x) => setSidebar(x)} />
+      <Sidebar
+        sidebar={sidebar}
+        small={small}
+        onSidebarChange={(x) => setSidebar(x)}
+      />
+      <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>
+          </Grid>
+        </ContentContainer>
+      </main>
+    </div>
+  );
+};
+
+export default Layout;
@@ -0,0 +1,25 @@
+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;
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import NavLogo from "../../assets/navLogo.svg";
+import { HamburgerFilled } from "@navikt/ds-icons";
+import cl from "classnames";
+import style from "../layout.module.css";
+
+interface HeaderProps {
+  className?: string;
+  sidebar: boolean;
+  onSidebarChange: (x: boolean) => void;
+}
+
+const Header = ({
+  className,
+  sidebar,
+  onSidebarChange,
+  ...props
+}: HeaderProps) => {
+  return (
+    <header className={style.header}>
+      <button
+        onClick={() => onSidebarChange(!sidebar)}
+        className={cl(style.header__link, style.header__icon, {
+          [style["header__icon--hidden"]]: sidebar,
+        })}
+        tabIndex={!sidebar ? 0 : -1}
+      >
+        <HamburgerFilled />
+      </button>
+      <Link href="/">
+        <button className={style.header__link}>
+          <NavLogo />
+          <span className={style["header__link-title"]}>NAV Designsystem</span>
+        </button>
+      </Link>
+    </header>
+  );
+};
+
+export default Header;
@@ -0,0 +1,144 @@
+.pageWrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar content";
+  height: 100vh;
+  background-color: var(--bg-primary);
+}
+
+.header {
+  grid-area: header;
+  width: 100vw;
+  display: flex;
+  z-index: 99;
+  color: #fff;
+  height: 5rem;
+  background-color: #c30000;
+}
+
+.header__link {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  column-gap: 3rem;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.header__icon {
+  color: #fff;
+  font-size: 1.5rem;
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sidebar__icon {
+  color: var(--navds-color-blue-50);
+  height: 5rem;
+  width: 5rem;
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  align-items: center;
+}
+
+.sidebar__icon:focus {
+  outline: 2px solid var(--navds-color-blue-50);
+  outline-offset: -2px;
+}
+
+.header__icon--hidden {
+  visibility: hidden;
+}
+
+.header__link:focus {
+  outline: 2px solid white;
+  outline-offset: -2px;
+}
+
+.header__link-title {
+  color: white;
+  font-size: var(--navds-font-size-heading-large);
+  font-weight: var(--navds-font-weight-bold);
+  line-height: var(--navds-font-line-height-large);
+}
+
+.sidebar {
+  display: flex;
+  grid-area: sidebar;
+  flex-direction: column;
+  width: 300px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: var(--bg-secondary);
+  box-shadow: inset -2px 0px 0px var(--sidebar-shadow);
+  flex-grow: 1;
+}
+
+.contentWrapper {
+  grid-area: content;
+  overflow-y: auto;
+  overflow: visible;
+  margin: 0 auto 0 0;
+  width: 100%;
+}
+
+.content {
+  width: 100%;
+}
+
+@media (max-width: 959px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+@media (max-width: 447px) {
+  .header__link {
+    column-gap: 1rem;
+  }
+}
+
+.sidebar__mobile {
+  z-index: 999;
+  display: flex;
+  background-color: var(--bg-secondary);
+  flex-direction: column;
+  color: var(--text-color);
+  overflow-y: auto;
+  position: fixed;
+  left: -300px;
+  min-height: 100vh;
+  border-right: var(--sidebar-divider);
+}
+
+.sidebar__mobile--open {
+  transition: transform 250ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
+  transform: translateX(100%);
+}
+
+.sidebar--overlay {
+  display: block;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0);
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  transition: background 0.15s linear;
+}
+
+.sidebar--overlay--fade {
+  background: rgba(0, 0, 0, 0.5);
+}
@@ -0,0 +1,51 @@
+import Link from "next/link";
+import cl from "classnames";
+import { Close } from "@navikt/ds-icons";
+import style from "../layout.module.css";
+
+interface SidebarProps {
+  classname?: string;
+  sidebar: boolean;
+  small: boolean;
+  onSidebarChange: (x: boolean) => void;
+}
+
+const Sidebar = ({
+  sidebar,
+  small,
+  onSidebarChange,
+  ...props
+}: SidebarProps) => {
+  return (
+    <>
+      {sidebar && small && (
+        <div
+          onClick={() => onSidebarChange(false)}
+          className={cl(style["sidebar--overlay"], {
+            [style["sidebar--overlay--fade"]]: sidebar,
+          })}
+        />
+      )}
+      <div
+        className={cl(style.sidebar, {
+          [style.sidebar__mobile]: small,
+          [style["sidebar__mobile--open"]]: small && sidebar,
+        })}
+      >
+        {small && sidebar && (
+          <button
+            onClick={() => onSidebarChange(!sidebar)}
+            className={style.sidebar__icon}
+          >
+            <Close />
+          </button>
+        )}
+        <Link href="/">Home</Link>
+        <Link href="/komponenter">Komponenter</Link>
+        <Link href="/komponenter/button">Button</Link>
+      </div>
+    </>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,61 @@
+import getConfig from "next/config";
+import Import from "../code/Import";
+import style from "./npm.module.css";
+
+const Npm = ({
+  packName,
+  imports,
+  namedExport,
+}: {
+  packName: string;
+  imports: string | string[];
+  namedExport?: boolean;
+}) => {
+  const { publicRuntimeConfig } = getConfig();
+
+  const packs = publicRuntimeConfig.packages.filter(
+    (pack) => pack.name === packName
+  );
+
+  return (
+    <div>
+      {packs.map(({ name, data }) => (
+        <div key={name}>
+          <span className={style.badges}>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://www.npmjs.com/package/${name}`}
+            >
+              <img src={`https://badgen.net/npm/v/${name}`} alt="123" />
+            </a>
+
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://bundlephobia.com/result?p=${name}`}
+            >
+              <img
+                src={`https://badgen.net/bundlephobia/tree-shaking/${name}`}
+                alt="123"
+              />
+            </a>
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href={`https://bundlephobia.com/result?p=${name}`}
+            >
+              <img
+                src={`https://badgen.net/bundlephobia/min/${name}`}
+                alt="123"
+              />
+            </a>
+          </span>
+          <Import from={name} imports={imports} namedExport={namedExport} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Npm;
@@ -0,0 +1,5 @@
+.badges {
+  display: flex;
+  column-gap: 0.5rem;
+  flex-wrap: wrap;
+}
@@ -1,11 +0,0 @@
-interface SidebarProps {}
-
-const Sidebar = ({ ...props }: SidebarProps) => {
-  return (
-    <>
-      <div>Current path</div>
-    </>
-  );
-};
-
-export default Sidebar;
@@ -0,0 +1,34 @@
+import { useState } from "react";
+import style from "./tabs.module.css";
+import cl from "classnames";
+
+interface TabsProps {
+  onChange: (tab: number) => void;
+  tabs: string[];
+}
+
+const Tabs = ({ onChange, tabs, ...props }: TabsProps) => {
+  const [tab, setTab] = useState(0);
+
+  const handleClick = (x: number) => {
+    onChange(x);
+    setTab(x);
+  };
+
+  return (
+    <ul className={style.ul}>
+      {tabs.map((t, x) => (
+        <li key={t + x} className={style.li}>
+          <button
+            className={cl(style.button, { [style.buttonActive]: x === tab })}
+            onClick={() => handleClick(x)}
+          >
+            {t}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default Tabs;
@@ -0,0 +1,32 @@
+.ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+.li {
+  list-style: none;
+}
+
+.button {
+  color: var(--tab-color);
+  border: none;
+  background: none;
+  padding: 0.5rem 1.5rem;
+  font-weight: var(--navds-font-weight-bold);
+}
+
+.button:hover {
+  border-bottom: 4px solid var(--navds-color-darkgray);
+  color: var(--navds-color-darkgray);
+}
+
+.button:focus {
+  outline: var(--outline-focus);
+  outline-offset: var(--outline-offset);
+}
+
+.buttonActive {
+  border-bottom: var(--tab-border);
+  color: var(--tab-color-active);
+}
@@ -0,0 +1,10 @@
+import style from "./toc.module.css";
+interface TocProps {
+  className?: string;
+}
+
+const Header = ({ className, ...props }: TocProps) => {
+  return <nav className={style.toc}></nav>;
+};
+
+export default Header;
@@ -0,0 +1,6 @@
+.toc {
+  background-color: var(--bg-secondary);
+  width: 100%;
+  height: 500px;
+  outline: var(--outline);
+}
@@ -1,5 +1,32 @@
-module.exports = {
+/* 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");
+  const vnext = glob.sync("../@navikt/*/package.json");
+  return [...navFrontend, ...vnext]
+    .filter((file) => !file.includes("node_modules"))
+    .map((file) => {
+      const pack = require(file);
+      return { name: pack.name, data: pack };
+    });
+};
+
+module.exports = withMDX({
+  pageExtensions: ["js", "jsx", "mdx"],
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
    return config;
  },
-};
+  publicRuntimeConfig: {
+    packages: loadPackage(),
+  },
+});
@@ -13,9 +13,25 @@
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "typescript": "^4.2.3",
+    "react-responsive": "^8.2.0",
+    "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",
+    "prismjs": "^1.23.0",
+    "@svgr/webpack": "^5.5.0",
    "@navikt/ds-css": "^0.2.0",
    "@navikt/ds-react": "^0.2.0"
  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^10.0.8",
+    "@types/prettier": "^2.2.2",
+    "@types/react-dom": "^17.0.2",
+    "prettier": "2.2.1"
+  },
  "eslintConfig": {
    "rules": {
      "react/react-in-jsx-scope": "off"
@@ -1,7 +1,10 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
-import Sidebar from "../components/sidebar/Sidebar";
-/* import "@navikt/ds-css/baseline/index.css"; */
+import Layout from "../components/layout/Layout";
+import "../styles/theme.css";
+import "../styles/globals.css";
+import "../styles/prismjs.css";
+import "@navikt/ds-css";

 const Website = ({ Component, pageProps }) => {
  const route = useRouter();
@@ -11,8 +14,9 @@ const Website = ({ Component, pageProps }) => {
        <title>NAV Designsystem</title>
        <link rel="icon" href="/favicon-32x32.png" />
      </Head>
-      <Sidebar route={route} />
-      <Component {...pageProps} />
+      <Layout route={route}>
+        <Component {...pageProps} />
+      </Layout>
    </>
  );
 };
@@ -0,0 +1,5 @@
+# Home
+
+Hjemmeside
+
+<Npm packName="@navikt/ds-react" imports="Button" />
@@ -1,7 +0,0 @@
-export default function Home() {
-  return (
-    <div>
-      <main>Website</main>
-    </div>
-  );
-}
@@ -0,0 +1,3 @@
+# Getting-started
+
+Kom i gang
@@ -1,11 +0,0 @@
-interface Props {}
-
-const KomIGang = ({ ...props }: Props) => {
-  return (
-    <>
-      <div>Kom-i-gang</div>
-    </>
-  );
-};
-
-export default KomIGang;
@@ -2,6 +2,7 @@ html,
 body {
  padding: 0;
  margin: 0;
+  background-color: var(--bg-primary);
 }

 a {
@@ -0,0 +1,122 @@
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #282a36;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6272a4;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.namespace {
+  opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ff79c6;
+}
+
+.token.boolean,
+.token.number {
+  color: #bd93f9;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #50fa7b;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #f1fa8c;
+}
+
+.token.keyword {
+  color: #8be9fd;
+}
+
+.token.regex,
+.token.important {
+  color: #ffb86c;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
@@ -0,0 +1,24 @@
+:root {
+  --bg-primary: #faf9f9;
+}
+
+.darkTheme {
+  --theme: "dark";
+}
+
+.lightTheme {
+  --theme: "light";
+  --bg-primary: #faf9f9;
+  --bg-secondary: #fff;
+  --sidebar-shadow: #e7e9e9;
+  --outline: 1px solid var(--navds-color-gray-40);
+  --tab-color: var(--navds-color-blue-50);
+  --tab-color-active: var(--navds-color-darkgray);
+  --tab-border: 4px solid var(--navds-color-blue-50);
+  --outline-focus: 2px solid var(--navds-color-blue-80);
+  --outline-offset: -2px;
+  --bg-code: var(--navds-color-darkgray);
+  --color-code: #fff;
+  --code-divider: var(--sidebar-shadow);
+  --outline-code: 2px solid var(--color-code);
+}
@@ -818,6 +818,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.12.13"

+"@babel/plugin-transform-react-constant-elements@^7.12.1":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.13.10.tgz#5d3de8a8ee53f4612e728f4f17b8c9125f8019e5"
+  integrity sha512-E+aCW9j7mLq01tOuGV08YzLBt+vSyr4bOPT75B6WrAlrUfmOYOZ/yWk847EH0dv0xXiCihWLEmlX//O30YhpIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.13.0"
+
 "@babel/plugin-transform-react-display-name@^7.12.13":
  version "7.12.13"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.13.tgz#c28effd771b276f4647411c9733dbb2d2da954bd"
@@ -2510,7 +2517,7 @@
    npmlog "^4.1.2"
    write-file-atomic "^3.0.3"

-"@mdx-js/loader@^1.6.19":
+"@mdx-js/loader@^1.6.19", "@mdx-js/loader@^1.6.22":
  version "1.6.22"
  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
  integrity sha512-9CjGwy595NaxAYp0hF9B/A0lH6C8Rms97e2JS9d3jVUtILn6pT5i5IV965ra3lIWc7Rs1GG1tBdVF7dCowYe6Q==
@@ -2544,7 +2551,7 @@
    unist-builder "2.0.3"
    unist-util-visit "2.0.3"

-"@mdx-js/react@1.6.22", "@mdx-js/react@^1.6.18", "@mdx-js/react@^1.6.19":
+"@mdx-js/react@1.6.22", "@mdx-js/react@^1.6.18", "@mdx-js/react@^1.6.19", "@mdx-js/react@^1.6.22":
  version "1.6.22"
  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.22.tgz#ae09b4744fddc74714ee9f9d6f17a66e77c43573"
  integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==
@@ -2582,11 +2589,23 @@
  resolved "https://registry.yarnpkg.com/@navikt/textparser/-/textparser-2.1.0.tgz#08fe604278de7ac409b421c72b19e7ea288116d5"
  integrity sha512-Zmi6T4ZxmLaxUyGUmLxUE9I/LvA+00BRet2iWx25vfClapL2BKnO2DTvZUcYpp/ijodTUYptqkUVh6FSM9Camw==

+"@next/bundle-analyzer@^10.0.8":
+  version "10.0.8"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-10.0.8.tgz#38c752c3efadde51a29cca20d6b6a62d0568ef20"
+  integrity sha512-FXm7FnkUzn8d67SNVBnp5kcX7H2jlxYfl6PJl8jw13kDXKSnYLDC699sxw3kAPilj/A6qG8kYeoJKcSr3D7sGw==
+  dependencies:
+    webpack-bundle-analyzer "4.3.0"
+
 "@next/env@10.0.8":
  version "10.0.8"
  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.8.tgz#3306c9de20ef187438affbafce0ef966c9e43c3b"
  integrity sha512-vWdxAHD6gJn52tN5bxj1VoRgu5lNtRPc/HyYf7V014k2GZ9eKhqoFQGSSMNGHB7WgdUxLVw75+o9Ek9ClOOAjw==

+"@next/mdx@^10.0.8":
+  version "10.0.8"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-10.0.8.tgz#a495cafa7d847fb97616fc5200fe4aeb1a511ba3"
+  integrity sha512-t/Nl9MTMzH0hrjFNMk0cvsSEbFjPuiOzbgAPy29N/9PVPoTAF56EcUSKVYEKvV/VWsk+EkuptQXEh9W6DIL2fg==
+
 "@next/polyfill-module@10.0.8":
  version "10.0.8"
  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.8.tgz#1d033f390389591f227499e286911e3db14c484b"
@@ -2841,6 +2860,11 @@
    schema-utils "^2.6.5"
    source-map "^0.7.3"

+"@polka/url@^1.0.0-next.9":
+  version "1.0.0-next.11"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.11.tgz#aeb16f50649a91af79dbe36574b66d0f9e4d9f71"
+  integrity sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
+
 "@popperjs/core@^2.5.4":
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.0.tgz#32e63212293dd3efbb521cd35a5020ab66eaa546"
@@ -3601,6 +3625,20 @@
    deepmerge "^4.2.2"
    svgo "^1.2.2"

+"@svgr/webpack@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.5.0.tgz#aae858ee579f5fa8ce6c3166ef56c6a1b381b640"
+  integrity sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/plugin-transform-react-constant-elements" "^7.12.1"
+    "@babel/preset-env" "^7.12.1"
+    "@babel/preset-react" "^7.12.5"
+    "@svgr/core" "^5.5.0"
+    "@svgr/plugin-jsx" "^5.5.0"
+    "@svgr/plugin-svgo" "^5.5.0"
+    loader-utils "^2.0.0"
+
 "@szmarczak/http-timer@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -3921,6 +3959,11 @@
  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
  integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==

+"@types/prettier@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.2.tgz#e2280c89ddcbeef340099d6968d8c86ba155fdf6"
+  integrity sha512-i99hy7Ki19EqVOl77WplDrvgNugHnsSjECVR/wUrzw2TJXz1zlUfT2ngGckR6xN7yFYaijsMAqPkOLx9HgUqHg==
+
 "@types/prop-types@*":
  version "15.7.3"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -3963,6 +4006,13 @@
    "@types/react" "*"
    "@types/reactcss" "*"

+"@types/react-dom@^17.0.2":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
+  integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-modal@^3.1.2":
  version "3.12.0"
  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.12.0.tgz#91fa86a76fd7fc57e36d2cf9b76efe5735a855a1"
@@ -4590,6 +4640,11 @@ acorn-walk@^7.0.0:
  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==

+acorn-walk@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.0.2.tgz#d4632bfc63fd93d0f15fd05ea0e984ffd3f5a8c3"
+  integrity sha512-+bpA9MJsHdZ4bgfDcpk0ozQyhhVct7rzOmO0s1IIr0AGGgKBljss8n2zp11rRP2wid5VGeh04CgeKzgat5/25A==
+
 acorn@^6.4.1:
  version "6.4.2"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -8904,7 +8959,7 @@ duplexer3@^0.1.4:
  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=

-duplexer@^0.1.1:
+duplexer@^0.1.1, duplexer@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
@@ -12123,6 +12178,13 @@ gzip-size@5.1.1:
    duplexer "^0.1.1"
    pify "^4.0.1"

+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 handle-thing@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -15860,7 +15922,7 @@ mime@1.6.0, mime@^1.3.4, mime@^1.4.1:
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==

-mime@^2.0.3, mime@^2.4.4, mime@^2.4.6:
+mime@^2.0.3, mime@^2.3.1, mime@^2.4.4, mime@^2.4.6:
  version "2.5.2"
  resolved "https://registry.yarnpkg.com/mime/-/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
  integrity sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==
@@ -17043,6 +17105,11 @@ open@^7.0.2, open@^7.0.3:
    is-docker "^2.0.0"
    is-wsl "^2.1.1"

+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 opentracing@^0.14.4:
  version "0.14.5"
  resolved "https://registry.yarnpkg.com/opentracing/-/opentracing-0.14.5.tgz#891fa92cd90a24e64f99bc964370227310926c85"
@@ -18117,15 +18184,6 @@ postcss-loader@^3.0.0:
    postcss-load-config "^2.0.0"
    schema-utils "^1.0.0"

-postcss-loader@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-5.1.0.tgz#8a36f18b8989bee94172626b25f2b9cc6160fb43"
-  integrity sha512-tGgKZF6Ntn16zIWXt7yKV19L0rISaozHPCfdPt+aHOnTZrreeqVR6hCkFhZYfJ6KgpyIFRkKuW8ygHtUid4GlA==
-  dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.4"
-    semver "^7.3.4"
-
 postcss-media-query-parser@^0.2.3:
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -18524,15 +18582,6 @@ postcss@^8.2.6, postcss@^8.2.7:
    nanoid "^3.1.20"
    source-map "^0.6.1"

-postcss@^8.2.8:
-  version "8.2.8"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.8.tgz#0b90f9382efda424c4f0f69a2ead6f6830d08ece"
-  integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==
-  dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.20"
-    source-map "^0.6.1"
-
 potrace@^2.1.8:
  version "2.1.8"
  resolved "https://registry.yarnpkg.com/potrace/-/potrace-2.1.8.tgz#50f6fba92e1e39ddef6f979b0a0f841809e0acf2"
@@ -18636,7 +18685,7 @@ prism-react-renderer@^1.1.1:
  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz#5ad4f90c3e447069426c8a53a0eafde60909cdf4"
  integrity sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg==

-prismjs@1.23.0, prismjs@^1.21.0, prismjs@^1.22.0, prismjs@~1.23.0:
+prismjs@1.23.0, prismjs@^1.21.0, prismjs@^1.22.0, prismjs@^1.23.0, prismjs@~1.23.0:
  version "1.23.0"
  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
@@ -19273,7 +19322,7 @@ react-refresh@0.8.3, react-refresh@^0.8.3:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==

-react-responsive@^8.1.0:
+react-responsive@^8.1.0, react-responsive@^8.2.0:
  version "8.2.0"
  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-8.2.0.tgz#e0ffb306cfd8f38c9c12e26725b9e1245fa9debc"
  integrity sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==
@@ -19369,7 +19418,7 @@ react-textarea-autosize@^8.1.1:
    use-composed-ref "^1.0.0"
    use-latest "^1.0.0"

-react-use-keypress@^1.0.1:
+react-use-keypress@^1.0.1, react-use-keypress@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/react-use-keypress/-/react-use-keypress-1.2.0.tgz#45286222a3b64b13fc7a9919ecb101010206d0eb"
  integrity sha512-eAQ0VJiry4Lamla1InX/pnHvmyewW5H1nWBIKuILMrn0tvyXRlFKyy01SMfHaqSHjelYKgqn4NOJegGE1aRzmg==
@@ -20778,6 +20827,15 @@ single-trailing-newline@^1.0.0:
  dependencies:
    detect-newline "^1.0.3"

+sirv@^1.0.7:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.11.tgz#81c19a29202048507d6ec0d8ba8910fda52eb5a4"
+  integrity sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg==
+  dependencies:
+    "@polka/url" "^1.0.0-next.9"
+    mime "^2.3.1"
+    totalist "^1.0.0"
+
 sisteransi@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -22427,6 +22485,11 @@ token-types@^2.0.0:
    "@tokenizer/token" "^0.1.1"
    ieee754 "^1.2.1"

+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 touch@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
@@ -23614,6 +23677,21 @@ webidl-conversions@^6.1.0:
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==

+webpack-bundle-analyzer@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz#2f3c0ca9041d5ee47fa418693cf56b4a518b578b"
+  integrity sha512-J3TPm54bPARx6QG8z4cKBszahnUglcv70+N+8gUqv2I5KOFHJbzBiLx+pAp606so0X004fxM7hqRu10MLjJifA==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^6.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-cli@^4.2.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.5.0.tgz#b5213b84adf6e1f5de6391334c9fa53a48850466"
@@ -24181,7 +24259,7 @@ ws@^6.2.1:
  dependencies:
    async-limiter "~1.0.0"

-ws@^7.3.0, ws@~7.4.2:
+ws@^7.3.0, ws@^7.3.1, ws@~7.4.2:
  version "7.4.4"
  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.4.tgz#383bc9742cb202292c9077ceab6f6047b17f2d59"
  integrity sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==
Author	SHA1	Message	Date
github-actions[bot]	00fec86f80	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.2	2021-03-16 13:23:29 +00:00
Ken	d631e4b611	setappelement extender nå Modal komponent (#1044 ) * setappelement implementert * fjernet comments	2021-03-16 14:10:48 +01:00
Ken	3097afe082	Nextjs base-struktur med mdx v0.1 (#1040 ) * nav-logo white * base-struktur layout * fjernet docs-old * fjernet docs-old * Code-preview, bash og npm (#1041) * laget code-preview * fikset styling * npm komponent	2021-03-16 11:08:14 +01:00