Lerna versionbump [ci skip]

- nav-frontend-alertstriper-style@2.1.1 - nav-frontend-alertstriper@3.1.1 - nav-frontend-core@5.1.1 - nav-frontend-ekspanderbartpanel-style@1.1.1 - nav-frontend-ekspanderbartpanel@3.1.1 - nav-frontend-etiketter-style@1.1.1 - nav-frontend-etiketter@2.1.1 - nav-frontend-grid@1.1.1 - nav-frontend-hjelpetekst-style@2.1.1 - nav-frontend-hjelpetekst@2.1.1 - nav-frontend-ikonknapper@1.1.1 - nav-frontend-knapper-style@1.1.1 - nav-frontend-knapper@2.1.1 - nav-frontend-lenkepanel-style@1.1.1 - nav-frontend-lenkepanel@1.1.1 - nav-frontend-lenker-style@1.1.1 - nav-frontend-lenker@1.1.1 - nav-frontend-lesmerpanel-style@1.1.1 - nav-frontend-lesmerpanel@1.1.1 - nav-frontend-lukknapp-style@1.1.1 - nav-frontend-lukknapp@1.1.1 - nav-frontend-modal-style@1.1.1 - nav-frontend-modal@1.1.1 - nav-frontend-paneler-style@1.1.1 - nav-frontend-paneler@2.1.1 - nav-frontend-popover-style@1.1.1 - nav-frontend-popover@1.1.1 - nav-frontend-skjema-style@2.2.1 - nav-frontend-skjema@3.2.1 - nav-frontend-snakkeboble-style@1.1.1 - nav-frontend-snakkeboble@2.1.1 - nav-frontend-stegindikator-style@1.1.1 - nav-frontend-stegindikator@1.1.1 - nav-frontend-tabell-style@1.1.1 - nav-frontend-tabs-style@1.1.1 - nav-frontend-tabs@1.1.1 - nav-frontend-tekstomrade@2.1.1 - nav-frontend-toggle-style@1.1.1 - nav-frontend-toggle@1.1.1 - nav-frontend-typografi-style@1.1.1 - nav-frontend-typografi@3.1.1 - nav-frontend-veileder-style@2.1.1 - nav-frontend-veileder@2.1.1 - nav-frontend-veilederpanel-style@1.1.1 - nav-frontend-veilederpanel@1.1.1
Update CHANGELOG.md
2026-10-16 10:42:03 +00:00 · 2021-04-08 14:27:09 +00:00 · 2021-04-08 16:13:20 +02:00 · 2021-04-08 15:50:57 +02:00 · 2021-04-08 12:19:11 +00:00 · 2021-04-08 14:05:10 +02:00
145 changed files with 827 additions and 405 deletions
@@ -69,7 +69,7 @@
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
  outline: 3px solid var(--navds-text-focus);
-  outline-offset: 0;
+  outline-offset: -3px;
 }

 .navds-accordion-menu-item:hover,
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.2.4",
+  "version": "0.2.5",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.2.0",
+  "version": "0.2.1",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -22,6 +22,7 @@
  "files": [
    "/cjs",
    "/esm",
+    "/src",
    "/svg"
  ],
  "scripts": {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.2.5",
+  "version": "0.2.9",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -24,15 +24,17 @@
  },
  "files": [
    "/cjs",
-    "/esm"
+    "/esm",
+    "/src"
  ],
  "scripts": {
    "cjs-package": "copyfiles -f config/package.json cjs",
-    "build": "tsc -p tsconfig.json && tsc -p tsconfig-esm.json && yarn cjs-package",
+    "clean": "rm -rf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
    "watch": "tsc --watch -p tsconfig.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.2.0",
+    "@navikt/ds-icons": "^0.2.1",
    "@popperjs/core": "^2.5.4",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
@@ -20,6 +20,11 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   * @default "medium"
   */
  size?: "medium" | "small";
+  /**
+   * Prevent the user from interacting with the button: it cannot be pressed or focused.
+   * @default false
+   */
+  disabled?: boolean;
 }

 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -7,7 +7,6 @@ import {
  Link,
  Paragraph,
 } from "../../../../index";
