@navikt/ds-react 5.5.0 → 5.6.0

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

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Kitchen sink/How to use" />
+
+<div className="wrapper navds-body-long">
+
+<h1>Kitchen sink</h1>
+
+<p>
+  A collection of stories for testing and verifying the use of Aksel in context
+  of actual content
+</p>
+<p className="heavy">
+  These pages are not intended as templates or patterns for use, only for
+  testing.
+</p>
+
+</div>
+
+<style>
+  {`
+   .wrapper p {
+    font-size: 20px;
+   }
+   .heavy {
+    font-weight: 600;
+   }
+  `}
+</style>

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Box, HGrid, Hide, Show, VStack } from "../..";
+import { Content } from "./Content";
+import { FilterCard } from "./Filter";
+import { Header } from "./Header";
+import { IntroCard } from "./Intro";
+import { Sidebar } from "./Sidebar";
+import "./styling.css";
+import { ContentBox } from "./content-box";
+
+const meta = {
+  title: "kitchen sink/navno-sidemal",
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Page: Story = {
+  render: () => {
+    return (
+      <div>
+        <Header />
+        <Box
+          style={{ minHeight: "calc(100vh - 10rem)" }}
+          background="surface-subtle"
+          paddingBlock="12 0"
+        >
+          <ContentBox maxWidth="lg">
+            <Box paddingInline="4">
+              <HGrid
+                align="start"
+                columns={{
+                  xs: "minmax(auto, 600px)",
+                  md: "288px minmax(auto, 600px)",
+                }}
+                gap={{ xs: "3", md: "6" }}
+              >
+                <Box style={{ position: "sticky", top: "1rem" }}>
+                  <Show above="md">
+                    <Sidebar />
+                  </Show>
+                </Box>
+                <VStack gap={{ xs: "6", md: "8" }}>
+                  <IntroCard />
+                  <FilterCard />
+                  <Hide above="md">
+                    <Sidebar />
+                  </Hide>
+                  <Content />
+                  <Content />
+                  <Content />
+                  <Content />
+                </VStack>
+              </HGrid>
+            </Box>
+          </ContentBox>
+        </Box>
+      </div>
+    );
+  },
+};

package/src/layout/sidemal-test/styling.css

@@ -0,0 +1,43 @@
+.reset-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Sidebars */
+.sidebar {
+  position: sticky;
+  top: 1rem;
+  bottom: 1rem;
+  max-height: calc(100vh - 2rem);
+  overflow: auto;
+}
+
+.sidebarlink {
+  color: var(--a-text-action);
+  cursor: pointer;
+  padding: var(--a-spacing-3) var(--a-spacing-2);
+}
+
+.sidebarlink:hover {
+  text-decoration: underline;
+  background-color: var(--a-surface-action-subtle);
+  color: var(--a-text-default);
+}
+
+/* Cards */
+.avatar-card {
+  --avatar-size: 4rem;
+
+  position: relative;
+  margin-top: calc(var(--avatar-size) / 2);
+}
+
+.avatar {
+  position: absolute;
+  top: calc((var(--avatar-size) / 2) * -1);
+  height: var(--avatar-size);
+  width: var(--avatar-size);
+  display: grid;
+  place-content: center;
+}

package/src/layout/stack/Stack.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
 import {
   getResponsiveProps,
+  getResponsiveValue,
   ResponsiveProp,
   SpacingScale,
 } from "../utilities/css";
@@ -12,17 +13,18 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Justify-content
    */
-  justify?:
+  justify?: ResponsiveProp<
     | "start"
     | "center"
     | "end"
     | "space-around"
     | "space-between"
-    | "space-evenly";
+    | "space-evenly"
+  >;
   /**
    * Align-items
    */
-  align?: "start" | "center" | "end" | "baseline" | "stretch";
+  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
   /**
    * flex-wrap
    */
@@ -33,7 +35,11 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   gap?: ResponsiveProp<SpacingScale>;
-  direction: "row" | "column";
+  /**
+   * flex-direction
+   * @default "row"
+   */
+  direction?: ResponsiveProp<"row" | "column">;
 }
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
@@ -47,18 +53,18 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         wrap = true,
         gap,
         style: _style,
