@navikt/ds-react 6.0.0-alpha.7 → 6.1.0

package/src/expansion-card/expansion-card.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { PlantIcon } from "@navikt/aksel-icons";
 import { ExpansionCard, ExpansionCardProps } from ".";
@@ -23,9 +23,14 @@ const meta: Meta<typeof ExpansionCard> = {
       </div>
     ),
   ],
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof ExpansionCard>;
+
 const Content = () => (
   <ExpansionCard.Content>
     <BodyLong spacing>
@@ -249,3 +254,29 @@ export const Icon = () => (
         }`}</style>
   </div>
 );
+
+export const Chromatic: Story = {
+  render: () => {
+    return (
+      <div>
+        <h2>Description</h2>
+        <Description />
+        <h2>Sizes</h2>
+        <Sizes />
+        <h2>Heading sizing</h2>
+        <HeadingSizing />
+        <h2>Default open</h2>
+        <DefaultOpen />
+        <h2>Controlled state</h2>
+        <ControlledState />
+        <h2>Customization</h2>
+        <Customization />
+        <h2>Icon</h2>
+        <Icon />
+      </div>
+    );
+  },
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/expansion-card/index.ts

@@ -1,4 +1,9 @@
+"use client";
 export {
   type ExpansionCardProps,
   default as ExpansionCard,
 } from "./ExpansionCard";
+export { default as ExpansionCardContent } from "./ExpansionCardContent";
+export { default as ExpansionCardHeader } from "./ExpansionCardHeader";
+export { default as ExpansionCardTitle } from "./ExpansionCardTitle";
+export { default as ExpansionCardDescription } from "./ExpansionCardDescription";

package/src/form/checkbox/Checkbox.test.tsx

@@ -1,13 +1,15 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import faker from "faker";
 import React from "react";
+import { describe, expect, test, vi } from "vitest";
 import { Checkbox, CheckboxGroup } from ".";
 
-const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
+const firstArgumentOfFirstCall = (fn: ReturnType<typeof vi.fn>) =>
+  fn.mock.calls[0][0];
 
 test("checkbox group chains onChange calls", async () => {
-  const onGroupChange = jest.fn();
-  const onChange = jest.fn();
+  const onGroupChange = vi.fn();
+  const onChange = vi.fn();
   const value = faker.datatype.string();
   const label = faker.datatype.string();
 
@@ -51,7 +53,7 @@ describe("Checkbox handles controlled-state correctly", () => {
   });
 
   test("onChange called with expected values", async () => {
-    const onGroupChange = jest.fn();
+    const onGroupChange = vi.fn();
 
     render(
       <CheckboxComponent

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { createContext, forwardRef, useContext, useState } from "react";
-import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
+import { Fieldset, FieldsetProps } from "../fieldset";
+import { FieldsetContext } from "../fieldset/context";
 
 export interface CheckboxGroupState {
   readonly defaultValue?: readonly any[];

package/src/form/checkbox/checkbox.stories.tsx

@@ -1,6 +1,7 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { Checkbox, CheckboxGroup } from "../../index";
+import Checkbox from "./Checkbox";
+import CheckboxGroup from "./CheckboxGroup";
 
 const meta: Meta<typeof Checkbox> = {
   title: "ds-react/Checkbox",
@@ -11,9 +12,14 @@ const meta: Meta<typeof Checkbox> = {
       control: { type: "radio" },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof Checkbox>;
+
 export const Default = (props) => {
   const [state, setState] = useState(["checkbox1"]);
 
@@ -223,3 +229,53 @@ export const Readonly = () => (
     </Checkbox>
   </div>
 );
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default />
+      </div>
+      <div>
+        <h2>Group</h2>
+        <Group />
+      </div>
+      <div>
+        <h2>GroupError</h2>
+        <GroupError />
+      </div>
+      <div>
+        <h2>GroupSmall</h2>
+        <GroupSmall />
+      </div>
+      <div>
+        <h2>GroupDescription</h2>
+        <GroupDescription />
+      </div>
+      <div>
+        <h2>Single</h2>
+        <Single />
+      </div>
+      <div>
+        <h2>SingleSmall</h2>
+        <SingleSmall />
+      </div>
+      <div>
+        <h2>SingleDescription</h2>
+        <SingleDescription />
+      </div>
+      <div>
+        <h2>Indeterminate</h2>
+        <Indeterminate />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/checkbox/index.ts

@@ -1,3 +1,4 @@
+"use client";
 export { default as Checkbox } from "./Checkbox";
 export {
   default as CheckboxGroup,

package/src/form/combobox/combobox.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 import React, { useId, useMemo, useRef, useState } from "react";
-import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
+import { Chips } from "../../chips";
+import { TextField } from "../textfield";
+import { ComboboxProps, UNSAFE_Combobox } from "./index";
 
 export default {
   title: "ds-react/Combobox",

package/src/form/combobox/combobox.test.tsx

@@ -3,7 +3,8 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
 import { act } from "react-dom/test-utils";
-import { UNSAFE_Combobox } from "..";
+import { describe, expect, test } from "vitest";
+import { UNSAFE_Combobox } from "./index";
 
 const options = [
   "banana",
@@ -37,7 +38,7 @@ const App = (props) => {
 
 describe("Render combobox", () => {
   describe("with multi select", () => {
-    it("Should be able to search, select and remove selections", async () => {
+    test("Should be able to search, select and remove selections", async () => {
       render(<App isMultiSelect options={options} />);
 
       await act(async () => {
@@ -71,7 +72,7 @@ describe("Render combobox", () => {
     });
   });
 
-  it("Should show loading icon when loading (used for async search)", async () => {
+  test("Should show loading icon when loading (used for async search)", async () => {
     render(<App options={[]} isListOpen isLoading />);
 
     expect(await screen.findByText("Søker...")).toBeInTheDocument();
@@ -79,7 +80,7 @@ describe("Render combobox", () => {
 });
 
 describe("Combobox state-handling", () => {
-  it("Should not select previous focused element when closes", async () => {
+  test("Should not select previous focused element when closes", async () => {
     render(<App options={options} />);
 
     await act(async () => {
@@ -100,7 +101,7 @@ describe("Combobox state-handling", () => {
     expect(screen.queryByRole("button", { name: "banana slett" })).toBeNull();
   });
 
-  it("Should reset list when resetting input (ESC)", async () => {
+  test("Should reset list when resetting input (ESC)", async () => {
     render(<App options={options} />);
 
     await act(async () => {

package/src/form/combobox/index.ts

@@ -1,2 +1,3 @@
-export { default as Combobox } from "./ComboboxProvider";
+"use client";
+export { default as UNSAFE_Combobox } from "./ComboboxProvider";
 export { type ComboboxProps } from "./types";

package/src/form/{ConfirmationPanel.test.tsx → confirmation-panel/ConfirmationPanel.test.tsx}

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import faker from "faker";
 import React from "react";
+import { expect, test } from "vitest";
 import { ConfirmationPanel } from ".";
 
 test("omits error id from input", async () => {

package/src/form/{ConfirmationPanel.tsx → confirmation-panel/ConfirmationPanel.tsx}

@@ -1,9 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong, ErrorMessage } from "../typography";
-import { useId } from "../util/hooks";
-import { Checkbox, CheckboxProps } from "./checkbox";
-import { useFormField } from "./useFormField";
+import { BodyLong, ErrorMessage } from "../../typography";
+import { useId } from "../../util/hooks";
+import { Checkbox, CheckboxProps } from "../checkbox";
+import { useFormField } from "../useFormField";
 
 export interface ConfirmationPanelProps
   extends Omit<

package/src/form/{stories → confirmation-panel}/confirmation-panel.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { Link } from "../..";
-import { ConfirmationPanel } from "../index";
+import { Link } from "../../link";
+import { ConfirmationPanel } from "./index";
 
 export default {
   title: "ds-react/ConfirmationPanel",
@@ -17,8 +17,13 @@ export default {
       type: "string",
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } as Meta;
 
+type Story = StoryObj<typeof ConfirmationPanel>;
+
 const content = (
   <>
     Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
@@ -95,3 +100,29 @@ export const Error = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        {Default.render?.(props)}
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>No content</h2>
+        <NoContent />
+      </div>
+      <div>
+        <h2>Error</h2>
+        <Error />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/confirmation-panel/index.ts

@@ -0,0 +1,5 @@
+"use client";
+export {
+  default as ConfirmationPanel,
+  type ConfirmationPanelProps,
+} from "./ConfirmationPanel";

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { useId } from "../../util/hooks";
-import ErrorSummaryItem from "./ErrorSummaryItem";
+import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,18 +17,12 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Heading above links
    */
-  heading: React.ReactNode;
+  heading?: React.ReactNode;
   /**
    * Allows setting a different HTML h-tag
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;
-  /**
-   * When manually setting focus to `<ErrorSummary />` use the
-   * `focusTargetRef`-prop and not ref.
-   * This directs focus to heading, improving screen reader experience
-   */
-  focusTargetRef?: React.RefObject<HTMLElement>;
 }
 
 interface ErrorSummaryComponent
@@ -47,7 +41,7 @@ interface ErrorSummaryComponent
    * </ErrorSummary.Item>
    * ```
    */
-  Item: typeof ErrorSummaryItem;
+  Item: ErrorSummaryItemType;
 }
 
 /**
@@ -76,7 +70,6 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       size = "medium",
       headingTag = "h2",
       heading,
-      focusTargetRef,
       ...rest
     },
     ref,
@@ -92,7 +85,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           "navds-error-summary",
           `navds-error-summary--${size}`,
         )}
-        tabIndex={ref ? -1 : undefined}
+        tabIndex={-1}
         aria-live="polite"
         aria-relevant="all"
         aria-labelledby={headingId}
@@ -102,13 +95,16 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           as={headingTag}
           size="small"
           id={headingId}
-          ref={focusTargetRef}
-          tabIndex={focusTargetRef ? -1 : undefined}
         >
           {heading}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
-          {children}
+          {React.Children.map(children, (child) => {
+            if (!isValidElement(child)) {
+              return null;
+            }
+            return <li key={child.toString()}>{child}</li>;
+          })}
         </BodyShort>
       </section>
     );

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -14,7 +14,7 @@ export interface ErrorSummaryItemProps
   href?: string;
 }
 
-type ErrorSummaryItemType = OverridableComponent<
+export type ErrorSummaryItemType = OverridableComponent<
   ErrorSummaryItemProps,
   HTMLAnchorElement
 >;
@@ -22,15 +22,13 @@ type ErrorSummaryItemType = OverridableComponent<
 export const ErrorSummaryItem: ErrorSummaryItemType = forwardRef(
   ({ children, as: Component = "a", className, ...rest }, ref) => {
     return (
-      <li>
-        <Component
-          {...rest}
-          ref={ref}
-          className={cl(className, "navds-error-summary__item", "navds-link")}
-        >
-          {children}
-        </Component>
-      </li>
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(className, "navds-error-summary__item", "navds-link")}
+      >
+        {children}
+      </Component>
     );
   },
 );

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
-import React, { useRef } from "react";
-import { ErrorSummary } from "..";
+import React from "react";
+import { ErrorSummary } from "./ErrorSummary";
 
 export default {
   title: "ds-react/Errorsummary",
@@ -44,56 +43,3 @@ export const Small = () => (
     </ErrorSummary.Item>
   </ErrorSummary>
 );
-
-export const A11yDemo = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<HTMLHeadingElement>(null);
-    return (
-      <div>
-        <button onClick={() => ref.current?.focus()}>
-          Fokuser Errorsummary på klikk
-        </button>
-        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
-          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
-          </ErrorSummary.Item>
-        </ErrorSummary>
-      </div>
-    );
-  },
-};
-
-export const FocusDemo = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<HTMLHeadingElement>(null);
-    return (
-      <div>
-        <button onClick={() => ref.current?.focus()}>Focus summary</button>
-        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
-          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
-          </ErrorSummary.Item>
-        </ErrorSummary>
-      </div>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    const button = canvas.getByText("Focus summary");
-    const heading = canvas.getByText("Feiloppsummering tittel");
-
-    await step("click button", async () => {
-      await userEvent.click(button);
-    });
-
-    expect(heading).toHaveFocus();
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};

package/src/form/error-summary/index.ts

@@ -1,2 +1,9 @@
-export { default as ErrorSummary } from "./ErrorSummary";
-export { type ErrorSummaryProps } from "./ErrorSummary";
+"use client";
+export {
+  default as ErrorSummary,
+  type ErrorSummaryProps,
+} from "./ErrorSummary";
+export {
+  default as ErrorSummaryItem,
+  type ErrorSummaryItemProps,
+} from "./ErrorSummaryItem";

package/src/form/{stories → fieldset}/fieldset.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { TextField } from "../../index";
-import { Fieldset } from "../index";
+import TextField from "../textfield/TextField";
+import { Fieldset } from "./index";
 
 export default {
   title: "ds-react/Fieldset",

package/src/form/{Fieldset → fieldset}/index.ts

@@ -1,2 +1,2 @@
+"use client";
 export { default as Fieldset, type FieldsetProps } from "./Fieldset";
-export { FieldsetContext } from "./context";

package/src/form/radio/Radio.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import faker from "faker";
 import React from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { Radio, RadioGroup } from ".";
 
 const value1 = faker.datatype.string();
@@ -18,9 +19,14 @@ const Group = (props) => (
 
 describe("Controlled RadioGroup", () => {
   const originalError = console.error;
-  const mockError = jest.fn();
-  beforeEach(() => (console.error = mockError));
-  afterEach(() => (console.error = originalError));
+  const mockError = vi.fn();
+  beforeEach(() => {
+    console.error = mockError;
+  });
+
+  afterEach(() => {
+    console.error = originalError;
+  });
 
   test("doesnt console.error", () => {
     const { rerender } = render(<Group value={value1} />);

package/src/form/radio/RadioGroup.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { useId } from "../../util/hooks";
-import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
+import { Fieldset, FieldsetProps } from "../fieldset";
+import { FieldsetContext } from "../fieldset/context";
 
 export interface RadioGroupContextProps {
   name: string;

package/src/form/radio/index.ts

@@ -1,3 +1,4 @@
+"use client";
 export { default as Radio } from "./Radio";
 export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";
 export { type RadioProps } from "./types";

package/src/form/radio/radio.stories.tsx

@@ -1,9 +1,11 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
+import { Accordion } from "../../accordion";
 import AccordionContent from "../../accordion/AccordionContent";
 import AccordionHeader from "../../accordion/AccordionHeader";
 import AccordionItem from "../../accordion/AccordionItem";
-import { Accordion, Radio, RadioGroup } from "../../index";
+import Radio from "./Radio";
+import RadioGroup from "./RadioGroup";
 
 const meta: Meta<typeof Radio> = {
   title: "ds-react/Radio",
@@ -14,9 +16,14 @@ const meta: Meta<typeof Radio> = {
       control: { type: "radio" },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof Radio>;
+
 export const Default = (props) => {
   const [state, setState] = useState("radio1");
 
@@ -178,3 +185,45 @@ export const Readonly = () => (
     </RadioGroup>
   </div>
 );
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default />
+      </div>
+      <div>
+        <h2>Group</h2>
+        <Group />
+      </div>
+      <div>
+        <h2>GroupError</h2>
+        <GroupError />
+      </div>
+      <div>
+        <h2>GroupSmall</h2>
+        <GroupSmall />
+      </div>
+      <div>
+        <h2>GroupDescription</h2>
+        <GroupDescription />
+      </div>
+      <div>
+        <h2>UUDemo</h2>
+        <UUDemo />
+      </div>
+      <div>
+        <h2>TestInsideAccordion</h2>
+        <TestInsideAccordion />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};