@navikt/ds-react 5.12.5 → 5.13.0

package/src/layout/box/Box.tsx

@@ -3,13 +3,13 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
 import { getResponsiveProps } from "../utilities/css";
 import {
-  SpaceDelimitedAttribute,
-  ResponsiveProp,
-  SpacingScale,
   BackgroundToken,
   BorderColorToken,
-  ShadowToken,
   BorderRadiiToken,
+  ResponsiveProp,
+  ShadowToken,
+  SpaceDelimitedAttribute,
+  SpacingScale,
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -105,7 +105,7 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
       style: _style,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const style: React.CSSProperties = {
       ..._style,
@@ -128,7 +128,7 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         "border-radius",
         borderRadius,
         false,
-        ["0"]
+        ["0"],
       ),
       ...getResponsiveProps("box", "padding", "spacing", padding),
       ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
@@ -143,5 +143,5 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         style={style}
       />
     );
-  }
+  },
 );

package/src/layout/content-container/ContentContainer.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 
 export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/layout/grid/HGrid.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
@@ -69,11 +69,11 @@ export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
         style={styles}
       />
     );
-  }
+  },
 );
 
 function formatGrid(
-  props?: ResponsiveProp<number | string>
+  props?: ResponsiveProp<number | string>,
 ): ResponsiveProp<number | string> {
   if (!props) {
     return {};
@@ -87,7 +87,7 @@ function formatGrid(
     Object.entries(props).map(([breakpointToken, columnValue]) => [
       breakpointToken,
       getColumnValue(columnValue),
-    ])
+    ]),
   );
 }
 

package/src/layout/page/Page.stories.tsx

@@ -1,6 +1,6 @@
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import type { Meta, StoryFn } from "@storybook/react";
 import React, { useEffect } from "react";
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { Box } from "../box";
 import { HGrid } from "../grid";
 import Page from "./Page";

package/src/layout/page/Page.tsx

@@ -1,6 +1,6 @@
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { OverridableComponent } from "../../util";
 import { PageBlock } from "./parts/PageBlock";
 
@@ -14,7 +14,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    * Background color. Accepts a color token.
    * @default bg-default
    */
-  background?: keyof typeof bgColors.a;
+  background?: keyof typeof bgColors.a | "surface-subtle";
   /**
    * Allows better positioning of footer
    */
@@ -49,7 +49,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
         contentBlockPadding = "end",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const style: React.CSSProperties = {
         ..._style,
@@ -77,7 +77,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
           {footer}
         </Component>
       );
-    }
+    },
   );
 
 /**

package/src/layout/page/parts/PageBlock.tsx

@@ -2,16 +2,17 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../../util/OverridableComponent";
 
-export const widths = ["md", "lg", "xl", "2xl"] as const;
+export const widths = ["text", "md", "lg", "xl", "2xl"] as const;
 
 export interface PageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Predefined max-width
    * @example
-   * md:  768px
-   * lg:  1024px
-   * xl:  1280px
-   * 2xl: 1440px
+   * text: 576px + dynamic gutters
+   * md:   768px
+   * lg:   1024px
+   * xl:   1280px
+   * 2xl:  1440px
    * @default max-width: 100%;
    */
   width?: (typeof widths)[number];
@@ -64,10 +65,10 @@ export const PageBlock: OverridableComponent<PageBlockProps, HTMLDivElement> =
             "navds-pageblock",
             `navds-pageblock--${width}`,
             className,
-            { "navds-pageblock--gutters": gutters }
+            { "navds-pageblock--gutters": gutters },
           )}
           ref={ref}
         />
       );
-    }
+    },
   );

package/src/layout/responsive/Responsive.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
-import { BreakpointsAlias } from "../utilities/types";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { Slot } from "../../util/Slot";
+import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -40,7 +40,7 @@ const Responsive = forwardRef<
       asChild,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
@@ -57,7 +57,7 @@ const Responsive = forwardRef<
         })}
       />
     );
