@navikt/ds-react 0.15.3 → 0.16.3

package/cjs/modal/Modal.js

@@ -41,7 +41,7 @@ const ds_icons_1 = require("@navikt/ds-icons");
 const __1 = require("..");
 const ModalContent_1 = __importDefault(require("./ModalContent"));
 const Modal = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton"]);
+    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
     const modalRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([modalRef, ref]);
     const buttonRef = (0, react_1.useRef)(null);
@@ -53,7 +53,11 @@ const Modal = (0, react_1.forwardRef)((_a, ref) => {
             buttonRef.current.focus();
         }
     };
-    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, classnames_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e) }),
+    return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: (0, classnames_1.default)("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
+            describedby: ariaDescribedBy,
+            labelledby: ariaLabelledBy,
+            modal: ariaModal,
+        } }),
         children,
         closeButton && (react_1.default.createElement(__1.Button, { className: (0, classnames_1.default)("navds-modal__button", {
                 "navds-modal__button--shake": shouldCloseOnOverlayClick,

package/cjs/page-header/PageHeader.js

@@ -41,7 +41,7 @@ const PageHeader = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-page-header", className, `navds-page-header--${variant}`, `navds-page-header--${align}`) }, rest),
         illustration && (react_1.default.createElement("div", { className: "navds-page-header__illustration" }, illustration)),
         react_1.default.createElement("div", { className: "navds-page-header__wrapper" },
-            react_1.default.createElement(__1.Heading, { className: "navds-page-header__title", size: "2xlarge", level: "1" }, children),
+            react_1.default.createElement(__1.Heading, { className: "navds-page-header__title", size: "xlarge", level: "1" }, children),
             description && (react_1.default.createElement(__1.BodyShort, { className: "navds-page-header__description" }, description)))));
 });
 exports.default = PageHeader;

package/esm/modal/Modal.d.ts

@@ -28,6 +28,9 @@ export interface ModalProps {
      * @default true
      */
     closeButton?: boolean;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-modal"?: boolean;
 }
 interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
     Content: ModalContentType;

package/esm/modal/Modal.js

@@ -17,7 +17,7 @@ import { Close } from "@navikt/ds-icons";
 import { Button } from "..";
 import ModalContent from "./ModalContent";
 const Modal = forwardRef((_a, ref) => {
-    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton"]);
+    var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
     const modalRef = useRef(null);
     const mergedRef = mergeRefs([modalRef, ref]);
     const buttonRef = useRef(null);
@@ -29,7 +29,11 @@ const Modal = forwardRef((_a, ref) => {
             buttonRef.current.focus();
         }
     };
-    return (React.createElement(ReactModal, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e) }),
+    return (React.createElement(ReactModal, Object.assign({}, rest, { isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: "navds-modal__overlay", shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
+            describedby: ariaDescribedBy,
+            labelledby: ariaLabelledBy,
+            modal: ariaModal,
+        } }),
         children,
         closeButton && (React.createElement(Button, { className: cl("navds-modal__button", {
                 "navds-modal__button--shake": shouldCloseOnOverlayClick,

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA2ChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,OAEnB,EADI,IAAI,cAPT,wFAQC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAE5C,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA8ChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,OAExB,EADI,IAAI,cAVT,6IAWC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB;QAEA,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}

package/esm/page-header/PageHeader.js

@@ -17,7 +17,7 @@ const PageHeader = forwardRef((_a, ref) => {
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-page-header", className, `navds-page-header--${variant}`, `navds-page-header--${align}`) }, rest),
         illustration && (React.createElement("div", { className: "navds-page-header__illustration" }, illustration)),
         React.createElement("div", { className: "navds-page-header__wrapper" },
-            React.createElement(Heading, { className: "navds-page-header__title", size: "2xlarge", level: "1" }, children),
+            React.createElement(Heading, { className: "navds-page-header__title", size: "xlarge", level: "1" }, children),
             description && (React.createElement(BodyShort, { className: "navds-page-header__description" }, description)))));
 });
 export default PageHeader;

package/esm/page-header/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/page-header/PageHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AA2BxC,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,MAAM,OAEf,EADI,IAAI,cAPT,4EAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,mBAAmB,EACnB,SAAS,EACT,sBAAsB,OAAO,EAAE,EAC/B,sBAAsB,KAAK,EAAE,CAC9B,IACG,IAAI;QAEP,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,iCAAiC,IAAE,YAAY,CAAO,CACtE;QACD,6BAAK,SAAS,EAAC,4BAA4B;YACzC,oBAAC,OAAO,IACN,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,GAAG,IAER,QAAQ,CACD;YACT,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,SAAS,EAAC,gCAAgC,IAClD,WAAW,CACF,CACb,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/page-header/PageHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AA2BxC,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,WAAW,EACX,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,MAAM,OAEf,EADI,IAAI,cAPT,4EAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,mBAAmB,EACnB,SAAS,EACT,sBAAsB,OAAO,EAAE,EAC/B,sBAAsB,KAAK,EAAE,CAC9B,IACG,IAAI;QAEP,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,iCAAiC,IAAE,YAAY,CAAO,CACtE;QACD,6BAAK,SAAS,EAAC,4BAA4B;YACzC,oBAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,GAAG,IAClE,QAAQ,CACD;YACT,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,SAAS,EAAC,gCAAgC,IAClD,WAAW,CACF,CACb,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/typography/Heading.d.ts

@@ -9,7 +9,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * Sizes from largest "2xl" to smallest "s"
      */
-    size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    size: "xlarge" | "large" | "medium" | "small" | "xsmall";
     /**
      * Heading text
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.15.3",
+  "version": "0.16.3",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.1",
+    "@navikt/ds-icons": "^0.8.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "d002c03647f18abf543b112cba0a977e00e3a912"
+  "gitHead": "68d4b60f0e8afd27ee341a6346bf00671f7c70dd"
 }

package/src/modal/Modal.tsx

@@ -33,6 +33,9 @@ export interface ModalProps {
    * @default true
    */
   closeButton?: boolean;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-modal"?: boolean;
 }
 
 interface ModalComponent
@@ -56,6 +59,9 @@ const Modal = forwardRef<ReactModal, ModalProps>(
       className,
       shouldCloseOnOverlayClick = true,
       closeButton = true,
+      "aria-describedby": ariaDescribedBy,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-modal": ariaModal,
       ...rest
     },
     ref
@@ -81,6 +87,11 @@ const Modal = forwardRef<ReactModal, ModalProps>(
         overlayClassName="navds-modal__overlay"
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
         onRequestClose={(e) => onModalCloseRequest(e)}
+        aria={{
+          describedby: ariaDescribedBy,
+          labelledby: ariaLabelledBy,
+          modal: ariaModal,
+        }}
       >
         {children}
         {closeButton && (

package/src/page-header/PageHeader.tsx

@@ -55,11 +55,7 @@ const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
           <div className="navds-page-header__illustration">{illustration}</div>
         )}
         <div className="navds-page-header__wrapper">
-          <Heading
-            className="navds-page-header__title"
-            size="2xlarge"
-            level="1"
-          >
+          <Heading className="navds-page-header__title" size="xlarge" level="1">
             {children}
           </Heading>
           {description && (

package/src/typography/Heading.tsx

@@ -11,7 +11,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Sizes from largest "2xl" to smallest "s"
    */
-  size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
    * Heading text
    */

package/src/typography/{stories/typography.stories.tsx → typography.stories.tsx}

@@ -1,6 +1,5 @@
 import React from "react";
 import { Heading, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
-import "./index.css";
 
 export default {
   title: "ds-react/typography",
@@ -16,7 +15,7 @@ const TitleTemplate = ({ level, size, spacing }) => (
 );
 
 export const HeadingStory = TitleTemplate.bind({});
-HeadingStory.args = { level: 1, size: "2xlarge", spacing: false };
+HeadingStory.args = { level: 1, size: "xlarge", spacing: false };
 
 const IngressTemplate = ({ spacing }) => (
   <Ingress spacing={spacing}>{lorem()}</Ingress>
@@ -64,8 +63,8 @@ DetailStory.args = { spacing: false, size: "medium" };
 export const SideInnholdEksempel = () => {
   return (
     <div style={{ maxWidth: 600 }}>
-      <Heading level={"1"} size="2xlarge" spacing>
-        Title lvl 1 2xlarge
+      <Heading level={"1"} size="xlarge" spacing>
+        Title lvl 1 xlarge
       </Heading>
       <BodyLong spacing>
         BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
@@ -87,7 +86,7 @@ export const SideInnholdEksempel = () => {
         sunt proident irure consectetur excepteur.
       </BodyLong>
       <Heading level={"2"} size="xlarge" spacing>
-        Title lvl 2 xlarge
+        Title lvl 2 large
       </Heading>
       <Ingress spacing>
         Ingress: Mollit incididunt incididunt officia amet est et non aliqua

package/src/typography/stories/index.css

@@ -1,3 +0,0 @@
-.typo-story > div:nth-child(even) {
-  background: var(--navds-global-color-gray-200);
-}

package/src/typography/stories/typography.stories.mdx

@@ -1,83 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-import { Alert, Heading, BodyLong } from "@navikt/ds-react";
-
-<Meta title="ds-react/Typography/intro" />
-
-# Hvordan ta i bruk typografien
-
-Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
-Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
-
-Oppsettet er forbedret med blandt annet letter-spacing og line-height.
-I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
-Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
-
-Font-size er skrevet med REM, men basert på 16px root font size.
-Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
-For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
-da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
-
-Denne stylingen vil overskrive default variablene og tilpasse font-size.
-
-```css
-/* autogenerated fix for 18px root-font-size*/
-:root {
-  --navds-font-size-heading-2xlarge: 2.2222222222222223rem;
-  --navds-font-size-heading-xlarge: 1.7777777777777777rem;
-  --navds-font-size-heading-large: 1.5555555555555556rem;
-  --navds-font-size-heading-medium: 1.3333333333333333rem;
-  --navds-font-size-heading-small: 1.1111111111111112rem;
-  --navds-font-size-xlarge: 1.1111111111111112rem;
-  --navds-font-size-large: 1rem;
-  --navds-font-size-medium: 0.8888888888888888rem;
-  --navds-font-size-small: 0.7777777777777778rem;
-}
-```
-
-Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
-komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
-forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
-for å tilpasse systemet for alle de forskjellige variantene av font size på root.
-
-## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
-
-De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
-
-### Overskrifter
-
-Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
-
-En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
-
-`<Sidetittel> -> <Heading size="2xlarge">`
-
-`<Innholdstittel> -> <Heading size="xlarge">`
-
-`<Systemtittel> -> <Heading size="medium">`
-
-`<Undertittel> -> <Heading size="small">`
-
-<Alert variant="warning">
-  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
-  hierarkiet (h1-h6).
-</Alert>
-
-### Brødtekst
-
-De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
-
-Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
-
-`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
-
-### Andre komponenter
-
-`<Ingress> -> <Ingress>`
-
-`<Element> -> <Label>`
-
-`<UndertekstBold> -> <Detail>`
-
-`<Undertekst> -> <Detail size="small">`
-
-`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.