Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.9

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -24,7 +24,8 @@
   },
   "files": [
     "/cjs",
-    "/esm"
+    "/esm",
+    "/src"
   ],
   "scripts": {
     "cjs-package": "copyfiles -f config/package.json cjs",

@navikt/ds-react/src/layouts/stories/components/sections/Main.tsx

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

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

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

@@ -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"]
 }

@navikt/ds-react/tsconfig.json

@@ -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"]
 }

CHANGELOG.md

@@ -1,7 +1,49 @@
 # Endringslogg
 
+## 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)

docs/components/MDXComponents.tsx

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

docs/components/code-preview/Preview.tsx

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

docs/components/code-preview/preview.css

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

docs/components/code/Bash.tsx

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

docs/components/code/bash.css

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

docs/components/code/bash.module.css

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

docs/components/layout/Layout.tsx

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

docs/components/layout/header/Header.tsx

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

docs/components/layout/sidebar/Sidebar.tsx

@@ -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 {
@@ -22,21 +22,21 @@ const Sidebar = ({
       {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>

docs/components/layout/theme.css

@@ -1,5 +1,6 @@
 :root {
   --bg-primary: #faf9f9;
+  --font-family-code: "Source Code Pro", monospace;
 }
 
 .darkTheme {

docs/components/npm/Npm.tsx

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

docs/components/npm/npm.css

@@ -1,4 +1,4 @@
-.badges {
+.npm__badges {
   display: flex;
   column-gap: 0.5rem;
   flex-wrap: wrap;

docs/components/table-of-contents/TableOfContents.tsx

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

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

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

docs/components/tabs/Tabs.tsx

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

docs/components/tabs/tabs.css

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

docs/data/components/button.mdx

@@ -1,7 +0,0 @@
----
-title: Button
----
-
-# Button content
-
-<Npm packName="@navikt/ds-react" imports="Button" />

docs/data/components/knapp.mdx

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

docs/next.config.js

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

docs/package.json

@@ -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",

docs/pages/_app.js

@@ -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} />

docs/styles/globals.css

@@ -6,11 +6,6 @@ body {
   scroll-behavior: smooth;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 * {
   box-sizing: border-box;
 }

docs/styles/prismjs.css

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

yarn.lock

@@ -4801,6 +4801,26 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@zeit/next-css@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@zeit/next-css/-/next-css-1.0.1.tgz#4f784e841e7ca1b21b3468a902e2c1fa95a3e75c"
+  integrity sha512-yfHPRy/ne/5SddVClsoy+fpU7e0Cs1gkWA67/wm2uIu+9rznF45yQLxHEt5dPGF3h6IiIh7ZtIgA8VV8YKq87A==
+  dependencies:
+    css-loader "1.0.0"
+    extracted-loader "1.0.4"
+    find-up "2.1.0"
+    ignore-loader "0.1.2"
+    mini-css-extract-plugin "0.4.3"
+    postcss-loader "3.0.0"
+
+"@zeit/next-less@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@zeit/next-less/-/next-less-1.0.1.tgz#9a18930dc4bf04c1e9e5089365b9e40e42565a68"
+  integrity sha512-zIyD6D1C0p+fDpVmSBzTA+vIwEDzGWWgYQ/Vp2amlC2/Mq8rtMq3BV6NxxSZ/36cFS8Tibl1K+An4150H4hOnQ==
+  dependencies:
+    "@zeit/next-css" "1.0.1"
+    less-loader "4.1.0"
+
 CSSselect@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/CSSselect/-/CSSselect-0.4.1.tgz#f8ab7e1f8418ce63cda6eb7bd778a85d7ec492b2"
@@ -8191,6 +8211,24 @@ css-declaration-sorter@^4.0.1:
     postcss "^7.0.1"
     timsort "^0.3.0"
 
+css-loader@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.0.tgz#9f46aaa5ca41dbe31860e3b62b8e23c42916bf56"
+  integrity sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    postcss "^6.0.23"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
 css-loader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.1.tgz#6885bb5233b35ec47b006057da01cc640b6b79fe"
@@ -8246,6 +8284,24 @@ css-loader@^5.0.1:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+css-loader@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.0.tgz#a9ecda190500863673ce4434033710404efbff00"
+  integrity sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==
+  dependencies:
+    camelcase "^6.2.0"
+    cssesc "^3.0.0"
+    icss-utils "^5.1.0"
+    loader-utils "^2.0.0"
+    postcss "^8.2.8"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.4"
+
 css-mediaquery@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
@@ -10434,6 +10490,11 @@ extract-files@9.0.0:
   resolved "https://registry.yarnpkg.com/extract-files/-/extract-files-9.0.0.tgz#8a7744f2437f81f5ed3250ed9f1550de902fe54a"
   integrity sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==
 
+extracted-loader@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/extracted-loader/-/extracted-loader-1.0.4.tgz#e1a3f1791813c14091a1959e261e23e95dd90115"
+  integrity sha512-G8A0hT/WCWIjesZm7BwbWdST5dQ08GNnCpTrJT/k/FYzuiJwlV1gyWjnuoizOzAR4jpEYXG2J++JyEKN/EB26Q==
+
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -10808,6 +10869,13 @@ find-root@^1.1.0:
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
+find-up@2.1.0, find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  dependencies:
+    locate-path "^2.0.0"
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -10824,13 +10892,6 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -13370,6 +13431,11 @@ ignore-by-default@^1.0.1:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
   integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk=
 
+ignore-loader@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ignore-loader/-/ignore-loader-0.1.2.tgz#d81f240376d0ba4f0d778972c3ad25874117a463"
+  integrity sha1-2B8kA3bQuk8Nd4lyw60lh0EXpGM=
+
 ignore-walk@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
@@ -15350,6 +15416,15 @@ lerna@^4.0.0:
     import-local "^3.0.2"
     npmlog "^4.1.2"
 
+less-loader@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.1.0.tgz#2c1352c5b09a4f84101490274fd51674de41363e"
+  integrity sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^3.0.0"
+
 less-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-6.2.0.tgz#8b26f621c155b342eefc24f5bd6e9dc40c42a719"
@@ -15392,7 +15467,7 @@ less@^3.11.3, less@^3.9.0:
     native-request "^1.0.5"
     source-map "~0.6.0"
 
-less@^4.1.0:
+less@^4.1.0, less@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/less/-/less-4.1.1.tgz#15bf253a9939791dc690888c3ff424f3e6c7edba"
   integrity sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw==
@@ -16892,6 +16967,15 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.12.1"
     tiny-warning "^1.0.3"
 
+mini-css-extract-plugin@0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8"
+  integrity sha512-Mxs0nxzF1kxPv4TRi2NimewgXlJqh0rGE30vviCU2WHrpbta6wklnUV9dr9FUtoAHmB3p3LeXEC+ZjgHvB0Dzg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 mini-css-extract-plugin@^0.11.2:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
@@ -17303,6 +17387,11 @@ nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
   resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
   integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
 
+next-compose-plugins@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
+  integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
+
 next-mdx-remote@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/next-mdx-remote/-/next-mdx-remote-2.1.3.tgz#a427d690691af081384770b464d3803350ada41f"
@@ -17325,6 +17414,14 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+next-transpile-modules@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/next-transpile-modules/-/next-transpile-modules-6.3.0.tgz#291ccb792cda73322a434590893e9965ed65a533"
+  integrity sha512-ehR2RkJdNrJTvJ/cRCT4/qpcmU/FB/61RcKV4amAgTMSMQD1tmkle0ji38zCUhtffs7H2UfCioDjJxd3zthitg==
+  dependencies:
+    enhanced-resolve "^5.7.0"
+    escalade "^3.1.1"
+
 next@10.0.8:
   version "10.0.8"
   resolved "https://registry.yarnpkg.com/next/-/next-10.0.8.tgz#a2232c11ffad974d67f3d572b8db2acaa5ddedd7"
@@ -19124,7 +19221,7 @@ postcss-load-config@^3.0.0:
     cosmiconfig "^7.0.0"
     import-cwd "^3.0.0"
 
-postcss-loader@^3.0.0:
+postcss-loader@3.0.0, postcss-loader@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
   integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
@@ -22752,6 +22849,14 @@ style-loader@^1.2.1:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+style-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
+  integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 style-search@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"