@navikt/ds-react 5.5.0 → 5.6.0

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

@@ -0,0 +1,113 @@
+/* https://github.com/gpbl/react-day-picker/blob/main/src/components/Table/utils/getMonthWeeks.test.ts */
+import { nb, enGB } from "date-fns/locale";
+
+import { getMonthWeeks } from "../get-month-weeks";
+
+describe('when using the "nB" locale', () => {
+  const locale = nb;
+  describe("when getting the weeks for January 2022", () => {
+    const date = new Date(2022, 0);
+    const weeks = getMonthWeeks(date, { locale });
+    test("the first week should be the last of the previous year", () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[0]).toEqual(52);
+    });
+    test("the first week should contain days from previous year", () => {
+      expect(weeks[0].dates.map((date) => date.getDate())).toEqual([
+        27, 28, 29, 30, 31, 1, 2,
+      ]);
+    });
+    test("the last week should be the last of January", () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[weekNumbers.length - 1]).toEqual(5);
+    });
+  });
+});
+
+describe('when using the "enGB" locale', () => {
+  const locale = enGB;
+  describe("when using fixed weeks", () => {
+    const useFixedWeeks = true;
+    describe("when getting the weeks for December 2022", () => {
+      const date = new Date(2022, 11);
+      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      test("should return 48 - 1 week numbers", () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [48, 49, 50, 51, 52, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test("the last week should be the one in the next year", () => {
+        const lastWeek = weeks[weeks.length - 1];
+        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
+        const expectedResult = [2, 3, 4, 5, 6, 7, 8];
+        expect(lastWeekDates).toEqual(expectedResult);
+      });
+    });
+    describe("when getting the weeks for December 2021", () => {
+      const weeks = getMonthWeeks(new Date(2021, 11), {
+        useFixedWeeks,
+        locale,
+      });
+      test("should return 48 - 1 week numbers", () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [48, 49, 50, 51, 52, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test("week 1 contains the first day of the new year", () => {
+        expect(weeks[4].dates.map((date) => date.getDate())).toEqual([
+          27, 28, 29, 30, 31, 1, 2,
+        ]);
+      });
+    });
+  });
+});
+
+describe('when using the "nb" locale', () => {
+  const locale = nb;
+  describe("when using fixed weeks", () => {
+    const useFixedWeeks = true;
+    describe("when getting the weeks for December 2022", () => {
+      const date = new Date(2022, 11);
+      const weeks = getMonthWeeks(date, { useFixedWeeks, locale });
+      test("should return 48 - 1 week numbers", () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [48, 49, 50, 51, 52, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test("the last week should be the one in the next year", () => {
+        const lastWeek = weeks[weeks.length - 1];
+        const lastWeekDates = lastWeek.dates.map((date) => date.getDate());
+        const expectedResult = [2, 3, 4, 5, 6, 7, 8];
+        expect(lastWeekDates).toEqual(expectedResult);
+      });
+    });
+    describe("when getting the weeks for December 2021", () => {
+      const weeks = getMonthWeeks(new Date(2021, 11), {
+        useFixedWeeks,
+        locale,
+      });
+      test("should return 48 - 1 week numbers", () => {
+        const weekNumbers = weeks.map((week) => week.weekNumber);
+        const expectedResult = [48, 49, 50, 51, 52, 1];
+        expect(weekNumbers).toEqual(expectedResult);
+      });
+      test("week 1 contains the first day of the new year", () => {
+        expect(weeks[4].dates.map((date) => date.getDate())).toEqual([
+          27, 28, 29, 30, 31, 1, 2,
+        ]);
+      });
+    });
+  });
+});
+
+describe("getMonthWeeks should calculate week-number corectly", () => {
+  const locale = nb;
+  describe("when getting the weeks for September 2022", () => {
+    const date = new Date(2022, 8);
+    const weeks = getMonthWeeks(date, { locale });
+    test("the last week should have number 39", () => {
+      const weekNumbers = weeks.map((week) => week.weekNumber);
+      expect(weekNumbers[weekNumbers.length - 1]).toEqual(39);
+    });
+  });
+});

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

@@ -13,13 +13,13 @@ describe("Returns if date is disabled", () => {
   test("Date should be disabled type Date[] (true)", () => {
     expect(isMatch(new Date("Dec 4 2011"), disabled)).toBeTruthy();
   });
-  test("Date should be disabled type Range (true)", () => {
+  test("Date should be disabled type Range (false)", () => {
     expect(isMatch(new Date("Sep 5 2023"), disabled)).toBeTruthy();
   });
   test("Date should be disabled type Range (true)", () => {
     expect(isMatch(new Date("Sep 3 2023"), disabled)).toBeTruthy();
   });
-  test("Date should be disabled type After (true)", () => {
+  test("Date should be disabled type After (same month)(true)", () => {
     expect(
       isMatch(new Date("Aug 5 2018"), [{ after: new Date("Aug 2 2018") }])
     ).toBeTruthy();
@@ -34,7 +34,7 @@ describe("Returns if date is disabled", () => {
       isMatch(new Date("Aug 1 2018"), [{ before: new Date("Aug 2 2018") }])
     ).toBeTruthy();
   });
-  test("Date should be disabled type Before (true)", () => {
+  test("Date should be disabled type Before (false)", () => {
     expect(
       isMatch(new Date("Jul 1 2018"), [{ before: new Date("Aug 2 2018") }])
     ).toBeTruthy();

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

@@ -1,12 +1,14 @@
-import { parseDate } from "..";
-import { isValidDate } from "..";
+/* eslint-disable jest/expect-expect */
+import { parseDate, isValidDate } from "..";
 import nb from "date-fns/locale/nb";
 import getMonth from "date-fns/getMonth";
 
 const check = (inp: string) =>
+  // eslint-disable-next-line jest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", false)));
 
 const checkTwoDigit = (inp: string) =>
+  // eslint-disable-next-line jest/valid-expect
   expect(isValidDate(parseDate(inp, new Date(), nb, "date", true)));
 
 const parse = (inp: string) => parseDate(inp, new Date(), nb, "date", false);

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

@@ -0,0 +1,93 @@
+import {
+  addDays,
+  addWeeks,
+  differenceInCalendarDays,
+  endOfMonth,
+  endOfWeek,
+  getWeek,
+  getWeeksInMonth,
+  Locale,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns";
+
+export type MonthWeek = {
+  /** The week number from the start of the year. */
+  weekNumber: number;
+  /** The dates in the week. */
+  dates: Date[];
+};
+
+export function getMonthWeeks(
+  month: Date,
+  options: {
+    locale: Locale;
+    useFixedWeeks?: boolean;
+  }
+): MonthWeek[] {
+  const _options = {
+    ...options,
+    weekStartsOn: 1 as const,
+  };
+  const weeksInMonth: MonthWeek[] = daysToMonthWeeks(
+    startOfMonth(month),
+    endOfMonth(month),
+    _options
+  );
+
+  if (_options?.useFixedWeeks) {
+    // Add extra weeks to the month, up to 6 weeks
+    const nrOfMonthWeeks = getWeeksInMonth(month, _options);
+    if (nrOfMonthWeeks < 6) {
+      const lastWeek = weeksInMonth[weeksInMonth.length - 1];
+      const lastDate = lastWeek.dates[lastWeek.dates.length - 1];
+      const toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
+      const extraWeeks = daysToMonthWeeks(
+        addWeeks(lastDate, 1),
+        toDate,
+        _options
+      );
+      weeksInMonth.push(...extraWeeks);
+    }
+  }
+  return weeksInMonth;
+}
+
+/** Return the weeks between two dates.  */
+export function daysToMonthWeeks(
+  fromDate: Date,
+  toDate: Date,
+  options?: {
+    locale?: Locale;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  }
+): MonthWeek[] {
+  const toWeek = endOfWeek(toDate, options);
+  const fromWeek = startOfWeek(fromDate, options);
+
+  const nOfDays = differenceInCalendarDays(toWeek, fromWeek);
+  const days: Date[] = [];
+
+  for (let i = 0; i <= nOfDays; i++) {
+    days.push(addDays(fromWeek, i));
+  }
+
+  const weeksInMonth = days.reduce((result: MonthWeek[], date) => {
+    const weekNumber = getWeek(date, options);
+
+    const existingWeek = result.find(
+      (value) => value.weekNumber === weekNumber
+    );
+    if (existingWeek) {
+      existingWeek.dates.push(date);
+      return result;
+    }
+    result.push({
+      weekNumber,
+      dates: [date],
+    });
+    return result;
+  }, []);
+
+  return weeksInMonth;
+}

package/src/date/utils/labels.ts

@@ -82,3 +82,54 @@ export const labels: Partial<Labels> = {
   labelNext,
   labelPrevious,
 };
+
+export const labelWeekNumber = ({
+  localeCode,
+  week,
+}: {
+  localeCode?: string;
+  week: number;
+}): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Uke ${week}`;
+    case "nn":
+      return `Veke ${week}`;
+    case "en-GB":
+      return `Week ${week}`;
+    default:
+      return `Uke ${week}`;
+  }
+};
+
+export const labelWeekNumberButton = ({
+  localeCode,
+  week,
+}: {
+  localeCode?: string;
+  week: number;
+}): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Velg uke ${week}`;
+    case "nn":
+      return `Vel veke ${week}`;
+    case "en-GB":
+      return `Pick week ${week}`;
+    default:
+      return `Velg uke ${week}`;
+  }
+};
+
+export const labelWeek = (localeCode?: string): string => {
+  switch (localeCode) {
+    case "nb":
+      return `Uke:`;
+    case "nn":
+      return `Veke:`;
+    case "en-GB":
+      return `Week:`;
+    default:
+      return `Uke:`;
+  }
+};

package/src/date/utils/navigation.ts

@@ -6,7 +6,7 @@ export const nextEnabled = (
   key: string,
   disabled: Matcher[],
   currentMonth: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   yearState: Date,
   dropdownCaption: boolean,
   fromDate?: Date,
@@ -148,7 +148,7 @@ const loopBack = (
   months: Date[],
   disabled: Matcher[],
   yearState: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   rowCheck: boolean,
   dropdownCaption: boolean,
   fromDate?: Date,
@@ -191,7 +191,7 @@ const loopForward = (
   currentIndex: number,
   months: Date[],
   yearState: Date,
-  setYearState: Function,
+  setYearState: (date: Date) => void,
   disabled: Matcher[],
   rowCheck: boolean,
   dropdownCaption: boolean,

package/src/dropdown/Toggle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { DropdownContext } from ".";
+import { DropdownContext } from "./Dropdown";
 
 export interface ToggleProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/dropdown/dropdown.stories.tsx

@@ -60,32 +60,29 @@ export const DefaultOpen = {
   args: { chromatic: { delay: 300 } },
 };
 
-export const ControlledOpen = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [openState, setOpenState] = useState(true);
-    return (
-      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-          Toggle
-        </Button>
-        <Dropdown.Menu
-          strategy="fixed"
-          onClose={() => console.log("ONCLOSE CONTROLLED")}
-        >
-          <Dropdown.Menu.GroupedList>
-            <Dropdown.Menu.GroupedList.Heading>
-              Systemer og oppslagsverk
-            </Dropdown.Menu.GroupedList.Heading>
-            <Dropdown.Menu.GroupedList.Item
-              onClick={() => console.log("GroupedList.Item-click")}
-            >
-              Gosys
-            </Dropdown.Menu.GroupedList.Item>
-          </Dropdown.Menu.GroupedList>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  },
-  args: { chromatic: { delay: 300 } },
+export const ControlledOpen = () => {
+  const [openState, setOpenState] = useState(true);
+  return (
+    <Dropdown onSelect={(event) => console.log(event)} open={openState}>
+      <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
+        Toggle
+      </Button>
+      <Dropdown.Menu
+        strategy="fixed"
+        onClose={() => console.log("ONCLOSE CONTROLLED")}
+      >
+        <Dropdown.Menu.GroupedList>
+          <Dropdown.Menu.GroupedList.Heading>
+            Systemer og oppslagsverk
+          </Dropdown.Menu.GroupedList.Heading>
+          <Dropdown.Menu.GroupedList.Item
+            onClick={() => console.log("GroupedList.Item-click")}
+          >
+            Gosys
+          </Dropdown.Menu.GroupedList.Item>
+        </Dropdown.Menu.GroupedList>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
 };
+ControlledOpen.args = { chromatic: { delay: 300 } };

package/src/dropdown/index.ts

@@ -1,2 +1 @@
-export { default as Dropdown } from "./Dropdown";
-export * from "./Dropdown";
+export { default as Dropdown, type DropdownProps } from "./Dropdown";