@navikt/ds-react 6.0.0 → 6.1.0

package/src/chips/Toggle.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
-export interface ToggleChipsProps
+export interface ChipsToggleProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
@@ -22,7 +22,7 @@ export interface ToggleChipsProps
 }
 
 export const ToggleChips: OverridableComponent<
-  ToggleChipsProps,
+  ChipsToggleProps,
   HTMLButtonElement
 > = forwardRef(
   (

package/src/chips/chips.stories.tsx

@@ -1,13 +1,18 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Chips } from ".";
 
 const meta: Meta<typeof Chips> = {
   title: "ds-react/Chips",
   component: Chips,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof Chips>;
+
 const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
 
 export const Default = (props) => {
@@ -220,3 +225,36 @@ export const Small = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>Default</h2>
+        <Default />
+      </div>
+      <div>
+        <h2>Toggle</h2>
+        <h3>Medium</h3>
+        <Toggle size="medium" />
+        <h3>Small</h3>
+        <Toggle size="small" />
+      </div>
+      <div>
+        <h2>Removable</h2>
+        <Removable />
+      </div>
+      <div>
+        <h2>Regular</h2>
+        <Regular />
+      </div>
+      <div>
+        <h2>Small</h2>
+        <Small />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/chips/index.ts

@@ -1 +1,7 @@
+"use client";
 export { default as Chips, type ChipsProps } from "./Chips";
+export {
+  RemovableChips as ChipsRemovable,
+  type ChipsRemovableProps,
+} from "./Removable";
+export { ToggleChips as ChipsToggle, type ChipsToggleProps } from "./Toggle";

package/src/copybutton/copy-button.stories.tsx

@@ -32,6 +32,9 @@ export const Default: Story = {
     text: "",
     activeText: "",
   },
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export const Interaction: Story = {
@@ -210,3 +213,49 @@ export const Disabled: Story = {
     </div>
   ),
 };
+
+export const Chromatic: Story = {
+  render: (...props) => (
+    <div>
+      <div>
+        <h2>Variants</h2>
+        {Variants.render?.(...props)}
+      </div>
+      <div>
+        <h2>IconPosition</h2>
+        {IconPosition.render?.(...props)}
+      </div>
+      <div>
+        <h2>Sizes</h2>
+        {Sizes.render?.(...props)}
+      </div>
+      <div>
+        <h2>Texts</h2>
+        {Texts.render?.(...props)}
+      </div>
+      <div>
+        <h2>Icons</h2>
+        {Icons.render?.(...props)}
+      </div>
+      <div>
+        <h2>InlineDemo</h2>
+        {InlineDemo.render?.(...props)}
+      </div>
+      <div>
+        <h2>WithTooltip</h2>
+        {WithTooltip.render?.(...props)}
+      </div>
+      <div>
+        <h2>Duration</h2>
+        {Duration.render?.(...props)}
+      </div>
+      <div>
+        <h2>Disabled</h2>
+        {Disabled.render?.(...props)}
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/copybutton/index.ts

@@ -1 +1,2 @@
+"use client";
 export { default as CopyButton, type CopyButtonProps } from "./CopyButton";

package/src/date/datepicker/datepicker.stories.tsx

@@ -18,8 +18,13 @@ const disabledDays = [
 export default {
   title: "ds-react/Datepicker",
   component: DatePicker,
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof DatePicker>;
 
+type Story = StoryObj<typeof DatePicker>;
+
 type DefaultStoryProps = DatePickerProps & {
   size: "medium" | "small";
   inputfield: boolean;
@@ -474,3 +479,97 @@ export const ModalDemo = () => {
   );
 };
 ModalDemo.parameters = { chromatic: { pauseAnimationAtEnd: true } };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div>
+      <div>
+        <h2>DropdownCaption</h2>
+        <DropdownCaption />
+      </div>
+      <div>
+        <h2>DisabledDays</h2>
+        <DisabledDays />
+      </div>
+      <div>
+        <h2>ShowWeekNumber</h2>
+        <ShowWeekNumber />
+      </div>
+      <div>
+        <h2>UseDatepicker</h2>
+        <UseDatepicker />
+      </div>
+      <div>
+        <h2>UseRangedDatepicker</h2>
+        <UseRangedDatepicker />
+      </div>
+      <div>
+        <h2>NB</h2>
+        <NB />
+      </div>
+      <div>
+        <h2>NN</h2>
+        <NN />
+      </div>
+      <div>
+        <h2>EN</h2>
+        <EN />
+      </div>
+      <div>
+        <h2>Standalone</h2>
+        <Standalone />
+      </div>
+      <div>
+        <h2>StandaloneRange</h2>
+        <StandaloneRange />
+      </div>
+      <div>
+        <h2>StandaloneMultiple</h2>
+        <StandaloneMultiple />
+      </div>
+      <div>
+        <h2>UserControlled</h2>
+        <UserControlled />
+      </div>
+      <div>
+        <h2>Validering</h2>
+        <Validering />
+      </div>
+      <div>
+        <h2>DisabledInput</h2>
+        <DisabledInput />
+      </div>
+      <div>
+        <h2>ErrorInput</h2>
+        <ErrorInput />
+      </div>
+      <div>
+        <h2>UseRangedDatepickerValidation</h2>
+        <UseRangedDatepickerValidation />
+      </div>
+      <div>
+        <h2>DefaultShownMonth</h2>
+        <DefaultShownMonth />
+      </div>
+      <div>
+        <h2>Size</h2>
+        <Size />
+      </div>
+      <div>
+        <h2>Readonly</h2>
+        <Readonly />
+      </div>
+      <div>
+        <h2>StandaloneOptions</h2>
+        <StandaloneOptions />
+      </div>
+      <div>
+        <h2>WeekDayClick</h2>
+        <WeekDayClick />
+      </div>
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/date/datepicker/datepicker.test.tsx

@@ -1,7 +1,9 @@
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { DatePicker, useDatepicker } from "..";
+import { describe, test } from "vitest";
+import { useDatepicker } from "../hooks";
+import DatePicker from "./DatePicker";
 
 const App = () => {
   const { datepickerProps, inputProps } = useDatepicker({
@@ -17,8 +19,8 @@ const App = () => {
 };
 
 describe("Render datepicker", () => {
-  // eslint-disable-next-line jest/expect-expect
-  it("Should not crash when e.target is window", async () => {
+  // eslint-disable-next-line vitest/expect-expect
+  test("Should not crash when e.target is window", async () => {
     render(<App />);
 
     // eslint-disable-next-line testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

package/src/date/datepicker/index.ts

@@ -0,0 +1,13 @@
+"use client";
+export { default as DatePicker, type DatePickerProps } from "./DatePicker";
+export {
+  useDatepicker,
+  useRangeDatepicker,
+  type DateValidationT,
+  type RangeValidationT,
+} from "../hooks";
+export {
+  DatePickerStandalone,
+  type DatePickerStandaloneProps,
+} from "./DatePickerStandalone";
+export { DatePickerInput, type DateInputProps } from "../parts/DateInput";

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
-import { Select } from "../../../form/Select";
+import { Select } from "../../../form/select";
 import { getMonths, getYears } from "../../utils/get-dates";
 import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
 import WeekRow from "./WeekRow";

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -2,7 +2,9 @@
 import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { DatePicker, useRangeDatepicker } from "..";
+import { describe, expect, test } from "vitest";
+import { DatePicker } from "../datepicker";
+import { useRangeDatepicker } from "./useRangeDatepicker";
 
 const RangeDemo = () => {
   const { datepickerProps, fromInputProps, selectedRange, toInputProps } =
@@ -22,7 +24,7 @@ const RangeDemo = () => {
 };
 
 describe("Writing in input sets correct values", () => {
-  it("useRangeDatepicker same date", async () => {
+  test("useRangeDatepicker same date", async () => {
     render(<RangeDemo />);
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });
@@ -40,7 +42,7 @@ describe("Writing in input sets correct values", () => {
     );
   });
 
-  it("useRangeDatepicker before after to", async () => {
+  test("useRangeDatepicker before after to", async () => {
     render(<RangeDemo />);
 
     const fraInput = screen.getByRole("textbox", { name: "Fra" });

package/src/date/monthpicker/MonthCaption.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";
-import { Select } from "../../form/Select";
+import { Select } from "../../form/select";
 import { useSharedMonthContext } from "../context";
 import { labelNextYear, labelPrevYear } from "../utils";
 

package/src/date/monthpicker/index.ts

@@ -0,0 +1,9 @@
+"use client";
+export { useMonthpicker, type MonthValidationT } from "../hooks";
+export { default as MonthPicker } from "./MonthPicker";
+export { type MonthPickerProps } from "./types";
+export {
+  MonthPickerStandalone,
+  type MonthPickerStandaloneProps,
+} from "./MonthPickerStandalone";
+export { MonthPickerInput } from "../parts/DateInput";

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { setYear } from "date-fns";
 import React, { useId, useState } from "react";
 import { Button } from "../../button";
@@ -10,8 +10,13 @@ import { MonthPickerProps } from "./types";
 export default {
   title: "ds-react/Monthpicker",
   component: MonthPicker,
+  parameters: {
+    chromatic: { disable: true },
+  },
 } satisfies Meta<typeof MonthPicker>;
 
+type Story = StoryObj<typeof MonthPicker>;
+
 export const Default: StoryFn<{
   size: DateInputProps["size"];
   locale: MonthPickerProps["locale"];
@@ -176,3 +181,24 @@ export const FollowYear = () => {
     </div>
   );
 };
+
+export const Chromatic: Story = {
+  render: () => (
+    <div className="colgap">
+      <MonthPicker.Standalone />
+      <DropdownCaption />
+      <NB />
+      <NN />
+      <EN />
+      <DisabledMonths />
+      <UseMonthpicker />
+      <UseMonthpickerFormat />
+      <Required />
+      <UserControlled />
+      <FollowYear />
+    </div>
+  ),
+  parameters: {
+    chromatic: { disable: false },
+  },
+};

package/src/date/utils/__tests__/check-dates.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { dateIsInCurrentMonth } from "..";
 
 const selectedDate = new Date("Feb 1 1994");

package/src/date/utils/__tests__/dates-disabled.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { disableDate } from "..";
 
 describe("Returns if date should be disabled", () => {

package/src/date/utils/__tests__/format-dates.test.ts

@@ -1,4 +1,5 @@
 import { nb } from "date-fns/locale";
+import { describe, expect, test } from "vitest";
 import { formatDateForInput } from "../format-date";
 import { parseDate } from "../parse-date";
 

package/src/date/utils/__tests__/get-dates.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { getMonths, getYears } from "..";
 
 describe("Extracts correct months", () => {

package/src/date/utils/__tests__/get-initial-year.test.ts

@@ -1,4 +1,5 @@
 import { isSameYear } from "date-fns";
+import { describe, expect, test } from "vitest";
 import { getInitialYear } from "..";
 
 describe("Returns initial year for monthpicker", () => {

package/src/date/utils/__tests__/get-month-weeks.test.ts

@@ -1,5 +1,6 @@
 /* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
 import { enGB, nb } from "date-fns/locale";
+import { describe, expect, test } from "vitest";
 import { getMonthWeeks } from "../get-month-weeks";
 
 describe('when using the "nB" locale', () => {

package/src/date/utils/__tests__/is-match.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { isMatch } from "..";
 
 const disabled = [

package/src/date/utils/__tests__/parse-dates.test.ts

@@ -1,29 +1,32 @@
-/* eslint-disable jest/expect-expect */
 import { getMonth } from "date-fns";
 import { nb } from "date-fns/locale";
+import { describe, expect, test } from "vitest";
 import { isValidDate, parseDate } from "..";
 
 const check = (inp: string) =>
-  // eslint-disable-next-line jest/valid-expect
+  // eslint-disable-next-line vitest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));
 
 const checkTwoDigit = (inp: string) =>
-  // eslint-disable-next-line jest/valid-expect
+  // eslint-disable-next-line vitest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);
 
 describe("Parse date-inputs with 4-digit years", () => {
+  // eslint-disable-next-line vitest/expect-expect
   test("No spaces", () => {
     check("11052022").toBeTruthy();
     check("15052022").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test(". divider", () => {
     check("1.5.2022").toBeTruthy();
     check("11.05.2022").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("/ divider", () => {
     check("1/5/2022").toBeTruthy();
     check("10/5/2022").toBeTruthy();
@@ -31,6 +34,7 @@ describe("Parse date-inputs with 4-digit years", () => {
     check("10/05/2022").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("- divider", () => {
     check("1-5-2022").toBeTruthy();
     check("10-5-2022").toBeTruthy();
@@ -40,16 +44,19 @@ describe("Parse date-inputs with 4-digit years", () => {
 });
 
 describe("Parse date-inputs with 2-digit years", () => {
+  // eslint-disable-next-line vitest/expect-expect
   test("No spaces", () => {
     checkTwoDigit("110522").toBeTruthy();
     checkTwoDigit("150522").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test(". divider", () => {
     checkTwoDigit("1.5.22").toBeTruthy();
     checkTwoDigit("11.05.22").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("/ divider", () => {
     checkTwoDigit("1/5/22").toBeTruthy();
     checkTwoDigit("10/5/22").toBeTruthy();
@@ -57,6 +64,7 @@ describe("Parse date-inputs with 2-digit years", () => {
     checkTwoDigit("10/05/22").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("- divider", () => {
     checkTwoDigit("1-5-22").toBeTruthy();
     checkTwoDigit("10-5-22").toBeTruthy();
@@ -64,12 +72,14 @@ describe("Parse date-inputs with 2-digit years", () => {
     checkTwoDigit("10-05-22").toBeTruthy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("Dissallow 1 and 3 digit years", () => {
     checkTwoDigit("11052").toBeFalsy();
     checkTwoDigit("1105222").toBeFalsy();
     checkTwoDigit("1105999").toBeFalsy();
   });
 
+  // eslint-disable-next-line vitest/expect-expect
   test("Dissallow date before year 1000", () => {
     checkTwoDigit("11050999").toBeFalsy();
     checkTwoDigit("11050010").toBeFalsy();

package/src/dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useControllableState } from "../util/hooks/useControllableState";
 import Menu, { MenuType } from "./Menu";
-import Toggle, { ToggleProps } from "./Toggle";
+import Toggle from "./Toggle";
 import { DropdownContext } from "./context";
 
 export interface DropdownProps {
@@ -33,9 +33,7 @@ export interface DropdownType extends React.FC<DropdownProps> {
   /**
    * @see 🏷️ {@link ToggleProps}
    */
-  Toggle: React.ForwardRefExoticComponent<
-    ToggleProps & React.RefAttributes<HTMLButtonElement>
-  >;
+  Toggle: typeof Toggle;
   /**
    * @see 🏷️ {@link MenuType}
    */

package/src/dropdown/Menu/index.tsx

@@ -6,7 +6,7 @@ import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
 import List, { ListType } from "./List";
 
-interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Dropdown content
    */
@@ -39,7 +39,7 @@ interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
     | "left-end";
 }
 
-export interface MenuType<Props = MenuProps>
+export interface MenuType<Props = DropdownMenuProps>
   extends React.ForwardRefExoticComponent<
     Props & React.RefAttributes<HTMLDivElement>
   > {
@@ -59,7 +59,7 @@ export interface MenuType<Props = MenuProps>
   >;
 }
 
-export const Menu = forwardRef<HTMLDivElement, MenuProps>(
+export const Menu = forwardRef<HTMLDivElement, DropdownMenuProps>(
   ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
     const context = useContext(DropdownContext);
 

package/src/dropdown/Toggle.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { DropdownContext } from "./context";
 
-export interface ToggleProps
+export interface DropdownToggleProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Button content
@@ -11,42 +11,41 @@ export interface ToggleProps
   children: React.ReactNode;
 }
 
-export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
-  ({ className, onClick, ...rest }, ref) => {
-    const context = useContext(DropdownContext);
-
-    if (!context) {
-      console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
-      return null;
-    }
-
-    const { setAnchorEl, handleToggle, isOpen } = context;
-
-    const handleClick = (
-      e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-    ) => {
-      setAnchorEl(e.currentTarget);
-      handleToggle(!isOpen);
-    };
-
-    return (
-      <button
-        {...rest}
-        ref={(el) => {
-          setAnchorEl(el);
-
-          if (typeof ref === "function") {
-            ref(el);
-          } else if (ref != null) {
-            ref.current = el;
-          }
-        }}
-        onClick={composeEventHandlers(onClick, handleClick)}
-        aria-expanded={isOpen}
-        className={cl("navds-dropdown__toggle", className)}
-      />
-    );
-  },
-);
-
-export default Toggle;
+export const DropdownToggle = forwardRef<
+  HTMLButtonElement,
+  DropdownToggleProps
+>(({ className, onClick, ...rest }, ref) => {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
+    return null;
+  }
+
+  const { setAnchorEl, handleToggle, isOpen } = context;
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setAnchorEl(e.currentTarget);
+    handleToggle(!isOpen);
+  };
+
+  return (
+    <button
+      {...rest}
+      ref={(el) => {
+        setAnchorEl(el);
+
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref != null) {
+          ref.current = el;
+        }
+      }}
+      onClick={composeEventHandlers(onClick, handleClick)}
+      aria-expanded={isOpen}
+      className={cl("navds-dropdown__toggle", className)}
+    />
+  );
+});
+
+export default DropdownToggle;