-        direction,
+        direction = "row",
         ...rest
       },
       ref
     ) => {
       const style: React.CSSProperties = {
         ..._style,
-        "--__ac-stack-direction": direction,
-        "--__ac-stack-align": align,
-        "--__ac-stack-justify": justify,
         "--__ac-stack-wrap": wrap ? "wrap" : "nowrap",
         ...getResponsiveProps(`stack`, "gap", "spacing", gap),
+        ...getResponsiveValue(`stack`, "direction", direction),
+        ...getResponsiveValue(`stack`, "align", align),
+        ...getResponsiveValue(`stack`, "justify", justify),
       };
 
       return (

package/src/layout/stack/index.ts

@@ -1,3 +1,4 @@
 export { HStack, type HStackProps } from "./HStack";
 export { VStack, type VStackProps } from "./VStack";
+export { Stack, type StackProps } from "./Stack";
 export { Spacer } from "./Spacer";

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

@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
-import { HStack, VStack, Spacer } from ".";
+import { HStack, VStack, Spacer, Stack } from ".";
+import { Box } from "../box";
 
 export default {
   title: "ds-react/Primitives/Stack",
@@ -133,6 +134,27 @@ export const DividerDemo = {
   ),
 };
 
+export const ResponsiveDirection = {
+  render: () => (
+    <Box
+      background="surface-alt-3-subtle"
+      padding="12"
+      style={{ minWidth: "20rem", aspectRatio: "1/1" }}
+    >
+      <Stack
+        align={{ xs: "center", md: "start" }}
+        gap="2"
+        direction={{ xs: "column", lg: "row" }}
+      >
+        <Box padding="6" background="surface-action" />
+        <Box padding="2" background="surface-action" />
+        <Box padding="6" background="surface-action" />
+        <Box padding="4" background="surface-action" />
+      </Stack>
+    </Box>
+  ),
+};
+
 function Placeholders({
   count,
   children,

package/src/layout/utilities/css.ts

@@ -29,7 +29,6 @@ export type SpaceDelimitedAttribute<T extends string> =
   | `${T} ${T} ${T} ${T}`;
 
 type FixedResponsiveT<T> = {
-  // eslint-disable-next-line no-unused-vars
   [Breakpoint in BreakpointsAlias]?: T;
 };
 
@@ -58,11 +57,50 @@ export function getResponsiveValue<T = string>(
   );
 }
 
+const translateExceptionToCSS = (exception: string) => {
+  switch (exception) {
+    case "px":
+      return "1px";
+  }
+  return exception;
+};
+
+const translateTokenStringToCSS = (
+  componentProp: string,
+  tokenString: string,
+  tokenSubgroup: string,
+  tokenExceptions: string[],
+  invert: boolean
+) => {
+  return tokenString
+    .split(" ")
+    .map((x, _, arr) => {
+      if (componentProp === "margin-inline" && x === "full") {
+        const width = 100 / arr.length;
+        return `calc((100vw - ${width}%)/-2)`;
+      }
+
+      let output = `var(--a-${tokenSubgroup}-${x})`;
+      if (tokenExceptions.includes(x)) {
+        output = translateExceptionToCSS(x);
+      }
+      if (invert) {
+        if (x === "0") {
+          return `0`;
+        }
+        return `calc(-1 * ${output})`;
+      }
+      return output;
+    })
+    .join(" ");
+};
+
 export function getResponsiveProps<T extends string>(
   componentName: string,
   componentProp: string,
   tokenSubgroup: string,
   responsiveProp?: ResponsiveProp<T>,
+  invert = false,
   tokenExceptions: string[] = []
 ) {
   if (!responsiveProp) {
@@ -71,26 +109,27 @@ export function getResponsiveProps<T extends string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
-        .split(" ")
-        .map((x) =>
-          tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
-        )
-        .join(" "),
+      [`--__ac-${componentName}-${componentProp}-xs`]:
+        translateTokenStringToCSS(
+          componentProp,
+          responsiveProp,
+          tokenSubgroup,
+          tokenExceptions,
+          invert
+        ),
     };
   }
 
-  return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
-      return [
-        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-        aliasOrScale
-          .split(" ")
-          .map((x) =>
-            tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
-          )
-          .join(" "),
-      ];
-    })
-  );
+  const styleProps = {};
+  Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
+    styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
+      translateTokenStringToCSS(
+        componentProp,
+        aliasOrScale,
+        tokenSubgroup,
+        tokenExceptions,
+        invert
+      );
+  });
+  return styleProps;
 }

