Datepicker figma-synk + week oppdatering (#2311)

* 🎨 Standalone-demo * 💄 Caption order * 🎨 Datepicker-button default sizes * 💄 Button-sizes * 🎨 Weeknumber * ✨ add AsChild to show/hide * 🎨 clickable week * 🎨 Table-code for header * 💄 Stylet weekPicker * 🚚 Flyttet parts * 🚚 Flyttet parts og dokumentert src * 🎨 fixedWeeks er nå default false på standalone * 🏷️ Types for onWeekDayClick * 🎨 WeekDayClick demo * 🎨 Bedre skjermleserstøtte for ukerad * 🎨 Weekdayclick only on multiple mode * 🎨 Monthpicker button size * 📝 changeset * Update @navikt/core/react/src/date/datepicker/parts/Row.tsx * Update @navikt/core/react/src/date/utils/labels.ts * 🐛 Riktig warning ved bruk av feil mode * 🎨 Riktige parts i standalone og vanlig versjon * 🎨 fjernet onWeekNumberClick for riktig mode * ♿ Bedre labels for next/preview knapper * 🏷️ Oppdatert types * 📝 Minor-update for datepicker + weekNumberClick * ♻️ EventHandling for datepicker --------- Co-authored-by: Julian Nymark <julian.nymark@nav.no>
navikt · Sep 26, 2023 · 2aa3cd5 · 2aa3cd5
1 parent 6535c22
commit 2aa3cd5
Show file tree

Hide file tree

Showing 21 changed files with 880 additions and 248 deletions.
diff --git a/.changeset/serious-bears-cough.md b/.changeset/serious-bears-cough.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Datepicker: Tilbyr nå muligheten til å bruke `onWeekNumberClick`.
diff --git a/.changeset/serious-bears-cough2.md b/.changeset/serious-bears-cough2.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Datepicker: Tilpasset padding og sizing på mobil.
diff --git a/.changeset/serious-bears-cough3.md b/.changeset/serious-bears-cough3.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+MonthPicker: Tilpasset padding og sizing på mobil.
diff --git a/@navikt/core/css/config/_mappings.js b/@navikt/core/css/config/_mappings.js
@@ -183,7 +183,7 @@ const StyleMappings = {
     {
       component: "DatePicker",
       main: "date.css",
-      dependencies: [typoCss, "button.css", "popover.css"],
+      dependencies: [typoCss, primitivesCss, "button.css", "popover.css"],
     },
     {
       component: "MonthPicker",

diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
@@ -1,5 +1,5 @@
 .navds-date {
-  padding: var(--a-spacing-3);
+  padding: var(--a-spacing-4) var(--a-spacing-3);
 }
 
 .navds-date .rdp-day_range_middle.rdp-day_disabled {
@@ -23,28 +23,29 @@
 }
 
 .navds-date .rdp-weeknumber {
-  color: var(--ac-date-week-text, var(--a-text-on-neutral));
-  background: var(--ac-date-week-bg, var(--a-surface-neutral));
   font-size: var(--a-font-size-small);
   display: flex;
-  justify-content: center;
   align-items: center;
-  padding: var(--a-spacing-05) var(--a-spacing-1);
-  border-radius: var(--a-border-radius-small);
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--a-border-radius-medium);
+  margin: var(--a-spacing-2);
+  color: var(--a-text-subtle);
 }
 
-.navds-date__caption-dropdown {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--a-spacing-2);
-  align-items: center;
+.navds-date .rdp-weeknumber.rdp-button {
+  width: 2rem;
+  height: 2rem;
+  box-shadow: 0 0 0 1px var(--a-border-default);
+  color: var(--a-text-subtle);
+  font-size: var(--a-font-size-small);
 }
 
-.navds-date__caption__month-wrapper {
-  display: flex;
-  justify-content: center;
-  gap: var(--a-spacing-2);
-  align-items: center;
+.navds-date .rdp-weeknumber.rdp-button:active {
+  background-color: var(--a-surface-action-active);
+  color: var(--a-text-on-action);
+  box-shadow: none;
 }
 
 .navds-date__caption__month .navds-select__container select {
@@ -53,20 +54,21 @@
 
 .navds-date .rdp-button {
   all: unset;
+  display: block;
   width: 2.5rem;
   height: 2.5rem;
   text-align: center;
   border-radius: var(--a-border-radius-medium);
 }
 
 .navds-date .rdp-day_range_start {
-  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small)
+  border-radius: var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium)
     var(--a-border-radius-xlarge);
 }
 
 .navds-date .rdp-day_range_end:not(.rdp-day_range_start) {
-  border-radius: var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
-    var(--a-border-radius-small);
+  border-radius: var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge)
+    var(--a-border-radius-medium);
 }
 
 .navds-date .rdp-day_range_start.rdp-day_range_end {
@@ -102,7 +104,7 @@
   all: unset;
   text-align: center;
   width: 3rem;
-  height: 2.75rem;
+  height: 3rem;
   text-transform: capitalize;
   border-radius: var(--a-border-radius-medium);
   cursor: pointer;
@@ -188,7 +190,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--a-spacing-2);
+  gap: var(--a-spacing-1);
+  padding-inline: var(--a-spacing-1);
 }
 
 .navds-date__caption-button,