-  }
+  },
 );
 
 /**
@@ -82,7 +82,7 @@ const Responsive = forwardRef<
  * </HGrid>
  */
 export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
-  (props, ref) => <Responsive {...props} ref={ref} variant="hide" />
+  (props, ref) => <Responsive {...props} ref={ref} variant="hide" />,
 );
 
 /**
@@ -107,5 +107,5 @@ export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
  * </HGrid>
  */
 export const Show = forwardRef<HTMLDivElement, ResponsiveProps>(
-  (props, ref) => <Responsive {...props} ref={ref} variant="show" />
+  (props, ref) => <Responsive {...props} ref={ref} variant="show" />,
 );

package/src/layout/responsive/hide.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
 import { Hide } from ".";
 import { Tag } from "../../tag";
 import { VStack } from "../stack";

package/src/layout/responsive/show.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
 import { Show } from ".";
 import { Tag } from "../../tag";
 import { VStack } from "../stack";

package/src/layout/sidemal-test/AvatarPanel.tsx

@@ -1,5 +1,5 @@
-import { PersonIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { PersonIcon } from "@navikt/aksel-icons";
 import { Box } from "../box";
 import { HStack } from "../stack";
 

package/src/layout/sidemal-test/Content.tsx

@@ -1,14 +1,14 @@
-import { LinkIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { LinkIcon } from "@navikt/aksel-icons";
 import { Accordion } from "../../accordion";
 import { CopyButton } from "../../copybutton";
+import { Link } from "../../link";
+import { List } from "../../list";
 import { ReadMore } from "../../read-more";
-import { Heading, BodyLong } from "../../typography";
+import { BodyLong, Heading } from "../../typography";
 import { Box } from "../box";
 import { VStack } from "../stack";
 import { AvatarPanel } from "./AvatarPanel";
-import { List } from "../../list";
-import { Link } from "../../link";
 
 export function Content() {
   return (

package/src/layout/sidemal-test/Filter.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
+import { InformationSquareIcon } from "@navikt/aksel-icons";
 import { Checkbox, CheckboxGroup } from "../../form";
 import { BodyLong, Detail, Heading } from "../../typography";
 import { Box } from "../box";
 import { HStack, VStack } from "../stack";
-import { InformationSquareIcon } from "@navikt/aksel-icons";
 
 export function FilterCard() {
   const [filter, setFilter] = useState<any[]>([]);

package/src/layout/sidemal-test/Header.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Heading, BodyShort, Detail } from "../../typography";
+import { BodyShort, Detail, Heading } from "../../typography";
 import { Box } from "../box";
 import { Hide, Show } from "../responsive";
 import { HStack, VStack } from "../stack";

package/src/layout/sidemal-test/Intro.tsx

@@ -1,7 +1,7 @@
-import { LinkIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { LinkIcon } from "@navikt/aksel-icons";
 import { CopyButton } from "../../copybutton";
-import { Heading, BodyLong, Detail, Label } from "../../typography";
+import { BodyLong, Detail, Heading, Label } from "../../typography";
 import { Box } from "../box";
 import { HStack, VStack } from "../stack";
 

package/src/layout/sidemal-test/content-box/ContentBox.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../../../util";
 
 export interface ContentBoxProps extends HTMLAttributes<HTMLDivElement> {
@@ -14,10 +14,10 @@ export const ContentBox: OverridableComponent<ContentBoxProps, HTMLDivElement> =
         return maxWidth === "3xl"
           ? "1920px"
           : maxWidth === "2xl"
-          ? "1440px"
-          : maxWidth === "xl"
-          ? "1280px"
-          : "1024px";
+            ? "1440px"
+            : maxWidth === "xl"
+              ? "1280px"
+              : "1024px";
       };
 
       return (
@@ -40,7 +40,7 @@ export const ContentBox: OverridableComponent<ContentBoxProps, HTMLDivElement> =
           </style>
         </>
       );
-    }
+    },
   );
 
 export default ContentBox;

package/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -6,8 +6,8 @@ import { FilterCard } from "./Filter";
 import { Header } from "./Header";
 import { IntroCard } from "./Intro";
 import { Sidebar } from "./Sidebar";
-import "./styling.css";
 import { ContentBox } from "./content-box";
+import "./styling.css";
 
 const meta = {
   title: "kitchen sink/navno-sidemal",

package/src/layout/stack/HStack.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import { StackProps, Stack } from "./Stack";
+import { Stack, StackProps } from "./Stack";
 
 export type HStackProps = Omit<StackProps, "direction">;
 

package/src/layout/stack/Stack.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
@@ -52,7 +52,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         direction = "row",
         ...rest
       },
-      ref
+      ref,
     ) => {
       const style: React.CSSProperties = {
         ..._style,
@@ -74,5 +74,5 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
           })}
         />
       );