-import Snakkeboble from "nav-frontend-snakkeboble";

 export const Main = ({ title = true }) => (
  <>
@@ -121,16 +120,12 @@ export const MainThree = ({ title = true }) => (
      Quisque varius ornare nulla, ut condimentum sapien dapibus non. Nullam
      eget interdum nibh
    </Paragraph>
-    <Snakkeboble>Integer aliquam feugiat purus et imperdie</Snakkeboble>
    <Paragraph>
      Cras tempor eros sed dapibus egestas. Curabitur bibendum quam quis lectus
      pretium lacinia. Nunc consequat ac augue quis laoreet. Donec porta, erat
      vitae blandit egestas, arcu metus pharetra nulla, et laoreet risus purus
      convallis turpis.
    </Paragraph>
-    <Snakkeboble pilHoyre={true}>
-      Integer aliquam feugiat purus et imperdie
-    </Snakkeboble>
    <Paragraph>
      Suspendisse potenti. Praesent at elit interdum, porttitor sem eget,
      blandit dolor. Nunc eget consectetur felis, id scelerisque sapien. Ut id
@@ -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>
    );
  }
@@ -2,12 +2,13 @@
  "extends": "../../utilities/build/tsconfig-pakker.json",
  "compilerOptions": {
    "outDir": "./esm",
-    "rootDir": "./",
+    "rootDir": "./src",
    "esModuleInterop": true,
    "module": "ES2020",
    "target": "ES2015",
    "sourceMap": true,
    "declaration": true
  },
-  "include": ["./*"]
+  "include": ["./src"],
+  "exclude": ["./src/*/stories"]
 }
@@ -2,12 +2,13 @@
  "extends": "../../utilities/build/tsconfig-pakker.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "rootDir": "./",
+    "rootDir": "./src",
    "esModuleInterop": true,
    "module": "commonjs",
    "target": "es2015",
    "sourceMap": false,
    "declaration": false
  },
-  "include": ["./*"]
+  "include": ["./src"],
+  "exclude": ["./src/*/stories"]
 }
@@ -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)
@@ -1,9 +1,11 @@
-import { Heading, Paragraph } from "@navikt/ds-react";
+import { Heading, Paragraph, Alert, Link } from "@navikt/ds-react";
 import Bash from "./code/Bash";
 import Import from "./code/Import";
 import Preview from "./code-preview/Preview";
 import Npm from "./npm/Npm";
 import TableOfContents from "./table-of-contents/TableOfContents";