package/src/loader/Loader.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, SVGProps } from "react";
 import cl from "clsx";
-import { useId } from "..";
+import { omit, useId } from "..";
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
@@ -52,7 +52,6 @@ export type LoaderType = React.ForwardRefExoticComponent<
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
   (
     {
-      children,
       className,
       size = "medium",
       title = "venter...",
@@ -81,7 +80,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         focusable="false"
         viewBox="0 0 50 50"
         preserveAspectRatio="xMidYMid"
-        {...rest}
+        {...omit(rest, ["children"])}
       >
         <title id={id ?? `loader-${internalId}`}>{title}</title>
         <circle

package/src/modal/dialog-polyfill.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
 export const needPolyfill =

package/src/pagination/pagination.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Link, HashRouter as Router } from "react-router-dom";
 import Pagination from "./Pagination";
@@ -16,19 +15,16 @@ export default {
   },
 };
 
-export const Default = {
-  render: (props: any) => {
-    const [page, setPage] = useState(props.page);
-    return <Pagination {...props} page={page} onPageChange={setPage} />;
-  },
-
-  args: {
-    page: 2,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-    prevNextTexts: false,
-  },
+export const Default = (props: any) => {
+  const [page, setPage] = useState(props.page);
+  return <Pagination {...props} page={page} onPageChange={setPage} />;
+};
+Default.args = {
+  page: 2,
+  count: 8,
+  siblingCount: 1,
+  boundaryCount: 1,
+  prevNextTexts: false,
 };
 
 export const PrevNextText = () => {
@@ -86,32 +82,29 @@ export const XSmall = () => {
   );
 };
 
-export const AsLink = {
-  render: () => {
-    const [page, setPage] = useState(1);
-    const props = {
-      page: 1,
-      count: 8,
-      siblingCount: 1,
-      boundaryCount: 1,
-    };
-    return (
-      <Pagination
-        {...props}
-        page={page}
-        onPageChange={setPage}
-        renderItem={(item) => (
-          <Pagination.Item {...item} as={Link} to={`?page=${item.page}`} />
-        )}
-      />
-    );
-  },
-
-  decorators: [
-    (Story) => (
-      <Router>
-        <Story />
-      </Router>
-    ),
-  ],
+export const AsLink = () => {
+  const [page, setPage] = useState(1);
+  const props = {
+    page: 1,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+  };
+  return (
+    <Pagination
+      {...props}
+      page={page}
+      onPageChange={setPage}
+      renderItem={(item) => (
+        <Pagination.Item {...item} as={Link} to={`?page=${item.page}`} />
+      )}
+    />
+  );
 };
+AsLink.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];

package/src/popover/Popover.test.tsx

@@ -1,11 +1,11 @@
-import { act, cleanup, fireEvent } from "@testing-library/react";
+import { act, fireEvent, screen } from "@testing-library/react";
 import React from "react";
 import { renderWithStyles as render } from "../../tests/utils";
 import Popover from "./Popover";
 
 describe("Popover", () => {
   test("open", () => {
-    const { getByTestId } = render(
+    render(
       <Popover
         open
         anchorEl={document.createElement("div")}
@@ -16,12 +16,11 @@ describe("Popover", () => {
       </Popover>
     );
 
-    expect(getByTestId("popover-id")).toBeVisible();
-    cleanup();
+    expect(screen.getByTestId("popover-id")).toBeVisible();
   });
 
   test("should be hidden", () => {
-    const { getByTestId } = render(
+    render(
       <Popover
         open={false}
         anchorEl={document.createElement("div")}
@@ -32,13 +31,12 @@ describe("Popover", () => {
       </Popover>
     );
 
-    expect(getByTestId("popover-id")).not.toBeVisible();
-    cleanup();
+    expect(screen.getByTestId("popover-id")).not.toBeVisible();
   });
 
   it("outsideClick", async () => {
     const fn = jest.fn();
-    const { getByRole, getByTestId } = render(
+    render(
       <div>
         <Popover
           open={true}
@@ -53,18 +51,16 @@ describe("Popover", () => {
     );
 
     await act(async () => {
-      expect(getByTestId("popover-id")).toBeVisible();
-      getByRole("link").focus();
+      expect(screen.getByTestId("popover-id")).toBeVisible();
+      screen.getByRole("link").focus();
     });
 
     expect(fn).toHaveBeenCalled();
-
-    cleanup();
   });
 
   it("escape", async () => {
     const fn = jest.fn();
-    const { container, getByTestId } = render(
+    const { container } = render(
       <div>
         <Popover
           open={true}
@@ -77,23 +73,19 @@ describe("Popover", () => {
       </div>
     );
 
-    await act(async () => {
-      expect(getByTestId("popover-id")).toBeVisible();
-      fireEvent.keyDown(
-        // Should work anywhere
-        container,
-        { key: "Escape" }
-      );
-    });
+    expect(screen.getByTestId("popover-id")).toBeVisible();
+    fireEvent.keyDown(
+      // Should work anywhere
+      container,
+      { key: "Escape" }
+    );
 
     expect(fn).toHaveBeenCalled();
-
-    cleanup();
   });
 
   it("keep open on popover-focus", async () => {
     const fn = jest.fn();
-    const { getByTestId } = render(
+    render(
       <div>
         <Popover
           open={true}
@@ -107,18 +99,16 @@ describe("Popover", () => {
     );
 
     await act(async () => {
-      expect(getByTestId("popover-id")).toBeVisible();
-      getByTestId("popover-id").focus();
+      expect(screen.getByTestId("popover-id")).toBeVisible();
+      screen.getByTestId("popover-id").focus();
     });
 
     expect(fn).toHaveBeenCalledTimes(0);
-
-    cleanup();
   }, 20000);
 
   it("keep open on popover-click", async () => {
     const fn = jest.fn();
-    const { getByTestId } = render(
+    render(
       <div>
         <Popover
           open={true}
@@ -131,13 +121,9 @@ describe("Popover", () => {
       </div>
     );
 
-    await act(async () => {
-      expect(getByTestId("popover-id")).toBeVisible();
-      fireEvent.click(getByTestId("popover-id"));
-    });
+    expect(screen.getByTestId("popover-id")).toBeVisible();
+    fireEvent.click(screen.getByTestId("popover-id"));
 
     expect(fn).toHaveBeenCalledTimes(0);
-
-    cleanup();
   });
 });

package/src/popover/Popover.tsx

@@ -142,7 +142,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       strategy: chosenStrategy,
       placement,
       open: open,
-      onOpenChange: onClose,
+      onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
@@ -210,7 +210,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         })}
         data-placement={flPlacement}
         aria-hidden={!open || !anchorEl}
-        tabIndex={-1}
         {...getFloatingProps({
           ref: floatingRef,
           style: {
@@ -218,6 +217,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
             top: y ?? 0,
             left: x ?? 0,
           },
+          tabIndex: undefined,
         })}
         {...rest}
       >