-    }
+    },
   );

package/src/layout/stack/VStack.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import { StackProps, Stack } from "./Stack";
+import { Stack, StackProps } from "./Stack";
 
 export type VStackProps = Omit<StackProps, "direction" | "wrap">;
 

package/src/layout/stack/stack.stories.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
-import { HStack, VStack, Spacer, Stack } from ".";
+import React from "react";
+import { HStack, Spacer, Stack, VStack } from ".";
 import { Box } from "../box";
 
 export default {

package/src/layout/utilities/css.ts

@@ -3,7 +3,7 @@ import { ResponsiveProp } from "./types";
 export function getResponsiveValue<T = string>(
   componentName: string,
   componentProp: string,
-  responsiveProp?: ResponsiveProp<T>
+  responsiveProp?: ResponsiveProp<T>,
 ) {
   if (!responsiveProp) {
     return {};
@@ -19,7 +19,7 @@ export function getResponsiveValue<T = string>(
     Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
       `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
       responsiveValue,
-    ])
+    ]),
   );
 }
 
@@ -36,7 +36,7 @@ const translateTokenStringToCSS = (
   tokenString: string,
   tokenSubgroup: string,
   tokenExceptions: string[],
-  invert: boolean
+  invert: boolean,
 ) => {
   return tokenString
     .split(" ")
@@ -67,7 +67,7 @@ export function getResponsiveProps<T extends string>(
   tokenSubgroup: string,
   responsiveProp?: ResponsiveProp<T>,
   invert = false,
-  tokenExceptions: string[] = []
+  tokenExceptions: string[] = [],
 ) {
   if (!responsiveProp) {
     return {};
@@ -81,7 +81,7 @@ export function getResponsiveProps<T extends string>(
           responsiveProp,
           tokenSubgroup,
           tokenExceptions,
-          invert
+          invert,
         ),
     };
   }
@@ -94,7 +94,7 @@ export function getResponsiveProps<T extends string>(
         aliasOrScale,
         tokenSubgroup,
         tokenExceptions,
-        invert
+        invert,
       );
   });
   return styleProps;

package/src/layout/utilities/types.ts

@@ -1,7 +1,7 @@
+import borderRadii from "@navikt/ds-tokens/src/border.json";
 import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
-import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
-import borderRadii from "@navikt/ds-tokens/src/border.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
 import Spacing from "@navikt/ds-tokens/src/spacing.json";
 

package/src/link/Link.tsx

@@ -60,7 +60,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
         inlineText = false,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -70,7 +70,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
           "navds-link--inline-text": inlineText,
         })}
       />
-    )
+    ),
   );
 
 export default Link;

package/src/link/link.stories.tsx

@@ -1,5 +1,5 @@
-import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import React from "react";
+import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import {
   BodyLong,
   Alert as DsAlert,

package/src/link-panel/LinkPanel.tsx

@@ -1,14 +1,13 @@
-import React, { forwardRef } from "react";
-
 import cl from "clsx";
-import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
+import React, { forwardRef } from "react";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { Panel } from "../panel";
+import { OverridableComponent } from "../util";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
-import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { OverridableComponent } from "../util";
-import { Panel } from "../panel";
+import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 
 export interface LinkPanelProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -72,7 +71,7 @@ export const LinkPanelComponent: OverridableComponent<
         <ChevronRightIcon className="navds-link-panel__chevron" aria-hidden />
       </Panel>
     );
-  }
+  },
 );
 
 const LinkPanel = LinkPanelComponent as LinkPanelComponentType;

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { BodyLong } from "../typography";
 
 export interface LinkPanelDescriptionProps

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface LinkPanelTitleProps
@@ -18,7 +18,7 @@ export const LinkPanelTitle: OverridableComponent<
       "navds-link-panel__title",
       "navds-heading",
       "navds-heading--medium",
-      className
+      className,
     )}
   />
 ));

package/src/list/List.tsx

@@ -28,7 +28,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       size,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const ariaId = useId();
 
@@ -73,7 +73,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
         </div>
       </ListContext.Provider>
     );
-  }
+  },
 ) as ListComponent;
 
 List.Item = ListItem;

package/src/list/ListItem.tsx

@@ -24,7 +24,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
 
     if (listType === "ol" && icon) {
       console.warn(
-        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.",
       );
     }
 
@@ -66,7 +66,7 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
         </BodyShort>
       </li>
     );
-  }
+  },
 );
 
 ListItem.displayName = "List.Item";

package/src/list/list.stories.tsx

@@ -1,11 +1,11 @@
+import { Meta } from "@storybook/react";
+import React from "react";
 import {
   BabyWrappedIcon,
   BrailleIcon,
   HeadHeartIcon,
   RecycleIcon,
 } from "@navikt/aksel-icons";
-import { Meta } from "@storybook/react";
-import React from "react";
 import { List, VStack } from "..";
 
 export default {

package/src/loader/Loader.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, SVGProps } from "react";
+import React, { SVGProps, forwardRef } from "react";
 import { omit, useId } from "../util";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
@@ -66,7 +66,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
       id,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const internalId = useId();
 
@@ -81,7 +81,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
           `navds-loader--${variant}`,
           {
             "navds-loader--transparent": transparent,
-          }
+          },
         )}
         focusable="false"
         viewBox="0 0 50 50"
@@ -107,7 +107,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         />
       </svg>
     );
-  }
+  },
 );
 
 export default Loader;

package/src/loader/loader.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from "@storybook/react";
 import React from "react";
 import { Loader, LoaderProps } from "..";
+
 export default {
   title: "ds-react/Loader",
   component: Loader,

package/src/modal/Modal.test.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React, { useState } from "react";
 import { Button, Modal } from "..";
 import { BODY_CLASS } from "./ModalUtils";
 
@@ -34,7 +34,7 @@ describe("Modal", () => {
 
     fireEvent.click(screen.getByText("Close"));
     await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS)
+      expect(document.body.classList).not.toContain(BODY_CLASS),
     );
   });
 
@@ -42,13 +42,13 @@ describe("Modal", () => {
     render(
       <Modal portal open>
         <Modal.Header />
-      </Modal>
+      </Modal>,
     );
     expect(document.body.classList).toContain(BODY_CLASS);
 
     fireEvent.click(screen.getByRole("button"));
     await waitFor(() =>
-      expect(document.body.classList).not.toContain(BODY_CLASS)
+      expect(document.body.classList).not.toContain(BODY_CLASS),
     );
   });
 });

package/src/modal/Modal.tsx

@@ -92,7 +92,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       onClick,
       ...rest
     }: ModalProps,
-    ref
+    ref,
   ) => {
     const modalRef = useRef<HTMLDialogElement>(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
@@ -217,7 +217,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       return null;
     }
     return component;
-  }
+  },
 ) as ModalComponent;
 
 Modal.Header = ModalHeader;