+import { Knapp, Hovedknapp, Fareknapp, Flatknapp } from "nav-frontend-knapper";
+import { Settings } from "@navikt/ds-icons";

 export default {
  h1: (props) => <Heading size="xxl" level={1} {...props} />,
@@ -15,4 +17,11 @@ export default {
  Import,
  Npm,
  TableOfContents,
+  Alert,
+  Link,
+  Knapp,
+  Fareknapp,
+  Flatknapp,
+  Hovedknapp,
+  Settings,
 };
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import Tabs from "../tabs/Tabs";
-import style from "./preview.module.css";
 import { renderToString } from "react-dom/server";
 import Bash from "../code/Bash";
 import Prettier from "prettier/standalone";
 import ParserBabel from "prettier/parser-babel";
+import "./preview.css";

 const prettierOptions = {
  semi: true,
@@ -28,7 +28,11 @@ const Preview = ({
 }: PreviewProps) => {
  const [tab, setTab] = useState(0);
  const handleChange = (x: number) => {
-    setTab(x);
+    if (tab === x) {
+      setTab(null);
+    } else {
+      setTab(x);
+    }
  };

  const reactFormat = Prettier.format(react, prettierOptions).slice(0, -2);
@@ -43,12 +47,12 @@ const Preview = ({
      .slice(0, -2)
      .replace(` data-reactroot=""`, "");

-  const tabs = !hideHtml || !!children ? ["REACT", "HTML/CSS"] : ["REACT"];
+  const tabs = !hideHtml && !!children ? ["REACT", "HTML/CSS"] : ["REACT"];

  return (
-    <div className={style.wrapper}>
-      {!!children && <div className={style.preview}>{children}</div>}
-      <Tabs tabs={tabs} onChange={(x) => handleChange(x)} />
+    <div className={"preview__wrapper"}>
+      {!!children && <div className={"preview__container"}>{children}</div>}
+      <Tabs tabs={tabs} tab={tab} onChange={(x) => handleChange(x)} />
      {tab === 0 && <Bash code={reactFormat} language="jsx" copy />}

      {(!hideHtml || !!children) && tab === 1 && (
@@ -1,4 +1,4 @@
-.wrapper {
+.preview__wrapper {
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--bg-secondary);
@@ -6,7 +6,11 @@
  outline: var(--outline);
 }

-.preview {
+.preview__container {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.5rem;
+  row-gap: 0.5rem;
  border-bottom: 2px solid var(--code-divider);
  padding-bottom: 3rem;
  margin-bottom: 1rem;
@@ -1,11 +1,11 @@
 import copy from "copy-to-clipboard";
 import Prism from "prismjs";
-import style from "./bash.module.css";
 import cl from "classnames";
 import { Files } from "@navikt/ds-icons";
 import { Popover } from "@navikt/ds-react";
 import { useEffect, useRef, useState } from "react";
 import "prismjs/components/prism-jsx.min";
+import "./bash.css";

 type PrismLanguages =
  | "extend"
@@ -66,41 +66,39 @@ const Bash = ({
  };

  return (
-    <div className={style.preWrapper}>
-      <pre className={style.pre}>
+    <div className={"bash__preWrapper"}>
+      <pre className={"bash__pre"}>
        <code
-          className={cl(style.code, {
-            [style.codeCopy]: copy,
-            [style.terminal]: terminal,
+          className={cl("bash__code", {
+            bash__codeCopy: copy,
+            bash__terminal: terminal,
          })}
          {...props}
          dangerouslySetInnerHTML={{ __html: highlighted }}
        />
        {copy && (
          <>
-            <div className={style.buttonBackground}>
-              <button
-                ref={buttonRef}
-                className={style.copyButton}
-                onClick={() => handleCopy()}
-              >
-                <Files />
-              </button>
-              <Popover
-                role="alert"
-                anchorEl={buttonRef.current}
-                open={openPopover}
-                onClose={() => setOpenPopover(false)}
-                size="small"
-                placement="auto-start"
-                /* arrow={false} */
-              >
-                Kode er kopiert
-              </Popover>
-            </div>
+            <button
+              ref={buttonRef}
+              className={"bash__copyButton"}
+              onClick={() => handleCopy()}
+            >
+              <Files />
+            </button>
          </>
        )}
      </pre>
+      <Popover
+        className="bash__popover"
+        role="alert"
+        anchorEl={buttonRef.current}
+        open={openPopover}
+        onClose={() => setOpenPopover(false)}
+        placement="right"
+        arrow={false}
+      >
+        Kopiert!
+      </Popover>
    </div>
  );
 };
@@ -0,0 +1,57 @@
+.bash__pre {
+  padding: 1rem;
+  overflow-x: auto;
+  width: 100%;
+  background-color: var(--bg-code);
+  align-items: center;
+  display: flex;
+  font-family: var(--navds-font-family);
+}
+
+.bash__preWrapper {
+  position: relative;
+  align-items: center;
+  display: flex;
+}
+
+.bash__terminal {
+  color: var(--color-code);
+}
+
+.bash__code {
+  color: var(--color-code);
+  font-family: var(--font-family-code);
+  font-size: 1rem;
+  padding-right: 4rem;
+}
+
+.bash__terminal::before {
+  content: "$ ";
+}
+
+.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: flex;
+  z-index: 0;
+}
+
+.bash__copyButton:hover {
+  background-color: var(--navds-color-gray-60);
+}
+
+.bash__copyButton:focus {
+  outline: var(--outline-code);
+  outline-offset: var(--outline-offset);
+}
+
+.bash__popover {
+  padding: 0.5rem;
+}
@@ -1,64 +0,0 @@
-.pre {
-  padding: 1rem;
-  margin: 1rem 0 0 0;
-  overflow: auto;
-  width: calc(100vw - 2rem);
-  background-color: var(--bg-code);
-  align-items: center;
-  display: flex;
-
-  /* Fixer pixelbug på høyre side av bash-panel */
-  box-shadow: inset -4px 0 0 var(--bg-code);
-}
-
-.preWrapper {
-  position: relative;
-  align-items: center;
-  display: flex;
-}
-
-.terminal {
-  color: var(--color-code);
-}
-
-.code {
-  padding-right: 4rem;
-  color: var(--color-code);
-}
-
-.terminal::before {
-  content: "$ ";
-}
-
-.buttonBackground {
-  width: 3rem;
-  background-color: var(--bg-code);
-  position: absolute;
-  right: 0;
-  margin: 1rem 0;
-  display: flex;
-  justify-content: center;
-  height: calc(100% - 3rem - 0.5rem);
-  align-items: center;
-}
-
-.copyButton {
-  background-color: var(--bg-code);
-  color: white;
-  font-size: 1.5rem;
-  padding: 0.5rem;
-  border: none;
-  align-items: center;
-  display: inline-flex;
-  height: 2.5rem;
-  width: 2.5rem;
-}
-
-.copyButton:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.copyButton:focus {
-  outline: var(--outline-code);
-  outline-offset: var(--outline-offset);
-}
@@ -1,10 +1,12 @@
+import cl from "classnames";
 import Header from "./header/Header";
 import Sidebar from "./sidebar/Sidebar";
 import { Grid, Cell, ContentContainer } from "@navikt/ds-react";
 import { useMediaQuery } from "react-responsive";
 import useKeypress from "react-use-keypress";
 import { useEffect, useState } from "react";
-import style from "./layout.module.css";
+import "./theme.css";
+import "./layout.css";

 interface LayoutProps {
  children?: React.ReactNode;
@@ -27,7 +29,7 @@ const Layout = ({ children, menu }: LayoutProps) => {
  }, [small]);

  return (
-    <div className={style.pageWrapper + " lightTheme"}>
+    <div className={cl("pageWrapper", "lightTheme")}>
      <Header sidebar={sidebar} onSidebarChange={(x) => setSidebar(x)} />
      <Sidebar
        menu={menu}
@@ -36,10 +38,10 @@ const Layout = ({ children, menu }: LayoutProps) => {
        onSidebarChange={(x) => setSidebar(x)}
      />
      {/* TEMP UNTIL LAYOUT UPDATE */}
-      <main className={style.contentWrapper}>
+      <main className={"contentWrapper"}>
        <ContentContainer>
          <Grid>
-            <Cell className={style.content} xs={12} sm={12} md={12} lg={12}>
+            <Cell className={"content"} xs={12} sm={12} md={12} lg={12}>
              {children}
            </Cell>
          </Grid>
@@ -2,7 +2,7 @@ import Link from "next/link";
 import NavLogo from "../../assets/navLogo.svg";
 import { HamburgerFilled } from "@navikt/ds-icons";
 import cl from "classnames";
-import style from "../layout.module.css";
+import "../layout.css";

 interface HeaderProps {
  className?: string;
@@ -17,20 +17,20 @@ const Header = ({
  ...props
 }: HeaderProps) => {
  return (
-    <header className={style.header}>
+    <header className={"header"}>
      <button
        onClick={() => onSidebarChange(!sidebar)}
-        className={cl(style.header__link, style.header__icon, {
-          [style["header__icon--hidden"]]: sidebar,
+        className={cl("header__link", "header__icon", {
+          "header__icon--hidden": sidebar,
        })}
        tabIndex={!sidebar ? 0 : -1}
      >
        <HamburgerFilled />
      </button>
      <Link href="/">
-        <button className={style.header__link}>
+        <button className={"header__link"}>
          <NavLogo />
-          <span className={style["header__link-title"]}>NAV Designsystem</span>
+          <span className={"header__link-title"}>NAV Designsystem</span>
        </button>
      </Link>
    </header>
@@ -1,47 +1,34 @@
-import { NavdsPage } from "../../../src/pages";
+import { useRouter } from "next/router";
 import Link from "next/link";
+import {
+  AccordionMenu,
+  AccordionMenuCollapsable,
+  AccordionMenuItem,
+} from "@navikt/ds-react";
+
+const MenuLink = (node) => {
+  const { asPath } = useRouter();

-/* TODO: Replace with accordion-menu when ready */
-const subLinks = (page: NavdsPage) => {
  return (
-    <div key={page.title}>
-      <span>{page.title}</span>
-      <ul id={"collapse " + page.title}>{parsePages(page.children)}</ul>
-    </div>
+    <Link href={node.pathName} passHref>
+      <AccordionMenuItem active={asPath === node.pathName}>
+        {node.title}
+      </AccordionMenuItem>
+    </Link>
  );
 };

-const parsePages = (pages) => {
-  return pages?.map((page) => {
-    if (page.pathName) {
-      return (
-        <li key={page.pathName}>
-          <Link href={page.pathName}>
-            {page.title ? page.title : parseTitle(page.pathName)}
-          </Link>
-        </li>
-      );
-    } else if (page.title && page.children) {
-      return subLinks(page);
-    } else {
-      return null;
-    }
-  });
-};
-
-const parseTitle = (path: string) =>
-  path
-    .split("/")
-    .pop()
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .replace("-", " ") || "ERR: Default Title";
-
-const Menu = ({ menu }) => {
-  return (
-    <nav>
-      <ul>{parsePages(menu)}</ul>
-    </nav>
+const mapToComponents = (node) =>
+  node.children ? (
+    <AccordionMenuCollapsable key={node.title} title={node.title}>
+      {node.children.map(mapToComponents)}
+    </AccordionMenuCollapsable>
+  ) : (
+    <MenuLink key={node.title} {...node} />
  );
-};
+
+const Menu = ({ menu }) => (
+  <AccordionMenu>{menu.map(mapToComponents)}</AccordionMenu>
+);

 export default Menu;
@@ -1,6 +1,6 @@
 import cl from "classnames";
 import { Close } from "@navikt/ds-icons";
-import style from "../layout.module.css";
+import "../layout.css";
 import Menu from "./Menu";

 interface SidebarProps {
@@ -11,27 +11,32 @@ interface SidebarProps {
  menu: any[];
 }

-const Sidebar = ({ sidebar, small, onSidebarChange, menu }: SidebarProps) => {
+const Sidebar = ({
+  sidebar,
+  small,
+  onSidebarChange,
+  menu = [],
+}: SidebarProps) => {
  return (
    <>
      {sidebar && small && (
        <div
          onClick={() => onSidebarChange(false)}
-          className={cl(style["sidebar--overlay"], {
-            [style["sidebar--overlay--fade"]]: sidebar,
+          className={cl("sidebar--overlay", {
+            "sidebar--overlay--fade": sidebar,
          })}
        />
      )}
      <div
-        className={cl(style.sidebar, {
-          [style.sidebar__mobile]: small,
-          [style["sidebar__mobile--open"]]: small && sidebar,
+        className={cl("sidebar", {
+          sidebar__mobile: small,
+          "sidebar__mobile--open": small && sidebar,
        })}
      >
        {small && sidebar && (
          <button
            onClick={() => onSidebarChange(!sidebar)}
-            className={style.sidebar__icon}
+            className={"sidebar__icon"}
          >
            <Close />
          </button>
@@ -1,5 +1,6 @@
 :root {
  --bg-primary: #faf9f9;
+  --font-family-code: "Source Code Pro", monospace;
 }

 .darkTheme {
@@ -1,6 +1,6 @@
 import getConfig from "next/config";
 import Import from "../code/Import";
-import style from "./npm.module.css";
+import "./npm.css";

 const Npm = ({
  packName,
@@ -21,37 +21,21 @@ const Npm = ({
    <div>
      {packs.map(({ name, data }) => (
        <div key={name}>
-          <span className={style.badges}>
+          <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>
@@ -1,4 +1,4 @@
-.badges {
+.npm__badges {
  display: flex;
  column-gap: 0.5rem;
  flex-wrap: wrap;
@@ -1,8 +1,8 @@
 import { useContext } from "react";
 import { Next } from "@navikt/ds-icons";
 import { Heading } from "@navikt/ds-react";
-import style from "./tableOfContents.module.css";
 import { PagePropsContext } from "../../pages/_app";
+import "./tableOfContents.css";

 const TableOfContents = () => {
  const { tableOfContents } = useContext<any>(PagePropsContext);
@@ -12,9 +12,9 @@ const TableOfContents = () => {
      <Heading size="large" level={2}>
        Innhold
      </Heading>
-      <ul className={style.ul}>
+      <ul className={"toc__ul"}>
        {tableOfContents?.map(({ heading, slug }) => (
-          <li key={slug} className={style.li}>
+          <li key={slug} className={"toc__li"}>
            <Next
              aria-label="Pil peker på lenke"
              focusable="false"
@@ -1,10 +1,10 @@
-.ul {
+.toc__ul {
  margin: 0;
  padding: 0;
  list-style: none;
 }

-.li {
+.toc__li {
  list-style: none;
  margin: 0;
  font-size: var(--navds-font-size-medium);
@@ -18,28 +18,33 @@
  width: fit-content;
 }

-.li > svg {
+.toc__li > svg {
  flex-shrink: 0;
 }

-.li:hover {
+.toc__li:hover > svg,
+.toc__li:focus-within > svg {
  margin-left: 0.25rem;
+  margin-right: -0.25rem;
 }

-.li > a {
+.toc__li > a {
  padding: 0.25rem 0;
 }

-.li:hover > a,
-.li:hover > svg {
+.toc__li:hover > a,
+.toc__li:hover > svg {
  color: var(--navds-color-darkgray);
  transition: color 150ms linear;
-  text-decoration: underline;
 }

-.li > svg + a:focus {
+.toc__li > svg + a:focus {
  color: white;
  transition: color 0ms linear;
  background-color: var(--navds-color-blue-80);
  outline: none;
 }
+
+.li:focus-within > svg {
+  color: var(--navds-color-darkgray);
+}
@@ -1,26 +1,24 @@
 import { useState } from "react";
-import style from "./tabs.module.css";
+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 (
-    <ul className={style.ul}>
+    <ul className={"tabs__ul"}>
      {tabs.map((t, x) => (
-        <li key={t + x} className={style.li}>
+        <li key={t + x} className={"tabs__li"}>
          <button
-            className={cl(style.button, { [style.buttonActive]: x === tab })}
+            className={cl("tabs__button", { tabs__buttonActive: x === tab })}
            onClick={() => handleClick(x)}
          >
            {t}
@@ -1,32 +1,33 @@
-.ul {
+.tabs__ul {
  padding: 0;
  margin: 0;
  display: flex;
 }

-.li {
+.tabs__li {
  list-style: none;
 }

-.button {
+.tabs__button {
  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;
 }

-.button:hover {
+.tabs__button:hover {
  border-bottom: 4px solid var(--navds-color-darkgray);
  color: var(--navds-color-darkgray);
 }

-.button:focus {
+.tabs__button:focus {
  outline: var(--outline-focus);
  outline-offset: var(--outline-offset);
 }

-.buttonActive {
+.tabs__buttonActive {
  border-bottom: var(--tab-border);
  color: var(--tab-color-active);
 }
@@ -1,7 +0,0 @@
---
-title: Button
---
-
-# Button content
-
-<Npm packName="@navikt/ds-react" imports="Button" />
@@ -0,0 +1,236 @@
+---
+title: Knapp
+---
+
+<!--
+<Npm packName="nav-frontend-knapper" imports="Button" />
+ -->
+
+# 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>
+-->
@@ -1,4 +1,7 @@
 const glob = require("glob");
+const withLess = require("@zeit/next-less");
+const withCss = require("@zeit/next-css");
+const withPlugins = require("next-compose-plugins");

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

-module.exports = {
+module.exports = withPlugins([withLess, withCss], {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
@@ -22,4 +25,4 @@ module.exports = {
  publicRuntimeConfig: {
    packages: loadPackage(),
  },
-};
+});
@@ -27,7 +27,21 @@
    "@navikt/ds-react": "*",
    "next-mdx-remote": "^2.1.3",
    "github-slugger": "1.3.0",
-    "remark-slug": "6.0.0"
+    "remark-slug": "6.0.0",
+    "@zeit/next-less": "^1.0.1",
+    "@zeit/next-css": "1.0.1",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "^6.3.0",
+    "nav-frontend-knapper": "^2.0.32",
+    "nav-frontend-js-utils": "^1.0.17",
+    "nav-frontend-knapper-style": "^1.0.17",
+    "nav-frontend-core": "^5.0.11",
+    "nav-frontend-typografi-style": "^1.0.35",
+    "lodash.throttle": "^4.1.1",
+    "less": "^4.1.1",
+    "style-loader": "^2.0.0",
+    "css-loader": "^5.2.0",
+    "webpack": "^4.44.2"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^10.0.8",
@@ -1,7 +1,7 @@
 import { createContext } from "react";
 import Head from "next/head";
 import Layout from "../components/layout/Layout";
-import "../styles/theme.css";
+/* import "../styles/theme.css"; */
 import "../styles/globals.css";
 import "../styles/prismjs.css";
 import "@navikt/ds-css";
@@ -14,6 +14,11 @@ const Website = ({ Component, pageProps }) => {
      <Head>
        <title>NAV Designsystem</title>
        <link rel="icon" href="/favicon-32x32.png" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
+          rel="stylesheet"
+        />
      </Head>
      <Layout menu={pageProps.menu}>
        <Component {...pageProps} />
@@ -6,11 +6,6 @@ body {
  scroll-behavior: smooth;
 }

-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 * {
  box-sizing: border-box;
 }
@@ -10,7 +10,7 @@ pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-family: var(--font-family-code);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
@@ -88,7 +88,8 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string,
-.token.variable {
+.token.variable,
+.token.plain-text {
  color: #f8f8f2;
 }

@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-alertstriper-style",
-  "version": "2.0.38",
+  "version": "2.1.1",
  "main": "src/index.less",
  "license": "MIT",
  "files": [
@@ -15,10 +15,10 @@
    "url": "git+https://github.com/navikt/nav-frontend-moduler.git"
  },
  "devDependencies": {
-    "nav-frontend-core": "^5.0.11",
+    "nav-frontend-core": "^5.1.1",
    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-paneler-style": "^1.0.2",
-    "nav-frontend-typografi-style": "^1.0.35"
+    "nav-frontend-paneler-style": "^1.1.1",
+    "nav-frontend-typografi-style": "^1.1.1"
  },
  "peerDependencies": {
    "nav-frontend-core": "^5.0.11",
@@ -1,6 +1,6 @@
 {
  "name": "nav-frontend-alertstriper",
-  "version": "3.0.51",
+  "version": "3.1.1",
  "main": "lib/alertstripe.js",
  "types": "lib/alertstripe.d.ts",
  "license": "MIT",
@@ -27,9 +27,9 @@
  "devDependencies": {
    "@types/classnames": "^2.2.3",
    "@types/react": "15.0.23 || ^16.0.0",
-    "nav-frontend-alertstriper-style": "^2.0.38",
+    "nav-frontend-alertstriper-style": "^2.1.1",
    "nav-frontend-ikoner-assets": "^2.0.10",
-    "nav-frontend-typografi": "^3.0.4",
+    "nav-frontend-typografi": "^3.1.1",
    "react": "^16.8.0 || ^17.0.0"
  },
  "defaultExport": "AlertStripe"
@@ -18,16 +18,16 @@ FARGER
@navLysBla: #66cbec;

 //Tekst digitalt
-@navMorkGra: #3e3832;
-@navGra80: #59514b;
-@navGra60: #78706a;
-@navGra40: #b7b1a9;
-@navGra20: #c6c2bf;
-@navLysGra: #e9e7e7;
+@navMorkGra: #262626;
+@navGra80: #4f4f4f;
+@navGra60: #6a6a6a;
+@navGra40: #a0a0a0;
+@navGra20: #c9c9c9;
+@navLysGra: #f1f1f1;

 // Bakgrunner
@navBakgrunn: #ffffff;
-@navGraBakgrunn: #f1f1f1;
+@navGraBakgrunn: @navLysGra;

 // Fokusfarger
@fokusFarge: @navBlaDarken60;
Author	SHA1	Message	Date
github-actions[bot]	000f7318a6	Lerna versionbump [ci skip] - nav-frontend-alertstriper-style@2.1.1 - nav-frontend-alertstriper@3.1.1 - nav-frontend-core@5.1.1 - nav-frontend-ekspanderbartpanel-style@1.1.1 - nav-frontend-ekspanderbartpanel@3.1.1 - nav-frontend-etiketter-style@1.1.1 - nav-frontend-etiketter@2.1.1 - nav-frontend-grid@1.1.1 - nav-frontend-hjelpetekst-style@2.1.1 - nav-frontend-hjelpetekst@2.1.1 - nav-frontend-ikonknapper@1.1.1 - nav-frontend-knapper-style@1.1.1 - nav-frontend-knapper@2.1.1 - nav-frontend-lenkepanel-style@1.1.1 - nav-frontend-lenkepanel@1.1.1 - nav-frontend-lenker-style@1.1.1 - nav-frontend-lenker@1.1.1 - nav-frontend-lesmerpanel-style@1.1.1 - nav-frontend-lesmerpanel@1.1.1 - nav-frontend-lukknapp-style@1.1.1 - nav-frontend-lukknapp@1.1.1 - nav-frontend-modal-style@1.1.1 - nav-frontend-modal@1.1.1 - nav-frontend-paneler-style@1.1.1 - nav-frontend-paneler@2.1.1 - nav-frontend-popover-style@1.1.1 - nav-frontend-popover@1.1.1 - nav-frontend-skjema-style@2.2.1 - nav-frontend-skjema@3.2.1 - nav-frontend-snakkeboble-style@1.1.1 - nav-frontend-snakkeboble@2.1.1 - nav-frontend-stegindikator-style@1.1.1 - nav-frontend-stegindikator@1.1.1 - nav-frontend-tabell-style@1.1.1 - nav-frontend-tabs-style@1.1.1 - nav-frontend-tabs@1.1.1 - nav-frontend-tekstomrade@2.1.1 - nav-frontend-toggle-style@1.1.1 - nav-frontend-toggle@1.1.1 - nav-frontend-typografi-style@1.1.1 - nav-frontend-typografi@3.1.1 - nav-frontend-veileder-style@2.1.1 - nav-frontend-veileder@2.1.1 - nav-frontend-veilederpanel-style@1.1.1 - nav-frontend-veilederpanel@1.1.1	2021-04-08 14:27:09 +00:00
Ken	6ab2228c88	Update CHANGELOG.md	2021-04-08 16:13:20 +02:00
Andreas NordahlandKen	5b08e97b1f	Update grayscale (#1068 ) * Update grayscale * test * test2 * Lerna versionbump [ci skip] - nav-frontend-alertstriper-style@2.1.0 - nav-frontend-alertstriper@3.1.0 - nav-frontend-core@5.1.0 - nav-frontend-ekspanderbartpanel-style@1.1.0 - nav-frontend-ekspanderbartpanel@3.1.0 - nav-frontend-etiketter-style@1.1.0 - nav-frontend-etiketter@2.1.0 - nav-frontend-grid@1.1.0 - nav-frontend-hjelpetekst-style@2.1.0 - nav-frontend-hjelpetekst@2.1.0 - nav-frontend-ikonknapper@1.1.0 - nav-frontend-knapper-style@1.1.0 - nav-frontend-knapper@2.1.0 - nav-frontend-lenkepanel-style@1.1.0 - nav-frontend-lenkepanel@1.1.0 - nav-frontend-lenker-style@1.1.0 - nav-frontend-lenker@1.1.0 - nav-frontend-lesmerpanel-style@1.1.0 - nav-frontend-lesmerpanel@1.1.0 - nav-frontend-lukknapp-style@1.1.0 - nav-frontend-lukknapp@1.1.0 - nav-frontend-modal-style@1.1.0 - nav-frontend-modal@1.1.0 - nav-frontend-paneler-style@1.1.0 - nav-frontend-paneler@2.1.0 - nav-frontend-popover-style@1.1.0 - nav-frontend-popover@1.1.0 - nav-frontend-skjema-style@2.2.0 - nav-frontend-skjema@3.2.0 - nav-frontend-snakkeboble-style@1.1.0 - nav-frontend-snakkeboble@2.1.0 - nav-frontend-stegindikator-style@1.1.0 - nav-frontend-stegindikator@1.1.0 - nav-frontend-tabell-style@1.1.0 - nav-frontend-tabs-style@1.1.0 - nav-frontend-tabs@1.1.0 - nav-frontend-tekstomrade@2.1.0 - nav-frontend-toggle-style@1.1.0 - nav-frontend-toggle@1.1.0 - nav-frontend-typografi-style@1.1.0 - nav-frontend-typografi@3.1.0 - nav-frontend-veileder-style@2.1.0 - nav-frontend-veileder@2.1.0 - nav-frontend-veilederpanel-style@1.1.0 - nav-frontend-veilederpanel@1.1.0 Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-04-08 15:50:57 +02:00
github-actions[bot]	0637092224	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.9	2021-04-08 12:19:11 +00:00
Ken	ad5c0e8a2b	ds-react/popover: Min-padding, optional arrow (#1066 ) * min-padding, optional arrow * oppdatert offset popover * fikset popover bug * fjernet ubruk ref * fjernet ubrukt config * fikset småfeil * Update Popover.tsx * Update Popover.tsx * Update Popover.tsx	2021-04-08 14:05:10 +02:00
Ken	6173ede6a7	Misc refactoring docs/components (#1067 ) * absolute position copyButton * fikset badges npm * kan toggle code-eksempel * oppdatert componenter * fjernet badge * font-size -> rem * popover text * endret animasjon toc-lenker * underline toc-hover * focus styling toc * merged with master	2021-04-07 11:09:13 +02:00
Ken	90da6be37e	Update CHANGELOG.md	2021-04-07 09:49:02 +02:00
github-actions[bot]	4b1424daf2	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.8	2021-04-07 06:54:54 +00:00
Ken	318b8c8ac6	Less støtte for docs (#1059 ) * oppdatert til less + modules * støtter nå less + css, erstattet modules med standard css	2021-04-07 08:41:42 +02:00
Ken	4dd746d27d	Fikset sourcemapping støtte for `@navikt/ds-react` (#1065 ) * flyttet filer til src-mapper * fjernet less fra ds-react story * forbedret exlude av stories	2021-04-07 08:41:24 +02:00
github-actions[bot]	ffcfe79c18	Lerna versionbump [ci skip] - @navikt/ds-react@0.2.7	2021-04-06 07:28:27 +00:00
Andreas Nordahl	5d8d2ffba9	Add disabled to button props (#1063 )	2021-04-06 09:14:23 +02:00
github-actions[bot]	c785316086	Lerna versionbump [ci skip] - @navikt/ds-icons@0.2.1 - @navikt/ds-react@0.2.6	2021-04-06 06:55:27 +00:00
Jakob Havstein Eriksen	7087f160e8	Legger til sources i ds-icons (#1064 ) * Inkludér src i tarball, for sourcemaps * Fjern output-mapper før bygg for å unngå ts-feilmeldinger Eksempel på feilmelding: error TS5055: Cannot write file '/Users/jakob/dev/nav-frontend-moduler/@navikt/ds-react/esm/typography/Heading.d.ts' because it would overwrite input file.	2021-04-06 08:44:49 +02:00
Karina LudwigandAndreas Nordahl	235e48a843	Update overview.mdx (#1060 ) * Update overview.mdx * fix html structure. p in p is not legal Co-authored-by: Andreas Nordahl <andnorda@gmail.com>	2021-03-31 10:35:26 +02:00
Karina Ludwig	93fc5dc6ae	Update overview.mdx (#1061 )	2021-03-31 10:28:57 +02:00
github-actions[bot]	5c49902ffb	Lerna versionbump [ci skip] - @navikt/ds-css@0.2.5	2021-03-30 08:00:35 +00:00
Andreas NordahlandKen	c9c148e050	use accordion menu in docs (#1057 ) * use accordion menu in docs * la til internal-padding for sidebar * menu update * oppdatert keys Co-authored-by: Ken <ken.aleksander@gmail.com>	2021-03-30 09:47:25 +02:00
Andreas Nordahl	adf9de3c63	inset outline accordion menu (#1058 )	2021-03-30 09:36:51 +02:00