@navikt/ds-react 6.0.0 → 6.1.0

package/src/dropdown/index.ts

@@ -1 +1,10 @@
+"use client";
 export { default as Dropdown, type DropdownProps } from "./Dropdown";
+export { default as DropdownToggle, type DropdownToggleProps } from "./Toggle";
+export { default as DropdownMenu } from "./Menu";
+export { default as DropdownMenuDivider } from "./Menu/Divider";
+export { default as DropdownMenuList } from "./Menu/List";
+export { default as DropdownMenuListItem } from "./Menu/List/Item";
+export { default as DropdownMenuGroupedList } from "./Menu/GroupedList";
+export { default as DropdownMenuGroupedListItem } from "./Menu/GroupedList/GroupedItem";
+export { default as DropdownMenuGroupedListHeading } from "./Menu/GroupedList/GroupedHeading";

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -31,3 +31,5 @@ export const ExpansionCardDescription = forwardRef<
     />
   );
 });
+
+export default ExpansionCardDescription;

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -30,3 +30,5 @@ export const ExpansionCardTitle: OverridableComponent<
     />
   ),
 );
+
+export default ExpansionCardTitle;

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 "../../link";
-import { ConfirmationPanel } from "../index";
+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/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 },
+  },
+};

package/src/form/search/index.ts

@@ -1,5 +1,11 @@
+"use client";
 export {
   default as Search,
   type SearchProps,
   type SearchClearEvent,
 } from "./Search";
+
+export {
+  default as SearchButton,
+  type SearchButtonProps,
+} from "./SearchButton";

package/src/form/search/search.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { Search } from "../index";
+import Search from "./Search";
 
 export default {
   title: "ds-react/Search",
@@ -29,8 +29,13 @@ export default {
       },
     },
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 } as Meta;
 
+type Story = StoryObj<typeof Search>;
+
 export const Default = (props) => {
   const [state, setState] = useState("");
   return (
@@ -185,3 +190,49 @@ export const HtmlSize = () => (
     />
   </div>
 );
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default {...props} />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+      <div>
+        <h2>Variants</h2>
+        <Variants />
+      </div>
+      <div>
+        <h2>ErrorVariants</h2>
+        <ErrorVariants />
+      </div>
+      <div>
+        <h2>Placeholder</h2>
+        <Placeholder />
+      </div>
+      <div>
+        <h2>Text</h2>
+        <Text />
+      </div>
+      <div>
+        <h2>WLabel</h2>
+        <WLabel />
+      </div>
+      <div>
+        <h2>NoClearButton</h2>
+        <NoClearButton />
+      </div>
+      <div>
+        <h2>HtmlSize</h2>
+        <HtmlSize />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/form/{Select.tsx → select/Select.tsx}

@@ -1,10 +1,10 @@
 import cl from "clsx";
 import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
-import { ReadOnlyIcon } from "./ReadOnlyIcon";
-import { FormFieldProps, useFormField } from "./useFormField";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { omit } from "../../util";
+import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
   extends FormFieldProps,

package/src/form/select/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as Select, type SelectProps } from "./Select";