@@ -287,3 +290,38 @@
 .navds-date__field--readonly .navds-date__field-button {
   cursor: default;
 }
+
+.navds-date__caption-button {
+  width: 2rem;
+  height: 2rem;
+}
+
+.navds-date__week-row {
+  display: flex;
+  align-items: center;
+  gap: var(--a-spacing-05);
+}
+
+.navds-date__week-wrapper {
+  width: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+@media (min-width: 480px) {
+  .navds-date {
+    padding: var(--a-spacing-5) var(--a-spacing-4);
+  }
+
+  .navds-date__caption {
+    gap: var(--a-spacing-2);
+  }
+
+  .navds-date .rdp-button,
+  .navds-date__caption-button {
+    width: 3rem;
+    height: 3rem;
+  }
+}
diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx
@@ -5,46 +5,56 @@ import {
   DateRange,
   DayPicker,
   DayPickerBase,
-  isMatch,
   Matcher,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
+  isMatch,
 } from "react-day-picker";
-import { omit, Popover, useId } from "../..";
+import { Popover, omit, useId } from "../..";
 import { DateInputProps, DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import { Caption, DropdownCaption } from "./caption";
 import DatePickerStandalone, {
   DatePickerStandaloneType,
 } from "./DatePickerStandalone";
-import { DayButton } from "./DayButton";
-import { TableHead } from "./TableHead";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 
-export type ConditionalModeProps =
-  | {
-      mode?: "single";
-      onSelect?: (val?: Date) => void;
-      selected?: Date;
-      defaultSelected?: Date;
-    }
-  | {
-      mode?: "multiple";
-      onSelect?: (val?: Date[]) => void;
-      selected?: Date[];
-      defaultSelected?: Date[];
-      min?: number;
-      max?: number;
-    }
-  | {
-      mode?: "range";
-      onSelect?: (val?: DateRange) => void;
-      selected?: DateRange;
-      defaultSelected?: DateRange;
-      min?: number;
-      max?: number;
-    };
+export type SingleMode = {
+  mode?: "single";
+  onSelect?: (val?: Date) => void;
+  selected?: Date;
+  defaultSelected?: Date;
+  onWeekNumberClick?: never;
+};
+
+export type MultipleMode = {
+  mode: "multiple";
+  onSelect?: (val?: Date[]) => void;
+  selected?: Date[];
+  defaultSelected?: Date[];
+  min?: number;
+  max?: number;
+  /**
+   * Allows selecting a week at a time. Only used with mode="multiple".
+   */
+  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+};
+
+export type RangeMode = {
+  mode: "range";
+  onSelect?: (val?: DateRange) => void;
+  selected?: DateRange;
+  defaultSelected?: DateRange;
+  min?: number;
+  max?: number;
+  onWeekNumberClick?: never;
+};
+
+type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
 //github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
 export interface DatePickerDefaultProps
@@ -186,6 +196,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onOpenToggle,
       strategy,
       bubbleEscape = false,
+      onWeekNumberClick,
       ...rest
     },
     ref
@@ -199,33 +210,20 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
 
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      selectedDay && (onClose?.() ?? setOpen(false));
-      rest?.onSelect && (rest?.onSelect as (val?: Date) => void)(selectedDay);
-    };
+    const mode = rest.mode ?? ("single" as any);
 
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: Date[]) => void)(selectedDays);
-    };
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+      setSelectedDates(selected);
 
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      selectedDays?.from && selectedDays?.to && (onClose?.() ?? setOpen(false));
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
-    };
-
-    const overrideProps = {
-      mode: rest.mode ?? ("single" as any),
-      onSelect:
-        rest?.mode === "single"
-          ? handleSingleSelect
-          : rest?.mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
+      if (rest.mode === "single") {
+        selected && (onClose?.() ?? setOpen(false));
+      } else if (rest.mode === "range") {
+        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+      }
+      rest?.onSelect?.(selected);
     };
 
     return (
@@ -262,12 +260,16 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}
-                {...overrideProps}
+                mode={mode}
+                onSelect={handleSelect}
                 selected={selected ?? selectedDates}
                 components={{
                   Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Day: DayButton,
                   Head: TableHead,
+                  HeadRow,
+                  WeekNumber,
+                  Row,
+                  Day: DayButton,
                 }}
                 className={cl("navds-date", className)}
                 classNames={{
@@ -289,6 +291,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   weekend: "rdp-day__weekend",
                 }}
                 showWeekNumber={showWeekNumber}
+                onWeekNumberClick={
+                  mode === "multiple" ? onWeekNumberClick : undefined
+                }
                 fixedWeeks
                 showOutsideDays
                 {...omit(rest, ["onSelect"])}