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

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

@@ -2,8 +2,12 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { isSameDay } from "date-fns";
 import React, { useId, useState } from "react";
-import { useDatepicker, useRangeDatepicker } from "..";
-import { BodyLong, Button, HGrid, Modal, VStack } from "../..";
+import { Button } from "../../button";
+import { HGrid } from "../../layout/grid";
+import { VStack } from "../../layout/stack";
+import Modal from "../../modal/Modal";
+import { BodyLong } from "../../typography";
+import { useDatepicker, useRangeDatepicker } from "../hooks";
 import DatePicker, { DatePickerProps } from "./DatePicker";
 
 const disabledDays = [
@@ -14,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;
@@ -470,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,16 +1,22 @@
-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, DateInputProps } from "../..";
+import { Button } from "../../button";
 import { useMonthpicker } from "../hooks";
+import { DateInputProps } from "../parts/DateInput";
 import MonthPicker from "./MonthPicker";
 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"];
@@ -175,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/parts/DateWrapper.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { useContext, useRef } from "react";
+import React, { useRef } from "react";
 import { Button } from "../../button";
 import { Modal } from "../../modal";
-import { ModalContext } from "../../modal/ModalContext";
+import { useModalContext } from "../../modal/Modal.context";
 import { Popover } from "../../popover";
 import { useMedia } from "../../util/hooks";
 import { modalCloseButtonLabel, modalLabel } from "../utils/labels";
@@ -30,7 +30,7 @@ export const DateWrapper = ({
   popoverProps,
 }: DateWrapperProps) => {
   const modalRef = useRef<HTMLDialogElement>(null);
-  const isInModal = useContext(ModalContext) !== null;
+  const isInModal = useModalContext(false) !== undefined;
   const hideModal =
     useMedia("screen and (min-width: 768px)", true) && !isInModal;
 

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;

package/src/dropdown/dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Dropdown } from "..";
 import { Button } from "../button";
+import Dropdown from "./Dropdown";
 
 export default {
   title: "ds-react/Dropdown",

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;