Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.8

@navikt/ds-css/accordion-menu.css

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

@navikt/ds-css/package.json

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

@navikt/ds-icons/package.json

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

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "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",

@navikt/ds-react/src/button/Button.tsx

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

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

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,
@@ -43,11 +43,11 @@ 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>}
+    <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 />}
 

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,7 @@
   outline: var(--outline);
 }
 
-.preview {
+.preview__container {
   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,22 +66,22 @@ 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(code, {
+            bash__codeCopy: copy,
+            bash__terminal: terminal,
           })}
           {...props}
           dangerouslySetInnerHTML={{ __html: highlighted }}
         />
         {copy && (
           <>
-            <div className={style.buttonBackground}>
+            <div className={"bash__button"}>
               <button
                 ref={buttonRef}
-                className={style.copyButton}
+                className={"bash__copyButton"}
                 onClick={() => handleCopy()}
               >
                 <Files />
@@ -91,7 +91,6 @@ const Bash = ({
                 anchorEl={buttonRef.current}
                 open={openPopover}
                 onClose={() => setOpenPopover(false)}
-                size="small"
                 placement="auto-start"
                 /* arrow={false} */
               >

docs/components/code/bash.css

@@ -1,4 +1,4 @@
-.pre {
+.bash__pre {
   padding: 1rem;
   margin: 1rem 0 0 0;
   overflow: auto;
@@ -11,26 +11,26 @@
   box-shadow: inset -4px 0 0 var(--bg-code);
 }
 
-.preWrapper {
+.bash__preWrapper {
   position: relative;
   align-items: center;
   display: flex;
 }
 
-.terminal {
+.bash__terminal {
   color: var(--color-code);
 }
 
-.code {
+.bash__code {
   padding-right: 4rem;
   color: var(--color-code);
 }
 
-.terminal::before {
+.bash__terminal::before {
   content: "$ ";
 }
 
-.buttonBackground {
+.bash__button {
   width: 3rem;
   background-color: var(--bg-code);
   position: absolute;
@@ -42,7 +42,7 @@
   align-items: center;
 }
 
-.copyButton {
+.bash__copyButton {
   background-color: var(--bg-code);
   color: white;
   font-size: 1.5rem;
@@ -54,11 +54,11 @@
   width: 2.5rem;
 }
 
-.copyButton:hover {
+.bash__copyButton:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
-.copyButton:focus {
+.bash__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/Menu.tsx

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

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

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,7 +21,7 @@ const Npm = ({
     <div>
       {packs.map(({ name, data }) => (
         <div key={name}>
-          <span className={style.badges}>
+          <span className={"npm__.badges"}>
             <a
               target="_blank"
               rel="noreferrer"

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,26 +18,26 @@
   width: fit-content;
 }
 
-.li > svg {
+.toc__li > svg {
   flex-shrink: 0;
 }
 
-.li:hover {
+.toc__li:hover {
   margin-left: 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);

docs/components/tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import style from "./tabs.module.css";
+import "./tabs.css";
 import cl from "classnames";
 
 interface TabsProps {
@@ -16,11 +16,11 @@ const Tabs = ({ onChange, tabs, ...props }: TabsProps) => {
   };
 
   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,14 +1,14 @@
-.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;
@@ -16,17 +16,17 @@
   font-weight: var(--navds-font-weight-bold);
 }
 
-.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="" />
+ -->
+
+# 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";

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

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

website/src/pages/accessibility/overview.mdx

@@ -19,6 +19,11 @@ import Panel from "nav-frontend-paneler";
   vi bygger i NAV være universelt utformet slik at de aller fleste kan klare seg
   selv.
 </Ingress>
+<Ingress>
+  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>
+</Ingress>
 
 ## Nødvendig for noen, bra for alle
 
@@ -144,7 +149,9 @@ Dette er noen av de viktigste tingene du bør huske på for å unngå de vanligs
 
 ### For designere
 
-1.  Bruk aktuell versjon av [NAVs komponent- og illustrasjonsbibliotek i Sketch](/resources/new-project#for-designere) når du designer.
+[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.
@@ -152,21 +159,23 @@ Dette er noen av de viktigste tingene du bør huske på for å unngå de vanligs
 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.  Lenker: Skriv lenketekster slik at det er tydelig hvor lenken går. Ikke åpne lenker i ny fane/vindu. Se [retningslinjer for gode lenker](https://design.nav.no/components/lenke/accessibility).
-9.  Lag gode og [beskrivende feilmeldinger (Difi)](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 Sannergata (rom 5006).
+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-lenkene (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 (Difi)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur)
+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 [NAV-ally](https://www.npmjs.com/package/nav-ally) i utviklingsprosessen.
-13. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Sannergata (rom 5006).
+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.

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"