Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.13

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

@@ -6,7 +6,7 @@
 @import "print.css";
 @import "utility.css";
 
-html {
+html:focus-within {
   scroll-behavior: smooth;
 }
 
@@ -23,7 +23,9 @@ a {
 
 /* https://web.dev/prefers-reduced-motion/ */
 @media (prefers-reduced-motion: reduce) {
-  *, ::before, ::after {
+  *,
+  ::before,
+  ::after {
     animation-delay: -1ms !important;
     animation-duration: 1ms !important;
     animation-iteration-count: 1 !important;

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

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

@navikt/ds-css/index.css

@@ -5,6 +5,7 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
+@import "copy-to-clipboard.css";
 @import "grid.css";
 @import "internal-header.css";
 @import "layouts.css";

@navikt/ds-css/modal.css

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

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.2.5",
+  "version": "0.2.9",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.8",
+  "version": "0.2.13",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -31,12 +31,13 @@
     "cjs-package": "copyfiles -f config/package.json cjs",
     "clean": "rm -rf cjs esm",
     "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
-    "watch": "tsc --watch -p tsconfig.json"
+    "watch": "tsc --watch -p tsconfig-esm.json"
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.2.1",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.12.1",

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

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

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

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

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

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

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

@@ -16,6 +16,7 @@ export {
   ContentContainerProps,
 } from "./content-container/index";
 export { Cell, CellProps, Grid, GridProps } from "./grid/index";
+export { CopyToClipboard } from "./copy-to-clipboard/index";
 export {
   InternalHeader,
   InternalHeaderProps,

@navikt/ds-react/src/popover/Popover.tsx

@@ -36,6 +36,14 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default "right"
    */
   placement?: Placement;
+  /**
+   *  Deteremines if popover contains an arrow
+   */
+  arrow?: boolean;
+  /**
+   * Distance from anchor to popover
+   */
+  offset?: number;
 }
 
 const useEventLister = (event: string, callback) =>
@@ -49,19 +57,20 @@ const useEventLister = (event: string, callback) =>
 const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
+      className,
+      children,
       anchorEl,
+      arrow = true,
       open,
       onClose,
-      children,
       placement = "right",
-      className,
+      offset,
       ...rest
     },
     ref
   ) => {
     const popoverRef = useRef<HTMLDivElement | null>(null);
     const mergedRef = mergeRefs([popoverRef, ref]);
-    const arrowRef = useRef<HTMLDivElement | null>(null);
 
     const close = useCallback(() => open && onClose(), [open, onClose]);
 
@@ -108,17 +117,10 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       {
         placement,
         modifiers: [
-          {
-            name: "arrow",
-            options: {
-              padding: 8,
-              element: arrowRef.current,
-            },
-          },
           {
             name: "offset",
             options: {
-              offset: [0, 16],
+              offset: [0, offset ?? arrow ? 16 : 4],
             },
           },
         ],
@@ -143,11 +145,13 @@ const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         style={styles.popper}
       >
         {children}
-        <div
-          ref={arrowRef}
-          style={styles.arrow}
-          className="navds-popover__arrow"
-        />
+        {arrow && (
+          <div
+            data-popper-arrow
+            style={styles.arrow}
+            className="navds-popover__arrow"
+          />
+        )}
       </div>
     );
   }

CHANGELOG.md

@@ -1,7 +1,68 @@
 # Endringslogg
 
+## 08. April 2021
+
+### Gråskala er endret i `nav-frontend-core`
+
+[#1068](https://github.com/navikt/nav-frontend-moduler/pull/1068)
+
+- Gråfargene er endret til en mer nøytral og leselig farge enn tidligere.
+- Alle pakker som bruker `nav-frontend-core` eller har tilknytning til den (inkludert selve pakken) er minor bumpet fra x.0.x -> x.1.0.
+- Letteste måten å oppdatere pakkene på er å kjøre `npm update`
+- Hvis man ønsker å bumpe pakkene manuelt så kan alle `nav-frontend-*` pakker minor bumpes til x.1.x utenom disse:
+- - nav-frontend-chevron-style
+- - nav-frontend-chevron
+- - nav-frontend-fullbreddeknapp-style
+- - nav-frontend-grid-style
+- - nav-frontend-ikoner-assets
+- - nav-frontend-js-utils
+- - nav-frontend-spinner-style
+- - nav-frontend-spinner
+
+## 07. April 2021
+
+### Sourcemapping ds-icons og ds-react
+
+[#1064](https://github.com/navikt/nav-frontend-moduler/pull/1064)
+[#1065](https://github.com/navikt/nav-frontend-moduler/pull/1065)
+
+## 24. Mars 2021
+
+### Smoothscroll og reduced animations
+
+[#1055](https://github.com/navikt/nav-frontend-moduler/pull/1055)
+
+- `@navikt/ds-css` sin baseline setter nå `scroll-behavior: smooth;` på html by default
+- Ved `(prefers-reduced-motion: reduce)` vil baseline redusere animasjoner.
+
 ## 10. Mars 2021
 
+### @navikt/ds-react importerer nå ikke styling i selve komponenten
+
+[#1030](https://github.com/navikt/nav-frontend-moduler/pull/1030)
+
+- Dette betyr at pakken `@navikt/ds-css` må importeres separat ved å endten linke til pakken i `<head>` eller importere den høyt i dom-strukturen.
+
+### @navikt/ds-react og @navikt/ds-icons er nå treeshakable
+
+[#1033](https://github.com/navikt/nav-frontend-moduler/pull/1033)
+
+- Begge pakkene defaulter nå til esm versjonen av pakken. De vanligste bundlerne hånterer da treeshaking selv når pakken blir brukt. Hvis man man ønsker å ta i bruk Commonjs versjonen kan man importere direkte fra `cjs` dir i pakken
+
+```bash
+Esm -> import { Button } from "@navikt/ds-react";
+Cjs -> import { Button } from "@navikt/ds-react/cjs";
+```
+
+Siden eks noen test-libraries ikke støtter ESM enda kan man legge denne til i jest config for å bruke pakkene:
+
+```
+"moduleNameMapper": {
+  "@navikt/ds-react(.*)": "@navikt/ds-react/cjs$1",
+  "@navikt/ds-icons(.*)": "@navikt/ds-icons/cjs$1"
+}
+```
+
 ### Oppdatert feil-styling og state-handling for skjemakomponenter
 
 [#1018](https://github.com/navikt/nav-frontend-moduler/pull/1018)

CONTRIBUTING.md

@@ -7,6 +7,8 @@ slik at mest mulig av fremtidige moduler er å finne her og fungerer etter de be
 
 ## TL;DR
 
+Vi bruker yarn pga yarn workspaces. Har du ikke yarn? `npm i -g yarn`
+
 ```sh
 git clone git@github.com:navikt/nav-frontend-moduler.git
 cd nav-frontend-moduler

docs/components/MDXComponents.tsx

@@ -1,17 +1,111 @@
-import { Heading, Paragraph, Alert, Link } from "@navikt/ds-react";
+import { Settings, SuccessFilled, ErrorFilled } from "@navikt/ds-icons";
+import { Alert, Heading, Link, Paragraph } from "@navikt/ds-react";
+import Alertstripe from "nav-frontend-alertstriper";
+import Chevron from "nav-frontend-chevron";
+import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
+import Etikett from "nav-frontend-etiketter";
+import Hjelpetekst from "nav-frontend-hjelpetekst";
+import {
+  Hamburgerknapp,
+  Menyknapp,
+  Nesteknapp,
+  Systemerknapp,
+  Søkeknapp,
+  Tilbakeknapp,
+  Xknapp,
+} from "nav-frontend-ikonknapper";
+import { Knapp } from "nav-frontend-knapper";
+import Lenkepanel, { LenkepanelBase } from "nav-frontend-lenkepanel";
+import Lenke from "nav-frontend-lenker";
+import Lesmerpanel from "nav-frontend-lesmerpanel";
+import Modal from "nav-frontend-modal";
+import Panel from "nav-frontend-paneler";
+import Popover, { PopoverBase } from "nav-frontend-popover";
+import {
+  BekreftCheckboksPanel,
+  CheckboksPanelGruppe,
+  Checkbox,
+  CheckboxGruppe,
+  Feiloppsummering,
+  FnrInput,
+  Input,
+  Label,
+  Radio,
+  RadioGruppe,
+  Select,
+  SkjemaGruppe,
+  Textarea,
+  TextareaControlled,
+} from "nav-frontend-skjema";
+import Snakkeboble from "nav-frontend-snakkeboble";
+import Spinner from "nav-frontend-spinner";
+import Stegindikator from "nav-frontend-stegindikator";
+import "nav-frontend-tabell-style";
+import Tabs from "nav-frontend-tabs";
+import Tekstomrade from "nav-frontend-tekstomrade";
+import { ToggleGruppe, ToggleKnapp } from "nav-frontend-toggle";
+import {
+  Element,
+  Feilmelding,
+  Ingress,
+  Innholdstittel,
+  Normaltekst,
+  Sidetittel,
+  Systemtittel,
+  Undertekst,
+  UndertekstBold,
+  Undertittel,
+} from "nav-frontend-typografi";
+import Veileder from "nav-frontend-veileder";
+import Veilederpanel from "nav-frontend-veilederpanel";
+import BekreftcheckboxpanelExample2 from "../examples/navfrontendskjema/bekreftcheckboxpanel/Feilmelding";
+import BekreftcheckboxpanelExample1 from "../examples/navfrontendskjema/bekreftcheckboxpanel/Normal";
+import EkspanderbartpanelExample from "../examples/ekspanderbartpanel/ekspanderbartpanel-base";
+import ModalExample from "../examples/modal/modal-example";
+import FnrInputExample from "../examples/navfrontendskjema/fnr-input-example";
+import RadioPanelGruppeExample from "../examples/navfrontendskjema/radiopanelgruppe";
+import TextareaExample from "../examples/navfrontendskjema/textarea-example";
+import PopoverDropdownEksempel from "../examples/popover/_popover-dropdown.example";
+import PopoverInputEksempel from "../examples/popover/_popover-input.example";
+import PopoverNormalEksempel from "../examples/popover/_popover-normal.example";
+import PopoverOrienteringEksempel from "../examples/popover/_popover-orientering.example";
+import TekstomradeExample from "../examples/tekstomrade/tekstomrade-example";
+import Preview from "./code-preview/Preview";
 import Bash from "./code/Bash";
 import Import from "./code/Import";
-import Preview from "./code-preview/Preview";
 import Npm from "./npm/Npm";
+import Inline from "./code/Inline";
 import TableOfContents from "./table-of-contents/TableOfContents";
-import { Knapp, Hovedknapp, Fareknapp, Flatknapp } from "nav-frontend-knapper";
-import { Settings } from "@navikt/ds-icons";
+import FormValidationExample from "../examples/form-validation/FormValidationExample";
+import Palette from "../examples/resources/colors/Palette";
+import {
+  ButtonIcon,
+  TypoIcon,
+  VeilederIcon,
+  NAVLogoCircle,
+  SketchLogo,
+  FigmaIcon,
+  W3CLogo,
+  ZeplinLogo,
+  GithubLogo,
+} from "./assets/svg";
+import IconPage from "../examples/resources/icons/IconPage";
+import IconDownload from "../examples/resources/icons/IconDownload";
 
-export default {
+const 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} />,
+  h4: (props) => <Heading size="small" level={4} {...props} />,
   p: (props) => <Paragraph size="medium" {...props} />,
+  a: (props) => <Link {...props} />,
+  code: (props) => <Inline {...props} />,
+  SuccessIcon: () => (
+    <SuccessFilled style={{ color: "var(--navds-color-green-70)" }} />
+  ),
+  ErrorIcon: () => (
+    <ErrorFilled style={{ color: "var(--navds-color-red-60)" }} />
+  ),
   Bash,
   Preview,
   Import,
@@ -20,8 +114,85 @@ export default {
   Alert,
   Link,
   Knapp,
-  Fareknapp,
-  Flatknapp,
-  Hovedknapp,
   Settings,
+  Alertstripe,
+  BekreftCheckboksPanel,
+  CheckboksPanelGruppe,
+  Chevron,
+  Ekspanderbartpanel,
+  Etikett,
+  Element,
+  Normaltekst,
+  Undertittel,
+  Innholdstittel,
+  Systemtittel,
+  Sidetittel,
+  Undertekst,
+  Feilmelding,
+  UndertekstBold,
+  Ingress,
+  Lenke,
+  FnrInput,
+  Input,
+  Feiloppsummering,
+  Hjelpetekst,
+  Hamburgerknapp,
+  Tilbakeknapp,
+  Nesteknapp,
+  Xknapp,
+  Søkeknapp,
+  Menyknapp,
+  Systemerknapp,
+  SkjemaGruppe,
+  Label,
+  Lenkepanel,
+  LenkepanelBase,
+  Lesmerpanel,
+  Modal,
+  Panel,
+  Popover,
+  PopoverBase,
+  Radio,
+  RadioGruppe,
+  Select,
+  Checkbox,
+  CheckboxGruppe,
+  TextareaControlled,
+  Textarea,
+  Snakkeboble,
+  Spinner,
+  Stegindikator,
+  Tabs,
+  Tekstomrade,
+  ToggleGruppe,
+  ToggleKnapp,
+  Veileder,
+  Veilederpanel,
+  ButtonIcon,
+  TypoIcon,
+  VeilederIcon,
+  NAVLogoCircle,
+  W3CLogo,
+  SketchLogo,
+  FigmaIcon,
+  ZeplinLogo,
+  GithubLogo,
+  BekreftcheckboxpanelExample1,
+  BekreftcheckboxpanelExample2,
+  EkspanderbartpanelExample,
+  FnrInputExample,
+  ModalExample,
+  PopoverDropdownEksempel,
+  PopoverInputEksempel,
+  PopoverNormalEksempel,
+  PopoverOrienteringEksempel,
+  RadioPanelGruppeExample,
+  TekstomradeExample,
+  TextareaExample,
+  FormValidationExample,
+  Palette,
+  IconPage,
+  IconDownload,
 };
+
+export default components;

docs/components/assets/svg.js

@@ -0,0 +1,592 @@
+import React from "react";
+
+/* eslint-disable max-len */
+
+export const CheckIcon = (props) => {
+  const { fill = "#38a161", ...rest } = props;
+  return (
+    <svg
+      version="1.1"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      focusable="false"
+      {...rest}
+    >
+      {rest.title && <title>{rest.title}</title>}
+      <path
+        d="M23.854,5.396l-3.5-3.5c-0.195-0.195-0.512-0.195-0.707,0L7.5,14.043l-3.146-3.146c-0.195-0.195-0.512-0.195-0.707,0
+                l-3.5,3.5c-0.195,0.195-0.195,0.512,0,0.707l7,7C7.244,22.201,7.372,22.25,7.5,22.25s0.256-0.049,0.354-0.146l16-16
+                C24.049,5.908,24.049,5.592,23.854,5.396z"
+      />
+    </svg>
+  );
+};
+
+export const CrossIcon = (props) => {
+  const { fill = "#C30000", ...rest } = props;
+  return (
+    <svg
+      version="1.1"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...rest}
+    >
+      {rest.title && <title>{rest.title}</title>}
+      <path
+        d="M17.207,12.01l6.658-6.634c0.096-0.093,0.149-0.22,0.149-0.353c0-0.133-0.053-0.26-0.146-0.354L19.375,0.16
+                c-0.092-0.094-0.221-0.147-0.352-0.147h-0.002c-0.133,0-0.26,0.052-0.352,0.146l-6.66,6.634L5.375,0.134
+                C5.283,0.04,5.154-0.013,5.023-0.014H5.021c-0.133,0-0.258,0.053-0.352,0.146L0.16,4.624c-0.195,0.194-0.195,0.511-0.002,0.707
+                l6.635,6.659l-6.66,6.634c-0.195,0.194-0.195,0.511,0,0.707l4.49,4.509c0.094,0.094,0.221,0.146,0.354,0.146h0.002
+                c0.131,0,0.258-0.052,0.352-0.146l6.66-6.634l6.633,6.659c0.098,0.099,0.227,0.148,0.355,0.148c0.127,0,0.254-0.049,0.352-0.146
+                l4.51-4.491c0.195-0.194,0.195-0.511,0-0.707L17.207,12.01z"
+      />
+    </svg>
+  );
+};
+
+export const NAVLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="navLogo"
+    width="90"
+    height="57"
+    viewBox="0 0 269 169"
+    focusable="false"
+  >
+    <defs>
+      <path d="M22.407 43.417V.687H.564v42.73h21.843z" />
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <path
+        fill="#C30000"
+        d="M125.31 168.942c-46.642 0-84.46-37.817-84.46-84.465C40.85 37.824 78.667 0 125.31 0c46.657 0 84.48 37.824 84.48 84.477 0 46.648-37.823 84.465-84.48 84.465zM0 121.359l17.265-42.73h16.589l-17.243 42.73zM213.044 121.359l17.044-42.73h9.044l-17.043 42.73z"
+      />
+      <g transform="translate(246 77.942)">
+        <path fill="#C30000" d="M.564 43.417L17.604.687h4.803L5.364 43.418z" />
+      </g>
+      <path
+        fill="#FEFEFE"
+        d="M197.36 78.63h-15.016s-1.035 0-1.4.914l-8.31 25.439-8.304-25.44c-.366-.913-1.407-.913-1.407-.913h-28.872c-.625 0-1.149.522-1.149 1.143v8.639c0-6.853-7.292-9.782-11.562-9.782-9.562 0-15.963 6.298-17.956 15.873-.108-6.352-.636-8.628-2.347-10.96-.786-1.141-1.922-2.101-3.159-2.895-2.547-1.492-4.834-2.018-9.749-2.018h-5.77s-1.044 0-1.412.914l-5.25 13.013V79.773c0-.621-.52-1.143-1.145-1.143H61.198s-1.03 0-1.406.914l-5.459 13.53s-.545 1.354.701 1.354h5.133v25.784c0 .64.504 1.147 1.147 1.147h13.238c.624 0 1.144-.507 1.144-1.147V94.428h5.16c2.961 0 3.588.08 4.74.618.694.262 1.32.792 1.66 1.403.698 1.314.873 2.892.873 7.545v16.218c0 .64.514 1.147 1.15 1.147h12.687s1.434 0 2.001-1.416l2.812-6.95c3.74 5.237 9.893 8.366 17.541 8.366h1.671s1.443 0 2.014-1.416l4.897-12.128v12.397c0 .64.524 1.147 1.15 1.147h12.951s1.43 0 2.003-1.416c0 0 5.18-12.861 5.2-12.958h.008c.2-1.07-1.153-1.07-1.153-1.07h-4.623V83.847l14.545 36.096c.568 1.416 2 1.416 2 1.416h15.301s1.44 0 2.008-1.416l16.125-39.93c.558-1.383-1.057-1.383-1.057-1.383zm-64.458 27.285h-8.7c-3.463 0-6.28-2.804-6.28-6.271 0-3.461 2.817-6.283 6.28-6.283h2.433c3.454 0 6.267 2.822 6.267 6.283v6.27z"
+      />
+    </g>
+  </svg>
+);
+
+export const NAVLogoWhite = ({ ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 269 169"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable="false"
+    {...props}
+  >
+    <path d="M0 121.359L17.265 78.6299H33.854L16.611 121.359H0Z" fill="white" />
+    <path
+      d="M213.044 121.359L230.088 78.6299H239.132L222.089 121.359H213.044Z"
+      fill="white"
+    />
+    <path
+      d="M246.563 121.359L263.604 78.6299H268.407L251.364 121.359H246.563Z"
+      fill="white"
+    />
+    <path
+      d="M197.36 78.6299H182.344C182.344 78.6299 181.309 78.6299 180.943 79.5439L172.633 104.983L164.33 79.5439C163.964 78.6299 162.923 78.6299 162.923 78.6299H134.051C133.426 78.6299 132.902 79.1519 132.902 79.7729V88.4119C132.902 81.5589 125.61 78.6299 121.34 78.6299C111.778 78.6299 105.377 84.9279 103.384 94.5029C103.276 88.1509 102.748 85.8749 101.037 83.5439C100.251 82.4019 99.1154 81.4419 97.8784 80.6479C95.3314 79.1559 93.0444 78.6299 88.1294 78.6299H82.3584C82.3584 78.6299 81.3154 78.6299 80.9474 79.5439L75.6964 92.5569V79.7729C75.6964 79.1519 75.1764 78.6299 74.5524 78.6299H61.1984C61.1984 78.6299 60.1674 78.6299 59.7924 79.5439L54.3334 93.0749C54.3334 93.0749 53.7884 94.4279 55.0344 94.4279H60.1674V120.212C60.1674 120.852 60.6714 121.359 61.3144 121.359H74.5524C75.1764 121.359 75.6964 120.852 75.6964 120.212V94.4279H80.8564C83.8174 94.4279 84.4444 94.5089 85.5964 95.0459C86.2904 95.3079 86.9154 95.8379 87.2564 96.4489C87.9544 97.7629 88.1294 99.3409 88.1294 103.994V120.212C88.1294 120.852 88.6434 121.359 89.2784 121.359H101.966C101.966 121.359 103.4 121.359 103.967 119.943L106.779 112.993C110.518 118.23 116.672 121.359 124.32 121.359H125.991C125.991 121.359 127.434 121.359 128.005 119.943L132.902 107.815V120.212C132.902 120.852 133.426 121.359 134.051 121.359H147.003C147.003 121.359 148.432 121.359 149.006 119.943C149.006 119.943 154.186 107.082 154.206 106.985H154.214C154.413 105.915 153.061 105.915 153.061 105.915H148.438V83.8469L162.983 119.943C163.551 121.359 164.983 121.359 164.983 121.359H180.284C180.284 121.359 181.724 121.359 182.292 119.943L198.417 80.0139C198.975 78.6299 197.36 78.6299 197.36 78.6299ZM132.902 105.915H124.202C120.739 105.915 117.922 103.111 117.922 99.6438C117.922 96.1828 120.739 93.3608 124.202 93.3608H126.635C130.089 93.3608 132.902 96.1828 132.902 99.6438V105.915ZM125.309 168.942C78.6681 168.942 40.8491 131.125 40.8491 84.477C40.8491 37.824 78.6681 0 125.309 0C171.967 0 209.79 37.824 209.79 84.477C209.79 131.125 171.967 168.942 125.309 168.942Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const NAVLogoCircle = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 168.9 168.9"
+    focusable="false"
+  >
+    <path
+      fill="#C30000"
+      d="M84.5,168.9C37.8,168.9,0,131.1,0,84.5C0,37.8,37.8,0,84.5,0c46.7,0,84.5,37.8,84.5,84.5
+            C168.9,131.1,131.1,168.9,84.5,168.9L84.5,168.9z"
+    />
+    <path
+      fill="#FEFEFE"
+      d="M156.5,78.6h-15c0,0-1,0-1.4,0.9l-8.3,25.4l-8.3-25.4c-0.4-0.9-1.4-0.9-1.4-0.9H93.2c-0.6,0-1.1,0.5-1.1,1.1
+            v8.6c0-6.9-7.3-9.8-11.6-9.8c-9.6,0-16,6.3-18,15.9c-0.1-6.4-0.6-8.6-2.3-11c-0.8-1.1-1.9-2.1-3.2-2.9c-2.5-1.5-4.8-2-9.7-2h-5.8
+            c0,0-1,0-1.4,0.9l-5.2,13V79.8c0-0.6-0.5-1.1-1.1-1.1H20.3c0,0-1,0-1.4,0.9l-5.5,13.5c0,0-0.5,1.4,0.7,1.4h5.1v25.8
+            c0,0.6,0.5,1.1,1.1,1.1h13.2c0.6,0,1.1-0.5,1.1-1.1V94.4H40c3,0,3.6,0.1,4.7,0.6c0.7,0.3,1.3,0.8,1.7,1.4c0.7,1.3,0.9,2.9,0.9,7.5
+            v16.2c0,0.6,0.5,1.1,1.2,1.1h12.7c0,0,1.4,0,2-1.4l2.8-6.9c3.7,5.2,9.9,8.4,17.5,8.4h1.7c0,0,1.4,0,2-1.4l4.9-12.1v12.4
+            c0,0.6,0.5,1.1,1.1,1.1h13c0,0,1.4,0,2-1.4c0,0,5.2-12.9,5.2-13h0c0.2-1.1-1.2-1.1-1.2-1.1h-4.6V83.8l14.5,36.1c0.6,1.4,2,1.4,2,1.4
+            h15.3c0,0,1.4,0,2-1.4L157.6,80C158.1,78.6,156.5,78.6,156.5,78.6L156.5,78.6z M92.1,105.9h-8.7c-3.5,0-6.3-2.8-6.3-6.3
+            c0-3.5,2.8-6.3,6.3-6.3h2.4c3.5,0,6.3,2.8,6.3,6.3V105.9L92.1,105.9z"
+    />
+  </svg>
+);
+
+export const TypoIcon = (props) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 76.4 47.8"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <g>
+      <path
+        d="M0,46.9L14.7,0h12.7l14.7,46.9H30.9L28,35.8H13.7l-2.9,11.2H0z M17,23.2l-1.2,4.3h10l-1.1-4.3c-0.7-2.4-1.3-4.8-1.9-7.5
+                c-0.6-2.6-1.2-5.2-1.9-7.6h-0.3c-0.6,2.5-1.2,5.1-1.8,7.7C18.3,18.3,17.7,20.8,17,23.2z"
+      />
+      <path
+        d="M56.4,47.8c-1.6,0-3.1-0.3-4.4-0.8c-1.3-0.6-2.4-1.3-3.3-2.3c-0.9-1-1.6-2.1-2.1-3.4C46,40,45.7,38.5,45.7,37
+                c0-3.7,1.6-6.7,4.8-8.8c3.2-2.1,8.3-3.5,15.3-4.2c-0.1-1.6-0.6-2.8-1.4-3.8c-0.8-0.9-2.2-1.4-4.2-1.4c-1.5,0-3.1,0.3-4.6,0.9
+                c-1.5,0.6-3.1,1.4-4.9,2.4l-3.8-7c2.3-1.4,4.7-2.5,7.2-3.4c2.5-0.9,5.2-1.3,8-1.3c4.6,0,8.1,1.3,10.5,3.9c2.4,2.6,3.6,6.7,3.6,12.2
+                v20.4h-8.6L67,43.3h-0.3c-1.5,1.3-3.1,2.4-4.8,3.3C60.2,47.4,58.4,47.8,56.4,47.8z M60,39.6c1.2,0,2.2-0.3,3.1-0.8
+                c0.9-0.5,1.8-1.3,2.7-2.2v-6.3c-3.7,0.5-6.3,1.3-7.8,2.3c-1.4,1-2.2,2.2-2.2,3.6c0,1.2,0.4,2,1.1,2.6C57.7,39.3,58.7,39.6,60,39.6z
+                "
+      />
+    </g>
+  </svg>
+);
+
+export const ButtonIcon = (props) => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 145 47"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <g>
+      <path
+        style={{ fill: "#ffffff" }}
+        d="M141,46H4c-1.7,0-3-1.3-3-3V4c0-1.7,1.3-3,3-3h137c1.6,0,3,1.3,3,3v39C144,44.7,142.6,46,141,46z"
+      />
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M141,47H4c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h137c2.2,0,4,1.8,4,4v39C145,45.2,143.2,47,141,47z M4,2
+                C2.9,2,2,2.9,2,4v39c0,1.1,0.9,2,2,2h137c1.1,0,2-0.9,2-2V4c0-1.1-0.9-2-2-2H4z"
+      />
+    </g>
+    <g>
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M46.3,29.6V17.9h2.6v4.8H49l3.5-4.8h2.9l-3.5,4.7l4.2,7.1h-2.9l-2.9-5l-1.4,1.8v3.1H46.3z"
+      />
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M57.3,29.6V17.9H60l3.1,5.8l1.2,2.6h0.1c-0.1-0.6-0.1-1.3-0.2-2.1C64,23.4,64,22.7,64,22v-4.1h2.5v11.7h-2.7
+                l-3.1-5.9l-1.2-2.6h-0.1c0.1,0.6,0.1,1.3,0.2,2.1c0.1,0.7,0.1,1.5,0.1,2.2v4.2H57.3z"
+      />
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M67.8,29.6l3.7-11.7h3.2l3.7,11.7h-2.8l-0.7-2.8h-3.6l-0.7,2.8H67.8z M72,23.7l-0.3,1.1h2.5L74,23.7
+                c-0.2-0.6-0.3-1.2-0.5-1.9c-0.2-0.7-0.3-1.3-0.5-1.9H73c-0.1,0.6-0.3,1.3-0.4,1.9C72.4,22.5,72.2,23.1,72,23.7z"
+      />
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M79.6,29.6V17.9h4c0.6,0,1.3,0.1,1.8,0.2c0.6,0.1,1.1,0.3,1.5,0.6s0.8,0.7,1,1.2s0.4,1.1,0.4,1.8
+                c0,0.7-0.1,1.3-0.4,1.8c-0.2,0.5-0.6,0.9-1,1.2c-0.4,0.3-0.9,0.6-1.5,0.7s-1.1,0.2-1.8,0.2h-1.5v4H79.6z M82.2,23.5h1.3
+                c1.4,0,2.2-0.6,2.2-1.9c0-0.6-0.2-1-0.6-1.3c-0.4-0.3-0.9-0.4-1.7-0.4h-1.2V23.5z"
+      />
+      <path
+        style={{ fill: "#0067c5" }}
+        d="M90.3,29.6V17.9h4c0.6,0,1.3,0.1,1.8,0.2s1.1,0.3,1.5,0.6s0.8,0.7,1,1.2S99,21,99,21.7c0,0.7-0.1,1.3-0.4,1.8
+                c-0.2,0.5-0.6,0.9-1,1.2c-0.4,0.3-0.9,0.6-1.5,0.7c-0.6,0.2-1.1,0.2-1.8,0.2H93v4H90.3z M93,23.5h1.3c1.4,0,2.2-0.6,2.2-1.9
+                c0-0.6-0.2-1-0.6-1.3c-0.4-0.3-0.9-0.4-1.7-0.4H93V23.5z"
+      />
+    </g>
+  </svg>
+);
+
+export const VeilederIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93" focusable="false">
+    <path
+      fill="#e7e5e2"
+      d="M14 50.7C15 52.3 17.9 81 26.5 81S39 51.8 39 50.3c-13.2-7.6-25 .4-25 .4z"
+    />
+    <path
+      fill="#5c4378"
+      d="M38.7 50.2c6 2.9 15.3 10.9 15.3 18.3V93H0V68.5c0-7.1 8.5-14.8 14.5-18-.3.2-.5.3-.5.3 1 1.7 3.8 9.2 12.4 9.2C35 60 39 51.9 39 50.4c-.1-.1-.2-.2-.3-.2z"
+    />
+    <path
+      fill="#d2242a"
+      d="M46.7 76H31.2c-.7 0-1.3-.6-1.2-1.3v-8.5c0-.7.6-1.3 1.3-1.3h15.5c.7 0 1.3.6 1.3 1.3v8.5c-.1.7-.7 1.3-1.4 1.3"
+    />
+    <path
+      fill="#fff"
+      d="M42.9 71c0 2.1-1.7 3.8-3.8 3.8-2.1 0-3.8-1.7-3.8-3.8s1.7-3.8 3.8-3.8c2.1 0 3.8 1.7 3.8 3.8m-8.7 1.7h-.7l.8-1.9h.7l-.8 1.9zm9.3 0H43l.8-1.9h.5l-.8 1.9zm1.2 0h-.2l.8-1.9h.2l-.8 1.9z"
+    />
+    <path
+      fill="#c52d35"
+      d="M36.2 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.6s-.1 0-.1.1l-.2.6v.1h.2l.1 1.2c0-.1 0 0 0 0"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.5 72.7h.6s.1 0 .1-.1v-1.8s0-.1-.1-.1h-.9s-.1 0-.1.1l-.2.6-.1.1h.5c.1 0 .2.1.2.2v1c-.1-.1-.1 0 0 0m2.6-1.9h-.6s-.1 0-.1.1v1.8s0 .1.1.1h.6s.1 0 .1-.1l.2-.6V72h-.2l-.1-1.2"
+    />
+    <path
+      fill="#c52d35"
+      d="M37.7 72.7h.4s.1 0 .1-.1l.2-.6v-.1h-.2c0 .1-.5.8-.5.8zm3.9-1.9h.7s.1 0 0 .1l-.7 1.8H41l.6-1.9"
+    />
+    <path
+      fill="#c52d35"
+      d="M40.8 70.8h-1c-.1 0 .3.1.3.1l.7 1.7s0 .1.1.1h.6l-.7-1.9m-1.3.6v.4s-.1-.4-.3-.4c-.3 0-.3.2-.3.3 0 .1.1.3.2.3h.5l-.3.7H39c-.2 0-.9-.3-.9-.9 0-.6.5-1 .9-1 .2-.1.5.2.5.6 0-.1 0-.1 0 0z"
+    />
+    <path
+      fill="#5a1f57"
+      d="M39.9 66.7h-1.6c-.1 0-.2-.1-.2-.2v-.3c0-.1.1-.2.2-.2h1.6c.1 0 .2.1.2.2v.3c0 .2-.1.2-.2.2"
+    />
+    <path fill="#c2b5cf" d="M38.7 66.5h.9V64h-.9v2.5z" />
+    <path
+      fill="#e7e5e2"
+      d="M47.2 35.3C44.7 45.6 36.6 53.1 27 53.1S9.3 45.6 6.8 35.3c-.2.1-.5.1-.8.1-1.1 0-2-.8-2-1.7v-7c0-1 .9-1.7 2-1.7h.2C7.7 13.1 16.4 4 27 4c10.6 0 19.3 9.1 20.8 21h.2c1.1 0 2 .8 2 1.7v7c0 1-.9 1.7-2 1.7-.3 0-.5 0-.8-.1z"
+    />
+    <path
+      fill="#635e59"
+      d="M19 27.6c-1.4.1-1.9-2-1.4-3.4.1-.3.6-1.5 1.4-1.5.8 0 1.2.7 1.3.8.6 1.4.3 4-1.3 4.1m16.2 0c1.4.1 1.9-2 1.4-3.4-.1-.3-.6-1.5-1.4-1.5-.8 0-1.2.7-1.3.8-.6 1.4-.3 4 1.3 4.1"
+    />
+    <path
+      fill="#d1bfa3"
+      d="M26.8 34.6c-.4 0-.7-.1-1-.2-.3-.1-.4-.4-.3-.7.1-.3.4-.4.7-.3.5.2 1.5.1 2.2-.4.7-.4 1.1-1 1.2-1.5.1-.4-.1-.9-.4-1.3-.2-.2-.8-.2-1.6-.1-.3 0-.5-.1-.6-.4 0-.3.1-.5.4-.6 1.2-.2 2.1 0 2.6.6.5.7.8 1.4.6 2.1-.1.8-.7 1.6-1.7 2.2-.6.3-1.4.6-2.1.6z"
+    />
+    <path
+      fill="#593a32"
+      d="M27.1 42.1h-.3c-5.3-.2-7.3-4.1-7.4-4.3-.1-.3 0-.6.2-.7.2-.1.6 0 .7.2.1.1 1.9 3.6 6.6 3.8 4.7.2 6.4-3.7 6.4-3.7.1-.3.4-.4.7-.3.3.1.4.4.3.7-.1 0-2.1 4.3-7.2 4.3z"
+    />
+    <path
+      fill="#f6b873"
+      d="M6.6 30.7c.1-.1.1-.2.1-.3v-2c-.1-5.6 1.8-8.1 3.4-10.1 0 0-1 4.3-.3 3.4 3.8-5 21.4-1.6 25-8.1.5 3.6-4.1 4.6-4.1 4.6 3.7.7 6.9-.8 7.7-2.5.3 1.4-.6 2.4-1.9 3.4 4.5-.9 4.6-4 4.6-4 .6 4.1 5.3 2.5 5.3 9.3v6c0 .3.2.6.5.6h.5c.3 0 .5-.3.5-.6V26c.3-15.6-8.5-26-20.6-26C15.9 0 5 10.4 5 24.1v6.3c0 .4.2.6.5.6h.6c.2 0 .3-.1.5-.3"
+    />
+    <path
+      fill="#f6b873"
+      d="M25.9 43.4c-4.4 0-8-1.4-8-3.2s3.6-3.2 8-3.2 8 1.4 8 3.2c0 1.8-3.6 3.2-8 3.2m.8-9.4c-2.9 0-4.7.7-8.8 2.1-12.7 4.6-11.6-14-11.6-14C3.4 46 18.6 52 26.5 52c8.1 0 24.1-8.1 21-30 0 0 .4 17.1-12.9 13.8-3.7-.9-5-1.8-7.9-1.8z"
+    />
+  </svg>
+);
+
+export const GithubLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32.58 31.77"
+    focusable="false"
+  >
+    <path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z" />
+  </svg>
+);
+export const GithubLogoEm = ({ ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32.58 31.77"
+    focusable="false"
+    {...props}
+  >
+    <path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.82.15,1.11-.36,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.36,4.36,0,0,0-1.81-2.39c-1.47-1,.12-1,.12-1a3.43,3.43,0,0,1,2.49,1.68,3.48,3.48,0,0,0,4.74,1.36,3.46,3.46,0,0,1,1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3,6.3,0,0,1,1.67-4.37,5.94,5.94,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.41,15.41,0,0,1,8.16,0c3.11-2.11,4.47-1.67,4.47-1.67A5.91,5.91,0,0,1,25,11.07a6.3,6.3,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.85,3.85,0,0,1,1.11,3c0,2.18,0,3.94,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z" />
+  </svg>
+);
+
+export const SuccessIcon = () => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-16.000000, -20.000000)">
+        <g transform="translate(16.000000, 20.000000)">
+          <g>
+            <path
+              d="M12,0 C5.383,0 0,5.384 0,12 C0,18.616 5.383,24 12,24 C18.616,24 24,18.616 24,12 C24,5.384 18.616,0 12,0 Z"
+              fill="#1C6937"
+              fillRule="nonzero"
+            />
+            <path
+              d="M9.63993168,14.4414307 L16.0998211,8.60231554 C16.4920344,8.24700834 17.1087604,8.26567481 17.4763929,8.64623502 C17.8442028,9.02697893 17.8231421,9.62435747 17.430152,9.98049024 L10.2805711,16.4435337 C10.0985537,16.6069711 9.8612111,16.6956522 9.61751913,16.6956522 C9.36153632,16.6956522 9.11545171,16.5990262 8.92853154,16.419824 L6.54589388,14.1121315 C6.16586146,13.7440529 6.16586146,13.1465019 6.54589388,12.7784232 C6.92592631,12.4103446 7.54288359,12.4103446 7.92291602,12.7784232 L9.63993168,14.4414307 Z"
+              fill="#FFFFFF"
+              fillRule="nonzero"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const ErrorIcon = () => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-16.000000, -20.000000)">
+        <g transform="translate(16.000000, 20.000000)">
+          <g strokeWidth="1" fillRule="evenodd" fill="#A13A28">
+            <path
+              d="M11.9989565,0 C5.39478261,0 0.0125217391,5.37182609 8.24610291e-16,11.976 C-0.00626086957,15.1815652 1.23547826,18.1972174 3.49773913,20.4688696 C5.76,22.7394783 8.77147826,23.9937391 11.9770435,24 L12,24 C18.6031304,24 23.9864348,18.6271304 24,12.021913 C24.0125217,5.40626087 18.6396522,0.0125217391 11.9989565,0 Z"
+              fillRule="nonzero"
+            />
+          </g>
+          <path
+            d="M12,10.6512393 L15.3719018,7.27933749 C15.7443518,6.9068875 16.3482125,6.9068875 16.7206625,7.27933749 C17.0931125,7.65178748 17.0931125,8.25564822 16.7206625,8.62809821 L13.3487607,12 L16.7206625,15.3719018 C17.0931125,15.7443518 17.0931125,16.3482125 16.7206625,16.7206625 C16.3482125,17.0931125 15.7443518,17.0931125 15.3719018,16.7206625 L12,13.3487607 L8.62809821,16.7206625 C8.25564822,17.0931125 7.65178748,17.0931125 7.27933749,16.7206625 C6.9068875,16.3482125 6.9068875,15.7443518 7.27933749,15.3719018 L10.6512393,12 L7.27933749,8.62809821 C6.9068875,8.25564822 6.9068875,7.65178748 7.27933749,7.27933749 C7.65178748,6.9068875 8.25564822,6.9068875 8.62809821,7.27933749 L12,10.6512393 Z"
+            fill="#FFFFFF"
+            fillRule="nonzero"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const SketchLogo = () => (
+  <svg
+    viewBox="0 0 494 447"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable="false"
+  >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-9.000000, -28.000000)">
+        <g transform="translate(9.000000, 28.000000)">
+          <g fill="#FFAE00">
+            <polygon
+              transform="translate(247.000000, 223.500000) rotate(-180.000000) translate(-247.000000, -223.500000) "
+              points="247 5.68434189e-14 494 287 387 432 247 447 107 432 -2.84217094e-13 287"
+            />
+          </g>
+          <g transform="translate(0.000000, 160.000000)" fill="#EC6C00">
+            <polygon
+              transform="translate(247.000000, 143.500000) rotate(-180.000000) translate(-247.000000, -143.500000) "
+              points="247 1.13686838e-13 494 287 -5.68434189e-14 287"
+            />
+          </g>
+          <g transform="translate(100.000000, 160.000000)" fill="#FFAE00">
+            <polygon
+              transform="translate(147.000000, 143.500000) rotate(-180.000000) translate(-147.000000, -143.500000) "
+              points="147 0 294 287 2.84217094e-13 287"
+            />
+          </g>
+          <g transform="translate(100.000000, 0.000000)" fill="#FFEFB4">
+            <polygon
+              transform="translate(147.000000, 80.000000) rotate(-180.000000) translate(-147.000000, -80.000000) "
+              points="147 160 294 2.70983236e-12 5.68434189e-14 -5.68434189e-14"
+            />
+          </g>
+          <g transform="translate(0.000000, 15.000000)" fill="#FFAE00">
+            <polygon
+              transform="translate(53.500000, 72.500000) rotate(-180.000000) translate(-53.500000, -72.500000) "
+              points="-2.27373675e-13 145 55 72 107 2.72848411e-12 6 5.68434189e-14"
+            />
+          </g>
+          <g
+            transform="translate(440.500000, 87.500000) scale(-1, 1) translate(-440.500000, -87.500000) translate(387.000000, 15.000000)"
+            fill="#FFAE00"
+          >
+            <polygon
+              transform="translate(53.500000, 72.500000) rotate(-180.000000) translate(-53.500000, -72.500000) "
+              points="-2.27373675e-13 145 55 72 107 2.72848411e-12 6 5.68434189e-14"
+            />
+          </g>
+          <g transform="translate(100.000000, 0.000000)" fill="#FED305">
+            <polygon
+              transform="translate(73.500000, 80.000000) rotate(-180.000000) translate(-73.500000, -80.000000) "
+              points="140 145 147 2.95585778e-12 2.27373675e-13 160"
+            />
+          </g>
+          <g transform="translate(247.000000, 0.000000)" fill="#FED305">
+            <polygon
+              transform="translate(73.500000, 80.000000) scale(-1, 1) rotate(-180.000000) translate(-73.500000, -80.000000) "
+              points="140 145 147 0 -1.42108547e-14 160"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const ZeplinLogo = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 41.6 32.7"
+    focusable="false"
+  >
+    <g transform="translate(0.64018885)">
+      <g transform="matrix(1.2117164,0,0,1.2117164,-46.63877,7.1317533)">
+        <path fill="#F89920" d="M41.5,13.3l-3.6-4l11-4l1.7,4.7L41.5,13.3z" />
+        <path fill="#FFBE22" d="M41.5,13.2l-0.2,5.4l11-4l-1.7-4.7L41.5,13.2z" />
+        <path
+          fill="#F0670A"
+          d="M72,2.2c1.6,4.5-3.5,10.5-11.3,13.4c-7.9,2.9-15.6,1.5-17.3-3
+                    L72,2.2z"
+        />
+        <path
+          fill="#FFD00E"
+          d="M72,2.2c-1.7-4.5-9.4-5.8-17.3-3c-7.9,2.9-12.9,8.8-11.3,13.4
+                    L72,2.2z"
+        />
+        <path
+          fill="#F89920"
+          d="M72,2.2c1,3-4.5,7.8-12.3,10.6c-7.8,2.8-15.1,2.7-16.3-0.2
+                    L72,2.2z"
+        />
+        <path
+          fill="#FFBE22"
+          d="M72,2.2c-1.2-3-8.4-3.1-16.3-0.2c-7.8,2.9-13.3,7.6-12.3,10.6
+                    L72,2.2z"
+        />
+        <path
+          fill="#F0670A"
+          d="M58.8-1.9c-0.7-2.6-1.6-4-2.6-4c-1.9,0.1-2.5,6-1.9,13.6
+                    c0.6,7.7,2.2,13.4,4.2,13.4c1.2,0,1.8-1.9,2.1-5.2c0-0.1-0.1,0-0.1-0.1c0,0,0-0.1-0.1-0.1l-0.3,0c-0.2,3.2-0.8,5-1.7,5
+                    c-1.6,0-3.2-5.7-3.8-13c-0.6-7.3,0-13.1,1.5-13.2c0.7,0,1.5,1.3,2.2,3.7C58.5-1.8,58.8-1.9,58.8-1.9z"
+        />
+        <path
+          fill="#F0670A"
+          d="M49.6-3.7C48-2.8,50.4,2.7,54.7,9c4.4,6.3,8.6,10.5,10.3,9.5
+                    c0.9-0.6,0.7-2.3-0.5-5c0-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.1,0.2-0.1,0.3c0,0,0,0,0,0c1.1,2.5,1.4,4.1,0.7,4.5
+                    c-1.4,0.8-5.6-3.3-9.8-9.4c-4.1-6-6.5-11.4-5.3-12.2c0.7-0.4,2.3,0.6,4.4,2.7c0,0,0.2,0.2,0.2,0.2c0.1,0,0-0.1,0.1-0.2
+                    c0.1-0.1,0.1-0.2,0-0.3c0,0,0,0,0,0C52.2-3.2,50.5-4.3,49.6-3.7L49.6-3.7z"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export const W3CLogo = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 154 103"
+    focusable="false"
+  >
+    <rect x="0" y="0" width="154" height="103" fill="#1a5e9a" />
+    <g transform="translate(0 12.5)">
+      <g>
+        <path
+          fill="#FFFFFF"
+          d="M100.383,38.538c-2.512-4.137-6.217-6.994-11.107-8.563l13.933-24V1.366H76.076h-9.584H66.2L52.548,47.757    L38.905,1.366h-9.886l4.52,15.153l-9.227,31.238L10.665,1.366H0.782L23.37,77.59h0.942l14.117-47.236L52.548,77.59h0.94    l19.341-65.265l0.909-1.547h15.917L76.467,33.545v4.518h3.772c4.836,0,8.373,1.475,10.636,4.426    c1.945,2.506,2.915,6.051,2.915,10.631c0,4.143-0.907,7.688-2.726,10.635c-1.819,2.951-4.047,4.42-6.683,4.42    c-2.506,0-4.692-0.829-6.547-2.491c-1.847-1.659-3.344-3.935-4.47-6.815l-7.722,3.193c1.566,4.77,3.986,8.547,7.247,11.34    c3.259,2.788,7.097,4.188,11.491,4.188c5.828,0,10.581-2.354,14.252-7.057c3.674-4.704,5.517-10.512,5.517-17.413    C104.15,47.537,102.889,42.673,100.383,38.538z"
+        />
+        <g>
+          <path
+            fill="#FFFFFF"
+            d="M142.451,0.939l1.606,9.73l-5.677,10.841c0,0-2.176-4.603-5.783-7.148     c-3.045-2.145-5.034-2.611-8.131-1.969c-3.987,0.822-8.507,5.582-10.477,11.454c-2.363,7.028-2.383,10.427-2.462,13.552     c-0.133,5.002,0.655,7.963,0.655,7.963s-3.438-6.36-3.407-15.682c0.028-6.652,1.069-12.689,4.141-18.643     c2.713-5.229,6.742-8.372,10.316-8.744c3.692-0.384,6.616,1.398,8.875,3.325c2.366,2.021,4.756,6.446,4.756,6.446L142.451,0.939z     "
+          />
+          <path
+            fill="#FFFFFF"
+            d="M143.151,55.996c0,0-2.511,4.474-4.068,6.201c-1.563,1.722-4.351,4.765-7.799,6.281     c-3.454,1.517-5.258,1.806-8.671,1.479c-3.404-0.327-6.571-2.296-7.681-3.121c-1.106-0.822-3.936-3.248-5.537-5.5     c-1.604-2.262-4.109-6.777-4.109-6.777s1.392,4.527,2.27,6.447c0.502,1.104,2.048,4.482,4.239,7.427     c2.038,2.754,6.011,7.477,12.052,8.544c6.041,1.064,10.186-1.644,11.211-2.298c1.025-0.656,3.19-2.472,4.558-3.936     c1.431-1.526,2.782-3.477,3.536-4.645c0.552-0.856,1.439-2.59,1.439-2.59L143.151,55.996z"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="#FFFFFF"
+            d="M149.896,2.222c0.654,0,0.957,0.184,0.957,0.639     c0,0.436-0.303,0.593-0.938,0.593h-0.593V2.222H149.896L149.896,2.222z M150.022,1.768h-1.401v3.72h0.7V3.901h0.691l0.758,1.586     h0.781l-0.828-1.697c0.537-0.108,0.848-0.473,0.848-1.002C151.571,2.113,151.061,1.768,150.022,1.768L150.022,1.768z      M152.781,3.718c0,0.758-0.291,1.46-0.828,1.978c-0.563,0.548-1.265,0.839-2.039,0.839c-0.729,0-1.447-0.3-1.986-0.847     c-0.537-0.548-0.836-1.249-0.836-1.996c0-0.749,0.311-1.478,0.865-2.042c0.52-0.53,1.22-0.813,1.983-0.813     c0.783,0,1.485,0.292,2.032,0.849C152.5,2.214,152.781,2.926,152.781,3.718L152.781,3.718z M149.932,0.411     c-0.885,0-1.676,0.316-2.276,0.929c-0.636,0.649-0.992,1.486-0.992,2.352c0,0.867,0.337,1.667,0.956,2.295     c0.628,0.639,1.44,0.983,2.312,0.983c0.856,0,1.684-0.344,2.331-0.973c0.62-0.601,0.956-1.403,0.956-2.305     c0-0.876-0.347-1.697-0.948-2.307C151.645,0.746,150.825,0.411,149.932,0.411L149.932,0.411z"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export const Cog = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
+    <path d="M23.5 10h-2.854c-.2-.79-.454-1.667-.778-2.332L21.9 5.636a.498.498 0 0 0 0-.708l-2.83-2.826a.499.499 0 0 0-.707 0l-2.032 2.031c-.665-.324-1.542-.578-2.331-.777V.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v2.856c-.789.199-1.666.453-2.331.777L5.637 2.102a.499.499 0 0 0-.707 0L2.101 4.929a.5.5 0 0 0 0 .707l2.033 2.033c-.323.662-.578 1.54-.779 2.331H.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h2.855c.2.791.455 1.668.778 2.331L2.1 18.364a.5.5 0 0 0 0 .708L4.93 21.9c.188.188.52.188.707 0l2.032-2.032c.663.322 1.54.577 2.331.778V23.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-2.854c.791-.201 1.668-.456 2.331-.778l2.034 2.032a.5.5 0 0 0 .707 0l2.827-2.828a.499.499 0 0 0 0-.707l-2.032-2.033c.323-.663.578-1.54.778-2.331H23.5a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.501zM12 16c-2.205 0-4-1.795-4-4s1.795-4 4-4c2.206 0 4 1.795 4 4s-1.794 4-4 4z" />
+  </svg>
+);
+
+export const LinkIcon = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    focusable="false"
+  >
+    <g>
+      <path
+        d="M6.5,22.8c-0.9,0-1.8-0.4-2.5-1L2.3,20c-1.4-1.4-1.4-3.6,0-5l4-4c0.9-0.9,2.6-0.9,3.5,0l0.1,0.1l-0.7,0.7l-0.1-0.1
+                c-0.6-0.6-1.6-0.6-2.1,0l-4,4c-1,1-1,2.6,0,3.5L4.7,21C5.7,22,7.3,22,8.3,21l4-4c0.6-0.6,0.6-1.5,0-2.1l-0.1-0.1l0.7-0.7l0.1,0.1
+                c1,1,1,2.6,0,3.5l-4,4C8.3,22.4,7.5,22.8,6.5,22.8z M8.5,16.2l-0.7-0.7l7.8-7.8l0.7,0.7L8.5,16.2z M16,13.7c-0.7,0-1.3-0.3-1.8-0.7
+                l-0.1-0.1l0.7-0.7l0.1,0.1c0.6,0.6,1.6,0.6,2.1,0l4-4c1-1,1-2.6,0-3.5L19.3,3C18.3,2,16.7,2,15.7,3l-4,4c-0.6,0.6-0.6,1.5,0,2.1
+                l0.1,0.1l-0.7,0.7l-0.1-0.1c-1-1-1-2.6,0-3.5l4-4C16.4,1,18.7,1,20,2.3L21.7,4c1.4,1.4,1.4,3.6,0,5l-4,4
+                C17.3,13.4,16.7,13.7,16,13.7z"
+      />
+    </g>
+  </svg>
+);
+
+export const FileIcon = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    focusable="false"
+  >
+    <g>
+      <path
+        d="M20.5,24h-17C3.2,24,3,23.8,3,23.5v-23C3,0.2,3.2,0,3.5,0h11c0,0,0,0,0,0c0.1,0,0.3,0.1,0.4,0.1l6,6
+                C20.9,6.2,21,6.4,21,6.5c0,0,0,0,0,0v17C21,23.8,20.8,24,20.5,24z M4,23h16V7h-5.5C14.2,7,14,6.8,14,6.5V1H4V23z M15,6h4.3L15,1.7
+                V6z"
+      />
+    </g>
+  </svg>
+);
+
+export const CopyIcon = ({ color }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    focusable="false"
+  >
+    <g stroke={color ? color : "#000"} fill="none">
+      <path d="M20.5 20.5h-14v-20h8l6 6zM14.5.5v6h6M17.5 20.5v3h-14v-20h3" />
+    </g>
+  </svg>
+);
+
+export const FigmaIcon = ({ ...props }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 38 57"
+    focusable="false"
+  >
+    <g>
+      <path
+        fill="#1abcfe"
+        d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z"
+      />
+      <path
+        fill="#0acf83"
+        d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z"
+      />
+      <path fill="#ff7262" d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" />
+      <path
+        fill="#f24e1e"
+        d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z"
+      />
+      <path
+        fill="#a259ff"
+        d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z"
+      />
+    </g>
+  </svg>
+);
+
+export const Edit = (props) => {
+  return (
+    <svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.835 1.165a3.976 3.976 0 010 5.623L8.073 21.549.682 24 0 23.318l2.45-7.392L17.21 1.165a3.977 3.977 0 015.624 0zm-4.218 7.029l-2.811-2.812L4.188 17l-1.393 4.205 4.207-1.395L18.618 8.194zM21.43 2.57a1.989 1.989 0 00-2.703-.1l-.108.1-1.406 1.406 2.811 2.812 1.406-1.406a1.988 1.988 0 00.101-2.703l-.1-.109z"
+        fill="#3E3832"
+        focusable="false"
+      />
+    </svg>
+  );
+};

docs/components/code-preview/Preview.tsx

@@ -1,42 +1,61 @@
 import React, { useState } from "react";
 import Tabs from "../tabs/Tabs";
-import { renderToString } from "react-dom/server";
+import { renderToStaticMarkup } from "react-dom/server";
 import Bash from "../code/Bash";
 import Prettier from "prettier/standalone";
 import ParserBabel from "prettier/parser-babel";
 import "./preview.css";
+import OverflowDetector from "../overflow-detector/OverflowDetector";
+import cl from "classnames";
 
 const prettierOptions = {
   semi: true,
   parser: "babel",
   plugins: [ParserBabel],
-  jsxBracketSameLine: false,
-  printWidth: 30,
+  jsxBracketSameLine: true,
+  printWidth: 60,
 };
 
 interface PreviewProps {
   react: string;
+  html?: React.ReactElement;
   children?: React.ReactElement;
   hideHtml?: boolean;
+  defaultClosed?: boolean;
+  noCode?: boolean;
 }
 
 const Preview = ({
   children,
   react,
+  html,
+  noCode,
+  defaultClosed = false,
   hideHtml = false,
-  ...props
 }: PreviewProps) => {
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(defaultClosed ? null : 0);
   const handleChange = (x: number) => {
-    setTab(x);
+    if (tab === x) {
+      setTab(null);
+    } else {
+      setTab(x);
+    }
   };
 
-  const reactFormat = Prettier.format(react, prettierOptions).slice(0, -2);
-  const htmlFormat =
+  const reactFormat =
+    !noCode && Prettier.format(react, prettierOptions).slice(0, -2);
+  const htmlFormat = () =>
+    !noCode &&
     !!children &&
+    !hideHtml &&
     Prettier.format(
-      renderToString(
-        React.Children.count(children) > 1 ? <div>{children}</div> : children
+      renderToStaticMarkup(
+        html ??
+          (React.Children.count(children) > 1 ? (
+            <div>{children}</div>
+          ) : (
+            children
+          ))
       ),
       prettierOptions
     )
@@ -47,12 +66,28 @@ const Preview = ({
 
   return (
     <div className={"preview__wrapper"}>
-      {!!children && <div className={"preview__container"}>{children}</div>}
-      <Tabs tabs={tabs} onChange={(x) => handleChange(x)} />
-      {tab === 0 && <Bash code={reactFormat} language="jsx" copy />}
+      {!!children && (
+        <div
+          className={cl("preview__container", {
+            "preview__container--no-code": noCode,
+          })}
+        >
+          {children}
+        </div>
+      )}
+      {!noCode && (
+        <>
+          <Tabs tabs={tabs} tab={tab} onChange={(x) => handleChange(x)} />
+          {tab === 0 && <Bash code={reactFormat} language="jsx" copy />}
 
-      {(!hideHtml || !!children) && tab === 1 && (
-        <Bash code={htmlFormat} language="jsx" copy />
+          {(!hideHtml || !!children) && tab === 1 && (
+            <Bash
+              code={process.browser ? htmlFormat() : `<div />`}
+              language="jsx"
+              copy
+            />
+          )}
+        </>
       )}
     </div>
   );

docs/components/code-preview/preview.css

@@ -8,6 +8,26 @@
 
 .preview__container {
   border-bottom: 2px solid var(--code-divider);
-  padding-bottom: 3rem;
+  padding: 1.5rem;
   margin-bottom: 1rem;
 }
+
+.preview__container--no-code {
+  border-bottom: 2px solid transparent;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.preview__container > * {
+  margin-top: 1rem;
+}
+
+.preview__container > *:first-child {
+  margin-top: 0px;
+}
+
+.preview__container figcaption {
+  text-align: center;
+  padding: 0.5em;
+  font-style: italic;
+}

docs/components/code/Bash.tsx

@@ -1,7 +1,7 @@
 import copy from "copy-to-clipboard";
 import Prism from "prismjs";
 import cl from "classnames";
-import { Files } from "@navikt/ds-icons";
+import { ErrorFilled, Files, SuccessFilled } from "@navikt/ds-icons";
 import { Popover } from "@navikt/ds-react";
 import { useEffect, useRef, useState } from "react";
 import "prismjs/components/prism-jsx.min";
@@ -36,14 +36,18 @@ export const copyCode = (content) => {
 const Bash = ({
   code,
   terminal = false,
-  copy = false,
+  copy = true,
   language = "html",
+  good,
+  bad,
   ...props
 }: {
   code: string;
   terminal?: boolean;
   copy?: boolean;
   language?: PrismLanguages;
+  good?: boolean;
+  bad?: boolean;
 }) => {
   const highlighted = terminal
     ? code
@@ -67,9 +71,14 @@ const Bash = ({
 
   return (
     <div className={"bash__preWrapper"}>
-      <pre className={"bash__pre"}>
+      <pre
+        className={cl("bash__pre", {
+          "bash__pre--good": !!good,
+          "bash__pre--bad": !!bad,
+        })}
+      >
         <code
-          className={cl(code, {
+          className={cl("bash__code", {
             bash__codeCopy: copy,
             bash__terminal: terminal,
           })}
@@ -78,28 +87,43 @@ const Bash = ({
         />
         {copy && (
           <>
-            <div className={"bash__button"}>
-              <button
-                ref={buttonRef}
-                className={"bash__copyButton"}
-                onClick={() => handleCopy()}
-              >
-                <Files />
-              </button>
-              <Popover
-                role="alert"
-                anchorEl={buttonRef.current}
-                open={openPopover}
-                onClose={() => setOpenPopover(false)}
-                placement="auto-start"
-                /* arrow={false} */
-              >
-                Kode er kopiert
-              </Popover>
-            </div>
+            <button
+              ref={buttonRef}
+              className={"bash__copyButton"}
+              onClick={() => handleCopy()}
+            >
+              <Files />
+            </button>
           </>
         )}
       </pre>
+      {(good || bad) && (
+        <div className="bash__good-bad">
+          {good && (
+            <>
+              <SuccessFilled style={{ color: "var(--navds-color-green-50)" }} />
+              Gjør dette!
+            </>
+          )}
+          {bad && (
+            <>
+              <ErrorFilled style={{ color: "var(--navds-color-red-60)" }} />
+              Ikke gjør dette!
+            </>
+          )}
+        </div>
+      )}
+      <Popover
+        className="bash__popover"
+        role="alert"
+        anchorEl={buttonRef.current}
+        open={openPopover}
+        onClose={() => setOpenPopover(false)}
+        placement="right"
+        arrow={false}
+      >
+        Kopiert!
+      </Popover>
     </div>
   );
 };

docs/components/code/Inline.tsx

@@ -0,0 +1,7 @@
+import "./bash.css";
+
+const Inline = ({ children }) => (
+  <code className="inline-code">{children}</code>
+);
+
+export default Inline;

docs/components/code/bash.css

@@ -1,20 +1,33 @@
 .bash__pre {
   padding: 1rem;
-  margin: 1rem 0 0 0;
-  overflow: auto;
-  width: calc(100vw - 2rem);
+  overflow-x: auto;
+  width: 100%;
   background-color: var(--bg-code);
   align-items: center;
   display: flex;
+  font-family: var(--navds-font-family);
+}
 
-  /* Fixer pixelbug på høyre side av bash-panel */
-  box-shadow: inset -4px 0 0 var(--bg-code);
+.bash__pre--good {
+  border-bottom: 8px solid var(--navds-color-green-50);
+}
+
+.bash__pre--bad {
+  border-bottom: 8px solid var(--navds-color-red-60);
+}
+
+.bash__good-bad {
+  margin-top: -1rem;
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
 }
 
 .bash__preWrapper {
   position: relative;
   align-items: center;
   display: flex;
+  flex-direction: column;
 }
 
 .bash__terminal {
@@ -22,43 +35,46 @@
 }
 
 .bash__code {
-  padding-right: 4rem;
   color: var(--color-code);
+  font-family: var(--font-family-code);
+  font-size: 1rem;
+  padding-right: 4rem;
 }
 
 .bash__terminal::before {
   content: "$ ";
 }
 
-.bash__button {
-  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;
-}
-
 .bash__copyButton {
+  position: absolute;
+  top: 1.5rem;
+  right: 0.5rem;
   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;
+  display: flex;
+  z-index: 0;
 }
 
 .bash__copyButton:hover {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--navds-color-gray-60);
 }
 
 .bash__copyButton:focus {
   outline: var(--outline-code);
   outline-offset: var(--outline-offset);
 }
+
+.bash__popover {
+  padding: 0.5rem;
+}
+
+.inline-code {
+  color: #c30000;
+  font-family: var(--font-family-code);
+  display: inline-block;
+  padding: 0 0.125rem;
+}

docs/components/layout/Layout.tsx

@@ -1,7 +1,7 @@
 import cl from "classnames";
 import Header from "./header/Header";
 import Sidebar from "./sidebar/Sidebar";
-import { Grid, Cell, ContentContainer } from "@navikt/ds-react";
+import { ContentContainer } from "@navikt/ds-react";
 import { useMediaQuery } from "react-responsive";
 import useKeypress from "react-use-keypress";
 import { useEffect, useState } from "react";
@@ -28,8 +28,12 @@ const Layout = ({ children, menu }: LayoutProps) => {
     setSidebar(!small);
   }, [small]);
 
+  useEffect(() => {
+    document.body.classList.add("lightTheme");
+  }, []);
+
   return (
-    <div className={cl("pageWrapper", "lightTheme")}>
+    <div id="pageWrapper" className={cl("pageWrapper")}>
       <Header sidebar={sidebar} onSidebarChange={(x) => setSidebar(x)} />
       <Sidebar
         menu={menu}
@@ -37,14 +41,9 @@ const Layout = ({ children, menu }: LayoutProps) => {
         small={small}
         onSidebarChange={(x) => setSidebar(x)}
       />
-      {/* TEMP UNTIL LAYOUT UPDATE */}
       <main className={"contentWrapper"}>
         <ContentContainer>
-          <Grid>
-            <Cell className={"content"} xs={12} sm={12} md={12} lg={12}>
-              {children}
-            </Cell>
-          </Grid>
+          <div className={"content"}>{children}</div>
         </ContentContainer>
       </main>
     </div>

docs/components/layout/layout.css

@@ -93,11 +93,18 @@
   width: 100%;
 
   /* TMP UNTIL LAYOUT UPDATE */
-  max-width: 520px;
+  max-width: 700px;
+}
+
+.contentWrapper > * li {
+  margin-bottom: 0.75rem;
+  line-height: 1.375rem;
 }
 
 .content {
   width: 100%;
+  max-width: 600px;
+  margin: 0 auto 0 0;
 }
 
 @media (max-width: 959px) {

docs/components/layout/sidebar/Menu.tsx

@@ -5,6 +5,7 @@ import {
   AccordionMenuCollapsable,
   AccordionMenuItem,
 } from "@navikt/ds-react";
+import React from "react";
 
 const MenuLink = (node) => {
   const { asPath } = useRouter();
@@ -18,17 +19,38 @@ const MenuLink = (node) => {
   );
 };
 
-const mapToComponents = (node) =>
-  node.children ? (
-    <AccordionMenuCollapsable key={node.title} title={node.title}>
-      {node.children.map(mapToComponents)}
+const isActive = (children, path) => {
+  const active = children.find((child) => {
+    return child.children
+      ? isActive(child.children, path)
+      : child.pathName === path;
+  });
+  return active;
+};
+
+const mapToComponents = (node, path) => {
+  const active = node.children ? isActive(node.children, path) : false;
+
+  return node.children ? (
+    <AccordionMenuCollapsable
+      defaultOpen={active}
+      key={node.title}
+      title={node.title}
+    >
+      {node.children.map((item) => mapToComponents(item, path))}
     </AccordionMenuCollapsable>
   ) : (
     <MenuLink key={node.title} {...node} />
   );
+};
 
-const Menu = ({ menu }) => (
-  <AccordionMenu>{menu.map(mapToComponents)}</AccordionMenu>
-);
+const Menu = ({ menu }) => {
+  const { asPath } = useRouter();
+  return (
+    <AccordionMenu>
+      {menu.map((item) => mapToComponents(item, asPath))}
+    </AccordionMenu>
+  );
+};
 
 export default Menu;

docs/components/layout/theme.css

@@ -1,5 +1,6 @@
 :root {
   --bg-primary: #faf9f9;
+  --font-family-code: "Source Code Pro", monospace;
 }
 
 .darkTheme {
@@ -17,7 +18,7 @@
   --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);
+  --bg-code: var(--navds-color-gray-90);
   --color-code: #fff;
   --code-divider: var(--sidebar-shadow);
   --outline-code: 2px solid var(--color-code);

docs/components/npm/Npm.tsx

@@ -21,37 +21,21 @@ const Npm = ({
     <div>
       {packs.map(({ name, data }) => (
         <div key={name}>
+          <Import from={name} imports={imports} namedExport={namedExport} />
+          {/* TODO: Move to separate component? */}
+          {/* <span className={style.badges}>
           <span className={"npm__.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"
+                src={`https://badgen.net/npm/v/${name}/?style=for-the-badge&logo=appveyor`}
+                alt="Versjonsbadge for npm-pakken"
               />
             </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} />
+          </span> */}
         </div>
       ))}
     </div>

docs/components/overflow-detector/OverflowDetector.tsx

@@ -0,0 +1,67 @@
+import React, { useRef, useState, useEffect } from "react";
+import classnames from "classnames";
+
+import "./overflowdetector.css";
+
+const OverflowDetector = ({ ...props }) => {
+  const scroller = useRef<HTMLDivElement>();
+  const inner = useRef<HTMLDivElement>();
+
+  const [overflowLeft, setOverflowLeft] = useState(false);
+  const [overflowRight, setOverflowRight] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("resize", checkOverflow);
+    checkOverflow();
+    return () => {
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+
+  const checkOverflow = () => {
+    const scr = scroller.current;
+    const inn = inner.current;
+
+    if (scr && inn) {
+      if (scr.offsetWidth < inn.offsetWidth) {
+        if (scr.scrollLeft !== 0) {
+          setOverflowLeft(true);
+        }
+        if (scr.scrollLeft + scr.offsetWidth < inn.offsetWidth) {
+          setOverflowRight(true);
+        }
+      }
+    }
+  };
+
+  const scrollAttr =
+    overflowRight || overflowLeft
+      ? {
+          tabIndex: 0,
+          role: "region",
+          "aria-label": "Eksempel",
+        }
+      : undefined;
+
+  return (
+    <div
+      className={classnames("overflow-detector", {
+        "overflow-detector--shadow-left": overflowLeft,
+        "overflow-detector--shadow-right": overflowRight,
+      })}
+    >
+      <div
+        className="overflow-detector__scroller"
+        onScroll={checkOverflow}
+        ref={scroller}
+        {...scrollAttr}
+      >
+        <div className="overflow-detector__inner" ref={inner}>
+          {props.children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OverflowDetector;

docs/components/overflow-detector/overflowdetector.css

@@ -0,0 +1,40 @@
+.overflow-detector {
+  position: relative;
+}
+
+.overflow-detector__scroller {
+  overflow: auto;
+  overflow-y: hidden;
+}
+
+.overflow-detector__scroller:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--navds-color-blue-80);
+}
+
+.overflow-detector__inner {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.overflow-detector--shadow-left::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  opacity: 0.1;
+  left: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent);
+}
+
+.overflow-detector--shadow-right::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  opacity: 0.1;
+  right: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
+}

docs/components/table-of-contents/tableOfContents.css

@@ -18,28 +18,47 @@
   width: fit-content;
 }
 
+.toc__li > a {
+  text-decoration: none;
+  border-bottom: none;
+  background: linear-gradient(
+    to bottom,
+    var(--navds-color-text-link) 0%,
+    var(--navds-color-text-link) 100%
+  );
+  background-size: 0px 2px;
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  transition: background-size 0.15s;
+}
+
 .toc__li > svg {
   flex-shrink: 0;
 }
 
-.toc__li:hover {
-  margin-left: 0.25rem;
+.toc__li:hover > a {
+  background-size: 100% 2px;
 }
 
-.toc__li > a {
-  padding: 0.25rem 0;
-}
-
-.toc__li:hover > a,
-.toc__li:hover > svg {
+.toc__li:focus-within > a {
   color: var(--navds-color-darkgray);
-  transition: color 150ms linear;
-  text-decoration: underline;
-}
-
-.toc__li > svg + a:focus {
-  color: white;
-  transition: color 0ms linear;
-  background-color: var(--navds-color-blue-80);
+  background: linear-gradient(
+    to bottom,
+    var(--navds-color-darkgray) 0%,
+    var(--navds-color-darkgray) 100%
+  );
+  background-size: 100% 2px;
+  background-repeat: no-repeat;
+  background-position: left bottom;
   outline: none;
 }
+
+.toc__li:focus-within > svg {
+  color: var(--navds-color-darkgray);
+}
+
+.toc__li > a:active {
+  color: var(--navds-color-text-inverse);
+  background-color: var(--navds-color-blue-80);
+  background-size: 0px 2px;
+}

docs/components/tabs/Tabs.tsx

@@ -1,18 +1,15 @@
-import { useState } from "react";
 import "./tabs.css";
 import cl from "classnames";
 
 interface TabsProps {
   onChange: (tab: number) => void;
   tabs: string[];
+  tab: number;
 }
 
-const Tabs = ({ onChange, tabs, ...props }: TabsProps) => {
-  const [tab, setTab] = useState(0);
-
+const Tabs = ({ onChange, tabs, tab, ...props }: TabsProps) => {
   const handleClick = (x: number) => {
     onChange(x);
-    setTab(x);
   };
 
   return (

docs/components/tabs/tabs.css

@@ -12,8 +12,9 @@
   color: var(--tab-color);
   border: none;
   background: none;
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 1.5rem 0.25rem 1.5rem;
   font-weight: var(--navds-font-weight-bold);
+  border-bottom: 4px solid transparent;
 }
 
 .tabs__button:hover {

docs/data/accessibility/accessibility-in-nav.mdx

@@ -0,0 +1,169 @@
+---
+title: Tilgjengelighet i NAV
+rank: 1
+---
+
+# Tilgjengelighet i NAV
+
+Å leve med nedsatt funksjonsevne fører ofte med seg utfordringer i
+dagliglivet, deriblant bruk av teknologi. Defor skal alle digitale løsninger
+vi bygger i NAV være universelt utformet slik at de aller fleste kan klare seg
+selv. Utdypende informasjon om hvordan håndtere universell utforming av IT i NAV
+finner du på <a href="https://navikt.github.io/uu/">https://navikt.github.io/uu/</a>
+
+<TableOfContents />
+
+## Nødvendig for noen, bra for alle
+
+I følge Verdens helseorganisasjon lever omtrent [15 prosent av verdens befolkning](https://www.who.int/disabilities/world_report/2011/report/en/) med en eller annen form for permanent nedsatt funksjonsevne. Samtidig kan vi alle oppleve å få midlertidig nedsatt funksjonsevne som følge av f.eks. uhell eller sykdom. Det betyr at tilpasninger som er nødvendig for noen, kan være bra for alle i blant.
+
+<Preview noCode>
+  <Undertittel>Eksempler:</Undertittel>
+  <ul>
+    <li>
+      Tekstede videoer er bra for hørselshemmede og bra for en pendler på toget.
+    </li>
+    <li>
+      God lesbarhet er ikke bare nødvendig for sterkt synshemmede, det er også
+      fint for de som «bare» har glemt lesebrillene hjemme.
+    </li>
+    <li>
+      At nettsidene kan brukes med tastaturet er bra både for en med nedsatt
+      motorikk og en med senebetennelse.
+    </li>
+  </ul>
+</Preview>
+
+### Eksempler på funksjonshemninger
+
+<table className="tabell">
+  <thead>
+    <tr>
+      <th></th>
+      <th>Permanent</th>
+      <th>Midlertidig</th>
+      <th>Situasjonsbetinget</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>Bevegelse</th>
+      <td>Én arm</td>
+      <td>Brukket arm</td>
+      <td>Nybakt forelder</td>
+    </tr>
+    <tr>
+      <th>Syn</th>
+      <td>Blind</td>
+      <td>Glemt briller</td>
+      <td>Uoppmerksom sjåfør</td>
+    </tr>
+    <tr>
+      <th>Hørsel</th>
+      <td>Døv</td>
+      <td>Øreinfeksjon</td>
+      <td>Bartender</td>
+    </tr>
+    <tr>
+      <th>Tale</th>
+      <td>Ikke-verbal</td>
+      <td>Laryngitt</td>
+      <td>Sterk aksent</td>
+    </tr>
+  </tbody>
+</table>
+
+## Lovkrav
+
+NAV, i likhet med alle andre offentlige og private virksomheter, er pålagt å etterleve hovedregelen om at alle IKT-løsninger skal være universelt utformet.\*
+
+Vi oppfordrer alle til å gjøre seg kjent med og bruke følgende ressurser aktivt:
+
+<LenkepanelBase className="resource-link" href="https://uu.difi.no" border>
+  <div>
+    <Undertittel className="Linkpanel__heading">
+      Universell utforming, Difi (uu.difi.no)
+    </Undertittel>
+    <p>
+      Tilsynsmyndighetenes offentlige ressursportal for universell utforming av
+      digitale tjenester.
+    </p>
+  </div>
+</LenkepanelBase>
+
+<LenkepanelBase
+  className="resource-link"
+  href="https://www.w3.org/TR/WCAG21/"
+  border
+>
+  <div>
+    <Undertittel className="Linkpanel__heading">
+      Web Content Accessibility Guidelines (WCAG) 2.1
+    </Undertittel>
+    <p>
+      Neste versjon av W3s internasjonale standard med teknisk spesifikasjon for
+      minimumskrav (nivå A og AA) alle digitale løsninger må oppfylle.
+    </p>
+  </div>
+</LenkepanelBase>
+
+<Alert variant="info">
+  * Per nå gir{" "}
+  <Link href="https://lovdata.no/dokument/SF/forskrift/2013-06-21-732">
+    forskriften
+  </Link>{" "}
+  egentlig unntak for noen typer systemer (som f.eks. interne
+  saksbehandlingsystemer). Vi har uansett bestemt at våre internsystemer likevel
+  skal oppfylle kravene på samme måte som systemer vi lager mot allmennheten - i
+  tråd med NAVs ønske om å ikke ekskludere noen og støtte alle våre ansatte
+  gjennom hele arbeidslivet.
+</Alert>
+<br />
+<Alert variant="warning">
+  Merk at nivå A og AA i WCAG kun spesifiserer de kravene som er{" "}
+  <strong>absolutt minimum</strong> av det vi må oppfylle. Det bør være et mål i
+  seg selv å gjøre mer enn bare det som er minimum.
+</Alert>
+
+## Bruk designsystemet
+
+Ved å bruke Designsystemet får du mye gratis hjelp, og en bra start i både design- og utviklingsprosessen. Vi har lagt ned mye tid og arbeid for å sikre at komponentene og retningslinjene i Designsystemet er utformet i henhold til offentlige krav til universell utforming. Besøk tilgjengelighets-fanen på de forskjellige [komponent-sidene](/components) for å lese mer om hvilke hensyn du bør være klar over for den enkelte komponent.
+
+Samtidig er det mange hensyn som ikke blir løst av designsystemet alene, og alle på teamet har et felles ansvar for å sikre at løsningene dere lager blir universelt utformet.
+
+## Tips for å unngå vanlige feil
+
+Dette er noen av de viktigste tingene du bør huske på for å unngå de vanligste feilene. Vær likevel bevisst på at disse punktene ikke er komplett.
+
+### For designere
+
+[Flere tips for produktdesignere](https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Produktdesigner/) og [tjenestedesignere](https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Tjenestedesigner/) finner du på uu-sidene.
+
+1.  Bruk aktuell versjon av [NAVs komponent- og illustrasjonsbibliotek](/resources/new-project#for-designere) når du designer.
+2.  Design for grupper med spesielle behov («ytterkantene»). Spør deg selv: Hadde bestemoren min klart å bruke tjenesten? [Om inklusiv design (University of Cambridge)](http://www.inclusivedesigntoolkit.com/whatis/whatis.html)
+3.  Husk [god kontrast](/resources/colors/accessibility#krav-til-kontrast), både på tekst, interaktive elementer, grafer og illustrasjoner.
+4.  Husk [beskrivende alt-tekster](/accessibility/alt-text) på bilder, illustrasjoner og grafer.
+5.  Når [farge](/resources/colors/accessibility) benyttes for å gjøre informasjon tydeligere, skal du alltid bruke noe i tillegg til farge som formidler samme informasjon. Da vil innholdet også fungere for personer som ikke kan oppfatte farge, og man kan skrive ut i svart-hvitt uten at fremhevet informasjon blir borte.
+6.  Video: Husk å ha en tekstversjon som har samme innhold som videoen på siden, samt tekste video og bruk nyeste versjon av QBrick. Snart kommer en lovendring om at videoer også må være synstolket. Det betyr at man skal tilby en audiobeskrivelse av det som vises i videoen som ikke blir tydelig av selve lydsporet.
+7.  Språk og begreper: Skriv så forståelig som mulig og test teksten på reelle brukere. Bruk beskrivende overskrifter, deloverskrifter og punktlister der det er hensiktsmessig. Husk å ha en hovedoverskrift som beskriver hovedinnholdet på siden. Les mer om [tekst og struktur (Difi)]([https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur) og våre [retningslinjer for språk](https://design.nav.no/resources/language)
+8.  Linkr: Skriv Linktekster slik at det er tydelig hvor Linkn går. Ikke åpne Linkr i ny fane/vindu. Se [retningslinjer for gode Linkr](https://design.nav.no/components/Link/accessibility).
+9.  Lag gode og [beskrivende feilmeldinger (DigDir)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/feilhandtering) og pass på at meldingene er i tråd med Designsystemet.
+10. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Fyrstikkaleen.
+
+### For utviklere
+
+[Flere tips for utviklere(https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Utvikler/) på uu-sidene.
+
+1.  Bruk [komponentene våre](/components).
+2.  Sjekk at koderekkefølgen gjenspeiler den visuelle rekkefølgen.
+3.  Test at alt kan betjenes med tastatur og at fokusmarkering flyttes i forventet rekkefølge.
+4.  Bruk de [semantiske egenskapene i HTML (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Semantics).
+5.  Sjekk at du har med [hopp-Linkne (W3)](https://www.w3.org/TR/WCAG21/#bypass-blocks) og at de fungerer.
+6.  Sjekk at du har med [riktig &lt;title&gt; (W3)](https://www.w3.org/TR/WCAG21/#page-titled). Formen skal være `[hovedinnhold/overskrift på siden] - www.nav.no`
+7.  Pass på riktig [overskriftshierarki (DigDir)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur)
+8.  Sjekk at HTMLen din [validerer (W3)](https://validator.w3.org).
+9.  Bruk [WAI-Aria (W3)](https://www.w3.org/WAI/standards-guidelines/aria) der standard HTML ikke er tilstrekkelig, for eksempel på [feilmeldinger](https://www.w3.org/TR/WCAG21/#status-messages)
+10. Bruk automatiserte testverktøy (som f.eks. [WAVE](https://wave.webaim.org) eller [Sortsite](https://www.powermapper.com/products/sortsite/)) aktivt og ofte.
+11. Test med skjermleser på egen hånd. Med for eksempel [ChromeVox](https://www.chromevox.com), [VoiceOver på Mac](https://webaim.org/articles/voiceover/), eller [TalkBack på Android](https://support.google.com/accessibility/android/answer/6283677?hl=en) er dette enklere enn du tror.
+12. Hvis mulig, bruk [automatisert testing](https://navikt.github.io/uu/hvordan-faa-det-til/UU-testing/automatisert-testing/) i utviklingsprosessen. Husk at dette dekker maks 20-30 prosent av potensielle feil.
+13. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Fyrstikkaleen.

docs/data/accessibility/accessibility-testing.mdx

@@ -0,0 +1,67 @@
+---
+title: Verktøy for UU-testing
+rank: 5
+---
+
+# Verktøy for uu-testing
+
+<TableOfContents />
+
+<br />
+
+<Alert variant="warning">
+  <strong>VIKTIG!</strong> Før du tar i bruk noen av verktøyene nedenfor, må du
+  huske at sikkerhet og personvern SKAL ivaretas. Sørg derfor for at du tester
+  på testmiljøer og lignende som har fiktiv testdata. En av grunnene til dette
+  er at noen av utvidelsene til nettlesere KAN sende data til servere utenfor
+  NAV.
+</Alert>
+
+## Manuell testing med skjermleser
+
+Det finnes flere forskjellige skjermlesere. Vi anbefaler at du tester med en eller flere skjermlesere, og at du i tillegg brukertester med noen som bruker skjermleser til daglig.
+
+- [**Voice over**](https://webaim.org/articles/voiceover/) - Gratis innebygd skjermleser på Mac og iPhone.
+  - Se video: [_Screen Reader Basics: VoiceOver -- A11ycasts #07_](https://www.youtube.com/watch?v=5R-6WvAihms)
+  - Se video: [_Assistive Tech: VoiceOver on iOS_](https://www.youtube.com/watch?v=bCHpdjvxBws)
+  - Guide med shortcuts og mer info: [_Using VoiceOver to Evaluate Web Accessibility_](https://webaim.org/articles/voiceover/)
+- [**JAWS**](https://webaim.org/articles/jaws/) - Den mest populære skjermleseren til Windows. Kan være kostbar. Standard-skjermleser til våre interne ansatte på jobb.
+  - Guide med shortcuts og mer info: [_Using JAWS to Evaluate Web Accessibility_](https://webaim.org/articles/jaws/)
+- [**NVDA**](https://webaim.org/articles/nvda/) - Populær og gratis skjermleser til Windows.
+  - Se video: [_Screen Reader Basics: NVDA -- A11ycasts #09_](https://www.youtube.com/watch?v=Jao3s_CwdRU)
+  - Guide med shortcuts og mer info: [_Using NVDA to Evaluate Web Accessibility_](https://webaim.org/articles/nvda/)
+  - [_Download NVDA_](https://www.nvaccess.org/)
+- [**TalkBack**](https://support.google.com/accessibility/android/answer/6283677?hl=en) - Gratis skjermleser til Android.
+  - Se video: [_Assistive Tech: TalkBack_](https://www.youtube.com/watch?v=0Zpzl4EKCco)
+
+## Automatisk analyse
+
+- [**W3Cs kodevalidator**](https://validator.w3.org/) - W3Cs verktøy for å teste om markup-en er valide (ikke direkte uu-tester, men sjekker om koden er i tråd med HTML-standarden, som er en viktig forutsetning for å møte uu-krav). Har blitt brukt i tilsyn.
+- [**Chrome DevTools**](https://developers.google.com/web/tools/chrome-devtools/) - gratis sett med webutviklerverktøy som ligger integrert i Google Chrome-nettleseren. Kan hjelpe deg med å redigere/manipulere en hvilken som helst nettside/tjeneste og raskt diagnostisere problemer.
+  - Se video: [_The new way to test accessibility with Chrome DevTools - A11ycasts #23_](https://www.youtube.com/watch?v=b0Q5Zp_yKaU)
+- [**Lighthouse**](https://developers.google.com/web/tools/lighthouse/) (del av Chrome DevTools) - gir rask og detaljert analyse av nettsider med kriterier for ytelse, tilgjengelighet, progressive webapps, beste praksis, søkemotoroptimalisering for både mobile og desktop. Kan kjøres rett i Chrome DevTools, fra kommandolinjen, eller som en nodemodul
+- **Web Developer Toolbar** ([Chrome](https://chrome.google.com/webstore/detail/web-developer-toolbar/deeboegbjcnfgidliakhpoapnpomphji)/[Firefox](https://addons.mozilla.org/en-US/firefox/addon/web-developer/)) - gratis utvidelse med et hav av muligheter til å manipulere og validere nettsider.
+- [**ARC Toolkit**](https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce) - gratis utvidelse til Chrome med rike verktøy for å teste opp mot WCAG 2.0, WCAG 2.1, EN 301 549, Section 508.
+- [**Visual Aria**](https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk) - gratis utvidelse til Chrome som gir en visuell oversikt over ARIA-attributter som brukes på en nettside, inkludert live regioner, roller, nøsting og fokushåndtering.
+- [**WAVE**](https://wave.webaim.org/) - gratis utvidelse til Chrome og Firefox som evaluerer tilgjengeligheten på nettsider og gir en veldig visuell tilbakemelding.
+- [**AXE Coconut**](https://chrome.google.com/webstore/detail/axe-coconut/iobddmbdndbbbfjopjdgadphaoihpojp) - gratis utvidelse for Chrome
+  - Se video: [_Testing Shadow DOM with aXe Coconut - A11ycasts #26_](https://www.youtube.com/watch?v=1uyQdC3LqLo)
+- [**SortSite**](https://www.powermapper.com/products/sortsite/) - godt verktøy for validering av grensesnittkode opp mot W3C-standarder som WCAG 2.0/2.1, HTML5, CSS3, etc. Gir en god oversikt sammen med en god beskrivelse av hva som er feil, hvor feilen er og hvordan den kan fikses. Pris ca NOK 8000,- per lisens.
+- [**SiteImprove**](https://siteimprove.com/nb-no/) - godt verktøy som gir deg en lettfattelig og god oversikt over problemer og forbedringsområder. Som f.eks. dårlig kodekvalitet og kvalitetsfeil som brutte lenker og stavefeil, kontrastforhold som er for dårlig, m.m. Verktøy tester opp mot W3Cs standarder som f.eks. HTML5 og WCAG 2.0/2.1 og man kan filtrere funnene på roller (utvikler, redaktør, etc). God beskrivelse for hva som er feil og hvordan det kan fikses. Har blitt brukt i tilsyn.
+- [**Total Validator Pro**](http://www.totalvalidator.com/) - et av de bedre verktøyene til validering av kildekode og støtte for universell utforming. Pro-versjonen til kr 250,- (NAV har 30 lisenser).
+- [**Adobe Acrobat DC (PDF)**](https://helpx.adobe.com/no/acrobat/user-guide.html?topic=/no/no/acrobat/morehelp/accessibility_tags_and_reflow.ug.js) - validering av PDF-skjema opp mot W3C standarder som WCAG 2.0/2.1 (Verktøy>Tilgjengelighet>Tilgjengelighetskontroll eller Full kontroll. NAV har lisenser på dette.
+
+## Lese- og skrivevansker
+
+- [**Dyslexia Formatter**](https://chrome.google.com/webstore/detail/dyslexia-formatter/kggkghfhlppjclojgphbploiaipgogoc) - gratis utvidelse til Chrome som gjør det enklere å tilegne seg informasjon og bruke nettbaserte tjenester for folk med dysleksi
+
+## Kontrastforhold
+
+- [**http://contrastchecker.com/**](http://contrastchecker.com/) - her kan du legge inn fargekodene dine og få et konkret svar om kontrastforholdet er i tråd med WCAG-kravene. Du kan også se gråtoner som fargeblind (arkfaner øverst til høyre)
+- [**https://webaim.org/resources/contrastchecker/**](https://webaim.org/resources/contrastchecker/)
+- [**http://accessible-colors.com/**](http://accessible-colors.com/)
+
+## Mobil- og nettleserkompatibilitet
+
+- [**BrowserStack**](https://www.browserstack.com) - Instant access to 1200+ real mobile devices and browsers. Ship mobile apps and websites that work for everyone, every time… Lisenser kjøpt inn. Ikke gratis
+- [**Sauce Labs**](https://saucelabs.com) - tester om løsningen fungerer på kjente nettlesere, operativsystem og enheter. Lisenser på gang. Ikke gratis

docs/data/accessibility/alt-texts.mdx

@@ -0,0 +1,102 @@
+---
+title: Alt-tekster
+rank: 1
+---
+
+# Alternative tekster (alt-tekster)
+
+Alle meningsbærende bilder skal ha en beskrivende alt-tekst.
+
+<TableOfContents />
+
+## Hva er en alt-tekst?
+
+En alt-tekst (kort for alternativ tekst) er en tekst som vises eller leses opp når bildet ikke vises for brukeren. Dette kan være fordi:
+
+- Bildet ble ikke funnet
+- Brukeren har skrudd av bildenedlasting
+- Brukeren har dårlig internettoppkobling
+- Brukeren bruker en skjermleser (for eksempel bilde)
+- Brukeren bruker en rent tekstbasert nettleser (f.eks. Lynx)
+
+<Alert variant="info">
+  Begrepet «bilde» favner i denne konteksten både fotografier, illustrasjoner,
+  logoer, ikoner, grafer, infografikk og annen type grafikk.
+</Alert>
+
+## Bilder uten alt-tekst
+
+Bilder som ikke er meningsbærende (for eksempel bare til pynt eller overflødig) skal ikke ha noe alt-text, men <strong>husk</strong> å gi dem et tomt alt-attributt:
+
+<Bash good code={`<img src="pynt.jpg" alt="" />`} />
+
+<Bash bad code={`<img src="pynt.jpg" />`} />
+
+<br />
+<Alert variant="warning">
+  Skjermlesere trenger et tomt alt-attributt for å vite at de skal ignorere
+  bildet. For bilder uten alt-attributt er det fare for at skjermlesere leser
+  opp kilde-attributtet i stedet.
+</Alert>
+
+## Er bildet «meningsbærende»?
+
+Det er ikke alltid enkelt å vite om bildet er meningsbærende eller rent dekorativt.
+
+En god start kan være å «leke skjermleser»: prøv å les opp siden som den skulle blitt lest for en bruker med skjermleser. Går brukeren glipp av relevant informasjon hvis du hopper over bildene?
+
+Hvis bildene bare gjentar informasjon som er tilgjengelig i nærheten som ren tekst er alt-tekster på disse overfødig.
+
+<Preview noCode>
+  <Undertittel>Beslutningstre for alt-tekster</Undertittel>
+  <div className="decision-tree-promo">
+    <div className="decision-tree-screenshot">
+      <img
+        src={"/alt-decision-tree.png"}
+        width="250px"
+        alt="Skjermbilde av beslutningstreet på W3C sine nettsider."
+      />
+    </div>
+    <div>
+      <p>
+        Hvis du er i tvil anbefaler vi å bruke W3C sitt beslutningstre for å
+        finne ut om man trenger alt-tekster eller ikke:
+      </p>
+      <Lenkepanel
+        className="resource-link"
+        href="https://www.w3.org/WAI/tutorials/images/decision-tree/"
+        border
+      >
+        <div className="w3clogo">
+          <W3CLogo />
+        </div>
+        <Undertittel className="lenkepanel__heading">
+          Alt-text decision tree (W3C)
+        </Undertittel>
+      </Lenkepanel>
+    </div>
+  </div>
+</Preview>
+
+## Hvordan skrive alt-tekster
+
+<Lenkepanel
+  className="resource-link"
+  href="https://www.w3.org/WAI/tutorials/images/tips/"
+  border
+>
+  <div className="w3clogo">
+    <W3CLogo />
+  </div>
+  <Undertittel className="lenkepanel__heading">Tips &amp; tricks</Undertittel>
+</Lenkepanel>
+
+<Lenkepanel
+  className="resource-link"
+  href="https://uu.difi.no/krav-og-regelverk/kom-i-gang/e-laeringskurs-om-universell-utforming-av-nettinnhold"
+  border
+>
+  <Undertittel className="lenkepanel__heading">
+    E-læringskurs for redaktører og skribenter (Difi)
+  </Undertittel>
+</Lenkepanel>

docs/data/accessibility/disabled.mdx

@@ -0,0 +1,128 @@
+---
+title: "HTML: Disabled"
+rank: 3
+---
+
+# Bruk av Disabled-attributtet
+
+Disabled attributten gir oss muligheten til å hindre brukeren i å påvirke
+diverse HTML-Elementer som fks: input og button, men på bekostning av UX og
+UU.
+
+<TableOfContents />
+
+## Hvorfor unngå disable attributten?
+
+Bruk av `disabled` kan virke som en veldig grei måte å hindre brukeren tilgang til forskjellige elementer, men glemmer ofte hva vi da krever av brukeren.
+
+- Ikke alle brukerene vet at elementet <i><u>kan</u></i> være deaktivert, som da fører til forvirring.
+- Deaktiverte elementer har ofte dårlig kontrast.
+- Man forventer at brukeren skal vite hvorfor de ikke kan bruke elementet, men dette er ikke alltid tilfellet.
+- Deaktiverte elementer uten mulighet til fokus vil gjøre det vanskelig for skjermlesere å få all informasjonen den trenger.
+
+## Alternativ
+
+Så hva kan man bruke som erstattning for skjema-elementer og knapper da?
+
+Et alternativ er å fjerne elementet helt fra siden hvis brukeren ikke skal kunne ta det i bruk.
+Her må man da også være sikker på at brukeren ikke vil "savne" dette elementet og da blir forvirret når det ikke er å finne på siden, eventuelt kan man også fortelle brukeren hvorfor muligheten ikke er der.
+
+<br />
+
+<Preview noCode>
+  <RadioGruppe
+    legend="Når ønsker du å reservere bord?"
+    description="Lunsjservering er desverre ikke tilgjengelig grunnet ombygging av resturant."
+  >
+    <Radio label={"Frokost"} name="tid" />
+    <Radio label={"Middag"} name="tid" />
+  </RadioGruppe>
+
+  <Bash
+    good
+    code={`<RadioGruppe
+      legend="Når ønsker du å reservere bord?"
+      description="Lunsjservering er desverre ikke tilgjengelig grunnet ombygging av resturant."
+    >
+      <Radio label={"Frokost"} name="tid" />
+      <Radio label={"Middag"} name="tid" />
+    </RadioGruppe>`}
+/>
+</Preview>
+
+<br />
+<Preview noCode>
+  <RadioGruppe legend="Når ønsker du å reservere bord?">
+    <Radio label={"Frokost"} name="tid" />
+    <Radio label={"Lunsj"} name="tid" disabled />
+    <Radio label={"Middag"} name="tid" />
+  </RadioGruppe>
+
+  <Bash
+    bad
+    code={`<RadioGruppe legend="Når ønsker du å reservere bord?">
+      <Radio label={"Frokost"} name="tid" />
+      <Radio label={"Lunsj"} name="tid" disabled />
+      <Radio label={"Middag"} name="tid" />
+    </RadioGruppe>`}
+  />
+</Preview>
+
+<br />
+<br />
+
+<Preview noCode>
+<Knapp className="doButton" type="hoved">
+  Neste
+</Knapp>
+<Feiloppsummering
+  className="botMargin"
+  tittel="For å gå videre må du rette opp følgende:"
+  feil={[
+    { skjemaelementId: "1", feilmelding: "Du må oppgi et navn" },
+    { skjemaelementId: "2", feilmelding: "Du må oppgi en adresse" },
+  ]}
+/>
+
+<Bash
+  good
+  code={`<Knapp type="hoved">
+    Neste
+  </Knapp>
+  <Feiloppsummering
+    tittel="For å gå videre må du rette opp følgende:"
+    feil={[
+      { skjemaelementId: "1", feilmelding: "Du må oppgi et navn" },
+      { skjemaelementId: "2", feilmelding: "Du må oppgi en adresse" },
+    ]}
+/>`}
+/>
+</Preview>
+
+<br />
+
+<Preview noCode>
+  <Knapp className="botMargin" type="hoved" disabled>
+    Neste
+  </Knapp>
+  <Bash
+    bad
+    code={`<Knapp type="hoved" disabled>
+    Neste
+</Knapp>`}
+  />
+</Preview>
+
+<br />
+
+## Mer om disabled-attributtet
+
+<Lenkepanel
+  className="resource-link"
+  href="https://uxdesign.cc/why-you-shouldnt-include-disabled-interaction-elements-in-your-design-system-76a2d4307faf"
+  border
+>
+  <Undertittel className="lenkepanel__heading">
+    Artikkel om bruk av `disabled`
+  </Undertittel>
+</Lenkepanel>

docs/data/accessibility/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Tilgjengelighet
+rank: 5
+---

docs/data/accessibility/placeholders.mdx

@@ -0,0 +1,124 @@
+---
+title: "HTML: Placeholders"
+rank: 2
+---
+
+# Bruk av placeholder-attributtet
+
+Placeholder attributten representere et <i>kort</i> hint med intensjon om å
+hjelpe brukeren med data utfylling. Dessverre er det en del problemer som
+stopper den fra å gjøre akkurat dette i flere tilfeller.
+
+<TableOfContents />
+
+## Hvorfor unngå placeholders
+
+Selv om placeholders kan virke som en kjempegod snarvei for å gi brukeren enkel og praktisk informasjon, vil det i enkelte tilfeller føre til dårlige brukeropplevelser.
+
+- En placeholder forsvinner når feltet blir utfylt. Dette kan være spesielt utfordrende for personer med kognitive vansker (f.eks. hukommelse).
+- Ikke alle skjermlesere leser opp placeholder.
+- Har dårlig kontrast. WCAG krever at tekst skal ha en kontrast på 4,5:1, men om man forsøker å oppfylle dette kravet her vil det bli vanskelig å se at det faktisk er en placeholder og ikke vanlig tekst som er skrevet i input-feltet. Heller ikke alle nettlesere støtter [styling av placeholder](https://caniuse.com/#feat=css-placeholder).
+
+<Preview noCode>
+  <img
+    src={"/placeholder-contrast.png"}
+    alt="Eksempelbilde som viser hvorfor styling og høy kontrast av placeholder kan være upraktisk."
+/>
+
+  <figcaption>
+    Er adressen allerede utfylt?
+  </figcaption>
+</Preview>
+
+- Kan være vanskelig å skjønne i høykontrastmodus.
+- Blir ikke oversatt med auto-translate.
+
+## Alternativ
+
+Vår anbefaling er å heller bruke vanlige labels, `description`-propen eller [Hjelpetekst](/components/hjelpetekst)-komponenter i nærheten av feltet.
+
+<Preview noCode>
+  <Input
+    label="Password"
+    description="8-16 Characters, containing atleast 2 numbers"
+    type="password"
+  />
+  <Bash
+    good
+    code={`<Input
+    label="Password"
+    description="8-16 Characters, containing atleast 2 numbers"
+    type="password"
+  />`}
+  />
+</Preview>
+
+<Preview noCode>
+  <Input
+    label="Password"
+    placeholder="8-16 Characters, containing atleast 2 numbers"
+  />
+  <Bash
+    bad
+    code={`<Input
+    label="Password"
+    placeholder="8-16 Characters, containing atleast 2 numbers"
+/>`}
+  />
+</Preview>
+<br />
+
+<Preview noCode>
+  <Input
+    label={
+      <div style={{ display: "flex" }}>
+        E-Mail
+        <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+          Example: ola.nordmann@norge.no
+        </Hjelpetekst>
+      </div>
+    }
+  />
+  <Bash
+    good
+    code={`<Input
+      label={
+        <div style={{ display: "flex" }}>
+          E-Mail
+          <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+            Example: ola.nordmann@norge.no
+          </Hjelpetekst>
+        </div>
+      }
+    />`}
+  />
+</Preview>
+
+<Preview noCode>
+  <Input label="E-Mail" placeholder="ola.nordmann@norge.no" />
+  <Bash
+    bad
+    code={`<Input label="E-Mail" placeholder="ola.nordmann@norge.no" />`}
+  />
+</Preview>
+## Mer om Placeholders
+
+<Lenkepanel
+  className="resource-link"
+  href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder"
+  border
+>
+  <Undertittel className="lenkepanel__heading">
+    Bruk og erfaringer fra Mozilla (MDN web docs)
+  </Undertittel>
+</Lenkepanel>
+
+<Lenkepanel
+  className="resource-link"
+  href="https://www.smashingmagazine.com/2018/06/placeholder-attribute/"
+  border
+>
+  <Undertittel className="lenkepanel__heading">
+    Artikkel om bruk av placeholders (Smashing Magazine)
+  </Undertittel>
+</Lenkepanel>

docs/data/components/index.mdx

@@ -1,4 +1,4 @@
 ---
 title: Komponenter
-rank: 3
+rank: 1
 ---

docs/data/components/internal/header.mdx

@@ -1,5 +0,0 @@
----
-title: Header
----
-
-# interne flater header

docs/data/components/internal/index.mdx

@@ -1,3 +0,0 @@
----
-title: Interne flater
----

docs/data/components/knapp.mdx

@@ -1,236 +0,0 @@
----
-title: Knapp
----
-
-<!--
-<Npm packName="nav-frontend-knapper" imports="" />
- -->
-
-# Knapp
-
-## Alle knapper side om side
-
-Alle knappene våre er alignet på samme bunnlinje.
-
-<Preview
-  hideHtml
-  react={`<><Knapp>Normal</Knapp>
-  <Hovedknapp>Hoved</Hovedknapp>
-  <Fareknapp>Fare</Fareknapp>
-  <Flatknapp>Flat</Flatknapp></>`}
->
-  <Knapp>Normal</Knapp>
-  <Hovedknapp>Hoved</Hovedknapp>
-  <Fareknapp>Fare</Fareknapp>
-  <Flatknapp>Flat</Flatknapp>
-</Preview>
-
-<!--
-## Normal
-
-Dette er hvordan en normal knapp skal se ut. De fleste knappene i løsningene våre skal se
-slik ut. Hvis du er i tvil om hvilken knapp du skal bruke, er det sikkert denne som er
-riktig.
-
-<Preview>
-  <Knapp>Normal</Knapp>
-</Preview>
-
-## Hovedknapp
-
-Denne knappen skal brukes der løsningen/siden har en tydelig hoved-/primær-funksjon (f.eks.
-"Lagre" eller "Send søknad"). Merk at det som regel bare skal finnes èn eneste hovedknapp
-på en og samme side. Et mulig unntak til denne regelen kan være inne i en modal-rute som
-legger seg oppå det øvrige innholdet hvor det er tillatt med en ekstra hoved- eller
-fare-knapp ved behov.
-
-<Preview>
-  <Hovedknapp>Hovedknapp</Hovedknapp>
-</Preview>
-
-## Fareknapp
-
-Denne knappen skal brukes på samme måte som hovedknapp, men bare der hoved-/primær-funksjonen
-kan føre til tap av viktig lagret informasjon (f.eks. "Slett") eller ellers bety svært negative
-konsekvenser hvis handlingen ikke var ønsket (f.eks. som en bekreftelse på at brukeren ikke lenger
-ønsker å motta ytelser).
-
-<Preview>
-  <Fareknapp>Fareknapp</Fareknapp>
-</Preview>
-
-## Flatknapp
-
-Denne knappen kan brukes som et alternativ til normal knapp ved behov.
-
-<Preview>
-  <Flatknapp>Flatknapp</Flatknapp>
-</Preview>
-
-## Med spinner
-
-Alle knappene våre har støtte for å vise en spinner.
-
-<Preview>
-  <Knapp spinner>Normal</Knapp>
-  <br />
-  <br />
-  <Hovedknapp spinner>Hoved</Hovedknapp>
-  <br />
-  <br />
-  <Fareknapp spinner>Fare</Fareknapp>
-  <br />
-  <br />
-  <Flatknapp spinner>Flat</Flatknapp>
-  <br />
-  <br />
-  <Knapp disabled spinner>
-    Disabled
-  </Knapp>
-</Preview>
-
-## Disabled
-
-Alle knappene har støtte for disabled stil.
-
-<Alert type="warning">
-  Merk at disabled knapper bør unngås, og at man heller bør bruke vanlige
-  knapper kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
-  grunn ikke er tillatt. Ler mer om dette på{" "}
-  <Link href="/accessibility/disabled">siden vår om `disabled`</Link>.
-</Alert>
-
-<Preview>
-  <Knapp disabled>Normal</Knapp>
-  <br />
-  <br />
-  <Hovedknapp disabled>Hoved</Hovedknapp>
-  <br />
-  <br />
-  <Fareknapp disabled>Fare</Fareknapp>
-  <br />
-  <br />
-  <Flatknapp disabled>Flat</Flatknapp>
-</Preview>
-
-```jsx
-<Knapp disabled>Normal</Knapp>
-<Hovedknapp disabled>Hoved</Hovedknapp>
-<Fareknapp disabled>Fare</Fareknapp>
-<Flatknapp disabled>Flat</Flatknapp>
-```
-
-## Mini
-
-Alle knappene kan rendres i en mindre `32px` versjon.
-
-<Alert type="waring">
-  Som hovedregel skal vi <strong>alltid</strong> bruke de store knappene våre.
-  For tilfeller med svært begrenset plass kan de mindre knappene brukes{" "}
-  <strong>unntaksvis ved klart behov</strong>.
-</Alert>
-
-<Preview>
-  <Knapp mini>Normal</Knapp>
-  <br />
-  <br />
-  <Hovedknapp mini>Hoved</Hovedknapp>
-  <br />
-  <br />
-  <Fareknapp mini>Fare</Fareknapp>
-  <br />
-  <br />
-  <Flatknapp mini>Flat</Flatknapp>
-  <br />
-  <br />
-  <Knapp disabled mini>
-    Disabled
-  </Knapp>
-</Preview>
-
-## Med ikon
-
-<Alert type="info">
-  Når du bruker ikoner er det viktig at du pakker inn teksten med{" "}
-  <code>&lt;span&gt;</code>-elementer for å påse riktig avstand til ikonet.
-</Alert>
-
-<Preview>
-  <Knapp>
-    <Settings />
-    <span>Normal</span>
-  </Knapp>
-  <br />
-  <br />
-  <Hovedknapp>
-    <Settings />
-    <span>Hoved</span>
-  </Hovedknapp>
-  <br />
-  <br />
-  <Fareknapp>
-    <Settings />
-    <span>Fare</span>
-  </Fareknapp>
-  <br />
-  <br />
-  <Flatknapp>
-    <Settings />
-    <span>Flat</span>
-  </Flatknapp>
-  <br />
-  <br />
-  <Knapp disabled>
-    <Settings />
-    <span>Disabled</span>
-  </Knapp>
-</Preview>
-
-### Plassering av ikon
-
-<Preview>
-  <Knapp>
-    <Settings />
-    <span>Knapp</span>
-  </Knapp>
-  <br />
-  <br />
-  <Knapp>
-    <span>Knapp</span>
-    <Settings />
-  </Knapp>
-  <br />
-  <br />
-  <Knapp>
-    <Settings />
-    <span>Knapp</span>
-    <Settings />
-  </Knapp>
-</Preview>
-
-### Kompakt
-
-Bruk `kompakt` for å redusere høyre-/venstre-padding på knappene.
-
-<Alert type="warning">
-  Husk at knapper med bare ikoner også må få en tekst-verdi av hensyn til
-  skjermlesere. Utility-klassen <code>sr-only</code> som gis av{" "}
-  <Link href="https://github.com/navikt/nav-frontend-moduler/blob/master/packages/node_modules/nav-frontend-core/less/_mixins.less">
-    mixins-fila i Core-pakken
-  </Link>{" "}
-  kan brukes for å skjule teksten visuelt.
-</Alert>
-
-<Preview>
-  <Knapp kompakt>
-    <Settings />
-    <span>Knapp</span>
-  </Knapp>
-  <br />
-  <br />
-  <Knapp kompakt>
-    <Settings />
-    <span className="sr-only">Knapp</span>
-  </Knapp>
-</Preview>
--->

docs/data/components/legacy/Actions/Ikonknapper.mdx

@@ -0,0 +1,90 @@
+---
+title: Ikonknapper
+---
+
+# Ikonknapper
+
+Denne pakken inneholder en samling med ferdig-komponerte knapper med tilhørende ikon.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-ikonknapper nav-frontend-chevron classnames nav-frontend-chevron-style prop-types react nav-frontend-ikoner-assets nav-frontend-knapper nav-frontend-js-utils lodash.throttle nav-frontend-knapper-style nav-frontend-core nav-frontend-typografi-style --save`}
+/>
+
+<Npm
+  packName="nav-frontend-ikonknapper"
+  imports={[
+    "Xknapp",
+    "Tilbakeknapp",
+    "Systemerknapp",
+    "Søkeknapp",
+    "Nesteknapp",
+    "Menyknapp",
+    "Hamburgerknapp",
+  ]}
+/>
+
+## Tilbake-/Nesteknapp
+
+<Preview
+  react={`<><Tilbakeknapp />
+  <Nesteknapp /></>`}
+>
+  <Tilbakeknapp />
+  <Nesteknapp />
+</Preview>
+
+## Søkeknapp
+
+<Preview react={`<Søkeknapp />`}>
+  <Søkeknapp />
+</Preview>
+
+<Preview
+  react={`<Søkeknapp>
+    <span>Valgfri tekst</span>
+  </Søkeknapp>`}
+>
+  <Søkeknapp>
+    <span>Valgfri tekst</span>
+  </Søkeknapp>
+</Preview>
+
+## Menyknapp
+
+<Preview react={`<Menyknapp />`}>
+  <Menyknapp />
+</Preview>
+
+<Preview
+  react={`<Menyknapp>
+    <span>Valgfri tekst</span>
+  </Menyknapp>`}
+>
+  <Menyknapp>
+    <span>Valgfri tekst</span>
+  </Menyknapp>
+</Preview>
+
+## Hamburgerknapp
+
+<Preview react={`<Hamburgerknapp />`}>
+  <Hamburgerknapp />
+</Preview>
+
+## Systemerknapp
+
+<Preview react={`<Systemerknapp />`}>
+  <Systemerknapp />
+</Preview>
+
+## Xknapp
+
+<Preview react={`<Xknapp />`}>
+  <Xknapp />
+</Preview>

docs/data/components/legacy/Actions/Lenkepanel.mdx

@@ -0,0 +1,337 @@
+---
+title: Lenkepanel
+---
+
+# Lenkepanel
+
+Lenkepanel er klikkbare paneler, og kan brukes til lenker med høy prioritet. For eksempel sider som har hovedinnganger til forskjellige seksjoner.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-lenkepanel classnames nav-frontend-lenkepanel-style nav-frontend-chevron-style nav-frontend-core nav-frontend-paneler-style nav-frontend-typografi nav-frontend-typografi-style prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-lenkepanel" imports="Lenkepanel" defaultExport />
+
+## Normal
+
+<Preview
+  react={`<Lenkepanel href="#" border>
+    Lenketekst
+  </Lenkepanel>`}
+>
+  <Lenkepanel href="#" border>
+    Lenketekst
+  </Lenkepanel>
+</Preview>
+
+## Endre tekststørrelse
+
+For å endre tekststørrelsen kan man sende inn en annen
+[typografitype](#/resources/typografi) i `tittelProps`-propen.
+
+<Preview
+  react={`<Lenkepanel href="#" tittelProps="normaltekst" border>
+    Lenketekst
+  </Lenkepanel>`}
+>
+  <Lenkepanel href="#" tittelProps="normaltekst" border>
+    Lenketekst
+  </Lenkepanel>
+</Preview>
+
+## Avansert innhold
+
+Hvis man bruker `LenkepanelBase` kan man bestemme et helt egendefinert React/HTML-innhold. Husk
+å gi tittelen i innholdet ditt klassenavnet `lenkepanel__heading` slik at dette får riktig hover-stil.
+Øvrige stiler må dere ordne selv, og det kan være lurt å øke paddingen på lenkepanelet til `2rem` eller mer
+hvis innholdet skal være mer enn bare en tittel.
+
+<Preview
+  react={`<LenkepanelBase href="#" style={{ padding: "2rem 2.5rem 2rem 2rem" }} border>
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div>
+        <svg
+          style={{ marginRight: "2rem" }}
+          xmlns="http://www.w3.org/2000/svg"
+          width="110"
+          height="110"
+        >
+          <defs>
+            <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
+          </defs>
+          <g fill="none" fillRule="evenodd">
+            <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
+            <rect
+              width="796"
+              height="181"
+              fill="transparent"
+              rx="8"
+              transform="translate(-45 -36)"
+            ></rect>
+            <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
+            <g fill="#D8D8D8">
+              <path
+                fill="#337C9B"
+                d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
+              ></path>
+              <path
+                fill="#38363A"
+                d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
+              ></path>
+              <path
+                fill="#CE2128"
+                d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
+              ></path>
+            </g>
+            <path
+              fill="#FFF"
+              d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
+            ></path>
+            <path
+              fill="#C0C0BE"
+              d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
+            ></path>
+            <path
+              stroke="#8E9294"
+              strokeLinecap="round"
+              strokeWidth="2.152"
+              d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
+            ></path>
+            <path
+              stroke="#8E9294"
+              strokeLinecap="round"
+              strokeWidth="2.264"
+              d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
+            ></path>
+            <path
+              fill="#CCDEE6"
+              d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
+            ></path>
+            <path
+              fill="#C42B34"
+              d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
+            ></path>
+            <path
+              fill="#2E3137"
+              d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
+            ></path>
+            <path
+              fill="#D84B55"
+              d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
+            ></path>
+            <path
+              fill="#2E3137"
+              d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
+            ></path>
+            <path
+              fill="#FFD399"
+              d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
+            ></path>
+            <path
+              fill="#FFD399"
+              d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
+            ></path>
+            <path
+              fill="#5A5C5D"
+              d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
+            ></path>
+            <g transform="rotate(-69 92.268 -44.056)">
+              <mask id="b" fill="#fff">
+                <use xlinkHref="#a"></use>
+              </mask>
+              <path
+                fill="#C42B34"
+                d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
+                mask="url(#b)"
+              ></path>
+            </g>
+            <path
+              fill="#E1CFB4"
+              d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
+            ></path>
+            <path
+              fill="#FAA736"
+              d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
+            ></path>
+            <path
+              fill="#FAA736"
+              d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
+            ></path>
+            <path
+              fill="#535756"
+              d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <Systemtittel className="lenkepanel__heading" style={{ marginTop: 0 }}>
+          Dagpenger
+        </Systemtittel>
+        <p>
+          Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
+          din.
+        </p>
+      </div>
+    </div>
+  </LenkepanelBase>`}
+>
+  <LenkepanelBase href="#" style={{ padding: "2rem 2.5rem 2rem 2rem" }} border>
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div>
+        <svg
+          style={{ marginRight: "2rem" }}
+          xmlns="http://www.w3.org/2000/svg"
+          width="110"
+          height="110"
+        >
+          <defs>
+            <path id="a" d="M.686.654h4.399v5.852H.686z"></path>
+          </defs>
+          <g fill="none" fillRule="evenodd">
+            <path fill="transparent" d="M-287-1518H993V543H-287z"></path>
+            <rect
+              width="796"
+              height="181"
+              fill="transparent"
+              rx="8"
+              transform="translate(-45 -36)"
+            ></rect>
+            <circle cx="55" cy="55" r="55" fill="#CCDEE6"></circle>
+            <g fill="#D8D8D8">
+              <path
+                fill="#337C9B"
+                d="M32.034 5.834l-11.606 3.11-9.517 2.55-4.637 1.242 1.284 4.794 9.069 33.843 1.284 4.795 4.637-1.243 9.518-2.55 11.605-3.11c2.561-.686 4.063-3.389 3.353-6.037L37.956 9.385c-.71-2.648-3.361-4.238-5.922-3.551"
+              ></path>
+              <path
+                fill="#38363A"
+                d="M38.322 51.833l1.77-.474-12.12-45.233-1.77.474z"
+              ></path>
+              <path
+                fill="#CE2128"
+                d="M26.593 57.996l-1.179-.613-.713 1.12-.93-3.47 1.892-.507z"
+              ></path>
+            </g>
+            <path
+              fill="#FFF"
+              d="M61.773 69.14l8.95 38.112a2.524 2.524 0 0 0 3.036 1.881l32.913-7.745a2.528 2.528 0 0 0 1.88-3.04L98.279 54.591a2.526 2.526 0 0 0-3.037-1.883L68.425 59.02l-6.652 10.12z"
+            ></path>
+            <path
+              fill="#C0C0BE"
+              d="M68.425 59.02l1.326 5.645a2.527 2.527 0 0 1-1.88 3.038l-6.098 1.436 6.652-10.12z"
+            ></path>
+            <path
+              stroke="#8E9294"
+              strokeLinecap="round"
+              strokeWidth="2.152"
+              d="M68.902 74.197l11.982-2.82m-10.721 8.19l24.874-5.853M71.424 84.937l24.873-5.853"
+            ></path>
+            <path
+              stroke="#8E9294"
+              strokeLinecap="round"
+              strokeWidth="2.264"
+              d="M72.685 90.307l24.873-5.854M73.857 95.297l24.873-5.853M75.021 100.7l24.874-5.853"
+            ></path>
+            <path
+              fill="#CCDEE6"
+              d="M21.698 86.68c-5.726-3.643-7.42-11.243-3.78-16.976 3.64-5.733 11.231-7.427 16.958-3.784 5.727 3.643 7.42 11.243 3.78 16.976-3.639 5.733-11.231 7.427-16.958 3.784z"
+            ></path>
+            <path
+              fill="#C42B34"
+              d="M9.283 106.905a2.772 2.772 0 0 1-.851-3.823l8.759-13.798a2.765 2.765 0 0 1 3.817-.852 2.77 2.77 0 0 1 .851 3.822l-8.758 13.799a2.764 2.764 0 0 1-3.818.852"
+            ></path>
+            <path
+              fill="#2E3137"
+              d="M19.032 90.912c-.86-.547-1.348-1.318-.801-2.179l1.826-2.877a1.841 1.841 0 0 1 2.546-.567 1.847 1.847 0 0 1 .566 2.547l-1.826 2.878c-.547.86-1.452.744-2.31.198"
+            ></path>
+            <path
+              fill="#D84B55"
+              d="M16.41 91l-8.266 13.021a.925.925 0 0 0 .283 1.275.92.92 0 0 0 1.272-.284l7.912-12.463c-.713-.47-1.083-1.039-1.2-1.549"
+            ></path>
+            <path
+              fill="#2E3137"
+              d="M27.811 87.523a11.115 11.115 0 0 1-1.117-.196 11.283 11.283 0 0 1-3.577-1.48c-5.295-3.369-6.866-10.423-3.502-15.723 3.366-5.301 10.412-6.874 15.709-3.504 5.296 3.368 6.866 10.422 3.5 15.723a11.317 11.317 0 0 1-2.86 3.053 11.4 11.4 0 0 1-4.72 2.029c-1.127.203-2.284.24-3.433.098m12.57-4.19c3.911-6.16 2.085-14.358-4.069-18.271-6.154-3.915-14.342-2.089-18.253 4.072-3.91 6.16-2.085 14.356 4.07 18.271 6.153 3.915 14.343 2.09 18.252-4.072"
+            ></path>
+            <path
+              fill="#FFD399"
+              d="M93.445 12.554c2.45 5.367.088 11.707-5.274 14.159-5.361 2.452-11.695.088-14.145-5.279-2.449-5.368-.088-11.707 5.275-14.16 5.361-2.452 11.695-.088 14.144 5.28"
+            ></path>
+            <path
+              fill="#FFD399"
+              d="M91.45 28.239l-4.274 1.954a2.697 2.697 0 0 1-3.574-1.334l-2.775-6.08a2.7 2.7 0 0 1 1.333-3.578l4.274-1.955a2.696 2.696 0 0 1 3.575 1.334l2.775 6.08a2.702 2.702 0 0 1-1.333 3.579"
+            ></path>
+            <path
+              fill="#5A5C5D"
+              d="M94.1 30.6l-6.9 3.156a1.255 1.255 0 0 1-1.043-2.284l6.902-3.155a1.253 1.253 0 1 1 1.04 2.282m1.275 2.794l-6.9 3.156a1.254 1.254 0 1 1-1.041-2.283l6.9-3.156a1.254 1.254 0 0 1 1.041 2.283m-1.682 1.387l-3.044 1.392c-.458.21-.4.889.09 1.006.685.164 1.425.11 2.115-.207a3.25 3.25 0 0 0 1.54-1.464c.233-.449-.241-.936-.701-.727"
+            ></path>
+            <g transform="rotate(-69 92.268 -44.056)">
+              <mask id="b" fill="#fff">
+                <use xlinkHref="#a"></use>
+              </mask>
+              <path
+                fill="#C42B34"
+                d="M.732 4.08l.397-1.844a1.999 1.999 0 1 1 3.91.842l-.396 1.846A2 2 0 1 1 .732 4.08"
+                mask="url(#b)"
+              ></path>
+            </g>
+            <path
+              fill="#E1CFB4"
+              d="M86.458 79.011l-1.334 7.43 6.268-4.21-2.12-2.355z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M103.266 56.87l-1.644-1.073-14.841 22.72 1.643 1.072z"
+            ></path>
+            <path
+              fill="#FAA736"
+              d="M104.912 57.945l-1.644-1.074-14.841 22.72 1.644 1.073z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M90.071 80.664l1.644 1.072 14.842-22.72-1.645-1.072zm-3.306-.951c.31.203.774-.055 1.188.215a.513.513 0 0 1 .152.15l.32-.488-1.644-1.073-.297.453s-.028.542.281.743"
+            ></path>
+            <path
+              fill="#FAA736"
+              d="M88.106 80.078c.205.277.111.67.548.956.44.286.764.042 1.098.118l.32-.488-1.648-1.075-.318.489z"
+            ></path>
+            <path
+              fill="#FECB86"
+              d="M89.752 81.152a.507.507 0 0 1 .198.08c.414.27.365.797.675 1 .311.204.794-.041.794-.041l.296-.454-1.644-1.073-.32.488z"
+            ></path>
+            <path
+              fill="#535756"
+              d="M85.123 86.44l2.22-1.488-1.749-1.14zm21.434-27.423l-4.935-3.22.437-.67 4.935 3.22z"
+            ></path>
+          </g>
+        </svg>
+      </div>
+      <div>
+        <Systemtittel className="lenkepanel__heading" style={{ marginTop: 0 }}>
+          Dagpenger
+        </Systemtittel>
+        <p>
+          Du kan få dagpenger når du er arbeidsledig og har mistet inntekten
+          din.
+        </p>
+      </div>
+    </div>
+  </LenkepanelBase>
+</Preview>

docs/data/components/legacy/Actions/Lenker.mdx

@@ -0,0 +1,190 @@
+---
+title: Lenke
+---
+
+# Lenke
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-lenker classnames nav-frontend-lenker-style nav-frontend-core prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-lenker" imports="Lenke" defaultExport />
+
+## Normal
+
+Tekstlenker skal ha fargen [@navBla](/resources/colors) (#0067C5) med normal underlinje som forsvinner ved hover.
+Ved fokus skal lenken få hvit tekstfarge uten underlinje og bakgrunnsfarge [@fokusFarge](/resources/colors) (#254B6D).
+
+<Preview
+  react={`<div>Dette er en <Lenke href="#">tekstlenke</Lenke> i en setning.</div>`}
+>
+  Dette er en <Lenke href="#">tekstlenke</Lenke> i en setning.
+</Preview>
+
+## På farget bakgrunn
+
+På en bakgrunn der @navBla ikke har tilstrekkelig kontrast (minimum 4.5:1) anbefaler vi å bruke @navMorkGra.
+
+<Preview
+  react={`<Alertstripe type="suksess">
+    Dette er en <Lenke href="#">tekstlenke</Lenke> på farget bakgrunn.
+  </Alertstripe>`}
+>
+  <Alertstripe type="suksess">
+    Dette er en <Lenke href="#">tekstlenke</Lenke> på farget bakgrunn.
+  </Alertstripe>
+</Preview>
+
+## Med ikon
+
+<Alert variant="info">
+  Når du bruker ikoner er det viktig at du pakker inn teksten med{" "}
+  <code>&lt;span&gt;</code>-elementer for å påse riktig avstand til ikonet.
+</Alert>
+
+<Preview
+  react={`<><Lenke href="#">
+    <span>Lenke med ikon</span>
+    <Settings />
+  </Lenke>
+  <Lenke href="#">
+    <Settings />
+    <span>Lenke med ikon</span>
+  </Lenke></>`}
+>
+  <Lenke href="#">
+    <span>Lenke med ikon</span>
+    <Settings />
+  </Lenke>
+  <Lenke href="#">
+    <Settings />
+    <span>Lenke med ikon</span>
+  </Lenke>
+</Preview>
+
+### Skalering
+
+Ikoner inne i lenker vil skalere med tekst-størrelsen:
+
+<Preview
+  react={`<><Innholdstittel>
+    <Lenke href="#">
+      <span>ikonet skaleres</span>
+      <Settings />
+    </Lenke>
+  </Innholdstittel>
+  <Innholdstittel>
+    <Lenke href="#">
+      <Settings />
+      <span>ikonet skaleres</span>
+    </Lenke>
+  </Innholdstittel></>`}
+>
+  <Innholdstittel>
+    <Lenke href="#">
+      <span>ikonet skaleres</span>
+      <Settings />
+    </Lenke>
+  </Innholdstittel>
+  <Innholdstittel>
+    <Lenke href="#">
+      <Settings />
+      <span>ikonet skaleres</span>
+    </Lenke>
+  </Innholdstittel>
+</Preview>
+
+### I tekst-blokker
+
+Ikoner skal også fungere fint på lenker midt inne i større tekst-blokker:
+
+<Preview
+  react={`<div>Morbi blandit mauris lacus, eget tincidunt velit fringilla in. Sed sodales
+  placerat leo pretium iaculis. Sed lacinia dolor ac consequat blandit.
+  Pellentesque tempor in magna a viverra. Etiam mollis orci et ligula euismod,
+  id dictum elit vehicula. Morbi augue erat, dapibus eu lorem eu, viverra
+  malesuada odio.{" "}
+  <Lenke href="#">
+    <Settings />
+    <span>
+      Cras finibus odio ac venenatis interdum. Mauris ac accumsan libero. In ac
+      libero tincidunt, ultrices risus at, posuere velit. Pellentesque et mollis
+      ipsum.
+    </span>
+  </Lenke>{" "}
+  Aliquam porttitor sed justo fermentum pretium. Praesent at tortor ut ex cursus
+  volutpat ac quis eros. Proin laoreet egestas dui, ac condimentum orci lobortis
+  vitae. Etiam semper aliquam magna, ac consectetur elit laoreet non.
+  Pellentesque vel interdum mauris.</div>`}
+>
+  <div>
+    <p>
+      Morbi blandit mauris lacus, eget tincidunt velit fringilla in. Sed sodales
+      placerat leo pretium iaculis. Sed lacinia dolor ac consequat blandit.
+      Pellentesque tempor in magna a viverra. Etiam mollis orci et ligula
+      euismod, id dictum elit vehicula. Morbi augue erat, dapibus eu lorem eu,
+      viverra malesuada odio.
+    </p>{" "}
+    <Lenke href="#">
+      <Settings />
+      <span>
+        Cras finibus odio ac venenatis interdum. Mauris ac accumsan libero. In
+        ac libero tincidunt, ultrices risus at, posuere velit. Pellentesque et
+        mollis ipsum.
+      </span>
+    </Lenke>{" "}
+    <p>
+      Aliquam porttitor sed justo fermentum pretium. Praesent at tortor ut ex
+      cursus volutpat ac quis eros. Proin laoreet egestas dui, ac condimentum
+      orci lobortis vitae. Etiam semper aliquam magna, ac consectetur elit
+      laoreet non. Pellentesque vel interdum mauris.
+    </p>
+  </div>
+</Preview>
+
+## Tilgjengelighet
+
+### Beskrivende tekstinnhold i lenken
+
+Gode lenker er svært viktig for personer som bruker skjermleser. Det er ikke uvanlig at disse brukerne starter med kun en liste over alle tilgjengelige lenker på en nettside, for å forsøke å få oversikt over navigeringsmulighetene på siden. En slik liste viser bare selve lenketeksten, og hvis lenkene ikke er beskrivende blir det vanskelig å forstå hvor de leder brukeren videre.
+
+Tekstlenker skal beskrive hva de lenker til. Det skal ikke bare stå "her" eller "les mer". I tilfeller hvor dette ikke er mulig, bør man passe på at den øvrige teksten rundt lenken kan fungere som en beskrivelse. På den måten vil formålet til lenken gi mer mening.
+
+### Dokumenter
+
+Hvis det lenkes til et dokument, bør man bruke den formelle tittelen på dokumentet; "Digitaliseringstrategi 2020". Og hvis man lenker til en nedlastbar fil skal man også inkludere fil-formatet i parentes bak lenken; "Digitaliseringstrategi 2020 (PDF)".
+
+### Fargeblindhet
+
+Understrek under lenkene gjør at de skiller seg ut med mer enn bare fargen. Ved hjelp av understrek kan også fargeblinde personer raskt legge merke til lenkene, og de er mye enklere å se på skjermer med dårlig oppløsning.
+
+### Åpne ny fane
+
+Som hovedregel skal vi unngå å åpne lenker i ny fane. Denne hovedregelen gjelder uavhengig av om lenken fører til et annet domene/nettsted eller ikke. Bakgrunnen for denne regelen er at automatisk åpning av nye tabs ofte oppleves forvirrende for brukere som har vansker med å oppfatte visuell informasjon, spesielt brukere med skjermleser.
+
+Det finnes likevel noen unntak til denne hovedregelen, hvor automatisk åpning av ny fane anbefales:
+
+- Hvis klikk på lenken kan føre til at brukeren taper informasjon. F.eks. hvis brukeren er inne i et langt skjema, eller en stegvis prosess, hvor informasjonen de har oppgitt vil gå tapt om brukeren navigerer bort fra siden.
+- Hvis brukeren er pålogget i en side hvor påloggingen kan bli avbrutt hvis brukerne navigerer bort fra siden. Dette tilfellet er uansett lite aktuelt for nav.no, da innlogging på våre sider blir håndtert av ID-porten (hvor autentisering er tidsbestemt og fortsetter å gjelde selv om bruker navigerer bort fra nav.no).
+
+Se også [WCAG G200: Opening new windows and tabs from a link only when necessary](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
+
+<!--
+### Retningslinjer for språk
+
+- [Slik skriver vi 4.7: Når du bruker lenker](/resources/language#4.7-når-du-bruker-lenker)
+- [Slik skriver vi 4.8: Ikke bruk nedlastbare filer som word, ppt, pdf etc.](/resources/language#4.8-ikke-bruk-nedlastbare-filer-som-word,-ppt,-pdf-etc.)
+ -->
+
+### Mer informasjon
+
+- [WCAG 1.3.1: Informasjon og relasjoner, nivå A](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/131-informasjon-og-relasjoner-niva)
+- [WCAG 2.4.9: Formål med lenke (bare lenke, nivå AAA)](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/ikke-lovpalagte-krav/249-formal-med-lenke-bare-lenke-niva-aaa)
+- [WCAG 1.4.1: Bruk av farge, nivå A](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/141-bruk-av-farge-niva)
+- [Tekst om lenker på uu.difi.no](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/lenker)

docs/data/components/legacy/Actions/Stegindikator.mdx

@@ -0,0 +1,156 @@
+---
+title: Stegindikator
+---
+
+# Stegindikator
+
+Stegindikatoren skal vise stegvis progresjon gjennom en prosess.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-stegindikator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-stegindikator-style nav-frontend-core nav-frontend-typografi-style --save`}
+/>
+
+<Npm
+  packName="nav-frontend-stegindikator"
+  imports="Stegindikator"
+  defaultExport
+/>
+
+## Normal
+
+<Preview
+  react={`<Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+  />`}
+>
+  <Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+  />
+</Preview>
+
+## Med label
+
+<Preview
+  react={`<Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    visLabel
+  />`}
+>
+  <Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    visLabel
+  />
+</Preview>
+
+## Kompakt
+
+<Preview
+  react={`<Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    kompakt
+  />`}
+>
+  <Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    kompakt
+  />
+</Preview>
+
+## Kompakt med label
+
+<Preview
+  react={`<Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    kompakt
+    visLabel
+  />`}
+>
+  <Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+      { label: "Konklusjonen", disabled: true },
+    ]}
+    onChange={() => {}}
+    kompakt
+    visLabel
+  />
+</Preview>
+
+## Autoresponsiv
+
+Denne versjonen vil kontinuerlig overvåke tilgjenglig konteiner-plass og automatisk
+bytte visningsmodus for å tilpasse seg bredden.
+
+<Preview
+  react={`<Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+    ]}
+    onChange={() => {}}
+    visLabel
+    autoResponsiv
+  />`}
+>
+  <Stegindikator
+    steg={[
+      { label: "Dette steget først" },
+      { label: "Og så dette steget", aktiv: true },
+      { label: "Deretter må du gjøre dette" },
+    ]}
+    onChange={() => {}}
+    visLabel
+    autoResponsiv
+  />
+</Preview>

docs/data/components/legacy/Actions/Tabs.mdx

@@ -0,0 +1,95 @@
+---
+title: Tabs
+---
+
+# Tabs
+
+Tabs er en meny som gir brukeren mulighet til å bytte mellom lagvis inndelt innhold.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-tabs classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-tabs-style nav-frontend-core nav-frontend-typografi-style --save`}
+/>
+
+<Npm packName="nav-frontend-tabs" imports="Tabs" defaultExport />
+
+## Normal
+
+<Preview
+  react={`<Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+  />`}
+>
+  <Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+  />
+</Preview>
+
+## Kombinasjon med panel
+
+Komponenten passer fint i kombinasjon med [Panel](/components/panel), hvor normal variant bør plasseres
+utenfor og langs øverste kant av panelet.
+
+<Alert variant="info">
+  Inntil videre må du manuelt håndtere visning av riktig panel-innhold når aktiv
+  tab endres. Du må også skru av
+  <code className="inline">border</code> og <code className="inline">
+    border-radius
+  </code> langs toppen av panelet. Vi jobber med å lage en mer avansert <code className="inline">
+    TabPanel
+  </code> komponent som er tenkt å både fikse disse stilene for deg, og håndtere
+  automatisk visning av riktig panel-innhold avhengig av aktiv tab.
+</Alert>
+
+<Preview
+  react={`<><Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+  />
+  <Panel
+    border
+    style={{ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
+  >
+    Innhold her.
+  </Panel></>`}
+>
+  <Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+  />
+  <Panel
+    border
+    style={{ borderTop: 0, borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
+  >
+    Innhold her.
+  </Panel>
+</Preview>
+
+## Kompakt
+
+<Preview
+  react={`<Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+    kompakt
+  />`}
+>
+  <Tabs
+    tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
+    onChange={() => {}}
+    kompakt
+  />
+</Preview>
+
+## Tilgjengelighet
+
+### Tastaturnavigering
+
+Støtte for tastaturnavigering i Tabs er basert på [W3 sine anbefalinger](https://www.w3.org/TR/wai-aria-practices/#tabpanel), med noen modifikasjoner etter råd og innspill fra våre egne UU-eksperter. Vi har valgt å la alle tabs være tilgjengelige med tabbing, i motsetning til W3 sine anbefalinger om å begrense dette til kun aktiv tab. Konsumenten står fritt til å bestemme om pil-navigering automatisk bytter aktiv tab (default), eller kun flytter fokus. Det gjør man ved å sette `arrowKeysAutoSwitchTabs` property til `false`).

docs/data/components/legacy/Actions/ToggleGruppe.mdx

@@ -0,0 +1,115 @@
+---
+title: ToggleGruppe
+---
+
+# ToggleGruppe
+
+ToggleGruppe er en samling av flere ToggleKnapper. ToggleGruppe tar seg også av styling av ToggleKnapper slik at disse står helt inntil hverandre.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-toggle classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-toggle-style nav-frontend-core nav-frontend-knapper-style nav-frontend-typografi-style --save`}
+/>
+
+<Npm packName="nav-frontend-toggle" imports="ToggleGruppe" />
+
+## Normal
+
+I default varianten kan man bare aktivere èn ToggleKnapp om gangen.
+
+<Preview
+  react={`<ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag", pressed: true },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+  />`}
+>
+  <ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag", pressed: true },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+  />
+</Preview>
+
+## MultiSelect
+
+For å tillate flere aktive ToggleKnapper samtidig kan man bruke `multiSelect` propen.
+
+<Preview
+  react={`<ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag", pressed: true },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+    multiSelect
+  />`}
+>
+  <ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag", pressed: true },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+    multiSelect
+  />
+</Preview>
+
+## Minst én
+
+Bruk `minstEn` propen for å håndheve at det alltid må være èn ToggleKnapp som er valgt.
+
+<Preview
+  react={`<ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag" },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+    minstEn
+  />`}
+>
+  <ToggleGruppe
+    defaultToggles={[
+      { children: "Mandag" },
+      { children: "Tirsdag" },
+      { children: "Onsdag" },
+    ]}
+    minstEn
+  />
+</Preview>
+
+## Kompakt
+
+ToggleGruppe støtter også en `kompakt` variant som kan passe bra hvis ToggleKnappene har lite tekstinnhold eller bare ikoner.
+
+<Preview
+  react={`<ToggleGruppe
+    defaultToggles={[
+      { children: "B", pressed: true },
+      { children: <em style={{ paddingLeft: 2, paddingRight: 2 }}>I</em> },
+      { children: <span style={{ textDecoration: "underline" }}>U</span> },
+    ]}
+    multiSelect
+    kompakt
+  />`}
+>
+  <ToggleGruppe
+    defaultToggles={[
+      { children: "B", pressed: true },
+      { children: <em style={{ paddingLeft: 2, paddingRight: 2 }}>I</em> },
+      { children: <span style={{ textDecoration: "underline" }}>U</span> },
+    ]}
+    multiSelect
+    kompakt
+  />
+</Preview>

docs/data/components/legacy/Actions/ToggleKnapp.mdx

@@ -0,0 +1,31 @@
+---
+title: ToggleKnapp
+---
+
+# ToggleKnapp
+
+ToggleKnapp har to tilstander; på eller av. Komponenten kan brukes alene eller kombinert med flere i en ToggleGruppe.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-toggle classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-toggle-style nav-frontend-core nav-frontend-knapper-style nav-frontend-typografi-style --save`}
+/>
+
+<Npm packName="nav-frontend-toggle" imports="ToggleKnapp" />
+
+## Normal
+
+<Preview react={`<ToggleKnapp>Toggle</ToggleKnapp>`}>
+  <ToggleKnapp>Toggle</ToggleKnapp>
+</Preview>
+
+## Kompakt
+
+<Preview react={`<ToggleKnapp kompakt>Toggle</ToggleKnapp>`}>
+  <ToggleKnapp kompakt>Toggle</ToggleKnapp>
+</Preview>

docs/data/components/legacy/Actions/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Actions
+rank: 1
+---

docs/data/components/legacy/Actions/knapp.mdx

@@ -0,0 +1,272 @@
+---
+title: Knapp
+---
+
+# Knapp
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-knapper classnames nav-frontend-js-utils
+  lodash.throttle prop-types react nav-frontend-knapper-style nav-frontend-core
+  nav-frontend-typografi-style --save`}
+/>
+
+<Npm packName="nav-frontend-knapper" imports="Knapp" />
+
+## Normal
+
+Dette er hvordan en normal knapp skal se ut. De fleste knappene i løsningene våre skal se
+slik ut. Hvis du er i tvil om hvilken knapp du skal bruke, er det sikkert denne som er
+riktig.
+
+<Preview react={`<Knapp>Normal</Knapp>`}>
+  <Knapp>Normal</Knapp>
+</Preview>
+
+## Hovedknapp
+
+Denne knappen skal brukes der løsningen/siden har en tydelig hoved-/primær-funksjon (f.eks.
+"Lagre" eller "Send søknad"). Merk at det som regel bare skal finnes èn eneste hovedknapp
+på en og samme side. Et mulig unntak til denne regelen kan være inne i en modal-rute som
+legger seg oppå det øvrige innholdet hvor det er tillatt med en ekstra hoved- eller
+fare-knapp ved behov.
+
+<Preview react={`<Knapp type="hoved">Hovedknapp</Knapp>`}>
+  <Knapp type="hoved">Hovedknapp</Knapp>
+</Preview>
+
+## Fareknapp
+
+Denne knappen skal brukes på samme måte som hovedknapp, men bare der hoved-/primær-funksjonen
+kan føre til tap av viktig lagret informasjon (f.eks. "Slett") eller ellers bety svært negative
+konsekvenser hvis handlingen ikke var ønsket (f.eks. som en bekreftelse på at brukeren ikke lenger
+ønsker å motta ytelser).
+
+<Preview react={`<Knapp type="fare">Fareknapp</Knapp>`}>
+  <Knapp type="fare">Fareknapp</Knapp>
+</Preview>
+
+## Flatknapp
+
+Denne knappen kan brukes som et alternativ til normal knapp ved behov.
+
+<Preview react={`<Knapp type="flat">Flatknapp</Knapp>`}>
+  <Knapp type="flat">Flatknapp</Knapp>
+</Preview>
+
+## Disabled
+
+Alle knappene har støtte for disabled stil.
+
+<Alert variant="warning">
+  Merk at disabled knapper bør unngås, og at man heller bør bruke vanlige
+  knapper kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt.
+</Alert>
+
+<Preview
+  react={`<><Knapp disabled>Normal</Knapp>
+  <Knapp type="hoved" disabled>
+    Hoved
+  </Knapp>
+  <Knapp type="fare" disabled>
+    Fare
+  </Knapp>
+  <Knapp type="flat" disabled>
+    Flat
+  </Knapp></>`}
+>
+  <Knapp disabled>Normal</Knapp>
+
+<Knapp type="hoved" disabled>
+  Hoved
+</Knapp>
+
+<Knapp type="fare" disabled>
+  Fare
+</Knapp>
+
+  <Knapp type="flat" disabled>
+    Flat
+  </Knapp>
+</Preview>
+
+## Mini
+
+Alle knappene kan rendres i en mindre `32px` versjon.
+
+<Alert variant="warning">
+  Som hovedregel skal vi <strong>alltid</strong> bruke de store knappene våre.
+  For tilfeller med svært begrenset plass kan de mindre knappene brukes
+  <strong> unntaksvis ved klart behov</strong>.
+</Alert>
+
+<Preview
+  react={`<><Knapp mini>Normal</Knapp>
+<Knapp type="hoved" mini>
+  Hoved
+</Knapp>
+<Knapp type="fare" mini>
+  Fare
+</Knapp>
+<Knapp type="flat" mini>
+  Flat
+</Knapp>
+  <Knapp disabled mini>
+    Disabled
+  </Knapp></>`}
+>
+  <Knapp mini>Normal</Knapp>
+  <Knapp type="hoved" mini>
+    Hoved
+  </Knapp>
+  <Knapp type="fare" mini>
+    Fare
+  </Knapp>
+  <Knapp type="flat" mini>
+    Flat
+  </Knapp>
+  <Knapp disabled mini>
+    Disabled
+  </Knapp>
+</Preview>
+
+### Kompakt
+
+Bruk `kompakt` for å redusere høyre-/venstre-padding på knappene.
+
+<Preview
+  react={`<Knapp kompakt>
+    <Settings />
+    <span>Knapp</span>
+  </Knapp>`}
+>
+  <button className="knapp knapp--kompakt">
+    <Settings />
+    <span>Knapp</span>
+  </button>
+</Preview>
+
+## Med ikon
+
+<Alert variant="info">
+  Når du bruker ikoner er det viktig at du pakker inn teksten med
+  <code> &lt;span&gt;</code>-elementer for å påse riktig avstand til ikonet.
+</Alert>
+<br />
+<Alert variant="warning">
+  Husk at knapper med bare ikoner også må få en tekst-verdi av hensyn til
+  skjermlesere. Utility-klassen <code>sr-only</code> som gis av{" "}
+  <Link href="https://github.com/navikt/nav-frontend-moduler/blob/master/packages/node_modules/nav-frontend-core/less/_mixins.less">
+    mixins-fila i Core-pakken
+  </Link>{" "}
+  kan brukes for å skjule teksten visuelt.
+</Alert>
+
+<Preview
+  react={`<><Knapp>
+    <Settings />
+    <span>Normal</span>
+  </Knapp>
+<Knapp type="hoved">
+  <Settings />
+  <span>Hoved</span>
+</Knapp>
+<Knapp type="fare">
+  <Settings />
+  <span>Fare</span>
+</Knapp>
+<Knapp type="flat">
+  <Settings />
+  <span>Flat</span>
+</Knapp>
+  <Knapp disabled>
+    <Settings />
+    <span>Disabled</span>
+  </Knapp>
+  <Knapp>
+  <Settings />
+  <span className="sr-only">Knapp</span>
+</Knapp></>`}
+>
+  <Knapp>
+    <Settings />
+    <span>Normal</span>
+  </Knapp>
+<Knapp type="hoved">
+  <Settings />
+  <span>Hoved</span>
+</Knapp>
+<Knapp type="fare">
+  <Settings />
+  <span>Fare</span>
+</Knapp>
+<Knapp type="flat">
+  <Settings />
+  <span>Flat</span>
+</Knapp>
+<Knapp disabled>
+  <Settings />
+  <span>Disabled</span>
+</Knapp>
+<Knapp>
+  <Settings />
+  <span className="sr-only">Knapp</span>
+</Knapp>
+
+</Preview>
+
+## Med spinner
+
+Alle knappene våre har støtte for å vise en spinner.
+
+<Preview
+  react={`<><Knapp spinner>Normal</Knapp>
+  <Knapp type="hoved" spinner>Hoved</Knapp>
+  <Knapp type="fare" spinner>Fare</Knapp>
+  <Knapp type="flat" spinner>Flat</Knapp>
+  <Knapp disabled spinner>
+    Disabled
+  </Knapp></>`}
+>
+  <Knapp spinner>Normal</Knapp>
+
+<Knapp type="hoved" spinner>
+  Hoved
+</Knapp>
+
+<Knapp type="fare" spinner>
+  Fare
+</Knapp>
+
+<Knapp type="flat" spinner>
+  Flat
+</Knapp>
+
+  <Knapp disabled spinner>
+    Disabled
+  </Knapp>
+</Preview>
+
+## Tilgjengelighet
+
+### Unngå lenker som knapper
+
+For å oppfylle [WCAGs suksesskriterium 1.3.1](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/131-informasjon-og-relasjoner-niva) skal ting være kodet som det det ser ut som. Derfor skal ting som ser ut som knapper være nettopp knapper og ikke lenker.
+
+### Bakgrunnskontrast
+
+Ved bruk av standard/sekundær eller flatknapp bør man passe på at bakgrunnsfargen der de plasseres er enten hvit eller lys grå slik at kontrastkravene fra WCAG blir oppfylt.
+
+### Fareknappen
+
+Fareknappen skiller seg bare ut med farge, og bryter dermed egentlig med [WCAGs suksesskriterium 1.4.1](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/141-bruk-av-farge-niva). Vi har likevel valgt å ikke tilsette noe label for skjermleser. Dette har vi gjort fordi selve navnet på knappen forteller hva son skjer hvis man trykker på den, og fordi en ekstra label vil, etter vår vurdering, kunne snarere tilføye støy enn å skape mer oversikt for skjermleserbrukere.
+
+### Knapper med bare ikon
+
+Husk at knapper med bare ikoner også må få en tekst-verdi av hensyn til skjermlesere. Utility-klassen `sr-only` som gis av [mixins-fila i Core-pakken](https://github.com/navikt/nav-frontend-moduler/blob/master/packages/nav-frontend-core/less/_mixins.less) kan brukes for å skjule teksten visuelt.

docs/data/components/legacy/Alertstriper.mdx

@@ -0,0 +1,98 @@
+---
+title: Alertstriper
+---
+
+# Alertstriper
+
+Alertstripen er en komponent som benyttes for å gi brukeren varsler av ymse slag, og komponenten støtter forskjellige visninger basert på hvilken type varsel som formidles til brukeren.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-alertstriper classnames nav-frontend-alertstriper-style nav-frontend-core nav-frontend-ikoner-assets nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-alertstriper" imports="AlertStripe" defaultExport />
+
+## Default striper
+
+<Preview
+  react={`<><Alertstripe type="info">Nå kan du sende inn søknaden.</Alertstripe>
+  <Alertstripe type="suksess">Du har sendt søknaden.</Alertstripe>
+  <Alertstripe type="advarsel">
+    Det er mange som bruker nav.no nå, derfor kan det ta litt tid før søknaden
+    din kommer fram.
+  </Alertstripe>
+  <Alertstripe type="feil">
+    Det er ikke mulig å sende søknaden akkurat nå, vennligst prøv igjen senere.
+    Du er velkommen til å <Link href="#">følge med på hvordan det går</Link>.
+  </Alertstripe></>`}
+>
+  <Alertstripe type="info">Nå kan du sende inn søknaden.</Alertstripe>
+  <Alertstripe type="suksess">Du har sendt søknaden.</Alertstripe>
+  <Alertstripe type="advarsel">
+    Det er mange som bruker nav.no nå, derfor kan det ta litt tid før søknaden
+    din kommer fram.
+  </Alertstripe>
+  <Alertstripe type="feil">
+    Det er ikke mulig å sende søknaden akkurat nå, vennligst prøv igjen senere.
+    Du er velkommen til å <Link href="#">følge med på hvordan det går</Link>.
+  </Alertstripe>
+</Preview>
+
+## Inline striper
+
+<Preview
+  react={`<><Alertstripe type="info" form="inline">
+    Nå kan du sende inn søknaden.
+  </Alertstripe>
+  <Alertstripe type="suksess" form="inline">
+    Du har sendt søknaden.
+  </Alertstripe>
+  <Alertstripe type="advarsel" form="inline">
+    Det er mange som bruker nav.no nå, derfor kan det ta litt tid før søknaden
+    din kommer fram.
+  </Alertstripe>
+  <Alertstripe type="feil" form="inline">
+    Det er ikke mulig å sende søknaden akkurat nå, vennligst prøv igjen senere.
+    Du er velkommen til å <Link href="#">følge med på hvordan det går</Link>.
+  </Alertstripe></>`}
+>
+  <Alertstripe type="info" form="inline">
+    Nå kan du sende inn søknaden.
+  </Alertstripe>
+  <Alertstripe type="suksess" form="inline">
+    Du har sendt søknaden.
+  </Alertstripe>
+  <Alertstripe type="advarsel" form="inline">
+    Det er mange som bruker nav.no nå, derfor kan det ta litt tid før søknaden
+    din kommer fram.
+  </Alertstripe>
+  <Alertstripe type="feil" form="inline">
+    Det er ikke mulig å sende søknaden akkurat nå, vennligst prøv igjen senere.
+    Du er velkommen til å <Link href="#">følge med på hvordan det går</Link>.
+  </Alertstripe>
+</Preview>
+
+## Tilgjengelighet
+
+### Dynamisk visning
+
+Hvis alertstripene skal dukke opp dynamisk, for eksempel som en reaksjon på noe brukeren gjør, er det viktig at det allerede ligger et element på siden som har definert en såkalt "live region" hvor Alertstripene skal bli rendret i. Dette kan gjøres ved å gi container-elementet et `aria-live`-attributt med verdien `polite` eller `assertive`.
+
+<Bash code={`<div aria-live="polite">
+  <!-- her kommer det en Alertstripe når brukeren klikker på noe -->
+</div>`}/>
+
+Merk at `aria-live="assertive"` bør brukes varsomt og kun når det er nødvendig å få brukerens oppmerksomhet umiddelbart. Et alternativ er å gi konteiner-elementet et `role="alert"`-attributt, som er akkurat det samme som å sette `aria-live="assertive"` og `aria-atomic="true`.
+
+### Mer informasjon
+
+- [Using ARIA role=alert or Live Regions to Identify Errors (W3.org)](https://www.w3.org/TR/WCAG20-TECHS/ARIA19.html)
+- [ARIA Live Regions (Mozilla Developer Network)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+- [Using the alert role (Mozilla Developer Network)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role)
+- [User Notifications (W3.org)](https://www.w3.org/WAI/tutorials/forms/notifications/)

docs/data/components/legacy/Chevron.mdx

@@ -0,0 +1,53 @@
+---
+title: Chevron
+---
+
+# Chevron
+
+Disse ikonene bruker vi for å forsterke forventing man kan til av interaksjonen med en modul.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-chevron classnames nav-frontend-chevron-style prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-chevron" imports="Chevron" defaultExport />
+
+## Liten (default)
+
+<Preview
+  react={`<><Chevron type={"venstre"} />
+  <Chevron type={"høyre"} />
+  <Chevron type={"opp"} />
+  <Chevron type={"ned"} /></>`}
+>
+  <Chevron type={"venstre"} />
+  <Chevron type={"høyre"} />
+  <Chevron type={"opp"} />
+  <Chevron type={"ned"} />
+</Preview>
+
+## Stor
+
+<Preview
+  react={`<><Chevron stor type={"venstre"} />
+  <Chevron stor type={"høyre"} />
+  <Chevron stor type={"opp"} />
+  <Chevron stor type={"ned"} /></>`}
+>
+  <Chevron stor type={"venstre"} />
+  <Chevron stor type={"høyre"} />
+  <Chevron stor type={"opp"} />
+  <Chevron stor type={"ned"} />
+</Preview>
+
+## Tilgjengelighet
+
+### Tilhørighet og avstand
+
+Prøv å unngå at chevron står for langt unna teksten den hører til. Er det for stor avstand blir det vanskelig for personer som bruker forstørrelsesprogramvare å se hvilke elmenter som hører sammen.

docs/data/components/legacy/Ekspanderbartpanel.mdx

@@ -0,0 +1,112 @@
+---
+title: Ekspanderbartpanel
+---
+
+# Ekspanderbartpanel
+
+Ekspanderbartpanel er et panel som kan ekspandere eller kollapse innhold. Komponenten bruker npm-pakken React-collapse og extender props fra den.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-ekspanderbartpanel @types/react-collapse classnames nav-frontend-ekspanderbartpanel-style nav-frontend-chevron-style nav-frontend-core nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-js-utils lodash.throttle prop-types react react-collapse --save`}
+/>
+
+<Npm
+  packName="nav-frontend-ekspanderbartpanel"
+  imports="Ekspanderbartpanel"
+  defaultExport
+/>
+
+## Normal
+
+<Preview
+  react={`<Ekspanderbartpanel tittel="Klikk her for å åpne/lukke panelet">
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>`}
+>
+  <Ekspanderbartpanel tittel="Klikk her for å åpne/lukke panelet">
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>
+</Preview>
+
+## Endre tekststørrelse
+
+For å endre tekst-størrelsen på åpne/lukke-knappen kan man sende inn en annen
+[typografi-type](/components/typografi) via `tittel`-propen.
+
+<Preview
+  react={`<Ekspanderbartpanel
+    tittel={<Normaltekst>Klikk her for å åpne/lukke panelet</Normaltekst>}
+  >
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>`}
+>
+  <Ekspanderbartpanel
+    tittel={<Normaltekst>Klikk her for å åpne/lukke panelet</Normaltekst>}
+  >
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>
+</Preview>
+
+## Avansert innhold i åpne/lukke-knapp
+
+Komponentens `tittel`-prop støtter rikt HTML-innhold.
+
+<Preview
+  react={`<Ekspanderbartpanel
+    tittel={
+      <div>
+        <Undertittel>Klikk her for å åpne/lukke panelet</Undertittel>
+        <Etikett type="suksess">En etikett</Etikett>
+        <Etikett type="fokus" style={{ marginLeft: "0.5rem" }}>
+          En annen etikett
+        </Etikett>
+      </div>
+    }
+  >
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>`}
+>
+  <Ekspanderbartpanel
+    tittel={
+      <div>
+        <Undertittel>Klikk her for å åpne/lukke panelet</Undertittel>
+        <Etikett type="suksess">En etikett</Etikett>
+        <Etikett type="fokus" style={{ marginLeft: "0.5rem" }}>
+          En annen etikett
+        </Etikett>
+      </div>
+    }
+  >
+    Panelet vil da ekspandere og vise innholdet.
+  </Ekspanderbartpanel>
+</Preview>
+
+## Kontroller komponenten selv
+
+Styr komponent fra ekstern state (controlled components).
+
+<Preview
+  react={`<div>
+      <Knapp onClick={() => setOpen(true)} style={btnStyle}>
+        Åpne
+      </Knapp>
+      <Knapp onClick={() => setOpen(false)} style={btnStyle}>
+        Lukke
+      </Knapp>
+      <EkspanderbartpanelBase
+        tittel="Kan også klikke her"
+        apen={open}
+        onClick={() => setOpen((open) => !open)}
+      >
+        Alt innholdet ditt
+      </EkspanderbartpanelBase>
+    </div>`}
+>
+  <EkspanderbartpanelExample />
+</Preview>

docs/data/components/legacy/Etikett.mdx

@@ -0,0 +1,85 @@
+---
+title: Etikett
+---
+
+# Etikett
+
+Etiketter er ment for rask visuell kategorisering og organisering av elementer, ved bruk av farge og beskrivende nøkkelord.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-etiketter classnames nav-frontend-core nav-frontend-etiketter-style nav-frontend-typografi nav-frontend-typografi-style prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-etiketter" imports="Etikett" defaultExport />
+
+## Alle etiketter side om side
+
+Vi bruker etiketter for å vise status i en handling. Standard farger på etikettene er basert på
+informasjon til brukere, men man kan skape egne etikker med eget farge og nøkkelord. Bruk etiketter
+sparsomt. Mange etiketter med forskjellige farger og grupperinger kan skape mer rot en orden.
+
+<Preview
+  react={`<><Etikett type="suksess">Suksess</Etikett>&nbsp;
+  <Etikett type="info">Info</Etikett>&nbsp;
+  <Etikett type="advarsel">Advarsel</Etikett>&nbsp;
+  <Etikett type="fokus">Fokus</Etikett></>`}
+>
+  <Etikett type="suksess">Suksess</Etikett>&nbsp;
+  <Etikett type="info">Info</Etikett>&nbsp;
+  <Etikett type="advarsel">Advarsel</Etikett>&nbsp;
+  <Etikett type="fokus">Fokus</Etikett>
+</Preview>
+
+## Mini
+
+Alle etiketter kan rendres i en mindre `24px` versjon med `14px` font.
+
+<Alert variant="warning">
+  Som hovedregel burde man alltid bruke de normale etikettene våre. For
+  tilfeller med svært begrenset plass kan de mindre etikettene brukes{" "}
+  <strong>unntaksvis ved klart behov</strong>.
+</Alert>
+
+<Preview
+  react={`<><Etikett mini type="suksess">
+    Suksess
+  </Etikett>
+  <Etikett mini type="info">
+    Info
+  </Etikett>
+  <Etikett mini type="advarsel">
+    Advarsel
+  </Etikett>
+  <Etikett mini type="fokus">
+    Fokus
+  </Etikett></>`}
+>
+  <Etikett mini type="suksess">
+    Suksess
+  </Etikett>
+  <Etikett mini type="info">
+    Info
+  </Etikett>
+  <Etikett mini type="advarsel">
+    Advarsel
+  </Etikett>
+  <Etikett mini type="fokus">
+    Fokus
+  </Etikett>
+</Preview>
+
+## Tilgjengelighet
+
+### Farge og tekst må høre sammen
+
+Pass på at fargen og teksten på etiketten alltid samsvarer med hverandre. Da forhinder du at personer med dårlig fargesyn, eller en dårlig skjerm, går glipp av informasjon.
+
+### Mer informasjon
+
+- [WCAG 1.4.1: Bruk av farge](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/141-bruk-av-farge-niva)

docs/data/components/legacy/Hjelpetekst.mdx

@@ -0,0 +1,137 @@
+---
+title: Hjelpetekst
+---
+
+# Hjelpetekst
+
+Hjelpetekst er en knapp som kan åpne en Popover med kontekstuell informasjon.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-hjelpetekst classnames nav-frontend-hjelpetekst-style nav-frontend-core nav-frontend-typografi-style nav-frontend-ikoner-assets nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-popover nav-frontend-popover-style react-dom --save`}
+/>
+
+<Npm packName="nav-frontend-hjelpetekst" imports="Hjelpetekst" defaultExport />
+
+## Normal
+
+Hjelpetekst brukes når brukeren kan trenge mer informasjon, men hvor det ikke er naturlig
+å bruke plass på det i grensesnittet. Dette kan for eksempel være for å forklare vanskelige
+begreper, gi veiledning i utfylling av skjema-felter eller utdype bakgrunn for et regelverk.
+
+<Preview
+  react={`<Hjelpetekst>
+    Innholdet vil vises når brukeren klikker på knappen.
+  </Hjelpetekst>`}
+>
+  <Hjelpetekst>
+    Innholdet vil vises når brukeren klikker på knappen.
+  </Hjelpetekst>
+</Preview>
+
+## Kombinasjon med skjemafelt
+
+For å enkelt knytte Hjelpetekst-komponenten til et skjemafelt kan komponenten sendes inn
+via `label`-propen til skjemafeltet.
+
+<Preview
+  react={`<Input
+    id="min-input"
+    label={
+      <div style={{ display: "flex" }}>
+        Fødselsnummer
+        <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+          Innholdet vil vises når brukeren klikker på knappen.
+        </Hjelpetekst>
+      </div>
+    }
+  />`}
+>
+  <Input
+    id="min-input"
+    label={
+      <div style={{ display: "flex" }}>
+        Fødselsnummer
+        <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+          Innholdet vil vises når brukeren klikker på knappen.
+        </Hjelpetekst>
+      </div>
+    }
+  />
+</Preview>
+
+## Posisjon av popup
+
+Du kan bestemme hvor popup-ruten dukker opp.
+
+<Preview
+  react={`<><Hjelpetekst type="over">Denne vil åpnes over knappen.</Hjelpetekst>
+  <Hjelpetekst type="over-venstre">
+    Denne vil åpnes over knappen, justert fra venstre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="over-hoyre">
+    Denne vil åpnes over knappen, justert fra høyre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="under">Denne vil åpnes under knappen.</Hjelpetekst>
+  <Hjelpetekst type="under-venstre">
+    Denne vil åpnes under knappen, justert fra venstre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="under-hoyre">
+    Denne vil åpnes under knappen, justert fra høyre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="venstre">
+    Denne vil åpnes til venstre for knappen.
+  </Hjelpetekst>
+  <Hjelpetekst type="hoyre">Denne vil åpnes til høyre for knappen.</Hjelpetekst></>`}
+>
+  <Hjelpetekst type="over">Denne vil åpnes over knappen.</Hjelpetekst>
+  <Hjelpetekst type="over-venstre">
+    Denne vil åpnes over knappen, justert fra venstre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="over-hoyre">
+    Denne vil åpnes over knappen, justert fra høyre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="under">Denne vil åpnes under knappen.</Hjelpetekst>
+  <Hjelpetekst type="under-venstre">
+    Denne vil åpnes under knappen, justert fra venstre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="under-hoyre">
+    Denne vil åpnes under knappen, justert fra høyre kant.
+  </Hjelpetekst>
+  <Hjelpetekst type="venstre">
+    Denne vil åpnes til venstre for knappen.
+  </Hjelpetekst>
+  <Hjelpetekst type="hoyre">Denne vil åpnes til høyre for knappen.</Hjelpetekst>
+</Preview>
+
+## Tilgjengelighet
+
+### Assosiasjon
+
+Hjelpeteksten bør få en logisk kobling til elementet som det forsøker å beskrive/støtte.
+
+Om hjelpeteksten må plasseres på utsiden av `<label>`, eller på andre måter ikke har noen annen logisk kobling til elementet som det forsøker å beskrive, kan dette løses ved å bruke `aria-describedby` og `aria-labelledby` slik:
+
+<Bash
+  code={`<>
+  <span id="mitt-faguttrykk" aria-describedby="min-hjelpetekst">
+    Restarbeidsevne
+  </span>
+  <Hjelpetekst
+    id="min-hjelpetekst"
+    aria-labelledby="mitt-faguttrykk"
+  >
+    Mulighet til å jobbe litt eller delvis
+  </Hjelpetekst>
+</>`}
+/>
+
+### Mer informasjon
+
+- [WCAG 1.1.1: Ikke-tekstlig innhold](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/111-ikke-tekstlig-innhold-niva)
+- [WCAG 3.3.5: Hjelp](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/ikke-lovpalagte-krav/335-hjelp-niva-aaa)

docs/data/components/legacy/Lesmerpanel.mdx

@@ -0,0 +1,65 @@
+---
+title: Lesmerpanel
+---
+
+# Lesmerpanel
+
+Lesmerpanel er en komponent som lar deg ekspandere og kollapse innhold. Passer for lengre tekster og infopanel der ikke alt innhold er like relevant. Komponenten bruker npm-pakken React-collapse og extender props fra den.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-lesmerpanel classnames nav-frontend-chevron nav-frontend-chevron-style prop-types react nav-frontend-js-utils lodash.throttle nav-frontend-lesmerpanel-style nav-frontend-core nav-frontend-paneler-style react-collapse --save`}
+/>
+
+<Npm packName="nav-frontend-lesmerpanel" imports="Lesmerpanel" defaultExport />
+
+## Normal
+
+<Preview
+  react={`<Lesmerpanel
+    intro={
+      <span>
+        Introduksjonstekst her som <a href="#">kan være HTML</a>
+      </span>
+    }
+    border
+  >
+    <div>
+      <p style={{ marginTop: 0 }}>
+        Du bestemmer selv om du vil bruke sykmeldingen eller avbryte den. Du kan
+        også jobbe i kombinasjon med sykmelding. Det kommer an på hva sykdommen
+        din tillater og hva det er praktisk mulig å få til på arbeidsplassen.
+      </p>
+      <p>
+        Greit å vite: Arbeidsgiveren har plikt til å legge til rette for at du
+        kan jobbe helt eller delvis selv om du er syk.
+      </p>
+    </div>
+  </Lesmerpanel>`}
+>
+  <Lesmerpanel
+    intro={
+      <span>
+        Introduksjonstekst her som <a href="#">kan være HTML</a>
+      </span>
+    }
+    border
+  >
+    <div>
+      <p style={{ marginTop: 0 }}>
+        Du bestemmer selv om du vil bruke sykmeldingen eller avbryte den. Du kan
+        også jobbe i kombinasjon med sykmelding. Det kommer an på hva sykdommen
+        din tillater og hva det er praktisk mulig å få til på arbeidsplassen.
+      </p>
+      <p>
+        Greit å vite: Arbeidsgiveren har plikt til å legge til rette for at du
+        kan jobbe helt eller delvis selv om du er syk.
+      </p>
+    </div>
+  </Lesmerpanel>
+</Preview>

docs/data/components/legacy/Modal.mdx

@@ -0,0 +1,42 @@
+---
+title: Modal
+---
+
+# Modal
+
+Modal er et midtstilt vindu som legger seg over det andre innholdet, med en mørk gjennomsiktig bakgrunn. Komponenten bruker npm-pakken React-modal og extender props fra den.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-modal @types/react-modal classnames nav-frontend-lukknapp nav-frontend-lukknapp-style nav-frontend-core prop-types react nav-frontend-modal-style nav-frontend-paneler-style react-modal --save`}
+/>
+
+<Npm packName="nav-frontend-modal" imports="Modal" defaultExport />
+
+## Normal
+
+Når modalen åpnes vil den legge seg over det andre innholdet på siden. Modalen kan lukkes igjen ved å klikke på
+lukk-knappen, klikke utenfor modalruten eller ved å trykke "Esc" på tastaturet. Innholdet i modalruten kan
+bestemmes helt fritt.
+
+<Preview
+  hideHtml
+  react={`<div>
+      <Knapp onClick={() => setOpen(true)}>Klikk for å åpne modal</Knapp>
+      <Modal
+        isOpen={open}
+        onRequestClose={() => setOpen(false)}
+        closeButton
+        contentLabel="Min modalrute"
+      >
+        <div style={{ padding: "2rem 2.5rem" }}>Innhold her</div>
+      </Modal>
+    </div>`}
+>
+  <ModalExample />
+</Preview>

docs/data/components/legacy/Panel.mdx

@@ -0,0 +1,27 @@
+---
+title: Panel
+---
+
+# Panel
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-paneler classnames nav-frontend-paneler-style nav-frontend-core nav-frontend-typografi nav-frontend-typografi-style prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-paneler" imports="Panel" defaultExport />
+
+## Normal
+
+Paneler brukes til å ramme inn innhold. På hvit bakgrunn bør paneler få en 1px tykk border med farge
+[@navGra20](/resources/colors) (#C6C2BF). Intern avstand fra panelkant til innhold skal være
+minimum `16px` (`1rem`).
+
+<Preview react={`<Panel border>Et helt vanlig panel med innhold.</Panel>`}>
+  <Panel border>Et helt vanlig panel med innhold.</Panel>
+</Preview>

docs/data/components/legacy/Popover.mdx

@@ -0,0 +1,190 @@
+---
+title: Popover
+---
+
+# Popover
+
+Popover er et flytende panel av vilkårlig størrelse som kan posisjonere seg selv i forhold til et annet element.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-popover classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-popover-style react-dom --save`}
+/>
+
+<Npm packName="nav-frontend-popover" imports="Popover" defaultExport />
+
+## Normal
+
+Normal variant av komponenten er skjult. For å åpne komponenten må den få et annet element som anker.
+Typisk er det elementet som åpner komponenten som bør bli komponentens anker (som i eksempelet med knappen
+nedenfor). Popover-komponenten vil da posisjonere seg selv i forhold til dette anker-elementet.
+
+<Preview
+  react={`<div>
+        <Knapp
+          onClick={(e) => this.togglePopover(e.currentTarget)}
+          aria-expanded={this.state.anker !== undefined}
+          aria-controls={this.popoverId}
+          aria-haspopup="dialog"
+        >
+          Åpne popover
+        </Knapp>
+        <Popover
+          id={this.popoverId}
+          ankerEl={this.state.anker}
+          onRequestClose={() => this.setState({ anker: undefined })}
+        >
+          <p style={{ padding: "1rem" }}>Dette er en popover.</p>
+        </Popover>
+      </div>`}
+>
+  <PopoverNormalEksempel />
+</Preview>
+
+## Orientering
+
+Komponenten kan posisjonere seg med forskjellige orienteringer i forhold til anker-elementet. Default er `over`, men
+kan også være `under`, `hoyre`, `venstre`, `over-venstre`, `over-hoyre`, `under-venstre` eller `under-hoyre`.
+
+<!--
+<Preview react={`<div>
+        <div style={{ width: 204 }}>
+          <Select
+            label="Velg orientering"
+            onChange={(e) => this.setState({ orientering: e.target.value })}
+            defaultValue={this.state.orientering}
+          >
+            <option value="over">Over</option>
+            <option value="under">Under</option>
+            <option value="hoyre">Høyre</option>
+            <option value="venstre">Venstre</option>
+            <option value="over-venstre">Over, fra venstre kant</option>
+            <option value="over-hoyre">Over, fra høyre kant</option>
+            <option value="under-venstre">Under, fra venstre kant</option>
+            <option value="under-hoyre">Under, fra høyre kant</option>
+          </Select>
+          <Knapp onClick={(e) => this.togglePopover(e.currentTarget)}>
+            Åpne popover
+          </Knapp>
+        </div>
+
+        <Popover
+          ankerEl={this.state.anker}
+          onRequestClose={() => this.setState({ anker: undefined })}
+          orientering={this.state.orientering}
+        >
+          <p style={{ margin: "1rem", maxWidth: 300 }}>
+            Dette er en popover som bruker{" "}
+            <code className="inline">orientering</code>
+            -propen til å posisjonere seg i forhold til ankeret sitt.
+          </p>
+        </Popover>
+      </div>`}>
+
+  <PopoverOrienteringEksempel />
+</Preview>
+
+
+ -->
+
+## Uten pil
+
+Du kan også skru av pilen og få komponenten til å posisjonere seg helt inntil anker-elementet sitt. Kjekt hvis man f.eks. vil lage typiske dropdown-menyer:
+
+<Preview
+  react={`<div>
+        <Menyknapp
+          id={this.buttonId}
+          onClick={(e) => this.togglePopover(e.currentTarget)}
+          aria-expanded={this.state.anker !== undefined}
+          aria-controls={this.popoverId}
+          aria-haspopup="menu"
+        >
+          <span>Dropdown meny</span>
+        </Menyknapp>
+        <Popover
+          id={this.popoverId}
+          ankerEl={this.state.anker}
+          onRequestClose={() => this.setState({ anker: undefined })}
+          orientering="under"
+          autoFokus={false}
+          tabIndex={-1}
+          utenPil
+        >
+          <ul
+            className="menu"
+            role="menu"
+            style={{ minWidth: 190 }}
+            aria-labelledby={this.buttonId}
+          >
+            <li>
+              <a
+                role="menuitem"
+                className="lenke"
+                href="#"
+                ref={(node) => node && node.focus()}
+              >
+                Et valg
+              </a>
+            </li>
+            <li>
+              <a role="menuitem" className="lenke" href="#">
+                Et annet valg
+              </a>
+            </li>
+            <li>
+              <a role="menuitem" className="lenke" href="#">
+                Et tredje valg
+              </a>
+            </li>
+            <li>
+              <a role="menuitem" className="lenke" href="#">
+                Et fjerde valg
+              </a>
+            </li>
+          </ul>
+        </Popover>
+      </div>`}
+>
+  <PopoverDropdownEksempel />
+</Preview>
+
+## Input-trigger
+
+<Preview
+  react={`<div>
+        <Input label="Skriv noe" onChange={this.handleChange} />
+        <Popover
+          id={this.popoverId}
+          ankerEl={this.state.anker}
+          onRequestClose={() => this.setState({ anker: undefined })}
+          orientering="under-venstre"
+          autoFokus={false}
+          utenPil
+        >
+          <p style={{ padding: "1rem" }}>Dette er en popover.</p>
+        </Popover>
+      </div>`}
+>
+  <PopoverInputEksempel />
+</Preview>
+
+## Base
+
+Selve Popover-vinduet er en selvstendig "dum" komponent kalt `PopoverBase` som du kan bruke hvis du
+ønsker å håndtere posisjonering osv. manuelt.
+
+<Preview
+  react={`<PopoverBase>
+    <div style={{ padding: "1rem" }}>Dette er en PopoverBase</div>
+  </PopoverBase>`}
+>
+  <PopoverBase>
+    <div style={{ padding: "1rem" }}>Dette er en PopoverBase</div>
+  </PopoverBase>
+</Preview>

docs/data/components/legacy/Snakkeboble.mdx

@@ -0,0 +1,53 @@
+---
+title: Snakkeboble
+---
+
+# Snakkeboble
+
+Snakkebobler brukes for å vise en direkte melding eller informasjon fra en konkret avsender. Snakkebobler bør brukes som del av en logg over beskjeder sendt frem og tilbake mellom to eller flere deltagere.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-snakkeboble classnames nav-frontend-paneler nav-frontend-paneler-style nav-frontend-core nav-frontend-typografi nav-frontend-typografi-style prop-types react nav-frontend-snakkeboble-style --save`}
+/>
+
+<Npm packName="nav-frontend-snakkeboble" imports="Snakkeboble" defaultExport />
+
+## Venstrejustert
+
+<Preview
+  react={`<Snakkeboble topp="14.07.2017 kl. 10:12">
+    Hei! Jeg lurer på en ting...
+  </Snakkeboble>`}
+>
+  <Snakkeboble topp="14.07.2017 kl. 10:12">
+    Hei! Jeg lurer på en ting...
+  </Snakkeboble>
+</Preview>
+
+## Høyrejustert
+
+<Preview
+  react={`<Snakkeboble topp="14.07.2017 kl. 10:12" pilHoyre={true}>
+    Hei! Jeg lurer på en ting...
+  </Snakkeboble>`}
+>
+  <Snakkeboble topp="14.07.2017 kl. 10:12" pilHoyre={true}>
+    Hei! Jeg lurer på en ting...
+  </Snakkeboble>
+</Preview>
+
+## Tilgjengelighet
+
+### Bruk av ikoner
+
+Når du viser et ikon i snakkeboblen, må den informasjonen også formidles til skjermleseren. Henter du ikonet inn gjennom css-klassen, må du legge til informasjon om hva ikonet viser, for eksempel gjennom å legge inn en aria-label som beskriver ikonet.
+
+### Mer informasjon
+
+- [WCAG 1.1.1: Ikke-tekstlig innhold (Nivå A)](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/111-ikke-tekstlig-innhold-niva)

docs/data/components/legacy/Spinner.mdx

@@ -0,0 +1,29 @@
+---
+title: Spinner
+---
+
+# Spinner
+
+Spinneren skal gi en indikasjon på at noe tar tid og trygge brukeren på at applikasjonen fortsatt kjører.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-spinner classnames nav-frontend-ikoner-assets nav-frontend-spinner-style prop-types react --save`}
+/>
+
+<Npm packName="nav-frontend-spinner" imports="spinner" defaultExport />
+
+<Preview react={`<Spinner />`}>
+  <Spinner />
+</Preview>
+
+## Transparent
+
+<Preview react={`<Spinner transparent />`}>
+  <Spinner transparent />
+</Preview>

docs/data/components/legacy/Tabell.mdx

@@ -0,0 +1,775 @@
+---
+title: Tabell
+---
+
+# Tabell
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-tabell-style nav-frontend-core nav-frontend-knapper-style nav-frontend-typografi-style --save`}
+/>
+
+<Bash code={`import "nav-frontend-tabell-style"`} copy language="jsx" />
+
+## Enkel tabell
+
+Legg til stilarket fra pakken og sett CSS-klassen `tabell` på HTML-tabellen din.
+
+<Preview
+  react={`<table className="tabell">
+    <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>`}
+>
+  <table className="tabell">
+    <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>
+</Preview>
+
+## Stripete tabell
+
+Bruk modifikatoren `tabell--stripet` for å gjøre annenhver tabellrad grå.
+
+<Preview
+  react={`<table className="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>`}
+>
+  <table className="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>
+</Preview>
+
+## Border tabell
+
+Bruk modifikatoren `tabell--border` for å gi alle cellene en tydelig border på alle sidene.
+
+<Preview
+  react={`<table className="tabell tabell--border">
+    <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>`}
+>
+  <table className="tabell tabell--border">
+    <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>
+</Preview>
+
+## Sorterbar tabell
+
+Knapper som er barn av `th`-elementene blir stylet til å være helt utfyllende og får et :after-element med to små chevrons som peker opp og ned for å indikere at kolonnen kan sorteres i vilkårlig rekkefølge. Bruk klassene `tabell__th--sortert-desc` og `tabell__th--sortert-asc` for at lenkene skal indikere hvilken retning kolonnen er sortert. Bruk klassen `tabell__td--sortert` på cellene i den sorterte kolonnen for å gi disse en svak grå bakgrunn.
+
+<Alert variant="warning">
+  Husk at du må legge til både <code>aria-sort</code> og{" "}
+  <code>role="columnheader"</code> på alle tabell-headere som skal sorteres.
+  Bruk <code>none</code>/<code>descending</code>/<code>ascending</code> som
+  verdier til <code>aria-sort</code> alt ettersom.
+</Alert>
+
+<Preview
+  react={`<table className="tabell">
+    <thead>
+      <tr>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter ID stigende">
+            ID
+          </button>
+        </th>
+        <th
+          role="columnheader"
+          aria-sort="descending"
+          className="tabell__th--sortert-desc"
+        >
+          <button aria-label="Sorter Fornavn synkende">
+            Fornavn
+          </button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Etternavn stigende">
+            Etternavn
+          </button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Rolle stigende">
+            Rolle
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>3</td>
+        <td className="tabell__td--sortert">Geordi</td>
+        <td>La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td className="tabell__td--sortert">Jean-Luc</td>
+        <td>Picard</td>
+        <td>Kaptein</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td className="tabell__td--sortert">William</td>
+        <td>Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+  </table>`}
+>
+  <table className="tabell">
+    <thead>
+      <tr>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter ID stigende">ID</button>
+        </th>
+        <th
+          role="columnheader"
+          aria-sort="descending"
+          className="tabell__th--sortert-desc"
+        >
+          <button aria-label="Sorter Fornavn synkende">Fornavn</button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Etternavn stigende">Etternavn</button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Rolle stigende">Rolle</button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>3</td>
+        <td className="tabell__td--sortert">Geordi</td>
+        <td>La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td className="tabell__td--sortert">Jean-Luc</td>
+        <td>Picard</td>
+        <td>Kaptein</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td className="tabell__td--sortert">William</td>
+        <td>Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+  </table>
+</Preview>
+
+## Selekterbar tabell
+
+[Checkbokser](/components/checkbox) som blir plassert i første celle på en rad vil bli stylet til å skjule sin
+label og oppta kun 24x24 piksler. Bruk klassen `tabell__tr--valgt` på `tr`-elementene for å style alle cellene i den
+raden som "valgt". Hvis det er ønsket at label skal vises på første elementet kan
+man legge til `data-label="true"` på selve checkboxen.
+
+<Alert variant="warning">
+  Husk å legg til <code>aria-selected="true"</code> på <code>tr</code>-elementet
+  som representerer den valgte raden.
+</Alert>
+
+<Preview react={`<table className="tabell">
+    <thead>
+      <tr>
+        <th width="1">
+          <Checkbox label="Velg alle" />
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Fornavn stigende">
+            Fornavn
+          </button>
+        </th>
+        <th
+          role="columnheader"
+          aria-sort="descending"
+          className="tabell__th--sortert-desc"
+        >
+          <button aria-label="Sorter Etternavn stigende">
+            Etternavn
+          </button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Rolle stigende">
+            Rolle
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <Checkbox label="Velg denne raden" />
+        </td>
+        <td>Geordi</td>
+        <td className="tabell__td--sortert">La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr className="tabell__tr--valgt" aria-selected="true">
+        <td>
+          <Checkbox label="Velg denne raden" checked readOnly />
+        </td>
+        <td>Jean-Luc</td>
+        <td className="tabell__td--sortert">Picard</td>
+        <td>Kaptein</td>
+      </tr>
+      <tr>
+        <td>
+          <Checkbox label="Velg denne raden" />
+        </td>
+        <td>William</td>
+        <td className="tabell__td--sortert">Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+  </table>`}>
+  <table className="tabell">
+    <thead>
+      <tr>
+        <th width="1">
+          <Checkbox label="Velg alle" />
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Fornavn stigende">
+            Fornavn
+          </button>
+        </th>
+        <th
+          role="columnheader"
+          aria-sort="descending"
+          className="tabell__th--sortert-desc"
+        >
+          <button aria-label="Sorter Etternavn stigende">
+            Etternavn
+          </button>
+        </th>
+        <th role="columnheader" aria-sort="none">
+          <button aria-label="Sorter Rolle stigende">
+            Rolle
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <Checkbox label="Velg denne raden" />
+        </td>
+        <td>Geordi</td>
+        <td className="tabell__td--sortert">La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr className="tabell__tr--valgt" aria-selected="true">
+        <td>
+          <Checkbox label="Velg denne raden" checked readOnly />
+        </td>
+        <td>Jean-Luc</td>
+        <td className="tabell__td--sortert">Picard</td>
+        <td>Kaptein</td>
+      </tr>
+      <tr>
+        <td>
+          <Checkbox label="Velg denne raden" />
+        </td>
+        <td>William</td>
+        <td className="tabell__td--sortert">Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+
+  </table>
+</Preview>
+
+## Tabell med input-felter
+
+<Preview react={`<table className="tabell">
+    <thead>
+      <tr>
+        <th id="header-fornavn">
+          <button aria-label="Sorter Fornavn stigende">
+            Fornavn
+          </button>
+        </th>
+        <th id="header-etternavn">
+          <button aria-label="Sorter Etternavn stigende">
+            Etternavn
+          </button>
+        </th>
+        <th id="header-rolle">
+          <button aria-label="Sorter Rolle stigende">
+            Rolle
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Geordi</td>
+        <td>La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr>
+        <td>
+          <Input aria-labelledby="header-fornavn" defaultValue="Jean-Luc" />
+        </td>
+        <td>
+          <Input aria-labelledby="header-etternavn" defaultValue="Picard" />
+        </td>
+        <td>
+          <Input aria-labelledby="header-rolle" defaultValue="Kaptein" />
+        </td>
+      </tr>
+      <tr>
+        <td>William</td>
+        <td>Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+  </table>`}>
+  <table className="tabell">
+    <thead>
+      <tr>
+        <th id="header-fornavn">
+          <button aria-label="Sorter Fornavn stigende">
+            Fornavn
+          </button>
+        </th>
+        <th id="header-etternavn">
+          <button aria-label="Sorter Etternavn stigende">
+            Etternavn
+          </button>
+        </th>
+        <th id="header-rolle">
+          <button aria-label="Sorter Rolle stigende">
+            Rolle
+          </button>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Geordi</td>
+        <td>La Forge</td>
+        <td>Sjefsingeniør</td>
+      </tr>
+      <tr>
+        <td>
+          <Input aria-labelledby="header-fornavn" defaultValue="Jean-Luc" />
+        </td>
+        <td>
+          <Input aria-labelledby="header-etternavn" defaultValue="Picard" />
+        </td>
+        <td>
+          <Input aria-labelledby="header-rolle" defaultValue="Kaptein" />
+        </td>
+      </tr>
+      <tr>
+        <td>William</td>
+        <td>Riker</td>
+        <td>Kommandør</td>
+      </tr>
+    </tbody>
+
+  </table>
+</Preview>
+
+## Komplisert header
+
+<Preview
+  react={`<table className="tabell">
+    <thead>
+      <tr>
+        <td></td>
+        <th>ID</th>
+        <th>Fornavn</th>
+        <th>Etternavn</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Kaptein</td>
+        <td>1</td>
+        <td>Jean-Luc</td>
+        <td>Picard</td>
+      </tr>
+      <tr>
+        <td>Kommandør</td>
+        <td>2</td>
+        <td>William</td>
+        <td>Riker</td>
+      </tr>
+      <tr>
+        <td>Sjefsingeniør</td>
+        <td>3</td>
+        <td>Geordi</td>
+        <td>La Forge</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td></td>
+        <th>ID</th>
+        <th>Fornavn</th>
+        <th>Etternavn</th>
+      </tr>
+    </tfoot>
+  </table>`}
+>
+  <table className="tabell">
+    <thead>
+      <tr>
+        <td></td>
+        <th>ID</th>
+        <th>Fornavn</th>
+        <th>Etternavn</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Kaptein</td>
+        <td>1</td>
+        <td>Jean-Luc</td>
+        <td>Picard</td>
+      </tr>
+      <tr>
+        <td>Kommandør</td>
+        <td>2</td>
+        <td>William</td>
+        <td>Riker</td>
+      </tr>
+      <tr>
+        <td>Sjefsingeniør</td>
+        <td>3</td>
+        <td>Geordi</td>
+        <td>La Forge</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td></td>
+        <th>ID</th>
+        <th>Fornavn</th>
+        <th>Etternavn</th>
+      </tr>
+    </tfoot>
+  </table>
+</Preview>
+
+## Tabell med divs
+
+<Alert variant="warning">
+  Hvis man skal bygge tabeller uten å bruke vanlig <code>&lt;tabell&gt;</code>
+  -markup er det svært viktig at man supplerer elementene med <Link href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html">
+    riktige
+  </Link> <code>role</code>-attributter og <code>display</code>
+  -stiler for å bevare den semantiske verdien i tabellene. Vi anbefaler fortsatt
+  å ikke ta i bruk denne metoden hvis mulig, da nettleseren ikke kan tolke
+  tabellen like bra uten riktig markup.
+</Alert>
+
+<Preview
+  react={`<div className="tabell" role="table">
+    <div className="tabell__thead" role="row-group">
+      <div className="tabell__tr" role="row">
+        <div className="tabell__th" role="columnheader">
+          Fornavn
+        </div>
+        <div className="tabell__th" role="columnheader">
+          Etternavn
+        </div>
+        <div className="tabell__th" role="columnheader">
+          Rolle
+        </div>
+      </div>
+    </div>
+    <div className="tabell__tbody" role="row-group">
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          Jean-Luc
+        </div>
+        <div className="tabell__td" role="cell">
+          Picard
+        </div>
+        <div className="tabell__td" role="cell">
+          Kaptein
+        </div>
+      </div>
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          William
+        </div>
+        <div className="tabell__td" role="cell">
+          Riker
+        </div>
+        <div className="tabell__td" role="cell">
+          Kommandør
+        </div>
+      </div>
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          Geordi
+        </div>
+        <div className="tabell__td" role="cell">
+          La Forge
+        </div>
+        <div className="tabell__td" role="cell">
+          Sjefsingeniør
+        </div>
+      </div>
+    </div>
+  </div>`}
+>
+  <div className="tabell" role="table">
+    <div className="tabell__thead" role="row-group">
+      <div className="tabell__tr" role="row">
+        <div className="tabell__th" role="columnheader">
+          Fornavn
+        </div>
+        <div className="tabell__th" role="columnheader">
+          Etternavn
+        </div>
+        <div className="tabell__th" role="columnheader">
+          Rolle
+        </div>
+      </div>
+    </div>
+    <div className="tabell__tbody" role="row-group">
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          Jean-Luc
+        </div>
+        <div className="tabell__td" role="cell">
+          Picard
+        </div>
+        <div className="tabell__td" role="cell">
+          Kaptein
+        </div>
+      </div>
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          William
+        </div>
+        <div className="tabell__td" role="cell">
+          Riker
+        </div>
+        <div className="tabell__td" role="cell">
+          Kommandør
+        </div>
+      </div>
+      <div className="tabell__tr" role="row">
+        <div className="tabell__td" role="cell">
+          Geordi
+        </div>
+        <div className="tabell__td" role="cell">
+          La Forge
+        </div>
+        <div className="tabell__td" role="cell">
+          Sjefsingeniør
+        </div>
+      </div>
+    </div>
+  </div>
+</Preview>
+
+## Tilgjengelighet
+
+### Riktig struktur
+
+Når man setter opp en tabell er det viktig at man tar i bruk riktige HTML-tags for å beskrive innholdet, slik at nettleseren bedre kan forstå hva som foregår.
+Hvis man følger eksemplene under oversikt og bruker `<table>` over `<div>`så er man allerede godt på vei!
+Men et punkt som er lurt å følge litt ekstra med på er bruken av `<th>`, table-header. Denne brukes ofte for å beskrive overskriften for en column,
+men kan også bli brukt i tilfeller der en verdi i rekken er unikt identifiserbar. Dette er et bevist valg man kan gjøre for å tabellen lettere å navigere for alle,
+men i de aller fleste tilfeller klarer nettleseren selv å tolke hvordan en tabell skal best navigeres.
+
+### Sorterbar tabell
+
+For å skape en god brukeropplevelse for alle er det viktig at man `aria-sort` på table-headers,
+samt bruker aria-label på `button` som utfører sorteringen `onClick`. Labelen skal da fortelle hva den neste handlingen blir å utføre.
+
+<Bash code={`<button aria-label="Sorter ID stigende">ID</button>`} />
+
+### Responsivitet
+
+Det finnes [mange måter](https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122) å gjøre tabeller responsive på, men flere av disse teknikkene innebærer ofte [store fallgruver](https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/) for tilgjengelighet.
+
+Den enkleste måten å gjøre tabeller responsive samtidig som man sørger for at tabellene forblir tilgjengelige er å gå for en [enkel horisontal scroll-løsning](http://adrianroselli.com/2017/11/a-responsive-accessible-table.html#ResponsiveScrolling) og standard `<table>` HTML.
+
+<Alert variant="info">
+  Tastaturvennlig horisontal scrolling krever at man setter{" "}
+  <code className="inline">tabindex="0"</code> og{" "}
+  <code className="inline">role="region"</code> på konteineren som skal scrolle.
+  Dette kan utløse advarsler fra lintere om at bare <em>interaktive</em>{" "}
+  elementer skal ha <code className="inline">tabindex</code>-attributtet. Disse
+  advarslene kan trygt ignoreres da scrolling teller som interaktivitet, men
+  blir ofte ikke oppfattet av lintere.
+</Alert>

docs/data/components/legacy/Typografi.mdx

@@ -0,0 +1,165 @@
+---
+title: Typografi
+---
+
+# Typografi
+
+Typografi-pakken vår består av flere tekstkomponenter med forhåndsbestemt størrelse og styling.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-typografi classnames nav-frontend-core nav-frontend-typografi-style prop-types react --save`}
+/>
+
+<Npm
+  packName="nav-frontend-typografi"
+  imports={[
+    "Element",
+    "Feilmelding",
+    "Ingress",
+    "Innholdstittel",
+    "Normaltekst",
+    "Sidetittel",
+    "Systemtittel",
+    "Undertekst",
+    "UndertekstBold",
+    "Undertittel",
+  ]}
+/>
+
+## Bruk av Typografi i prosjekter
+
+For å sikre at prosjektet ditt får riktig typografi bruker typografi-komponenten vår denne CSS-klassen fra `nav-frontend-typografi-style`.
+
+<Bash
+  copy
+  language="css"
+  code={`.app {
+  .typo-normal-mixin();
+  color: @navMorkGra;
+  font-family: @font-family;
+  line-height: @line-height-base;
+}`}
+/>
+
+Det antas da at prosjektet er pakket inn under CSS-klassen `.app` å disse blir da lagt til der. Hvis dette ikke er tilfellet i prosjektet ditt,
+kan det være greit å legge til manuelt da man sikrer at hele prosjektet får riktig typografi.
+Dette kan gjøres ved å legge til
+
+<Bash
+  code={`@import (reference) "~nav-frontend-typografi-style/src/index.less";`}
+  copy
+  language="css"
+/>
+
+i ønsket less fil og da legge til klassen `app` på elementet som pakker in prosjektet ditt.
+
+## Alle vekter
+
+<Preview
+  react={`<Sidetittel>Sidetittel</Sidetittel>`}
+  html={<Sidetittel>Sidetittel</Sidetittel>}
+>
+  <Sidetittel>Sidetittel</Sidetittel>
+  <Undertekst>Font size: 40px</Undertekst>
+  <Undertekst>Line height: 44px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Innholdstittel>Innholdstittel</Innholdstittel>`}
+  html={<Innholdstittel>Innholdstittel</Innholdstittel>}
+>
+  <Innholdstittel>Innholdstittel</Innholdstittel>
+  <Undertekst>Font size: 32px</Undertekst>
+  <Undertekst>Line height: 36px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Systemtittel>Systemtittel</Systemtittel>`}
+  html={<Systemtittel>Systemtittel</Systemtittel>}
+>
+  <Systemtittel>Systemtittel</Systemtittel>
+  <Undertekst>Font size: 24px</Undertekst>
+  <Undertekst>Line height: 28px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Undertittel>Undertittel</Undertittel>`}
+  html={<Undertittel>Undertittel</Undertittel>}
+>
+  <Undertittel>Undertittel</Undertittel>
+  <Undertekst>Font size: 20px</Undertekst>
+  <Undertekst>Line height: 25px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview react={`<Ingress>Ingress</Ingress>`} html={<Ingress>Ingress</Ingress>}>
+  <Ingress>Ingress</Ingress>
+  <Undertekst>Font size: 18px</Undertekst>
+  <Undertekst>Line height: 26px</Undertekst>
+  <Undertekst>Font weight: 400 regular</Undertekst>
+</Preview>
+
+<Preview react={`<Element>Element</Element>`} html={<Element>Element</Element>}>
+  <Element>Element</Element>
+  <Undertekst>Font size: 16px</Undertekst>
+  <Undertekst>Line height: 22px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Feilmelding>Feilmelding</Feilmelding>`}
+  html={<Feilmelding>Feilmelding</Feilmelding>}
+>
+  <Feilmelding>Feilmelding</Feilmelding>
+  <Undertekst>Font size: 16px</Undertekst>
+  <Undertekst>Line height: 22px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Normaltekst>Normaltekst</Normaltekst>`}
+  html={<Normaltekst>Normaltekst</Normaltekst>}
+>
+  <Normaltekst>Normaltekst</Normaltekst>
+  <Undertekst>Font size: 16px</Undertekst>
+  <Undertekst>Line height: 22px</Undertekst>
+  <Undertekst>Font weight: 400 regular</Undertekst>
+</Preview>
+
+<Preview
+  react={`<Undertekst>Undertekst</Undertekst>`}
+  html={<Undertekst>Undertekst</Undertekst>}
+>
+  <Undertekst>Undertekst</Undertekst>
+  <Undertekst>Font size: 14px</Undertekst>
+  <Undertekst>Line height: 20px</Undertekst>
+  <Undertekst>Font weight: 400 regular</Undertekst>
+</Preview>
+
+<Preview
+  react={`<UndertekstBold>UndertekstBold</UndertekstBold>`}
+  html={<UndertekstBold>UndertekstBold</UndertekstBold>}
+>
+  <UndertekstBold>UndertekstBold</UndertekstBold>
+  <Undertekst>Font size: 14px</Undertekst>
+  <Undertekst>Line height: 20px</Undertekst>
+  <Undertekst>Font weight: 600 semi bold</Undertekst>
+</Preview>
+
+## Selvbestemt HTML-tag
+
+Du kan selv bestemme hvilken HTML-tag de forskjellige typografi-vektene skal bruke. For eksempel kan du overstyre `h1`-defaulten for
+`Sidetittel` med `h4` slik:
+
+<Preview react={`<Sidetittel tag="h4">Sidetittel</Sidetittel>`}>
+  <Sidetittel tag="h4">Sidetittel</Sidetittel>
+</Preview>

docs/data/components/legacy/forms/bekreftcheckbokspanel.mdx

@@ -0,0 +1,63 @@
+---
+title: Bekreftcheckbokspanel
+---
+
+# Bekreftcheckbokspanel
+
+Denne komponenten bør brukes hvis det er nødvendig å innhente samtykke fra brukeren før de går videre i prosessen. Komponenten skal gi brukeren tydelig beskjed om hvorfor de må samtykke og hva de samtykker til.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="BekreftCheckboksPanel" />
+
+## Normal
+
+<Preview
+  react={`<BekreftCheckboksPanel
+  label="Ja, jeg samtykker"
+  checked={isChecked}
+  onChange={(e) => setIsChecked(e.target.checked)}
+>
+  For å komme videre må du gi oss lov til å hente inn og bruke opplysninger om
+  deg.{" "}
+  <Lenke href="#">
+    Les om hvilke opplysninger vi henter og hvordan vi bruker dem.
+  </Lenke>
+</BekreftCheckboksPanel>`}
+>
+  <BekreftcheckboxpanelExample1 />
+</Preview>
+
+## Feilmelding
+
+<Preview
+  react={`<BekreftCheckboksPanel
+  label="Jeg bekrefter at opplysningene jeg har gitt, er riktige og fullstendige"
+  checked={isChecked}
+  onChange={(e) => setIsChecked(e.target.checked)}
+  feil={!isChecked && "Du må bekrefte dette før du kan sende inn søknaden."}
+>
+  Jeg vet at jeg kan miste retten til sykepenger hvis opplysningene jeg gir,
+  ikke er riktige eller fullstendige.
+</BekreftCheckboksPanel>`}
+>
+  <BekreftcheckboxpanelExample2 />
+</Preview>
+
+## Tilgjengelighet
+
+### Ordlyd i label
+
+Sjekkboks-labelen bør inneholde mer enn bare ett ord (kun "Ja" er f.eks. lite beskrivende og utilstrekkelig).
+
+### Lenke til eksternt innhold
+
+Hvis det er nødvendig å lenke til en ekstern side med utfyllende informasjon skal lenken plasseres i innholdet over sjekkboksen, og ikke i sjekkboks-labelen.

docs/data/components/legacy/forms/checkbokspanelgruppe.mdx

@@ -0,0 +1,118 @@
+---
+title: Checkbokspanelgruppe
+---
+
+# Checkbokspanelgruppe
+
+Denne komponenten bør benyttes hvis brukeren må utføre en viktig flervalgsoppgave som fortjener større plass på skjermen.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="CheckboksPanelGruppe" />
+
+## Normal
+
+<Preview react={`<Checkbox label={"Checkbox"} />`}>
+  <Checkbox label={"Checkbox"} />
+</Preview>
+
+## Disabled
+
+<Alert variant="warning">
+  Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da
+  fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt. Ler mer om dette på{" "}
+  <Link href="/accessibility/disabled">siden vår om `disabled`</Link>.
+</Alert>
+
+<Preview react={`<Checkbox label={"Checkbox"} disabled />`}>
+  <Checkbox label={"Checkbox"} disabled />
+</Preview>
+
+## Feilmelding
+
+<Preview
+  react={`<Checkbox
+    label={"Checkbox"}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  />`}
+>
+  <Checkbox
+    label={"Checkbox"}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  />
+</Preview>
+
+## CheckboxGruppe
+
+Denne komponenten inkluderer også en `CheckboxGruppe`-komponent som kan brukes til å gruppere flere checkboxer:
+
+<Preview
+  react={`<CheckboxGruppe legend="Hvor vil du sitte?">
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>`}
+>
+  <CheckboxGruppe legend="Hvor vil du sitte?">
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>
+</Preview>
+
+### Felles feilmelding
+
+<Preview
+  react={`<CheckboxGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  >
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>`}
+>
+  <CheckboxGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  >
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>
+</Preview>
+
+### Feilmelding uten propagering av feil-prop til children
+
+Bruk `utenFeilPropagering`-propen for å bestemme om `feil`-propen til `CheckboxGruppe` skal propageres til children.
+
+<Preview
+  react={`<CheckboxGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  >
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} feil />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>`}
+>
+  <CheckboxGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  >
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} feil />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>
+</Preview>

docs/data/components/legacy/forms/checkbox.mdx

@@ -0,0 +1,141 @@
+---
+title: Checkbox
+---
+
+# Checkbox
+
+Checkbox er en komponent som benyttes i skjemaer for å gi brukeren muligheten til å avgi et eller flere svar på spørsmålet som blir stilt.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Checkbox" />
+
+## Normal
+
+<Preview
+  react={`<CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-1" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-1" },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-1" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-1",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+  />`}
+>
+  <CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-1" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-1" },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-1" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-1",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+  />
+</Preview>
+
+<Alert variant="info">
+  Komponenten bør som regel inneholde minst to svaralternativer. Hvis det kun er
+  ett svaralternativ bør man heller bruke en{" "}
+  <Link href="/components/checkbox">vanlig sjekkboks</Link>.
+</Alert>
+
+## Feilmelding
+
+<Preview
+  react={`<CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-2" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-2" },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-2" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-2",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  />`}
+>
+  <CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-2" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-2" },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-2" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-2",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  />
+</Preview>
+
+### Feilmelding uten propagering av feil-prop til children
+
+Bruk `utenFeilPropagering`-propen for å bestemme om `feil`-propen til `CheckboksPanelGruppe` skal propageres til children.
+
+<Preview
+  react={`<CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-2" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-2", feil: true },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-2" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-2",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  />`}
+>
+  <CheckboksPanelGruppe
+    legend={"Velg en eller flere:"}
+    checkboxes={[
+      { label: "Eplejuice", value: "juice1", id: "juice1id-2" },
+      { label: "Appelsinjuice", value: "juice2", id: "juice2id-2", feil: true },
+      { label: "Melk", value: "melk", disabled: true, id: "melkid-2" },
+      {
+        label: "Ananasjuice",
+        value: "juice3",
+        id: "juice4id-2",
+        subtext: "Subtext example",
+      },
+    ]}
+    onChange={() => {}}
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  />
+</Preview>

docs/data/components/legacy/forms/feiloppsummering.mdx

@@ -0,0 +1,43 @@
+---
+title: Feiloppsummering
+---
+
+# Feiloppsummering
+
+Feiloppsummering skal brukes til å gi enkel oversikt over alle feil i et skjema.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Feiloppsummering" />
+
+## Eksempler
+
+Komponenten skal vises nederst i skjema, men over submit-knappen. Se [mønster for skjema-validering](/patterns/form-validation) for eksempel på bruk.
+
+<Preview
+  react={`<Feiloppsummering
+    tittel="For å gå videre må du rette opp følgende:"
+    feil={[
+      { skjemaelementId: "1", feilmelding: "Du må oppgi et navn" },
+      { skjemaelementId: "2", feilmelding: "Du må oppgi en adresse" },
+      { skjemaelementId: "3", feilmelding: "Du må oppgi et telefonnummer" },
+    ]}
+  />`}
+>
+  <Feiloppsummering
+    tittel="For å gå videre må du rette opp følgende:"
+    feil={[
+      { skjemaelementId: "1", feilmelding: "Du må oppgi et navn" },
+      { skjemaelementId: "2", feilmelding: "Du må oppgi en adresse" },
+      { skjemaelementId: "3", feilmelding: "Du må oppgi et telefonnummer" },
+    ]}
+  />
+</Preview>

docs/data/components/legacy/forms/fnrInput.mdx

@@ -0,0 +1,54 @@
+---
+title: FnrInput
+---
+
+# FnrInput
+
+Feiloppsummering skal brukes til å gi enkel oversikt over alle feil i et skjema.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="FnrInput" />
+
+## Eksempler
+
+Komponenten bruker [@navikt/fnrvalidator](https://github.com/navikt/fnrvalidator) internt for å validere brukers input.
+
+<Preview
+  react={`<form onSubmit={(e) => handleSubmit(e)}>
+        <FnrInput
+          label="Fødselsnummer (11 siffer)"
+          bredde="S"
+          value={value}
+          onChange={(e) => handleChange(e)}
+          onValidate={(val) => setValid(val)}
+          feil={submit && !valid ? "Ugyldig fødselsnummer" : undefined}
+        />
+      </form>`}
+>
+  <FnrInputExample />
+</Preview>
+
+## Tilgjengelighet
+
+### Validering
+
+- Validering av felt skal ikke skje før etter første submit-forsøk, deretter `onChange`.
+- Feil skal forsvinne etterhvert som den blir utbedret.
+- Etter at en feil er blitt utbredet, må det et nytt `submit`-forsøk til for at ny feilmelding skal vises.
+
+### Lenge på inputfelt
+
+Inputfeltenes sin lengde bør tilpasses det antallet tegn som brukeren skal fylle inn. For fødselsnummer på 11 siffer anbefaler vi å bruke `bredde="S"`.
+
+### Unngå placeholders
+
+Vi fraråder bruken av `placeholder`-attributtet på input-elementer.

docs/data/components/legacy/forms/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Skjema
+rank: 2
+---

docs/data/components/legacy/forms/input.mdx

@@ -0,0 +1,262 @@
+---
+title: Input
+---
+
+# Input
+
+Input brukes når vi har behov for å ta imot tekst fra sluttbruker.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Input" />
+
+## Normal
+
+I sin enkleste form er `Input` bare et enkelt tekstinputfelt.
+
+<Preview react={`<Input label="Inputfelt-label" />`}>
+  <Input label="Inputfelt-label" />
+</Preview>
+
+## Med label
+
+<Alert variant="info">
+  <Link href="https://www.w3.org/TR/WCAG21/#labels-or-instructions">
+    WCAG 3.3.2
+  </Link>{" "}
+  krever at alle skjemafelter skal ha en tilhørende
+  <code>label</code>.
+</Alert>
+
+### Label som prop
+
+Den enkleste (og anbefalte) måten å gi inputfeltet en label er å angi dette gjennom komponentens `label`-prop. Dette vil rendre en `<label>` rett over feltet, med korrekt CSS-klasse og `for`-attributt ferdig påført:
+
+<Preview react={`<Input label="Mitt skjemafelt:" />`}>
+  <Input label="Mitt skjemafelt:" />
+</Preview>
+
+### Label som komponent
+
+Du kan også importere `Label`-komponenten og manuelt sette denne utenfor inputfeltet:
+
+<Alert variant="warning">
+  Husk å gi Label-komponenten korrekt <code>for</code>/<code>htmlFor</code>
+  -attributt (som skal ha samme verdi som inputfeltets <code>id</code>
+  -attributt) slik at disse blir sammenkoblet riktig.
+</Alert>
+
+<Preview
+  react={`<><Label htmlFor="min-input">Mitt skjemafelt:</Label>
+  <Input id="min-input" /></>`}
+>
+  <Label htmlFor="min-input">Mitt skjemafelt:</Label>
+  <Input id="min-input" />
+</Preview>
+
+Dette kan være nødvendig om man f.eks. vil sette `label` til venstre for inputfeltet:
+
+<Preview
+  react={`<div style={{ display: "flex", alignItems: "center" }}>
+    <Label htmlFor="min-input-2" style={{ margin: 0, marginRight: "1rem" }}>
+      Mitt skjemafelt:
+    </Label>
+    <div style={{ flexGrow: 1 }}>
+      <Input id="min-input-2" />
+    </div>
+  </div>`}
+>
+  <div style={{ display: "flex", alignItems: "center" }}>
+    <Label htmlFor="min-input-2" style={{ margin: 0, marginRight: "1rem" }}>
+      Mitt skjemafelt:
+    </Label>
+    <div style={{ flexGrow: 1 }}>
+      <Input id="min-input-2" />
+    </div>
+  </div>
+</Preview>
+
+### Label som aria-attributter
+
+Unntaksvis kan man også angi `label` via inputfeltets `aria-label`- eller `aria-labelledby`-attributter. I slike tilfeller kan det være greit å supplere inputfeltet med et `placeholder`-attributt også.
+
+<Alert variant="warning">
+  Dette er foreløpig <strong>kun tillatt</strong> på inputfelter inne i
+  tabell-rader eller lignende tilfeller hvor det er veldig vanskelig å ha en
+  synlig tekst-label i nærheten av inputfeltet.{" "}
+  <strong>Skal ikke misbrukes.</strong>
+</Alert>
+
+<Preview
+  react={`<><Input aria-label="Mitt skjemafelt:" placeholder="Her kan det skrives" />/** eller */<Input aria-labelledby="id-til-html-element-med-label-tekst" placeholder="Her kan det skrives" /></>`}
+>
+  <Input aria-label="Mitt skjemafelt:" placeholder="Her kan det skrives" />
+</Preview>
+
+## Nummer
+
+Hvis man ønsker at brukeren skal sette inn tall og da gi dem talltastaturet på mobil, ta i bruk `inputMode="numeric" pattern="[0-9]*"`
+
+<Alert variant="info">
+  Les mer om hvorfor man bør bruke <code>inputMode</code> og{" "}
+  <code>pattern</code> ovenfor <code> type="number" </code> på{" "}
+  <Link href="/legacy/Input#unntak">under tilgjengelighet</Link>.
+</Alert>
+
+<Preview
+  react={`<Input label="Inputfelt-nummer" inputMode="numeric" pattern="[0-9]*" />`}
+>
+  <Input label="Inputfelt-nummer" inputMode="numeric" pattern="[0-9]*" />
+</Preview>
+
+## Kombinasjon med Hjelpetekst
+
+<Alert variant="info">
+  Les mer om hvorfor det kan være lurt å sende Hjelpetekst inn med{" "}
+  <code>label</code>-propen under{" "}
+  <Link href="/legacy/hjelpetekst">
+    komponentens tilgjengelighets-informasjon
+  </Link>
+  .
+</Alert>
+
+<Preview
+  react={`<Input
+    label={
+      <div style={{ display: "flex" }}>
+        Inputfelt-label
+        <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+          Innholdet vil vises når brukeren klikker på knappen.
+        </Hjelpetekst>
+      </div>
+    }
+  />`}
+>
+  <Input
+    label={
+      <div style={{ display: "flex" }}>
+        Inputfelt-label
+        <Hjelpetekst style={{ marginLeft: "0.5rem" }}>
+          Innholdet vil vises når brukeren klikker på knappen.
+        </Hjelpetekst>
+      </div>
+    }
+  />
+</Preview>
+
+## Disabled
+
+<Alert variant="warning">
+  Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da
+  fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt.
+</Alert>
+
+<Preview react={`<Input label="Inputfelt-label" disabled />`}>
+  <Input label="Inputfelt-label" disabled />
+</Preview>
+
+## Innhold mellom label og skjemafelt
+
+Bruk `description`-propen for å legge inn egendefinert HTML-innhold mellom labelen og skjemafeltet.
+
+<Preview
+  react={`<Input label="Inputfelt-label" description="En kort beskrivelse av feltet" />`}
+>
+  <Input label="Inputfelt-label" description="En kort beskrivelse av feltet" />
+</Preview>
+
+## Feilmarkering
+
+### Normal
+
+<Preview react={`<Input label="Inputfelt-label" feil="Her er det noe feil" />`}>
+  <Input label="Inputfelt-label" feil="Her er det noe feil" />
+</Preview>
+
+### Forenklet
+
+<Preview react={`<Input label="Inputfelt-label" feil />`}>
+  <Input label="Inputfelt-label" feil />
+</Preview>
+
+## Lengde
+
+Lengden på inputfelt skal tilpasses det antallet tegn bruker skal fylle inn. For å holde skjemaene
+ryddige og oversiktlige, samt for å lette utviklingen er det satt et sett med faste bredder. Velg
+den bredden som passer best til dataene bruker skal fylle inn.
+
+<Preview
+  react={`<SkjemaGruppe>
+    <Input label="Fullbredde inputfelt:" bredde="fullbredde" />
+    <Input label="XXL inputfelt" bredde="XXL" />
+    <Input label="XL inputfelt" bredde="XL" />
+    <Input label="L inputfelt" bredde="L" />
+    <Input label="M inputfelt" bredde="M" />
+    <Input label="S inputfelt" bredde="S" />
+    <Input label="XS inputfelt" bredde="XS" />
+    <Input label="XXS inputfelt" bredde="XXS" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe>
+    <Input label="Fullbredde inputfelt:" bredde="fullbredde" />
+    <Input label="XXL inputfelt" bredde="XXL" />
+    <Input label="XL inputfelt" bredde="XL" />
+    <Input label="L inputfelt" bredde="L" />
+    <Input label="M inputfelt" bredde="M" />
+    <Input label="S inputfelt" bredde="S" />
+    <Input label="XS inputfelt" bredde="XS" />
+    <Input label="XXS inputfelt" bredde="XXS" />
+  </SkjemaGruppe>
+</Preview>
+
+## Mini
+
+Man kan også rendre en mindre `32px` versjon ved å bruke `mini`-attributtet.
+
+<Alert variant="warning">
+  Som hovedregel skal vi <strong>alltid</strong> bruke de store inputfeltene
+  våre. For tilfeller med svært begrenset plass kan de mindre inputfeltene
+  brukes <strong>unntaksvis ved klart behov</strong>.
+</Alert>
+
+<Preview react={`<Input mini />`}>
+  <Input mini />
+</Preview>
+
+## Tilgjengelighet
+
+### Obligatoriske felter
+
+Normalt ber man bare brukeren oppgi informasjon når det er nødvendig, og i NAVs løsninger betyr det at de fleste input-feltene vil være påkrevd. Vi har derfor valgt å ikke markere obligatoriske felter. Hvis et felt er _valgfritt_, skal disse markeres med ordet «valgfri» i parentes bak label-teksten. For eksempel «Alder (valgfri)».
+
+Uansett om du markerer valgfrie eller obligatoriske felt, trenges det en forklaring i begynnelsen av skjemaet. Et eksempel på en tekst kan være:
+
+<Bash
+  code={`Alle felt må fylles ut, bortsett fra de som er markert som valgfrie.`}
+/>
+
+### Inputtyper
+
+Bruk alltid input med `type`-attributt som passer for den dataen som skal tastes inn. Hvis brukes skal oppgi epostadressen sin så bør du bruke `type="email"` slik at mobilbrukere får opp tastatur med @-symbolet, eller `type="tel"` slik at de får opp nummer-tastatur osv. Se [oversikt over hvilke typer du kan bruke her](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<input>_types).
+
+#### Unntak
+
+Det gir semantisk mening å ta i bruk `type="number"`, men det viser seg å kunne være problematisk for enkelte brukere.
+
+- Noen skjermlesere har problemer med å tolke og skjønne bruken av `type="number"`.
+- Nettlesere formaterer større nummer på forskjellige måter. Chrome 79.0 kan ende opp med å vise tallet i eksponentielt format, mens safari vil prøve å runde ned tallet.
+- Blant annet Chrome lar ikke brukeren skrive noe annet enn tall, komma/punktum og ´e´. Dette betyr at brukeren ikke får noe feedback på om det de skriver er rett eller ikke.
+- Scroll wheel/gesture vil kunne brukes for å inkrementere og dekrementere input, noe som kan føre til uheldig feil utfylling av data.
+
+### Unngå placeholders
+
+Vi fraråder bruken av `placeholder`-attributtet på input-elementer.

docs/data/components/legacy/forms/radio.mdx

@@ -0,0 +1,112 @@
+---
+title: Radio
+---
+
+# Radio
+
+Radioknapper brukes når brukeren bare skal få velge én av flere forhåndsbestemte alternativer.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Radio" />
+
+## Normal
+
+<Preview react={`<Radio label={"Radio-label"} name="minRadioKnapp" />`}>
+  <Radio label={"Radio-label"} name="minRadioKnapp" />
+</Preview>
+
+## Disabled
+
+<Alert variant="warning">
+  Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da
+  fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt. Ler mer om dette på{" "}
+  <Link href="/accessibility/disabled">siden vår om `disabled`</Link>.
+</Alert>
+
+<Preview
+  react={`<Radio label={"Radio-label"} name="minRadioKnapp" disabled />`}
+>
+  <Radio label={"Radio-label"} name="minRadioKnapp" disabled />
+</Preview>
+
+## RadioGruppe
+
+Denne komponenten inkluderer også en `RadioGruppe`-komponent som kan brukes til å gruppere flere radioknapper:
+
+<Alert variant="info">
+  Dersom du har mer enn fem alternativer, kan du vurdere om det er mer
+  hensiktsmessig å benytte en <Link href="/components/select">Select</Link> i
+  stedet.
+</Alert>
+
+<Preview
+  react={`<RadioGruppe legend="Hvor vil du sitte?">
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>`}
+>
+  <RadioGruppe legend="Hvor vil du sitte?">
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>
+</Preview>
+
+### Felles feilmelding
+
+<Preview
+  react={`<RadioGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  >
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>`}
+>
+  <RadioGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+  >
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>
+</Preview>
+
+### Feilmelding uten propagering av feil-prop til children
+
+Bruk `utenFeilPropagering`-propen for å bestemme om `feil`-propen til `RadioGruppe` skal propageres til children.
+
+<Preview
+  react={`<RadioGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  >
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" feil />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>`}
+>
+  <RadioGruppe
+    legend="Hvor vil du sitte?"
+    feil="Feilmeldingstekst må gjenta nøkkelord fra label"
+    utenFeilPropagering
+  >
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" feil />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>
+</Preview>

docs/data/components/legacy/forms/radiopanelgruppe.mdx

@@ -0,0 +1,106 @@
+---
+title: RadioPanelGruppe
+---
+
+# RadioPanelGruppe
+
+Radioknapper brukes når brukeren bare skal få velge én av flere forhåndsbestemte alternativer.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="RadioPanelGruppe" />
+
+<Preview
+  react={`<RadioPanelGruppe
+  name="samplename"
+  legend="Hvilken drikke er best?"
+  radios={[
+    { label: "Eplejuice", value: "juice1", id: "juice1id" },
+    { label: "Appelsinjuice", value: "juice2", id: "juice2id" },
+    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
+    { label: "Ananasjuice", value: "juice3", id: "juice4id" },
+  ]}
+  checked={this.state.checked}
+  onChange={this.onChange}
+/>`}
+>
+  <RadioPanelGruppeExample name="Preview-1" />
+</Preview>
+
+## Feilmelding
+
+<Preview
+  react={`<RadioPanelGruppe
+  name="samplename"
+  legend="Hvilken drikke er best?"
+  radios={[
+    { label: "Eplejuice", value: "juice1", id: "juice1id" },
+    { label: "Appelsinjuice", value: "juice2", id: "juice2id" },
+    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
+    { label: "Ananasjuice", value: "juice3", id: "juice4id" },
+  ]}
+  checked={this.state.checked}
+  onChange={this.onChange}
+  feil={{ feilmelding: "Her er det en feil." }}
+/>`}
+>
+  <RadioPanelGruppeExample name="Preview-2" feil={true} />
+</Preview>
+
+### Feilmelding uten propagering av feil-prop til children
+
+Bruk `utenFeilPropagering`-propen for å bestemme om `feil`-propen til `RadioPanelGruppe` skal propageres til children.
+
+<Preview
+  react={`<RadioPanelGruppe
+  name="samplename"
+  legend="Hvilken drikke er best?"
+  radios={[
+    { label: "Eplejuice", value: "juice1", id: "juice1id" },
+    { label: "Appelsinjuice", value: "juice2", id: "juice2id", feil },
+    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
+    { label: "Ananasjuice", value: "juice3", id: "juice4id" },
+  ]}
+  checked={this.state.checked}
+  onChange={this.onChange}
+  feil={{ feilmelding: "Feilmeldingstekst må gjenta nøkkelord fra label" }}
+  utenFeilPropagering
+/>`}
+>
+  <RadioPanelGruppeExample name="Preview-4" feil={true} utenFeilPropagering />
+</Preview>
+
+## Bruk av radioRef
+
+<Preview react={`
+const juice1Ref = useRef(null);
+
+<RadioPanelGruppe
+  name="samplename"
+  legend="Hvilken drikke er best?"
+  radios={[
+    {
+      label: "Eplejuice",
+      value: "juice1",
+      id: "juice1id",
+      radioRef: (ref) => (juice1Ref.current = ref),
+    },
+    { label: "Appelsinjuice", value: "juice2", id: "juice2id" },
+    { label: "Melk", value: "melk", disabled: true, id: "melkid" },
+    { label: "Ananasjuice", value: "juice3", id: "juice4id" },
+  ]}
+  checked={this.state.checked}
+  onChange={this.onChange}
+  feil={{ feilmelding: "Her er det en feil." }}
+/>
+`}>
+  <RadioPanelGruppeExample button name="Preview-3" />
+</Preview>

docs/data/components/legacy/forms/select.mdx

@@ -0,0 +1,112 @@
+---
+title: Select
+---
+
+# Select
+
+Select viser en meny med valgalternativer og brukes når brukeren skal velge ett av flere alternativer.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Select" />
+
+## Normal
+
+<Alert variant="info">
+  Dersom du har mindre enn fem valg kan du vurdere å bruke{" "}
+  <Link href="/components/radio">radioknapper</Link> i stedet, siden de er
+  enklere og mer oversiktlige for brukerne.
+</Alert>
+
+<Preview
+  react={`<Select label="Hvilken land er best om sommeren?">
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>`}
+>
+  <Select label="Hvilken land er best om sommeren?">
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>
+</Preview>
+
+## Disabled
+
+<Alert variant="warning">
+  Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da
+  fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt. Ler mer om dette på{" "}
+  <Link href="/accessibility/disabled">siden vår om `disabled`</Link>.
+</Alert>
+
+<Preview
+  react={`<Select label="Hvilken land er best om sommeren?" disabled>
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>`}
+>
+  <Select label="Hvilken land er best om sommeren?" disabled>
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>
+</Preview>
+
+## Feilmelding
+
+<Preview
+  react={`<Select label="Hvilken land er best om sommeren?" feil="Her er det noe feil">
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>`}
+>
+  <Select label="Hvilken land er best om sommeren?" feil="Her er det noe feil">
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>
+</Preview>
+
+## Innhold mellom label og skjemafelt
+
+Bruk `description`-propen for å legge inn egendefinert HTML-innhold mellom labelen og skjemafeltet.
+
+<Preview
+  react={`<Select
+    label="Hvilken land er best om sommeren?"
+    description="En kort beskrivelse av listen"
+  >
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>`}
+>
+  <Select
+    label="Hvilken land er best om sommeren?"
+    description="En kort beskrivelse av listen"
+  >
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+    <option value="danmark">Danmark</option>
+  </Select>
+</Preview>

docs/data/components/legacy/forms/skjemagruppe.mdx

@@ -0,0 +1,175 @@
+---
+title: SkjemaGruppe
+---
+
+# SkjemaGruppe
+
+Skjemagruppe lar deg semantisk gruppere flere skjemaelementer i en `fieldset`. Du kan både gi denne gruppen en felles overskrift (`legend`) og en felles feilmelding.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="SkjemaGruppe" />
+
+## Normal/Fieldset
+
+I sin enkleste from er SkjemaGruppe bare en `fieldset`-wrapper som sørger for semantisk gruppering av et sett med skjemafelter. Skjemaelementer i en SkjemaGruppe får som default `1rem` vertikal avstand til hverandre.
+
+<Preview
+  react={`<SkjemaGruppe>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>
+
+## Legend
+
+### Normal
+
+Du kan også gi skjemagruppen en felles overskrift (`legend`):
+
+<Preview
+  react={`<SkjemaGruppe legend="Kontaktperson">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe legend="Kontaktperson">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>
+
+### Custom styling
+
+Du kan også sende inn en annen [Typografi-komponent](/components/typografi) for å overstyre default `legend`-styling.
+
+<Preview
+  react={`<SkjemaGruppe legend={<Undertittel>Kontaktperson</Undertittel>}>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe legend={<Undertittel>Kontaktperson</Undertittel>}>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>
+
+## Innhold mellom legend og skjemagruppe
+
+Bruk `description`-propen for å legge inn egendefinert HTML-innhold mellom legend og skjemagruppen.
+
+<Preview
+  react={`<SkjemaGruppe
+    legend="Kontaktperson"
+    description="Personen som noen kan kontakte"
+  >
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe
+    legend="Kontaktperson"
+    description="Personen som noen kan kontakte"
+  >
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>
+
+## Grupper av radio- og checkboxer
+
+Skjemagrupper brukes vanligvis for å gruppere flere radioknapper eller checkboxer. For slike grupper har vi laget egne [RadioGruppe](/components/radio#radiogruppe)- og [CheckboxGruppe](/components/checkbox#checkboxgruppe)-komponenter for at disse skal bli stylet slik at avstanden mellom elementene blir litt mindre og for at `legend` skal bli seende ut som en vanlig `label`:
+
+### RadioGruppe
+
+<Preview
+  react={`<RadioGruppe legend="Hvor vil du sitte?">
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>`}
+>
+  <RadioGruppe legend="Hvor vil du sitte?">
+    <Radio label={"Bakerst"} name="sitteplass" />
+    <Radio label={"Midten"} name="sitteplass" />
+    <Radio label={"Fremst"} name="sitteplass" />
+  </RadioGruppe>
+</Preview>
+
+### CheckboxGruppe
+
+<Preview
+  react={`<CheckboxGruppe legend="Hvor vil du sitte?">
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>`}
+>
+  <CheckboxGruppe legend="Hvor vil du sitte?">
+    <Checkbox label={"Bakerst"} />
+    <Checkbox label={"Midten"} />
+    <Checkbox label={"Fremst"} />
+  </CheckboxGruppe>
+</Preview>
+
+## Felles feilmelding
+
+<Preview
+  react={`<SkjemaGruppe feil="Her er det noe feil">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe feil="Her er det noe feil">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>
+
+### Uten propagering av feil-prop til children
+
+Bruk `utenFeilPropagering`-propen for å bestemme om `feil`-propen til `SkjemaGruppe` skal propageres til children.
+
+<Preview
+  react={`<SkjemaGruppe feil="Her er det noe feil" utenFeilPropagering>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" feil="Feilen er her!" />
+    <Input label="Adresse" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe feil="Her er det noe feil" utenFeilPropagering>
+    <Input label="Fornavn" />
+    <Input label="Etternavn" feil="Feilen er her!" />
+    <Input label="Adresse" />
+  </SkjemaGruppe>
+</Preview>
+
+## Custom element
+
+Du kan også selv bestemme hvilket HTML-element som SkjemaGruppe skal rendres som. Default er som nevnt `fieldset`, men du kan overstyre dette via `tag`-propen:
+
+<Preview
+  react={`<SkjemaGruppe tag="div">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>`}
+>
+  <SkjemaGruppe tag="div">
+    <Input label="Fornavn" />
+    <Input label="Etternavn" />
+  </SkjemaGruppe>
+</Preview>

docs/data/components/legacy/forms/tekstomrade.mdx

@@ -0,0 +1,60 @@
+---
+title: Tekstomrade
+---
+
+# Tekstomrade
+
+Tekstområde er en ren teknisk komponent som lar utviklere parse tekst (strings), og automatisk rendre HTML-markup med f.eks. avsnitt og lenker.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-tekstomrade nav-frontend-lenker classnames nav-frontend-lenker-style nav-frontend-core prop-types react nav-frontend-typografi nav-frontend-typografi-style --save`}
+/>
+
+<Npm packName="nav-frontend-tekstomrade" imports="Tekstomrade" defaultExport />
+
+## Standard bruk
+
+Standard oppsettet håndterer avsnitt, linjeskift og lenker.
+Komponent har som mål at struktur av tekst visuelt beholdes, dvs linjeskift i input-teksten ivaretas av komponenten.
+
+<Preview
+  react={`<Tekstomrade>
+    {\`En komponent som tar ansvar for å brekke opp \\ntekst i avsnitt, og \\nlegge til lenker.\\n\\nVi kan f.eks lenke til www.nav.no, og ha flere lenker på samme linje. (Les mer her; design.nav.no)\`}
+  </Tekstomrade>`}
+>
+  <Tekstomrade>
+    {`En komponent som tar ansvar for å brekke opp \ntekst i avsnitt, og \nlegge til lenker.\n\nVi kan f.eks lenke til www.nav.no, og ha flere lenker på samme linje. (Les mer her; design.nav.no)`}
+  </Tekstomrade>
+</Preview>
+
+## Avansert bruk
+
+Komponenten er regel-basert, og åpner opp for at konsumenter kan lage sine egne rendering-regler ved behov.
+For å endre reglene som er aktive kan man sende inn en liste av regler man ønsker via `rules`-propen.
+
+<Preview
+  react={`<Tekstomrade
+    rules={[HighlightRule, BoldRule, createDynamicHighlightingRule(["ruk"])]}
+  >
+    {"*Vi* kan bruke helt egne regler _her_"}
+  </Tekstomrade>`}
+>
+  <TekstomradeExample />
+</Preview>
+
+Komponenten kommer med ett sett av ferdig-implementerte regler;
+
+- `LinebreakRule`
+- `ParagraphRule`
+- `HighlightRule`
+- `createDynamicHighlightingRule`
+- `BoldRule`
+- `LinkRule`
+
+For dokumentasjon av regel-utvikling se [parser biblioteket](https://github.com/navikt/textparser)

docs/data/components/legacy/forms/textarea.mdx

@@ -0,0 +1,106 @@
+---
+title: Textarea
+---
+
+# Textarea
+
+Textarea tillater brukeren å legge inn fritekst som kan gå over flere linjer.
+
+<TableOfContents />
+
+## Teknisk
+
+<Bash
+  terminal
+  copy
+  code={`npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save`}
+/>
+
+<Npm packName="nav-frontend-skjema" imports="Textarea" />
+
+## Normal
+
+<Preview hideHtml react={`<TextareaControlled label="Textarea-label" />`}>
+  <TextareaControlled maxLength={2000} label="Textarea-label" />
+</Preview>
+
+## Uten teller
+
+<Preview
+  hideHtml
+  react={`<TextareaControlled label="Textarea-label" maxLength={0} />`}
+>
+  <TextareaControlled label="Textarea-label" maxLength={0} />
+</Preview>
+
+## Disabled
+
+<Alert variant="warning">
+  Merk at disabled bør unngås, og at bruken heller bør løses på andre måter, da
+  fks kombinert med tydelige feilmeldinger hvis handlingen av en eller annen
+  grunn ikke er tillatt. Ler mer om dette på{" "}
+  <Link href="/accessibility/disabled">siden vår om `disabled`</Link>.
+</Alert>
+
+<Preview
+  hideHtml
+  react={`<TextareaControlled label="Textarea-label" disabled />`}
+>
+  <TextareaControlled maxLength={2000} label="Textarea-label" disabled />
+</Preview>
+
+## Feilmelding
+
+<Preview
+  hideHtml
+  react={`<TextareaControlled label="Textarea-label" feil="Her er det noe feil." />`}
+>
+  <TextareaControlled
+    maxLength={2000}
+    label="Textarea-label"
+    feil="Her er det noe feil."
+  />
+</Preview>
+
+## Innhold mellom label og skjemafelt
+
+Bruk `description`-propen for å legge inn egendefinert HTML-innhold mellom labelen og skjemafeltet.
+
+<Preview
+  hideHtml
+  react={`<TextareaControlled
+    label="Textarea-label"
+    description="Beskriv kort din situasjon"
+  />`}
+>
+  <TextareaControlled
+    label="Textarea-label"
+    description="Beskriv kort din situasjon"
+    maxLength={2000}
+  />
+</Preview>
+
+## Manuell håndtering av state
+
+Hvis du ønsker å håndtere state manuelt, kan du bruke `Textarea` i stedet for `TextareaControlled`
+
+<Preview
+  hideHtml
+  react={`<Textarea value={value} onChange={(e) => setValue(e.target.value)} />`}
+>
+  <TextareaExample />
+</Preview>
+
+## Tilgjengelighet
+
+### Tegnteller
+
+Brukere av skjermlesere, får varslinger når det er 10 og 5 tegn igjen (polite), og en assertive varsling når de ikke har noen tegn igjen eller overskrider det maksimale antall tegn.
+
+### Unngå placeholders
+
+Vi fraråder bruken av `placeholder`-attributtet på input-elementer.
+
+### Mer informasjon
+
+- [WCAG 1.3.1: Informasjon og relasjoner](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden/131-informasjon-og-relasjoner-niva)

docs/data/components/legacy/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Legacy
+rank: 4
+---

docs/data/getting-started.mdx

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

docs/data/guidelines/index.mdx

@@ -1,4 +0,0 @@
----
-title: Retningslinjer
-rank: 2
----

docs/data/guidelines/typography.mdx

@@ -1,5 +0,0 @@
----
-title: Typografi
----
-
-# Typografi content

docs/data/icons/icon-resources.mdx

@@ -0,0 +1,94 @@
+---
+title: Ressurser
+rank: 2
+---
+
+# Ikoner
+
+<TableOfContents />
+
+## Nedlastning og ressurser
+
+<IconDownload />
+
+## Teknisk
+
+### Installering
+
+<Bash copy terminal code={`yarn add @navikt/ds-icons`} />
+<Bash copy terminal code={`npm i @navikt/ds-icons`} />
+
+Ikonene er tilgjengeliggjort for React og SVG.
+Husk å sjekke at prosjektet støtter lasting av SVG med riktige loaders
+eks <Link href="https://www.npmjs.com/package/file-loader">file-loader</Link> eller <Link href="https://www.npmjs.com/package/@svgr/webpack">@svgr/webpack</Link>.
+React komponenten tar imot props og setter dem direkte på SVG elementet. Husk <code>`aria-label`</code>
+, <code>`role`</code>, <code>`focusable`</code> propsene for en tilgjengelig brukeropplevelse.
+
+### Bruk
+
+SVG til ikonene har height og width satt til <code>1em</code>. Dette betyr at man må sette font-size på ikonet/parent for å
+endre størrelse eller endre width og height med props.
+
+### React
+
+<Bash code={`import { System } from '@navikt/ds-icons';`} language="jsx" copy />
+
+Med wrapper (16px font-size)
+
+<Bash
+  code={`<span style={{"fontSize": "1.5rem"}}>
+  <System aria-label="System ikon" role="img" focusable="false"/>
+</span>`}
+  language="jsx"
+  copy
+/>
+
+Uten wrapper (16px font-size)
+
+<Bash
+  code={`<System style={{"fontSize": "1.5rem"}} aria-label="System ikon" role="img" focusable="false"/>`}
+  language="jsx"
+  copy
+/>
+
+### SVG
+
+<Bash
+  code={`const System = require('@navikt/ds-icons/svg/System.svg');`}
+  language="jsx"
+  copy
+/>
+
+Med <code>img</code> (16px font-size)
+
+<Bash
+  code={`<img src={System} style={{ height: "1.5rem" }} alt="System ikon" />`}
+  language="jsx"
+  copy
+/>
+
+Med CSS
+
+<Bash
+  code={`.cssClass::after {
+  content: url("~@navikt/ds-icons/svg/System.svg");
+}`}
+  language="css"
+  copy
+/>
+
+## Tilgjengelighet
+
+### Universell utforming
+
+Meningsbærende ikoner skal forholde seg til WCAG 2.0 med AA 4.5 kontrastverdi som minimum. Ikoner som har en ornamental eller støttende funksjon til tekst kan vises med en 3.0 kontrastverdi.
+
+### Interaksjon
+
+Interaksjon med et ikon skal markeres ved å bruke mer enn to visuelle virkemidler. Forandring av form og farge, form og bevegelse, farge og bevegelse osv. I en NAV-sammenheng brukes form og farge som hovedform for markering av interaksjon.
+
+I praksis betyr dette av ikonene vises i sin “linje” versjon frem til man hoverer over dem. Ved hover blir ikonene erstattet med sin tilsvarende fylte versjon av det samme ikonet.
+
+### Sammensatte ikoner
+
+Det finnes ikoner som kan settes sammen for å kommunisere to eller flere ideer samtidig. Noen ikoner kan brukes som substantiver, mens andre kan fungere som et verb som tilsetter en handling over en annen konkret betydning. Selv om dette er noe som kan gjøres med de fleste av ikonene så skal man være forsiktig at ikonen beskriver en handling som medfører en tydelig handling til base ikonen

docs/data/icons/icon-search.mdx

@@ -0,0 +1,12 @@
+---
+title: Ikonsøk
+rank: 1
+---
+
+# Ikoner
+
+NAV sine egendesignede ikoner er nå tilgjengelige i både SVG og React format
+
+## Ikonsøk
+
+<IconPage />

docs/data/icons/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Ikoner
+rank: 2
+---

docs/data/index.mdx

@@ -1 +1 @@
-# Hello, world
+# Forside

docs/data/patterns/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Mønster
+rank: 3
+---

docs/data/patterns/skjemavalidering.mdx

@@ -0,0 +1,32 @@
+---
+title: Skjemavalidering
+rank: 1
+---
+
+# Skjemavalidering
+
+Dette mønsteret skal demonstrere reglene for skjema-validering.
+
+## Regler
+
+- Kravene for å fylle ut skjemaet riktig skal tydelig fremgå av skjemaet uten at brukeren trenger å få noen feilmeldinger fra valideringen for å forstå dette (retningslinjer for dette er [under arbeid](https://github.com/navikt/Designsystemet/issues/135))
+- Validering per felt skal ikke skje før etter første `submit`-forsøk, deretter på `change`
+- Hvis skjemaet har feil ved `submit` skal [feiloppsummeringsboks](/components/feiloppsummering) med liste over alle feil vises nederst i skjemaet, men over submit-knappen
+- Feiloppsummeringsboks skal automatisk få `fokus` når den vises
+- Feil i feiloppsummeringsboks skal være [lenker](/components/lenke) til det feltet feilen gjelder
+- Feil i feiloppsummeringsboks forsvinner etterhvert som de blir utbedret
+- Etter at alle feil er blitt utbedret, må det et nytt `submit`-forsøk til for at nye feil igjen skal vises i feiloppsummeringen
+- Husk at obligatoriske felt må markeres tydelig. I NAV er stort sett alt vi spør etter obligatoriske spørsmål, så vi markerer som regel heller frivillige felt (for eksempel med "frivillig" i selve labelen til feltet). Uansett om vi markerer obligatoriske felt eller frivillige, må vi gi informasjon om dette i begynnelsen av skjemaet. For eksempel ved å si "Vi spør stort sett bare om informasjon som er nødvendig for å behandle saken din. Det vil si alle felt er i utgangspunkt påkrevde og må fylles ut. Frivillige felt er markert med "frivillig"."
+
+<br />
+
+<Alert variant="info">
+  Skjema som bare har ett skjemafelt (f.eks. søkefelt eller skjema fordelt over
+  flere sider/steg) er unntatt disse reglene.
+</Alert>
+
+## Live eksempel
+
+<Preview noCode>
+  <FormValidationExample />
+</Preview>

docs/data/resources/colors.mdx

@@ -0,0 +1,139 @@
+---
+title: Farger
+rank: 1
+---
+
+# Farger
+
+<TableOfContents />
+
+## Fargepalette
+
+<Palette />
+
+## Teknisk
+
+### Installering
+
+Alle fargene våre er [definert](https://github.com/navikt/nav-frontend-core/blob/master/less/_variabler.less) i
+pakken `nav-frontend-core`, og kan installeres slik:
+
+<Bash terminal copy code={`npm install nav-frontend-core --save`} />
+<Bash terminal copy code={`yarn add nav-frontend-core`} />
+
+### Bruk med Less
+
+Hvis du bruker Less kan du bruke disse variablene ved å importere en referanse til `_variabler`-fila i cora-pakken i stilarket ditt:
+
+<Bash
+  code={`@import (reference) "~nav-frontend-core/less/_variabler";
+.minDiv {
+    background: @navRod;
+}`}
+  copy
+  language="css"
+/>
+
+## Tilgjengelighet
+
+### Generell bruk av farge
+
+Ved bruk av farger gjelder det et generelt krav om at fargene ikke er det eneste virkemiddel for å
+formidle informasjon.
+
+<Preview noCode>
+  <Undertittel>Eksempler:</Undertittel>
+  <ul>
+    <li>
+      Lenker kan ikke bare skille seg fra vanlig tekst ved å bruke en annen
+      farge, men bør også ha understrek eller andre effekter i tillegg
+    </li>
+    <li>
+      En knapp kan ikke bare skifte farge ved hover/klikk, men bør også endre
+      form eller posisjon
+    </li>
+    <li>
+      En notifikasjon om noe positivt/negativt kan ikke bare være farget grønn
+      eller rød, men bør også ha et støttende ikon med unik form.
+    </li>
+  </ul>
+</Preview>
+
+### Krav til kontrast
+
+Kravene til fargekontrast varierer avhengig av hvilket element det er snakk om:
+
+<table className="tabell" id="color-accessibility__contrast-table">
+  <thead>
+    <tr>
+      <th>Element</th>
+      <th className="align-right">Kontrast&shy;krav</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <div className="table-element-type">
+          <i id="color-accessibility__typo-icon">
+            <TypoIcon />
+          </i>
+          Tekst og bilder av tekst
+        </div>
+      </td>
+      <td className="align-right">
+        Minst <strong>4.5:1</strong>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div className="table-element-type">
+          <i id="color-accessibility__button-icon">
+            <ButtonIcon />
+          </i>
+          Interaktive komponenter
+        </div>
+      </td>
+      <td className="align-right">
+        Minst <strong>3:1</strong> *
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div className="table-element-type">
+          <i id="color-accessibility__graphics-icon">
+            <VeilederIcon />
+          </i>
+          Illustrasjoner og informativ grafikk
+        </div>
+      </td>
+      <td className="align-right">
+        Minst <strong>3:1</strong>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<Alert variant="info">
+  *{" "}
+  <Link href="https://www.w3.org/TR/WCAG21/#non-text-contrast">
+    WCAGs suksesskriterium 1.4.11
+  </Link>{" "}
+  gir egentlig unntak for interaktive elementer som er <i>disabled</i>, men det
+  er en{" "}
+  <Link href="https://github.com/w3c/wcag21/issues/805">
+    pågående diskusjon
+  </Link>{" "}
+  om dette er hensiktsmessig eller ikke - som ikke har resultert i noe tydelig
+  konsensus enda. Vi synes mange av argumentene mot dette unntaket er fornuftige
+  og har derfor valgt å etterleve kontrastkravene også for disabled elementer.
+</Alert>
+
+### Verktøy
+
+- [Sjekk kontrastverdier hos Web AIM](https://webaim.org/resources/contrastchecker/)
+
+### WCAGs suksesskriterier
+
+- [WCAG 1.4.1: Use of color](https://www.w3.org/TR/WCAG21/#use-of-color)
+- [WCAG 1.4.3: Contrast (minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum)
+- [WCAG 1.4.11: Non-text contrast](https://www.w3.org/TR/WCAG21/#non-text-contrast)

docs/data/resources/illustrations.mdx

@@ -0,0 +1,80 @@
+---
+title: Illustrasjoner
+rank: 6
+---
+
+# Illusttrasjoner
+
+Det er utviklet et eget illustrasjonsbibliotek for NAV, som er mulig å
+bruke for alle ansatte i etaten. Her kan du laste ned hele biblioteket
+og se hvilke retningslinjer som gjelder for bruk.
+
+<TableOfContents />
+
+## Figma ressurser
+
+<Lenkepanel
+  className="resource-link"
+  href="https://www.figma.com/file/Fqn33tUPirzG8jLsI7kpc4/NAV-illustrasjonsbiblioteket-2.1-Figma"
+  border
+>
+  <FigmaIcon />
+  Illustrasjons&shy;bibliotek
+</Lenkepanel>
+
+## Sketch ressurser
+
+<Lenkepanel
+  className="resource-link"
+  href="https://sketch.cloud/s/OYbp8"
+  border
+>
+  <SketchLogo />
+  Illustrasjons&shy;bibliotek
+</Lenkepanel>
+
+## Tilgjengelighet
+
+### Form og farge
+
+#### Gode kontraster
+
+Sørg for at kontrasten mellom forgrunn og bakgrunn er sterk nok. Som hovedregel skal kun [farger med 60% lys
+nyanse](/resources/colors#hele-paletten) brukes som bakgrunn. Se også gjeldende
+[regler for kontrast i illustrasjoner](/resources/colors/accessibility#krav-til-kontrast).
+
+<br />
+
+<Preview noCode>
+  <img
+    src={"/illustrations-background-contrast.png"}
+    alt="Viser eksempel ved bruk av forskjellige bakgrunns-kontraster"
+  />
+</Preview>
+
+#### Ikke bruk skygge og glød
+
+<Preview noCode>
+  <img src={"/illustrations-shadow-glow.png"} alt="" />
+</Preview>
+
+#### Ikke bruk gradienter
+
+<Preview noCode>
+  <img src={"/illustrations-gradients.png"} alt="" />
+</Preview>
+
+### Vis mangfold
+
+NAV lager tjenester for hele landet. Derfor bør vi forsøke å gjenspeile mangfoldet i befolkningen når vi bruker
+illustrasjoner for å visualisere brukerne våre.
+
+### Unngå stereotyper
+
+Ingen liker å bli generalisert eller «satt i bås». Vær oppmerksom på visuelle fremstillinger av forskjellige
+roller og at disse ikke bidrar til å forsterke uheldige karakteristikker og stereotyper.
+
+### Hjelp og råd
+
+Hvis du er i tvil eller har noen spørsmål om riktig bruk av illustrasjoner, bør du ta kontakt
+med [kommunikasjonsavdelingen](https://navno.sharepoint.com/sites/intranett-kommunikasjon) (NAV intranett).

docs/data/resources/index.mdx

@@ -0,0 +1,4 @@
+---
+title: Ressurser
+rank: 4
+---

docs/data/resources/internal-ux-principles.mdx

@@ -0,0 +1,47 @@
+---
+title: Prinsipper for brukeropplevelse på interne flater
+rank: 9
+---
+
+# Prinsipper for brukeropplevelse på interne flater
+
+NAVs systemportefølje for ansatte, skal oppleves som en kraftfull digital
+verktøykasse. De digitale verktøyene skal støtte NAVs fagpersoner i å utføre
+arbeidet sitt på en profesjonell, effektiv og trygg måte.
+
+<TableOfContents />
+
+## Profesjonelt
+
+Som fagperson og ekspertbruker i NAV opplever jeg:
+
+- At jeg forstår formålet med et system, og hvordan det samhandler med andre systemer i NAV.
+- At det er tydelig for meg hvilket system som skal brukes til å utføre oppgaven min
+- At systemet støtter meg i å utføre oppgavene mine i henhold til gjeldende regler og praksis, men tillater at jeg utviser faglig skjønn
+- At systemet lar både uerfarne brukere og eksperter skape verdi. Jeg opplever mestring og progresjon etterhvert som jeg lærer systemet
+- At systemet støtter at ulike fagpersoner har ulike oppgaver, bruksmønster og funksjonsevne.
+- At systemene er tilpasset min arbeidshverdag og mitt utstyr
+- At endringer i systemene er hensiktsmessige, og skjer i takt med at rutiner og oppgaver i NAV endres
+
+## Effektivt
+
+Som fagperson og ekspertbruker i NAV opplever jeg:
+
+- At det er en enkel og effektiv arbeidsflyt mellom ulike systemer og roller
+- At jeg ikke trenger å utføre manuelle oppgaver der systemet kan gjøre oppgaven for meg
+- At jeg har enkel tilgang til all informasjon og funksjonalitet som er nødvendig for å utføre oppgaven min.
+- At det er enkelt for meg å fokusere på det som er viktig for at jeg skal kunne utføre oppgaven min
+- At systemet ikke forstyrrer meg unødvendig
+- At jeg ikke trenger å vente på systemet
+- At systemet har konsistent bruksmønster, og at jeg også kan gjenkjenne bruksmønster fra andre NAV-systemer
+
+## Trygt
+
+Som fagperson og ekspertbruker i NAV opplever jeg:
+
+- At jeg kan stole på at systemet alltid virker, og at jeg ikke mister noe av arbeidet mitt
+- At informasjon er korrekt og konsistent på tvers av systemer
+- At jeg får støtte fra systemet til å ta de riktige valgene og registrere korrekte data
+- At jeg kan oppdage og korrigere feil på en enkel måte
+- At det er tydelig for meg hvordan det jeg gjør påvirker og vises for brukeren
+- At automatiserte prosesser er forutsigbare og forståelige

docs/data/resources/language.mdx

@@ -0,0 +1,933 @@
+---
+title: Språk
+rank: 8
+---
+
+# Språk
+
+<TableOfContents />
+
+## Prinsipper
+
+### Brukerne skal forstå hva de har rett til
+
+- Vi skal bruke ord som alle kan forstå. Ingen skal ha behov for å kjenne til juridiske fagord eller NAVs begreper for å forstå tekstene på nav.no. Brukerne skal heller ikke trenge hjelp og veiledning for å forstå innholdet.
+
+### Brukerne skal raskt finne informasjon som er viktig for dem
+
+- Vi skal starte med informasjonen som er viktigst for brukeren. Det vil si informasjon som bidrar til at brukerne raskt får gjort det de skal.
+
+### Teksten må skape trygghet
+
+- For å gjøre brukerne selvstendige og selvhjulpne på nav.no må vi bruke et språk som ikke skaper usikkerhet og tvil. Vi må derfor skrive enkelt, tydelig og konkret.
+
+<br />
+<br />
+
+<Alert variant="info">
+  Usikker på om bregrepene du bruker er riktige? Alle NAV sine godkjente begrep
+  finner du på{" "}
+  <Link href="https://data.nav.no/?size=n_30_n&filters%5B0%5D%5Bfield%5D=tittel&filters%5B0%5D%5Bvalues%5D%5B0%5D=&filters%5B0%5D%5Btype%5D=any&filters%5B1%5D%5Bfield%5D=format&filters%5B1%5D%5Bvalues%5D%5B0%5D=godkjent_begrep&filters%5B1%5D%5Btype%5D=all">
+    data.nav.no
+  </Link>
+  .
+</Alert>
+
+## Skriveråd
+
+### 1. Begynn med det som er viktigst for brukeren
+
+<Preview noCode>
+  <ul>
+    <li>
+      <strong>Hva</strong> skal brukeren gjøre?
+    </li>
+    <li>
+      <strong>Hvordan</strong> skal brukeren gjøre det?
+    </li>
+    <li>
+      <strong>Når</strong> skal brukeren gjør det?
+    </li>
+  </ul>
+</Preview>
+
+Vis tydelig hvilke steg brukeren må gjøre for å utføre oppgaven. Gi også informasjon om hvilke oppgaver NAV har ansvar for. Da vet brukeren når hun skal gjøre noe og når hun må vente på NAV.
+
+Lag gjerne nummererte lister eller visualiser på andre måter når du skal forklare brukerne stegene i en prosess.
+
+#### Hva er nødvendig informasjon?
+
+Forklar nok til at leserne forstår og kan gjøre det de skal på riktig måte. Informasjon som ikke er relevant skal ikke være med.
+
+<Preview noCode>
+  <Undertittel tag="h3">Eksempel:</Undertittel>
+  <p>
+    En tekst som skal forklare hvordan man sender inn meldekort, må svare på de
+    vesentlige spørsmålene leserne har:
+  </p>
+  <ul>
+    <li>Hva må jeg fylle ut?</li>
+    <li>Hvordan sender jeg inn meldekortet?</li>
+    <li>Når må jeg sende inn meldekortet?</li>
+  </ul>
+  <p>
+    Øvrig informasjon om hvorfor NAV krever at brukerne sender inn meldekort og
+    hvilke forpliktelser brukeren har, hører ikke hjemme i denne teksten hvis vi
+    ønsker at flest mulig skal forstå hvordan de sender inn meldekort på riktig
+    måte.
+  </p>
+</Preview>
+
+### 2. Gjør teksten leservennlig for alle
+
+#### 2.1 Skriv kort
+
+For å sikre at leserne forstår informasjonen og klarer å bruke den til å gjøre det de skal, er det et poeng i seg selv at teksten er kort. Gjør teksten så tydelig som mulig ved å kutte overflødige ord og setninger. Unngå setninger som er tvetydige og skaper tvil.
+
+#### 2.2 Skriv korte og enkle setninger
+
+Korte og enkle setninger gjør teksten din mer leservennlig og forståelig. Ha ett poeng i hver setning og sett punktum ofte.
+
+Det er ikke alltid mulig å gjøre teksten kort. Et viktig prinsipp uansett om teksten er kort eller lang, er å begynne med det som er viktigst for leseren.
+
+#### Eksempler på korte og enkle setninger
+
+Har du fått en sykmelding? Logg deg inn på Ditt NAV og gå til Ditt sykefravær. Her finner du informasjon om hva som skjer underveis i sykefraværet ditt.
+
+Du må søke om engangsstønad. Far kan ikke søke for mor, hun må sende egen søknad.
+
+#### 2.3 Velg korte og enkle ord
+
+Velg ord som brukes muntlig. Hvis et ord ikke brukes muntlig, bør du heller ikke bruke det skriftlig. Faguttrykk er ord som er vanskelig å forstå for brukerne og skal helst ikke brukes i tekster på nav.no. Hvis du må ha en referanse kan du Link til kilden, eller skrive den i parentes.
+
+Når en bruker søker etter informasjon i søkefeltet eller leter etter informasjon i en oversikt, ser de etter ord de allerede kjenner. Når vi bruker fremmedord risikerer vi at de ikke finner innholdet de leter etter.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Skriv</th>
+      <th>Ikke skriv</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Mistet retten til stønad i en periode
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Tidsbegrenset bortfall av stønad
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du kan kombinere arbeid med [ytelse]
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Gradering
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Mulighet til å jobbe litt eller delvis
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Restarbeidsevne
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Fra [dato] til [dato]
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Virkningstidspunkt
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Stønaden din varer til og med [dato]
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Maksdato
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 2.4 Skriv hele setninger
+
+Setningene blir vanskelig å forstå om du starter med leddsetninger. Snu heller setningen på hodet.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Bruk hele setninger</th>
+      <th>Ikke start med leddsetning</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du skal følges opp mens du er sykmeldt.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Mens du er sykmeldt, skal du følges opp.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Det betyr at du kan tjene så mye du vil selv om du tar ut hel alderspensjon.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Det betyr at, selv om du tar ut hel alderspensjon, kan du samtidig tjene
+        så mye du vil ved siden av.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 2.5 Unngå forkortelser
+
+Skriv ordene helt ut fordi forkortelser kan skape misforståelser. Hvis du likevel må forkorte et ord, skal du skrive det helt ut første gang du bruker det, med forkortelsen i parentes.
+
+#### 2.6 Ikke bruk metaforer
+
+Metaforer kan skape misforståelser og fungerer dårlig for brukere som ikke har norsk som morsmål.
+
+### 3. Bruk et aktivt og konkret språk
+
+Skriver du aktivt, er det lett for leserne å skjønne hva de må gjøre og hva NAV skal gjøre. Et passivt språk skaper avstand og kan skjule hvem som har ansvar for hva.
+
+I en aktiv setning er subjektet og verbet plassert langt fram i setningen.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Bruk et aktivt språk</th>
+      <th>Ikke skriv passive setninger</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Vi har behandlet søknaden din.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Søknaden er behandlet.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du kan klage på dette vedtaket.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Dette vedtaket kan påklages.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Stortinget har vedtatt nye regler for alderspensjon.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Nye regler for alderspensjon er vedtatt.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 3.1 Skriv direkte til leseren - skriv du, dere og vi
+
+Vi skaper avstand når vi omtaler mottakeren i tredjeperson (vedkommende, mottakeren, søkeren, brukeren) eller ved hjelp av ubestemt pronomen (man, en). Det er lettere for leserne å forstå informasjonen og oppleve den som relevant når du skriver direkte til dem. Tenk på teksten som en samtale mellom deg og brukerne.
+
+Det skal også være lett å se at det er NAV som er avsender. Derfor skal du introdusere NAV tidlig i teksten. Varierer mellom «vi» og «NAV» der det passer seg.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Du, vi og dere tydeliggjør ansvar og roller</th>
+      <th>Her blir roller og ansvar borte</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du må selv søke om AAP i god tid før retten din til sykepenger tar slutt.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Søknad om AAP må sendes inn i god tid før retten til sykepenger er brukt
+        opp.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du må kontakte Skatteetaten hvis du har spørsmål om skatt til Norge mens
+        du bor i utlandet.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Spørsmål om skatteplikt til Norge etter flytting til utlandet må rettes til
+        Skatteetaten.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Vi trenger opplysninger om inntekten din.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Det er behov for opplysninger om inntekten din.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 3.2 Bytt ut ord som slutter på -ing eller -else med verb
+
+Setningene blir mer konkret og enklere å forstå når du bruker verb i stedet for ord som slutter på –ing og –else.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Verb gjør setningen lettere å forstå</th>
+      <th>
+        Ord som slutter på –ing og –else gjør setningen utydelig og vanskelig å
+        forstå
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du må melde fra til NAV hvis inntekten din endrer seg.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Endring i inntekt må meldes inn til NAV.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Vi har vurdert vedtaket ditt på nytt.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        NAV har foretatt en revurdering av vedtaket ditt.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Denne regelen gjelder ikke hvis barnet er adoptert.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Regelen får ikke anvendelse i tilfeller hvor barnet er adoptert.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 3.3 Skriv «brukeren» ikke «bruker»
+
+Å bruke bestemt form når du skriver substantiver gjør teksten mer konkret. Ubestemt form gir teksten et stivt og kjølig preg.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Skriv konkrete substantiv</th>
+      <th>Substantivet i ubestemt form</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Bruker<strong>en</strong>, arbeidsgiver<strong>en</strong>, leg<strong>
+          en
+        </strong>, veileder<strong>en</strong>.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Bruker, arbeidsgiver, lege, veileder.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        De siste tre åre<strong>ne</strong>.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        De siste tre år.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du bruker dette skjema<strong>et</strong>.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Dette skjema bruker du.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Denne forskrift<strong>en</strong>.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Denne forskrift.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 3.4 Skriv «søknaden din», ikke «din søknad»
+
+Som regel plasserer du eiendomspronomenet bak substantivet når du snakker («bilen din», ikke «din bil»). Ved å gjøre det samme når du skriver blir setningen mer muntlig og aktiv.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Skriv slik</th>
+      <th>Ikke skriv slik</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Vi har innvilget søknaden din om sykepenger.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Din søknad om sykepenger er innvilget.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        For å ha rett til AAP må arbeidsevnen din være redusert med minst 50 prosent.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        For å ha rett til AAP må din arbeidsevne være redusert med minst 50 prosent.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+Det finnes noen unntak, for eksempler i selvbetjeningsløsningene. I titler kan det av og til fungere bedre å sette eiendomspronomenet foran substantivet – for eksempel «Ditt NAV» og «Dine sykmeldinger».
+
+#### 3.5 Skriv «NAVs tjenester», ikke «NAV sine tjenester»
+
+Bruke genitiv-s når du skriver om eierforhold.
+
+### 4. Gjør det enkelt for leseren å finne frem i teksten din
+
+#### 4.1 Legg til rette for hurtiglesning
+
+Samlet sett skal overskrifter, mellomtitler og eventuelle uthevinger gi en hel beskrivelse av hva teksten handler om.
+
+<Preview noCode>
+  <Undertittel tag="h3">En oversiktlig tekst har</Undertittel>
+  <ul>
+    <li>informative overskrifter og mellomtitler</li>
+    <li>en kort innledning på 2-3 setninger </li>
+    <li>korte avsnitt med linjeskift mellom</li>
+    <li>punktlister der det passer</li>
+  </ul>
+</Preview>
+
+#### 4.2 Informative overskrifter og mellomtitler
+
+Presise overskrifter og mellomtitler gjør at leserne kan få med seg hovedpoengene i teksten. Titler som består av stikkord gir lite informasjon og kan bli for generelle og upresise.
+
+Velg enkle ord og begreper som leserne bruker til vanlig når du skriver overskrifter og mellomtitler. Da blir det enkelt for leseren å finne innholdet når de leter etter informasjon.
+
+Overskrifter og mellomtitler er også viktig for de som bruker hjelpemiddelteknologi som talesyntese, forstørrelsesprogramvare eller skjermleser. Disse brukerne navigerer ofte ved hjelp av overskrifthierarkiet.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Skriv presise titler</th>
+      <th>Ikke skriv titler som gir lite informasjon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du har fått utbetalt for mye/lite i dagpenger.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Feilutbetaling av dagpenger.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Arbeidsgiveren din skal følge deg opp når du er sykmeldt.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Oppfølging av sykmeldte.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Skal du oppholde deg i utlandet?
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Til eller fra utlandet.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+En god måte å avgrense teksten på er å skrive overskrifter som inneholder verb:
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Konkret overskrift som avgrenser teksten</th>
+      <th>Generell overskrift</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Søk om arbeidsavklaringspenger.
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Arbeidsavklaringspenger.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Hvor lenge kan du få foreldrepenger?
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Foreldrepengeperioden.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 4.4 Skriv en kort innledning
+
+Gi en kort oppsummering av det viktigste i teksten. Gjerne bare én setning, og ikke mer enn 2 setninger eller 30 ord. Innledningen vil på samme måte som overskriften dukke opp i søkelister og må derfor gi selvstendig mening.
+
+#### 4.5 Del teksten inn i avsnitt
+
+Hvert avsnitt skal ha ett budskap og ikke inneholde mer enn 2 - 3 setninger. Teksten bør ikke ha mer enn tre avsnitt før ny mellomtittel.
+
+#### 4.6 Bruk punktlister
+
+Bruk punktlister når du skal ramse opp informasjon eller ulike alternativer. For leserne er det lettere å få med seg informasjon i en liste enn mye informasjon i løpende tekst.
+
+Start alltid listen med det viktigste punktet først, og unngå å bruke samme ord i starten av hvert punkt. Det gjør teksten enklere å lese.
+
+#### Noen nyttige punkter om punktlister:
+
+<ul>
+  <li>Punktlisten skal helst være kort – maks 7–9 punkter.</li>
+  <li>
+    Punktene kan være både hele setninger, deler av setninger eller enkeltord.
+    Det viktigste er at alle punktene i én liste henger sammen, både
+    innholdsmessig og språklig.
+  </li>
+  <li>
+    Bruker du fullstendige setninger skal det være stor forbokstav i det første
+    ordet og punktum til slutt. Innledningsteksten skal avsluttes med kolon.
+  </li>
+  <li>
+    Hvis punktlisten er en fortsettelse på en innledende setning, skal de ha
+    liten forbokstav og ikke punktum til slutt. Den innledende setningen skal
+    ikke avsluttes med kolon.
+  </li>
+</ul>
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th width="50%">
+        Slik skriver du punktlister med ufullstendige setninger
+      </th>
+      <th>Slik skriver du punktlister med fullstendige setninger</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Hvis det er din egen helse som er årsaken til at du ønsker å utsette foreldrepengeperioden,
+        må du dokumentere
+        <ul>
+          <li>i hvilken grad du er avhengig av hjelp </li>
+          <li>hvor lenge sykdommen sannsynligvis kommer til å vare</li>
+        </ul>
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Opptjening basert på pensjonsgivende inntekt:
+        <ul>
+          <li>
+            De 20 beste inntektsårene dine avgjør hvor stor pensjonen din blir.
+          </li>
+          <li>Ett år med pensjonspoeng gir ett helt år med trygdetid.</li>
+          <li>Du kan få opptjening for ulønnet omsorgsarbeid.</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### 4.6 Når du bruker Linkr
+
+For mange brukere er det vanskelig å se sammenhengen mellom ulike sider på nav.no. Vi bør derfor unngå å Link til relatert innhold på andre sider, så langt det er mulig.
+
+Må du bruke Linkr så vær tydelig på om det er nødvendig å lese teksten som du Linkr til for at brukerne skal få gjort det de skal. Brukerne skal slippe å føle at det hele tiden er noe mer de skulle trykket på eller lest for å ivareta saken sin.
+
+Husk også at brukere med hjelpemiddelteknologi som talesyntese, forstørrelsesprogramvare eller skjermleser ofte navigerer ved hjelp av Linkstrukturene.
+
+<Preview noCode>
+  <Undertittel tag="h3">
+    Skriv informative og selvforklarende Linktitler
+  </Undertittel>
+  <p>
+    Fortell hva som ligger bak Linkn. Linkteksten bør være det samme som i
+    tittelen/overskriften på siden på Linkr til. «Klikk her» eller «les mer» gir
+    lite informasjon om hva som skjuler seg bak Linkn. Skriv heller{" "}
+    <a href="#">Les mer om hvilke tiltaksplasser som finnes i Oslo</a> eller{" "}
+    <a href="#">Les mer om dagpenger og utdanning</a>.
+  </p>
+  <p>
+    Hvis Linkn heter «Jobbsøkerkurs», holder det ikke at tittelen på siden Linkn
+    fører til inneholder ordet «kurs». Den må inneholde ordet «jobbsøkerkurs».
+  </p>
+</Preview>
+
+#### 4.7 Bruk fet eller halvfet når du skal utheve ord og setninger
+
+Bruk fet eller halvfet når du vil utheve ord og setninger, men bruk det med omhu og vei det opp mot mellomtitlene. Skrift som er fet eller halvfet er vanskeligere å lese enn normal skrift.
+
+<Preview noCode>
+  <Undertittel tag="h3">
+    Ikke bruk understreking, kursiv eller store bokstaver
+  </Undertittel>
+  <ul>
+    <li>
+      <strong>Ikke bruk kursiv</strong>
+      <br />
+      Kursiv er vanskelig å lese på skjerm
+    </li>
+    <li>
+      <strong>Understreking er forbeholdt Linkr</strong>
+      <br />
+      Understreking kan forveksles med Linkr, og gjør teksten din uoversiktlig.
+    </li>
+    <li>
+      <strong>Ikke bruk STORE BOKSTAVER</strong>
+      <br />
+      Store bokstaver er vanskeligere å lese fordi bokstavene ser likere ut på
+      skjerm enn små bokstaver. På skjerm oppfattes også store bokstaver som å
+      rope høyt.
+    </li>
+  </ul>
+</Preview>
+
+#### 4.8 Ikke bruk nedlastbare filer som word, ppt, pdf etc.
+
+Det er tungvint for brukerne å måtte bla i ppt- og pdf-presentasjoner og mange kan miste kontroll over hvor de er. Mange brukere kan også mangle den nødvendige programvaren for å åpne slike filer. Må du bruke nedlastbare filer så skal vi i det offentlige bruke åpne formater, som PDF-, HTML- og XML- filer som kan lastes ned av alle.
+
+### 4.9 Unngå «ofte stilte spørsmål»
+
+Det er bedre å ta seg tid til å skrive en forståelig og god tekst som er enkel å finne fram i.
+
+### 5. Bruk ordbok
+
+Språkrådet har gratis ordbøker på nett: https://ordbok.uib.no/
+
+## Tall, tid og dato
+
+### Tall
+
+#### På nav.no skriver vi tall med siffer
+
+I tekster fra NAV er tall sentrale. For å gjøre det enkelt for brukerne å få med seg viktige frister eller perioder, skriver vi også tall under 12 med siffer på nav.no.
+
+<table className="tabell tabell--stripet tabell--dos-donts">
+  <thead>
+    <tr>
+      <th>Skriv</th>
+      <th>Ikke skriv</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Du får svar på søknaden din innen 4 uker
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Du får svar på søknaden din innen fire uker
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <i className="language__table-icon">
+          <SuccessIcon />
+        </i>
+        Klagefristen er 3 uker
+      </td>
+      <td>
+        <i className="language__table-icon">
+          <ErrorIcon />
+        </i>
+        Klagefristen er tre uker
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+#### Prosent
+
+Symboler som % kan være vanskelige å se, skriv derfor prosent med bokstaver.
+
+#### Penger og valuta
+
+Vi skriver norske kroner og beløp slik:
+
+- 500 kroner
+- 1 043 kroner
+- 10 000 kroner
+- 149 787 kroner
+
+#### Tall og tegn
+
+Det skal være mellomrom mellom tall og tegn. Eksempel: § 3.
+
+### Datoer
+
+Vi skriver datoer slik:
+
+- september 2018
+- fra 15. september til 1. desember 2018
+
+### Klokkeslett
+
+Vi skriver klokkeslett slik:
+
+- kl. 08.30
+
+### Telefonnummer
+
+Vi skriver telefonnummer slik:
+
+- Mobilnummer: 901 00 222
+- Fasttelefon: 22 72 67 00
+- Med landkode: +47 22 72 67 00
+- Femsifret nummer: 04545
+- 800-nummer: 800 30 300
+
+## Sjekkliste
+
+### 1. Tar du hensyn til leseren din?
+
+- Begynn med det som er viktigst for brukerne.
+- Hvilket problem skal brukerne løse?
+- Er alt innhold i teksten relevant for brukerne eller er det informasjon du kan fjerne?
+- Vis hvilke steg brukerne må gjøre for å utføre oppgaven. Bruk gjerne nummererte lister eller andre visuelle virkemidler.
+
+### 2. Skriver du for alle?
+
+- Skriv korte setninger.
+- Skriv setninger som ikke skaper tvetydighet eller tvil.
+- Bruk vanlige ord som brukerne forstår.
+- Unngå metaforer og forkortelser.
+- Bruk hele setninger og unngå å starte med leddsteninger.
+
+### 3. Har du brukt et aktivt og konkret språk?
+
+- Skriv direkte til leseren. Skriv du, dere og vi.
+- Bruk et aktivt språk. Skriv «vi har behandlet søknaden din» og ikke «søknaden er behandlet».
+- Bytt ut ord som slutter på –ing eller –else med verb. Skriv «inntekten din endrer seg» og ikke «endring i inntekt».
+- Plasser eiendomspronomen bak substantivet. Skriv «søknaden din» og ikke «din søknad».
+- Bruke bestemt form når du skriver substantiver. Skriv «arbeidsgiveren» og ikke «arbeidsgiver».
+
+### 4. Har teksten din en god struktur?
+
+- Gir overskriften og mellomtitlene i teksten selvstendig mening?
+- Gir overskriften og mellomtitlene i teksten en samlet beskrivelse av hovedpoengene i teksten?
+- Oppsummerer innledningen det viktigste i teksten? Har innledningen mer enn 2-3 setninger?
+- Er hvert avsnitt mer enn 2 – 3 setninger?
+- Har teksten mer enn tre avsnitt før ny mellomtittel?
+- Trenger teksten flere mellomtitler?
+- Bruker du punktlister for å gjøre hovedpoengene lettere å finne for leseren?
+- Unngår du kursiv, understreking og store bokstaver?
+
+### 5. Søkeord og Linkr
+
+- Har du brukt brukervennlige søkeord i overskrift og mellomtitler?
+- Bruk ord som leseren vanligvis bruker, da er det enklere å finne om noen søker etter teksten din i Google eller på selve nettsiden.
+- Har du Linkr i teksten? Er Linktekstene selvforklarende? Bruk gjerne samme Linktekst som overskriften i teksten du Linkr til.
+- Skill mellom Linkr som er helt nødvendige for at brukerne skal få løst oppgaven de skal gjøre, og andre Linkr med relevant informasjon.
+- Ikke bruk nedlastbare filer (pdf, word etc.).
+
+### 6. Har du testet teksten din?
+
+- Har du lest teksten høyt?
+- Har en kollega lest korrektur?
+- Har du spurt en bruker eller kollega som ikke kjenner fagområdet om teksten er forståelig?

docs/data/resources/new-project.mdx

@@ -0,0 +1,72 @@
+---
+title: Nytt prosjekt
+---
+
+# Start nytt prosjekt
+
+Denne siden er ment å være til hjelp for de som trenger litt veiledning til å
+komme i gang med nye prosjekter i NAV.
+
+<TableOfContents />
+
+## For designere
+
+### Figma-ressurser
+
+<Lenkepanel
+  className="resource-link"
+  href="https://www.figma.com/file/kze2fE59WLaATAS9XAM7Es/NAV-UI-biblioteket-2.1-Figma"
+  border
+>
+  <FigmaIcon />
+  UI-bibliotek
+</Lenkepanel>
+<Lenkepanel
+  className="resource-link"
+  href="https://www.figma.com/file/Fqn33tUPirzG8jLsI7kpc4/NAV-illustrasjonsbiblioteket-2.1-Figma"
+  border
+>
+  <FigmaIcon />
+  Illustrasjons&shy;bibliotek
+</Lenkepanel>
+<Lenkepanel
+  className="resource-link"
+  href="https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/NAV-ikoner-2.1-Figma-i-test"
+  border
+>
+  <FigmaIcon />
+  Ikon&shy;bibliotek
+</Lenkepanel>
+<Lenkepanel
+  className="resource-link"
+  href="https://www.figma.com/file/3AjAxeQP4uMFgqSazKXxOh/NAV-Ikonbiblioteket-Streamline"
+  border
+>
+  <FigmaIcon />
+  Gammelt ikon&shy;bibliotek (Streamline, kun tilgjengelig for interne)
+</Lenkepanel>
+
+## For utviklere
+
+### Eksempel-applikasjoner
+
+Her er noen eksempler på forskjellige oppsett med frontend-rammeverket.
+
+<Lenkepanel
+  className="resource-link"
+  href="https://github.com/navikt/nav-frontend-moduler/tree/master/examples/cra"
+  border
+>
+  <GithubLogo />
+  Create React App
+</Lenkepanel>
+<Lenkepanel
+  className="resource-link"
+  href="https://github.com/navikt/nav-frontend-moduler/tree/master/examples/webpack"
+  border
+>
+  <GithubLogo />
+  Webpack
+</Lenkepanel>
+
+Du finner også en mengde [åpne frontend-prosjekter under NAVIKT-gruppen på Github](https://github.com/navikt?utf8=✓&q=frontend&type=&language=).

docs/data/resources/subdomains.mdx

@@ -0,0 +1,49 @@
+---
+title: Subdomener i NAV
+rank: 1
+---
+
+# Subdomener i NAV
+
+Det er Kommunikasjonsavdelingen som er eier av nav.no og tar beslutninger om
+hvordan NAV fremstår, og strategien er å fremstå som ett NAV.
+
+<TableOfContents />
+
+## Når kan vi vurdere bruk av subdomener?
+
+- Når det handler om kampanjer med avgrenset varighet og klart definert målgruppe.
+- Skal dele informasjon av allmenn interesse, men som ikke er en del av vårt ordinære tjenestetilbud. Eksempler: [data.nav.no](https://data.nav.no) og [design.nav.no](https://design.nav.no).
+- Når målgruppen er interne ansatte.
+
+Det vurderes om subdomener skal brukes for re-branding av NAV-tjenester i gitte tilfeller ​som for eksempel [arbeidsplassen.nav.no](https://arbeidsplassen.nav.no), som er en pilot for å se om re-branding av en tradisjonell NAV-tjeneste vil føre til at arbeidsgivere vil bruke NAV til rekruttering i større grad enn i dag​.
+
+Subdomener brukes kun etter avtale med <Link href="https://navno.sharepoint.com/sites/intranett-kommunikasjon">Kommunikasjonsavdelingen (NAV intranett)</Link>.
+
+<strong>Konvensjonen som skal brukes i disse tillfeller er:</strong>
+<br />
+xyz.nav.no​
+
+<Preview noCode>
+  <Undertittel>Eksempler:</Undertittel>
+  <ul>
+    <li>inkludering.nav.no</li>
+    <li>design.nav.no</li>
+  </ul>
+</Preview>
+
+## Hva med ordinære tjenester i nav.no?
+
+NAVs ordinære tjenestetilbud bruker ikke subdomener, selv om målgruppen kan oppfattes som unikt og klart definert.
+
+<strong>Konvensjonen som skal brukes i disse tillfeller er:</strong>
+<br />
+nav.no​/xyz
+
+<Preview noCode>
+  <Undertittel>Eksempler:</Undertittel>
+  <ul>
+    <li>nav.no/person</li>
+    <li>nav.no/familie</li>
+  </ul>
+</Preview>

docs/data/resources/typography.mdx

@@ -0,0 +1,60 @@
+---
+title: Typografi
+rank: 1
+---
+
+# Typografi
+
+NAV sin font er Source Sans Pro og kan tas i bruk med vår egen <Link href="/components/typografi">Typografi-komponent</Link>
+
+<TableOfContents />
+
+## Source Sans Pro
+
+<div className="sanspro--padding">
+  <strong className="strongAa">Aa</strong>
+  <p>
+    Source® Sans Pro, Adobe sin første open source font-familie, ble designet av
+    Paul D. Hunt. Det er en sans serif font som er ment å fungere spesielt bra
+    på digitale brukergrensesnitt.
+  </p>
+</div>
+
+<Lenkepanel border href="https://fonts.google.com/specimen/Source+Sans+Pro">
+  Last ned fra Google Fonts
+</Lenkepanel>
+
+## Typografisk hierarki
+
+Hierarkiet er inspirert av typografisk tradisjon hvor man gir en bestemt størrelse i en font et bestemt navn. Intensjonen med dette er å etablere et felles domene som vi kan bruke på tvers av roller og spesialiteter, hvor alle får en felles referanse til [de ulike størrelsene](/components/typografi).
+
+## Vektkombinasjoner
+
+<Preview noCode>
+  <Normaltekst>Norske folkeeventyr</Normaltekst>
+  <Innholdstittel>En gammeldags juleaften</Innholdstittel>
+</Preview>
+
+<Preview noCode>
+  <Normaltekst>
+    01.09.16 /{" "}
+    <Undertekst tag="span">
+      <strong>Viktig informasjon</strong>
+    </Undertekst>
+  </Normaltekst>
+  <Undertittel style={{ margin: "0.5rem 0" }}>
+    En gammeldags juleaften
+  </Undertittel>
+  <Normaltekst>
+    Veggene var prydet med oljemalerier, portretter av stive damer med pudrede
+    koafyrer, av Oldenborgere og andre berømmelige personer i panser og plate
+    eller røde kjoler.
+  </Normaltekst>
+</Preview>
+
+<Preview noCode>
+  <Undertittel style={{ margin: "0.5rem 0" }}>
+    En gammeldags juleaften
+  </Undertittel>
+  <Normaltekst>(1841-1844) – Peter Christen Asbjørnsen</Normaltekst>
+</Preview>

docs/examples/ekspanderbartpanel/ekspanderbartpanel-base.js

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import { Knapp } from "nav-frontend-knapper";
+import { EkspanderbartpanelBase } from "nav-frontend-ekspanderbartpanel";
+
+const btnStyle = { marginRight: "0.5rem", marginBottom: "1rem" };
+
+const EkspanderbartpanelEksempel = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <Knapp onClick={() => setOpen(true)} style={btnStyle}>
+        Åpne
+      </Knapp>
+      <Knapp onClick={() => setOpen(false)} style={btnStyle}>
+        Lukke
+      </Knapp>
+      <EkspanderbartpanelBase
+        tittel="Kan også klikke her"
+        apen={open}
+        onClick={() => setOpen((open) => !open)}
+      >
+        Alt innholdet ditt
+      </EkspanderbartpanelBase>
+    </div>
+  );
+};
+
+export default EkspanderbartpanelEksempel;

docs/examples/form-validation/FormValidationExample.js

@@ -0,0 +1,331 @@
+import React from "react";
+import { Systemtittel, Undertittel } from "nav-frontend-typografi";
+import {
+  Input,
+  CheckboksPanelGruppe,
+  SkjemaGruppe,
+  Feiloppsummering,
+} from "nav-frontend-skjema";
+import Knapp, { Hovedknapp, Flatknapp } from "nav-frontend-knapper";
+import Spinner from "nav-frontend-spinner";
+
+import "./styles.less";
+
+const isNumeric = (value) => {
+  const n = value.toString().replace(",", ".");
+  return !isNaN(parseFloat(n)) && isFinite(n);
+};
+
+class FormValidationExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.validators = {
+      choices: [
+        {
+          test: (v) => v && v.length,
+          failText: "Du må velge minst én ting",
+        },
+      ],
+      address: [
+        {
+          test: (v) => v && v.length,
+          failText: "Du må oppgi en gateadresse",
+        },
+      ],
+      zip: [
+        {
+          test: (v) => v && v.length,
+          failText: "Du må oppgi et postnummer",
+        },
+        {
+          test: (v) => isNumeric(v),
+          failText: "Postnummer må være et tall",
+        },
+        {
+          test: (v) => v.length === 4,
+          failText: "Postnummer må ha 4 siffer",
+        },
+      ],
+      city: [
+        {
+          test: (v) => v && v.length,
+          failText: "Du må oppgi et poststed",
+        },
+      ],
+    };
+
+    this.state = {
+      fieldValues: {
+        choices: [],
+        address: "",
+        zip: "",
+        city: "",
+      },
+      errors: {
+        choices: undefined,
+        address: undefined,
+        zip: undefined,
+        city: undefined,
+      },
+      submitAttempt: false,
+      submitSuccess: false,
+      resetCounter: 10,
+    };
+
+    this.feiloppsummering = React.createRef();
+  }
+
+  getForm = (feil) => (
+    <form onSubmit={this.submit}>
+      <CheckboksPanelGruppe
+        legend="Hva vil du ha levert?"
+        checkboxes={[
+          {
+            label: "Eplejuice",
+            value: "juice1",
+            checked: this.state.fieldValues.choices.indexOf("juice1") !== -1,
+            id: "b-choices",
+          },
+          {
+            label: "Appelsinjuice",
+            value: "juice2",
+            checked: this.state.fieldValues.choices.indexOf("juice2") !== -1,
+          },
+          {
+            label: "Melk",
+            value: "melk",
+            checked: this.state.fieldValues.choices.indexOf("melk") !== -1,
+          },
+          {
+            label: "Ananasjuice",
+            value: "juice3",
+            checked: this.state.fieldValues.choices.indexOf("juice3") !== -1,
+          },
+        ]}
+        onChange={(e, value) => this.handleChange(value, "choices")}
+        feil={this.state.errors.choices ? this.state.errors.choices : undefined}
+      />
+      <br />
+      <br />
+      <SkjemaGruppe legend="Leveringsadresse">
+        <Input
+          id="b-address"
+          label="Adresse"
+          value={this.state.fieldValues.address}
+          onChange={(e) => this.handleChange(e.currentTarget.value, "address")}
+          feil={
+            this.state.errors.address ? this.state.errors.address : undefined
+          }
+        />
+        <div className="fields postnr-sted">
+          <div className="postnr-sted__postnr">
+            <Input
+              id="b-zip"
+              label="Postnummer (4 siffer)"
+              value={this.state.fieldValues.zip}
+              onChange={(e) => this.handleChange(e.currentTarget.value, "zip")}
+              feil={this.state.errors.zip ? this.state.errors.zip : undefined}
+            />
+          </div>
+          <div className="postnr-sted__poststed">
+            <Input
+              id="b-city"
+              label="Poststed"
+              value={this.state.fieldValues.city}
+              onChange={(e) => this.handleChange(e.currentTarget.value, "city")}
+              feil={this.state.errors.city ? this.state.errors.city : undefined}
+            />
+          </div>
+        </div>
+      </SkjemaGruppe>
+      {feil && !!feil.length && (
+        <Feiloppsummering
+          innerRef={this.feiloppsummering}
+          tittel="For å gå videre må du rette opp følgende:"
+          feil={feil}
+        />
+      )}
+      <div>
+        <div className="form-buttons" style={{ display: "flex" }}>
+          <Hovedknapp type="submit">Fullfør</Hovedknapp>
+          <Flatknapp onClick={this.reset}>Nullstill</Flatknapp>
+        </div>
+      </div>
+    </form>
+  );
+
+  getReceipt = () => (
+    <div className="receipt">
+      <Undertittel>Skjema sendt!</Undertittel>
+      <p>
+        Skjema tilbakestilles om&nbsp;
+        {this.state.resetCounter}&nbsp; sekunder...
+      </p>
+      <br />
+      <Knapp onClick={this.reset}>Tilbake</Knapp>
+    </div>
+  );
+
+  validateField = (name) =>
+    this.validators[name].find(
+      (validator) => !validator.test(this.state.fieldValues[name])
+    );
+
+  validateAll = () => {
+    const errors = {};
+
+    Object.keys(this.validators).forEach((key) => {
+      const failedValidator = this.validateField(key);
+      if (failedValidator) errors[key] = failedValidator.failText;
+    });
+
+    return Object.keys(errors).length ? errors : false;
+  };
+
+  submit = (e) => {
+    e.preventDefault();
+    const errors = this.validateAll();
+
+    if (errors) {
+      this.setState(
+        {
+          errors,
+          submitAttempt: true,
+        },
+        () => this.feiloppsummering.current.focus()
+      );
+    } else {
+      this.setState({
+        submitAttempt: false,
+        submitting: true,
+      });
+
+      new Promise((resolve) => {
+        // Fake 1 sec submit request
+        window.setTimeout(() => resolve("200 OK"), 1000);
+      }).then(() => {
+        this.setState({
+          submitting: false,
+          submitSuccess: true,
+        });
+
+        window.setTimeout(() => {
+          this.timer = window.setInterval(() => {
+            if (this.state.resetCounter > 1) {
+              this.setState({
+                resetCounter: this.state.resetCounter - 1,
+              });
+            } else {
+              this.reset();
+            }
+          }, 1000);
+        }, 3000);
+      });
+    }
+  };
+
+  reset = (e) => {
+    if (e) e.preventDefault();
+    if (this.timer) window.clearInterval(this.timer);
+
+    this.setState({
+      fieldValues: {
+        choices: [],
+        address: "",
+        zip: "",
+        city: "",
+      },
+      errors: {
+        choices: undefined,
+        address: undefined,
+        zip: undefined,
+        city: undefined,
+      },
+      submitAttempt: false,
+      submitSuccess: false,
+      resetCounter: 10,
+    });
+  };
+
+  handleChange = (value, name) => {
+    let val = value;
+
+    if (name === "choices") {
+      const choices = this.state.fieldValues.choices.slice();
+      const index = choices.indexOf(val);
+
+      if (index === -1) {
+        choices.push(val);
+      } else {
+        choices.splice(index, 1);
+      }
+
+      val = choices;
+    }
+
+    const newValues = Object.assign(this.state.fieldValues, {
+      [name]: val,
+    });
+
+    const invalid = this.validateField(name);
+
+    if (this.state.submitAttempt) {
+      const newErrors = Object.assign(this.state.errors, {
+        [name]: invalid ? invalid.failText : undefined,
+      });
+
+      this.setState({
+        fieldValues: newValues,
+        errors: newErrors,
+      });
+    } else {
+      this.setState({
+        fieldValues: newValues,
+      });
+    }
+
+    const hasErrors = this.validateAll();
+
+    if (this.state.submitAttempt && !hasErrors) {
+      this.setState({
+        submitAttempt: false,
+      });
+    }
+  };
+
+  render() {
+    const feil = Object.keys(this.state.errors)
+      .filter((key) => this.state.errors[key])
+      .map((key) => ({
+        skjemaelementId: `b-${key}`,
+        feilmelding: this.state.errors[key],
+      }));
+
+    return (
+      <div className="form-validation-pattern">
+        <Systemtittel>Mitt skjema</Systemtittel>
+        <br />
+        <br />
+        <div aria-live="assertive">
+          {!this.state.submitSuccess &&
+            !this.state.submitting &&
+            this.getForm(feil)}
+          {this.state.submitting && (
+            <div className="spinner-container">
+              <div align="center">
+                <Spinner transparent />
+                <br />
+                <br />
+                Sender inn...
+              </div>
+            </div>
+          )}
+          {this.state.submitSuccess && this.getReceipt()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default FormValidationExample;

docs/examples/form-validation/styles.less

@@ -0,0 +1,58 @@
+.form-validation-pattern {
+  position: relative;
+
+  .skjemagruppe {
+    margin-bottom: 1rem;
+  }
+
+  .knapp--flat {
+    margin-left: 1rem;
+  }
+
+  .spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+  }
+
+  .receipt {
+    text-align: center;
+    padding: 2rem;
+  }
+
+  .form-buttons {
+    margin-top: 3rem;
+  }
+
+  .feiloppsummering,
+  .fancy-feiloppsummering,
+  .alertstripe {
+    margin: 2rem 0 3rem;
+  }
+
+  .inputPanelGruppe__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 0.5rem;
+
+    .inputPanel {
+      margin: 0;
+    }
+  }
+
+  .postnr-sted {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    margin-top: 1rem;
+
+    &__postnr {
+      grid-column: 1;
+    }
+
+    &__poststed {
+      grid-column: ~"2 / 4";
+    }
+  }
+}

docs/examples/modal/modal-example.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import { Knapp } from "nav-frontend-knapper";
+/* import Modal from "nav-frontend-modal"; */
+import dynamic from "next/dynamic";
+const DynamicModal = dynamic(() => import("nav-frontend-modal"), {
+  ssr: false,
+});
+
+const ModalEksempel = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <Knapp onClick={() => setOpen(true)}>Klikk for å åpne modal</Knapp>
+      <DynamicModal
+        isOpen={open}
+        onRequestClose={() => setOpen(false)}
+        closeButton
+        contentLabel="Min modalrute"
+      >
+        <div style={{ padding: "2rem 2.5rem" }}>Innhold her</div>
+      </DynamicModal>
+    </div>
+  );
+};
+
+export default ModalEksempel;

docs/examples/navfrontendskjema/bekreftcheckboxpanel/Feilmelding.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { BekreftCheckboksPanel } from "nav-frontend-skjema";
+
+const BekreftCheckboksPanelExample = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <BekreftCheckboksPanel
+      label="Jeg bekrefter at opplysningene jeg har gitt, er riktige og fullstendige"
+      checked={isChecked}
+      onChange={(e) => setIsChecked(e.target.checked)}
+      feil={!isChecked && "Du må bekrefte dette før du kan sende inn søknaden."}
+    >
+      Jeg vet at jeg kan miste retten til sykepenger hvis opplysningene jeg gir,
+      ikke er riktige eller fullstendige.
+    </BekreftCheckboksPanel>
+  );
+};
+
+export default BekreftCheckboksPanelExample;